:root {
    --dark-blue: #032227;
    --yellow: #FBED8F;
    --orange: #EC6432;
    --green: #5AB673;
    --white: #FFFBFB;
    --pink: #EDBBF8;
    --light-blue: #9EDDEC;

    font-family: Arial, Helvetica, sans-serif;
}

@font-face {
    font-family: 'Abby';
    src: url('../assets/fonts/GT-Walsheim-Regular-Oblique.woff2') format('woff2');
    font-weight: normal;
    font-style: oblique;
}

@font-face {
    font-family: 'Abby';
    src: url('../assets/fonts/GT-Walsheim-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Abby';
    src: url('../assets/fonts/GT-Walsheim-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Abby';
    src: url('../assets/fonts/GT-Walsheim-Bold-Oblique.woff2') format('woff2');
    font-weight: bold;
    font-style: oblique;
}


body {
    background-color: var(--white);
    max-width: 100%;
}

h2 {
    font-size: 3rem;
    font-family: "Abby";
    font-weight: bold;
    color: var(--dark-blue);
}

h3 {
    font-family: "Abby";
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 140%;
}


p {
    color: var(--dark-blue);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
}

.header {
    background-color: var(--green);

    display: grid;
    grid-template-columns: repeat(1fr, 1fr, 1fr, 1fr);
    height: 72px;
}


.nav {
    grid-column: 2/4;
    background-image: url(../assets/navbar.svg);
    width: 50rem;
    justify-self: end;
}


.nav__cta {
    grid-row: 4/5;
}


.nav__list {

    display: flex;
    gap: 1.875rem;
    padding-top: 1.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    justify-self: right;
    font-size: 18px;
    font-weight: 300;

}

.nav__list__a {

    color: var(--white);
    font-family: "Abby";
    text-decoration: none;
    padding-right: 1rem;
}


.nav__list__a:hover {
    color: var(--yellow);

}

.nav__list__a__selected {
    color: var(--yellow);
    font-family: "Abby";
    text-decoration: none;
    padding-right: 1rem;
    font-weight: 600;
}


.nav__cta__button {
    text-decoration: none;
    grid-column: 4/5;
    background-color: var(--yellow);
    align-content: center;


}

.nav__cta__button:hover {
    background-color: var(--orange);
}

.nav__cta__p {
    color: var(--dark-blue);
    justify-self: center;
    font-family: "Abby";
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
}


.logo {
    grid-column: 1/2;
    padding-left: 2.563rem;
    align-self: center;

}


/* start section */




.start__content {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.9fr;
    grid-template-rows: 1fr 1fr;
    background-color: var(--green);
    height: 92.1vh;

}




.start__h1 {

    grid-column: 1/3;
    grid-row: 1/2;
    color: var(--yellow);
    text-align: center;
    font-family: "Abby";
    font-size: 3.75rem;
    font-weight: 700;
    max-width: 42.875rem;
    justify-self: center;
    align-self: center;
}

.start__photo,
.start__green {
    grid-column: 3/4;
    grid-row: 1/2;
    object-fit: cover;
    max-width: 100%;
    height: 100%;


}

.start__photo {
    justify-self: flex-end;
}


.start__arrows {
    grid-column: 1/2;
    grid-row: 1/3;
    align-self: flex-end;
}

.start__cartwheel {
    grid-row: 2/3;
    grid-column: 1/2;
    object-fit: cover;
    max-width: 100%;
    height: 100%;
    background-color: var(--light-blue);
}

.start__text {
    grid-column: 2/4;
    grid-row: 2/3;
    background-color: var(--light-blue);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.start__p1,
.start__p2 {
    font-family: Arial;
    font-size: 1rem;
    line-height: 150%;
    width: 31.875rem;
    font-weight: 400;
    align-self: center;
    justify-self: center;
    padding-bottom: 2rem;
}

.share__passion__button {
    background-color: var(--yellow);
    outline: none;
    border: none;
    padding: 1rem;
    color: var(--dark-blue);
    font-family: "Abby";
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-right: 16rem;
    cursor: pointer;
}

.share__passion__button:hover {
    background-color: var(--orange);

}

.bold {
    font-weight: 700;
}

.start__three__arrows {
    grid-column: 1/3;
    grid-row: 2/3;
    justify-self: center;
    margin-left: 6rem;
    align-self: flex-end;
}


/* piano section */

.piano__keys {
    display: flex;
    position: relative;
    width: 100%;
    height: 350px;
    max-width: 1080px;
    margin: 40px auto 0;
    user-select: none;
    margin-top: 0rem;
}

.piano__bottom {
    margin-top: 0.3rem;
    padding-top: 4rem;
}

.key {
    position: relative;
    z-index: 2;
    width: calc(100% / 18);
    border: var(--white) 4px solid;
    max-height: 15.625rem;
    margin: 0;
    box-sizing: border-box;
    cursor: pointer;
}

.key.sharp {
    position: absolute;
    width: 7.383rem;
    height: 10.848rem;
    color: var(--dark-blue);
    top: 0;
    z-index: 3;
    border: none;
    margin-top: -1rem;

    transition: height 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    /* I asked AI for hover and active states */

}

.key.sharp:hover {
    height: 9rem;

    transform: scaleY(0.85);
}

.key:not(.sharp) {
    float: left;
    width: 10%;
    max-height: 15.625rem;
    background: var(--pink);

    transition: max-height 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.key:not(.sharp).active__key {
    background: var(--light-blue);
}

.key.key__active:not(.sharp) {
    background: var(--light-blue);
    max-height: 14rem;
    transition: background 0.15s, max-height 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}


.key.sharp.key__active path {
    fill: var(--orange);
    height: 9rem;
    transition: background 0.15s, height 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}


.key:not(.sharp):hover {
    max-height: 14rem;

}

.key[data-key="87"] {
    left: 2%;
}

.key[data-key="69"] {
    left: 8.6%;
}

.key[data-key="84"] {
    left: 21.7%;
}

.key[data-key="89"] {
    left: 28.2%;
}

.key[data-key="85"] {
    left: 34.9%;
}

.key[data-key="79"] {
    left: 48.4%;
}

.key[data-key="80"] {
    left: 55.2%;
}

.key[data-key="219"] {
    left: 68.3%;
}


.key[data-key="77"] {
    left: 74.9%;
}


.key[data-key="188"] {
    left: 81.6%;
}

.piano__content {

    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2.5fr 1fr 5fr;
}

.piano__h2,
.texture__h2 {

    color: var(--green);
    font-family: "Abby";
    font-size: 3rem;
    font-weight: 600;

}

.piano__h2 {
    grid-column: 1/2;
    grid-row: 1/2;
    max-width: 470px;
    height: auto;
    align-self: center;
    padding-left: 4rem;
}

.music__note {
    margin-left: -0.8rem;
    margin-bottom: -0.2rem;
}

.music__player {
    margin-left: 3rem;
    align-self: center;
    justify-items: center;
    align-items: center;
    max-height: 5.625rem;
    width: 28.688rem;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    padding: 1rem;
    background-color: var(--green);
}

.music__profile {
    grid-column: 1/2;

}

.music__player__text {
    font-family: "Abby";
    font-size: 1.25rem;

}

.music__player__title {
    font-weight: 600;
    align-self: center;
    justify-self: center;
    text-transform: uppercase;
    padding-bottom: 0.625rem;
}

.music__player__artist {
    font-weight: 400;
}

.piano__instruction {
    align-self: center;
    color: var(--dark-blue);
    grid-column: 1/3;
    grid-row: 2/3;
    justify-self: center;
    font-family: "Abby";
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: -2rem;
}

.piano__keys {
    grid-column: 1/3;
    grid-row: 3/4;

}

.bottom__form {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-column: 1/3;
}

.progress__bar {
    width: 24.875rem;
    height: 4rem;
    grid-column: 2/3;
    align-self: center;
    justify-self: center;
    padding: 0.625rem;
    margin-top: -4rem;
}


.back__button {
    height: 3rem;
    width: auto;
    display: inline-flex;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 1.25rem;
    padding: 0.625rem;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    background-color: var(--green);
    grid-column: 1/2;
    margin-top: -3rem;
    margin-left: 5rem;
    cursor: pointer;
}

.save__button {
    height: 3rem;
    min-width: 14.875rem;
    min-height: 3rem;
    display: inline-flex;

    text-transform: uppercase;
    font-weight: 800;
    font-size: 1.25rem;
    padding: 0.625rem;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;

    background-color: var(--pink);
    margin-top: -3rem;
    margin-right: 5rem;
    border: none;
    cursor: pointer;
}










/* energy section */

.energy__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 5fr 1fr;
    margin-top: 3rem;
}


.energy__bottom {
    margin-top: 6.9rem;
}

.energy__meter {
    grid-column: 1/2;
    grid-row: 2/3;
    align-self: center;
    justify-self: center;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 4fr 1fr;
}

.energy__h2 {
    color: var(--green);
    font-family: "Abby";
    font-size: 3rem;
    font-weight: 600;
    max-width: 32.563rem;
    align-self: center;
    text-align: center;
    grid-column: 2/3;
    grid-row: 2/3;
}

.chill__p,
.fire__p {
    color: var(--dark-blue);
    font-family: "Abby";
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    height: 1.438rem;
}

.chill__p {
    grid-row: 2/3;
    grid-column: 1/2;
    justify-self: center;
    margin-right: 4rem;
}

.fire__p {
    grid-row: 2/3;
    grid-column: 2/3;
    justify-self: flex-end;
    margin-right: 5rem;
}

.meter {
    grid-column: 1/3;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    justify-items: center;
    align-items: end;
}

.half__circle {
    grid-column: 1;
    grid-row: 1;
    padding: 1rem;
}

#canvas {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 2.5rem;
}

.energy__instructions {
    grid-column: 1/3;
    grid-row: 1/2;
    justify-self: center;
    align-self: center;


}

.energy__instructions__p,
.redo__p {
    text-align: center;
    max-width: 30.063rem;
    font-family: "Abby";
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark-blue);
    padding-bottom: 1.375rem;
}

.redo__div {
    grid-column: 1/3;
    grid-row: 3/4;
    align-self: flex-start;
    margin-top: -2rem;

}

.redo__p {
    justify-self: center;
}

.redo__button {
    background-color: var(--pink);
    width: 5.475rem;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem;
    height: auto;
    cursor: pointer;
}











/* texture section */

.texture {
    height: 3rem;
    min-width: 15.913rem;
    margin-top: 3rem;
}

.texture__back {
    margin-top: 3rem;
}


.texture__bottom {
    margin-top: 1.4rem;
}

.texture__content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 3fr;
    padding-top: 6rem;
}

.texture__progress {
    align-self: flex-end;
}

.texture__images {
    width: 3.938rem;
    height: 1.5rem;

}

.texture__images img {
    position: absolute;
    animation-name: texturefade;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    margin-left: -4.5rem;
    margin-top: 1rem;
}

@keyframes texturefade {
    0% {
        opacity: 1;
    }

    17% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    92% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.texture__images img:nth-of-type(1) {
    animation-delay: 1.5s;
}

.texture__images img:nth-of-type(2) {
    animation-delay: 1s;
}

.texture__images img:nth-of-type(3) {
    animation-delay: 0.5s;
}

.texture__images img:nth-of-type(4) {
    animation-delay: 0;
}



.texture__h2 {
    grid-column: 1/5;
    grid-row: 1/2;
    align-self: center;
    justify-self: center;
    width: 31.688rem;
    text-align: center;
}

.texture__instructions {
    grid-column: 1/5;
    justify-self: center;
    color: var(--dark-blue);
    text-align: center;
    width: 30.063rem;
    font-family: "Abby";
    font-size: 1.25rem;
    font-weight: 700;
    padding-top: 2rem;
    margin-bottom: 3rem;
}

.rock__button,
.blanket__button,
.cactus__button,
.grass__button {
    background-image: url(../assets/squaretexturenormal.svg);
    width: 13.875rem;
    height: 14.625rem;
    margin-left: 3rem;
    outline: none;
    border: none;
    cursor: pointer;
}

.rock__button {

    grid-column: 1/2;
    background-image: url(../assets/squaretexturenormal.svg);
}

.rock__button:hover {
    background-image: url(../assets/squarehover.svg);
}

.rock__button:focus {
    background-image: url(../assets/squareselected.svg);

}

.rock__button:focus .texture__button__title {
    color: var(--orange);
}

.texture__button__title {
    text-align: left;
    margin-top: -6rem;
    padding-left: 1rem;
    color: var(--dark-blue);
    font-family: "Abby";
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
}

.texture__button__desc {
    padding-left: 1rem;
    text-align: left;
    color: var(--dark-blue);
    font-family: "Abby";
    font-size: 1rem;
    padding-top: 0.5rem;
    font-weight: 700;
    opacity: 0.2;
    cursor: pointer;
}



.blanket__button {
    margin-top: 3rem;
    grid-column: 2/3;
    background-image: url(../assets/circletexturenormal.svg);
    cursor: pointer;
}

.blanket__button:hover {
    background-image: url(../assets/circlehover.svg);
}

.blanket__button:focus {
    background-image: url(../assets/circleselected.svg);

}


.cactus__button {

    grid-column: 3/4;
    background-image: url(../assets/cactustexturenormal.svg);
}

.cactus__button:hover {
    background-image: url(../assets/cactushover.svg);
}

.cactus__button:focus {
    background-image: url(../assets/cactusselected.svg);
}

.grass__button {
    margin-top: 3rem;
    grid-column: 4/5;
    background-image: url(../assets/grasstexturenormal.svg);
}

.grass__button:hover {
    background-image: url(../assets/grasshover.svg);
}

.grass__button:focus {
    background-image: url(../assets/grassselected.svg);
}

.cactus__button:focus .texture__button__title,
.grass__button:focus .texture__button__title,
.blanket__button:focus .texture__button__title {
    color: var(--orange);
}










/* color section */

.slider {
    -webkit-appearance: none;
    height: 6px;
    width: 27.125rem;
    appearance: none;
    background: var(--dark-blue);
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 2.009rem;
    height: 1.344rem;
    background: var(--thumb-color, #032227);

    /* https://yoksel.github.io/url-encoder// */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32.15 21.5'%3E%3Cpath fill='white' d='M32.14,15l-10.88-4.25,10.88-4.25V0l-15.03,7.05v3.7s0,3.69,0,3.69l15.04,7.05v-6.49h0ZM0,21.5l15.04-7.05v-7.4S0,0,0,0v6.49l10.88,4.25L0,15v6.5h0Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 2.009rem;
    height: 1.344rem;
    background: var(--thumb-color, #032227);

    /* https://yoksel.github.io/url-encoder// */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32.15 21.5'%3E%3Cpath fill='white' d='M32.14,15l-10.88-4.25,10.88-4.25V0l-15.03,7.05v3.7s0,3.69,0,3.69l15.04,7.05v-6.49h0ZM0,21.5l15.04-7.05v-7.4S0,0,0,0v6.49l10.88,4.25L0,15v6.5h0Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    cursor: pointer;
}

.slider::-ms-thumb {
    width: 23px;
    height: 25px;
    background: var(--thumb-color, #032227);

    /* https://yoksel.github.io/url-encoder// */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32.15 21.5'%3E%3Cpath fill='white' d='M32.14,15l-10.88-4.25,10.88-4.25V0l-15.03,7.05v3.7s0,3.69,0,3.69l15.04,7.05v-6.49h0ZM0,21.5l15.04-7.05v-7.4S0,0,0,0v6.49l10.88,4.25L0,15v6.5h0Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    cursor: pointer;
}

.color__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.5fr 1fr 3fr;
    padding-top: 4rem;
}

.color__h2 {
    color: var(--green);
    font-family: "Abby";
    font-size: 3rem;
    font-weight: 700;
    max-width: 31.688rem;
    text-align: center;
    justify-self: center;
    grid-column: 1/3;
    grid-row: 1/2;
}

.color__instruction {
    color: var(--dark-blue);
    font-family: "Abby";
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    grid-column: 1/3;
    grid-row: 2/3;
    width: 24.563rem;
    justify-self: center;
}

.color__wheel {
    grid-column: 1/2;
    grid-row: 3/4;
    height: 17.375rem;
    width: 50%;
    justify-self: center;
    align-self: flex-start;

}

.color__sliders {
    grid-column: 2/3;
    grid-row: 3/4;
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
    gap: 4.625rem;
    margin-left: -8rem;
    align-self: center;
}

.color__progress {
    justify-self: center;
    align-self: flex-end;
}

.color__bottom {
    margin-bottom: -1.5rem;

}


.red,
.green,
.blue {
    display: flex;
    gap: 1.563rem;
    align-items: center;
}

.color {
    margin-top: 5rem;
}







/* homepage */

.hero__section {
    background-color: var(--green);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, 1fr);
    height: 89vh;
}

.hero__p1,
.hero__p2,
.hero__p3 {

    font-family: "Abby";
    font-weight: bold;
    color: var(--dark-blue);

}

.h1 {
    grid-column: 1/2;
    grid-row: 2/3;
    color: var(--dark-blue);
    font-family: "Abby";
    font-size: 3.75rem;
    font-weight: 700;

    margin-left: 5rem;
}

.hero__p1 {
    grid-column: 1/2;
    grid-row: 1/2;
    font-size: 2rem;
    align-self: flex-end;
    margin-bottom: 1rem;

    margin-left: 5rem;
}

.hero__p2 {
    grid-column: 1/2;
    grid-row: 3/4;
    margin-left: 5rem;
    margin-top: -3rem;
    font-size: 1.25rem;
    max-width: 31.375rem;
    ;
}

.hero__image,
.hero__decor {
    grid-column: 2/3;
    grid-row: 1/6;
    object-fit: cover;
    max-width: 90%;
    height: 100%;
}

.hero__decor {
    max-width: 100%;
}

.hero__image {
    justify-self: flex-end;
}

.hero__decor {
    justify-self: flex-end;
}

.discover {
    background-color: var(--light-blue);
    width: 18.4375rem;
    margin-right: 0rem;
}

.discover__a {
    align-self: flex-end;
    margin-left: 4rem;

    padding-right: 0rem;
}


.hero__buttons {
    grid-row: 3/6;
    grid-column: 1/2;
    margin-left: 5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 32.625rem;
    align-self: center;
    cursor: pointer;
}

.hero__p3 {
    align-self: center;
    font-size: 1.25rem;
}

.hero {
    width: 17.625rem;
}


.share__section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row: 1fr 1fr;
}

.share__image,
.share__decor {
    grid-column: 1/2;
    grid-row: 1/3;
}

.share__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.share__decor {
    margin-top: -1rem;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.share__title {
    grid-column: 2/3;
    grid-row: 1/2;

    background-color: var(--pink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.share__h2 {
    font-size: 3rem;
    color: var(--dark-blue);
    font-family: "Abby";
    font-weight: bold;
    line-height: 112%;
    text-align: center;
    width: 31.75rem;
}

.share__text {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    gap: 1rem;
    align-items: center;
    justify-content: center;
}


.share__p1,
.share__p2 {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--dark-blue);
    width: 32.1875rem;
    line-height: 150%;
    font-size: 1rem;

}



.passion__section {
    background-color: var(--green);
    display: grid;
    grid-template-rows: 1fr 1fr 2fr 1fr;
    grid-template-columns: 3fr 1fr 3fr;
}

.passion__h2 {
    color: var(--dark-blue);
    grid-column: 1/4;
    grid-row: 1/2;
    align-self: center;
    justify-self: center;
    font-size: 3.75rem;
    font-family: "Abby";
    font-weight: bold;
}

.passion__p {
    color: var(--dark-blue);
    font-family: Arial, Helvetica, sans-serif;
    grid-column: 1/4;
    grid-row: 2/3;
    width: 35.6875rem;
    align-self: center;
    justify-self: center;
    line-height: 150%;
    font-weight: 400;
    font-size: 1rem;
}

.passion__decor1 {
    grid-row: 1/3;
    grid-column: 3/4;
    justify-self: flex-end;

}


.yes__side,
.no__side {
    margin-top: 2rem;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.yes__side {
    grid-row: 3/4;
    grid-column: 1/2;
    margin-left: 5rem;
}

.no__side {
    grid-row: 3/4;
    grid-column: 3/4;
    margin-right: 5rem;
}

.yes__title,
.no__title {
    font-family: "Abby";
    font-weight: bold;
    font-size: 3rem;
}

.yes__p,
.no__p {
    margin-top: 1.5rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    width: 24.25rem;
    text-align: center;
    line-height: 150%;
}


.yes__decor,
.no__decor {
    grid-row: 3/4;
    grid-column: 2/3;
    margin-top: 2rem;

}

.yes__decor {
    align-self: flex-start;
}

.no__decor {
    justify-self: flex-end;
}

.yes {
    margin-top: 3rem;
    margin-left: 0rem;
    margin-right: 0rem;
}

.no {
    margin-top: 2rem;
    margin-left: 0rem;
    margin-right: 0rem;
    background-color: var(--light-blue);
}

.passion__decor2 {
    grid-column: 1/2;
    grid-row: 4/5;
    align-self: flex-end;
}



.activity__section {
    display: grid;
    grid-template-rows: 1fr 9fr 1fr 1fr;
    grid-template-columns: 1fr;
    margin: 5.12rem;
    margin-bottom: 0rem;
}

.activity__h2 {
    font-family: "Abby";
    font-size: 3rem;
    font-weight: bold;
}

.activity__title {
    grid-row: 1/2;
    grid-column: 1/2;
    align-self: flex-end;
    padding-bottom: 2.5rem;
}

.activity__cards {
    grid-row: 2/3;
    display: flex;
    gap: 3.75rem;
}



.more__activities {
    grid-row: 4/5;
    justify-self: center;
    align-self: flex-start;
    margin-top: -5rem;
}

.activities__button {
    margin-left: 0rem;
    margin-right: 0rem;
    cursor: pointer;
}


.activity__description__p {
    margin-top: 1.19rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: normal;
    line-height: 150%;
    margin-bottom: 2.06rem;
}

.activity__p {

    grid-row: 3/4;
    justify-self: center;
    align-self: flex-start;
    margin-top: -4rem;
}


.activities__button {
    grid-row: 4/5;
    margin-top: -9rem;
}



.activity__card {

    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-column: 1fr;
    width: 24rem;
}

.activity__image,
.activity__upper__border,
.activity__lower__border,
.activity__date {
    grid-row: 1/2;
    grid-column: 1/2;

}

.activity__image {
    background-color: var(--green);
}

.activity__description {
    background-color: var(--green);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 1.19rem;
    padding-right: 1rem;
    gap: 0.69rem;
    padding-bottom: -3rem;
    height: 17.25rem;
}

.activity__name {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.25rem;
    font-weight: bold;

}

.activity__where {
    display: flex;
    flex-direction: row;
    align-items: center;

}

.room {
    font-size: 0.875rem;
    margin-right: 0.8rem;
    margin-left: 0.4rem;
}

.activity__button {
    background-color: var(--yellow);
    width: 11.875rem;
    height: 3rem;
    padding: 0.625rem;
    outline: none;
    text-decoration: none;
    border: none;
    text-transform: uppercase;
    font-family: "Abby";
    font-weight: bold;
    align-self: center;
    cursor: pointer;
}


.activity__date {
    justify-self: flex-end;
    align-self: flex-end;
    background-color: var(--light-blue);
    width: 3.9375rem;
    height: 5.2625rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
}

.month {
    margin-top: 1.3rem;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--dark-blue);
    font-size: 1rem;
    font-weight: bold;

}


.day {

    font-size: 2.25rem;
    font-weight: bold;
    font-family: "Abby";
}


.activity__upper__border {

    align-self: flex-start;
    justify-self: flex-start;
}

.activity__lower__border {
    align-self: flex-end;
    justify-self: flex-end;
}


.sands {
    width: 0.5625rem;
    height: 0.8125rem;
}

.location__pointer {
    width: 0.7rem;
    height: 1.2219rem;
}


.activity__image {

    object-fit: cover;
    width: 100%;
    height: 100%;

}



.immersive__section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    background-color: var(--green);
}

.immersive__title {
    grid-column: 1/2;
    grid-row: 1/2;
    background-color: var(--pink);
    display: flex;
    justify-content: center;
    align-items: center;

}

.immersive__h2 {
    font-family: "Abby";
    font-weight: bold;
    font-size: 3rem;
    width: 35.5rem;

}

.immersive__image {
    grid-column: 2/3;
    grid-row: 1/3;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.immersive__decor {
    grid-row: 1/2;
    grid-column: 2/3;
    justify-self: flex-end;
    object-fit: cover;
    height: 50%;
}

.immersive__decor2 {
    grid-row: 2/3;
    grid-column: 2/3;
    object-fit: cover;
    height: 100%;

}

.immersive__desc {
    background-color: var(--green);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.immersive__p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    color: var(--dark-blue);
    max-width: 23rem;
    line-height: 150%;
}




.learn,
.subscribe {
    margin-left: 0rem;
    margin-right: 0rem;
}


.learn {
    margin-top: 2rem;
}


.footer {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 2fr;
}

.footer__deco {
    grid-row: 1/5;
    grid-column: 1/3;
    align-self: flex-end;
    object-fit: cover;

}

.footer__image {
    grid-row: 1/5;
    grid-column: 1/2;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.input {
    display: flex;
    align-items: center;
    margin-top: 4rem;
}


.newsletter {
    grid-column: 2/3;
    grid-row: 1/2;
    padding-left: 2.31rem;
    padding-top: 2.31rem;

}

.newsletter__p {
    margin-top: 1.5rem;
}




.email__input {
    -webkit-appearance: none;
    appearance: none;

    border: 1px solid var(--dark-blue);
    background: var(--white);
    width: 20.4375rem;
    height: 3rem;
    margin-right: 2rem;
}



.footer__links {
    grid-column: 2/3;
    grid-row: 2/3;
    gap: 6rem;
    align-self: center;
    justify-self: center;
    display: flex;
}

.opening__hours__h3,
.socials__h3,
.contact__h3 {
    font-family: "Abby";
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 140%;
    padding-bottom: 1rem;
}

.opening__hours {
    margin-left: 6rem;
}


.opening__hours__p,
.socials__p,
.contact__p {

    font-family: Arial;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.sticker {
    position: absolute;
    margin-left: 28rem;
    transform: scale(1);
    transform: rotate(35deg);
    animation: pulseSticker 2s infinite;
}


@keyframes pulseSticker {
    0% {
        transform: scale(0.95);
    }

    70% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.95);
    }
}

.italic {
    font-style: italic;
}


.energy__instructions__special {
    color: var(--orange);
}

.pink {
    color: var(--pink);
}





/* passion gallery */
.passion__gallery__intro {
    background-color: var(--green);
    padding: 5rem;
}

.passion__gallery__intro__description {
    max-width: 30rem;
    padding-top: 2rem;
    margin-bottom: 2rem;
}

.kaleidoscope {
    position: relative;
    width: 30rem;
    height: 30rem;
    animation: rotate 20s linear infinite;
    animation: 0;
    margin-left: -1rem;
}

.slice {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: center;
    clip-path: polygon(50% 50%, 95% 10%, 95% 90%);
}

.svg-wrapper {
    width: 50%;
    width: 10rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.5) translateX(30rem);
}

.svg {
    animation: pulse 10s ease-in-out infinite;
    width: 100%;

}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(0.9);
    }

    50% {
        transform: scale(3);
    }
}

.passion__gallery__gallery__passions {
    display: flex;
    flex-wrap: wrap;
}

.has-js .form-submit {
    display: none;
}

.detail {
    display: flex;
    flex-direction: row;
    height: 92vh;
    overflow-y: hidden;
}

.detail__link {
    text-decoration: none;
}

.detail__info {
    background-color: var(--light-blue);
    width: 40vw;
    height: 90vh;
    padding: 3rem;
}

.detail__info__title {
    padding-top: 2rem;
    max-width: 40rem;
}

.detail__info__description {
    max-width: 30rem;
    padding: 2rem 0rem;
}

.detail__visualization {
    width: 50vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* result section */

.result__content {
    display: flex;
    flex-direction: row;
}

.result__h2 {
    font-size: 3.75rem;
    margin: 2rem;
}

.result__h3 {
    margin-left: 2rem;
}


.result__activity {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 6fr 1fr;
    align-items: center;
    max-width: 23.875rem;
    margin-left: 2rem;
    margin-top: 2rem;
}

.result__date {
    grid-column: 1/2;
    background-color: var(--pink);
    padding: 0.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;

    height: 4.25rem;

}

.result__month {
    margin-top: 0.4rem;
    align-self: center;
    padding-top: 0rem;
}

.result__activity__desc {
    grid-column: 2/3;
    background-color: var(--green);
    padding: 0.7rem;
    height: 4.25rem;
}

.result__activity__button__div {
    background-color: var(--green);
    height: 4.25rem;
    padding: 0.7rem;
}

.result__activity__button {

    margin-top: 0.3rem;
    margin-bottom: 0rem;
    margin-left: 0rem;
    margin-right: 0rem;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
}

.result__activity__where {
    padding-top: 1rem;
    display: flex;
}

.result__activity__button {
    grid-column: 3/4;
}

.download__button {
    background-color: var(--green);
    width: 20rem;
    display: flex;
    flex-direction: row;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-left: 0rem;
}

.result__image {
    width: 25.75rem;
    align-self: center;
    justify-self: center;
    margin-bottom: 7rem;
}


.upload__button {
    background-color: var(--pink);
    width: 26rem;
}

.start__button {
    width: 11.75rem;
}

.pop-up__button {
    margin: 2rem;
    margin-bottom: 0;
}

.content__right {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-content: end;
    max-width: 40%;
    padding: 2rem;
    margin: 1rem;

}

.content__left {
    max-width: 60%;
    padding: 1rem;
    background-color: var(--light-blue);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* pop up css*/
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: var(--green);
    margin: 15% auto;
    width: 46.3125rem;
    height: 24.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.content__upload {
    width: 54rem;
    height: 37.9375rem;
}

.close {
    color: var(--dark-blue);
    font-size: 2rem;
}

.close__cross {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
}

.close:hover,
.close:focus {
    color: var(--dark-blue);
    text-decoration: none;
    cursor: pointer;
}

.pop-up__h2 {
    text-align: center;
    margin: 2rem;

}

.cancel__button {
    background-color: var(--white);
    font-size: 1.125rem;
    margin-right: 0;
}

.pop-up__buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 3rem;
}

.start-again__button {
    width: 11.5rem;
    margin-right: 0;
}

.start-again__button.close {
    background-color: var(--yellow);
    outline: none;
    border: none;
    padding: 1rem;
    color: var(--dark-blue);
    font-family: "Abby";
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    padding-left: 2rem;
    padding-right: 2rem;
}

.form {
    margin: 2rem;
    align-self: start;
    margin-left: 3rem;
}

.form__label {
    font-family: "Abby";
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 140%;
}

.form__input {
    width: 16.6875rem;
    padding: 0.625rem;
    background: var(--white);
    border: none;
}

.input__email {
    width: 22.9375rem;
}

.input__description {
    width: 23.5625rem;
    height: 9.125rem;
    text-align: left;
}


.pop-up__text {
    text-align: center;
}

.form__upload {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}


/*about conpassional page*/

.map {
    width: 50rem;
    height: 35rem;
}

.marker {
    height: 2rem;
    width: 2rem;
    background-image: url(../assets/arrowleft.svg);
    background-repeat: no-repeat;
}

.about-conpassional__title {
    font-size: 3.75rem;
    font-family: "Abby";
    font-weight: bold;
    color: var(--dark-blue);
    margin-bottom: 3rem;
    line-height: 112%;
    width: 42rem;

}

.about-conpassional__section {
    display: flex;
    flex-direction: row;
    overflow-x: hidden;
}


.projection__image {
    height: 27.8125rem;
    background-color: var(--green);

}




.header__text {
    background-color: var(--light-blue);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
    padding-right: 14.7rem;
    padding-bottom: 0;
}

.about__how {
    background-color: var(--green);
    padding: 5rem;
    align-items: center;
    margin-top: -2rem;
}

.map__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4.5rem;
    background-color: var(--white);
}

.why__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4.5rem;
    background-color: var(--green);
    width: 45rem;
}

.about-conpassional__subtitle {
    margin-bottom: 2rem;
    line-height: 112%;
}

.about-conpassional__text {
    line-height: 150%;
    max-width: 32.125rem;
    margin-bottom: 2rem;
}

.how__subtitle {
    width: 50%;
}

.why__subtitle {
    width: 27rem;
}

.map__subtitle {
    width: 25.5625rem;
}

.about-conpassional__bold {
    font-weight: 700;
}

/* projection */
.projection {
    background-color: #032227;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

}

.arrow__button {
    height: 1.0625rem;
}

.back__detail {
    margin-top: -1rem;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    background-color: var(--green);
}

.passion__gallery {
    overflow-x: hidden;
}


.filter__field {
    appearance: none;
    -webkit-appearance: none;
}

select {
    appearance: none;
    display: flex;
    height: 3rem;
    padding: 0.625rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
    background-color: var(--white);
    border: none;

    color: var(--dark-blue, #032227);
    font-family: "Abby";
    font-size: 1.125rem;
    font-weight: 700;

    text-transform: uppercase;
}



.filter__div{
    display: flex;
    flex-direction: row;
    max-width: 50rem;
}

.hidden {
    display: none;
}