:root {
    --bgcl: hsl(116, 78%, 96%);
    --primary-color: hsl(120, 57%, 50%);
    --primary-color-light: hsl(120, 57%, 80%);
    --primary-color-dark: hsl(120, 57%, 30%);
    --secondary-color: hsl(183, 70%, 74%);
    --secondary-color-light: hsl(183, 70%, 90%);
    --secondary-color-dark: hsl(183, 70%, 50%);
    --font-color: hsl(114, 68%, 6%);

    --content-width: 70vw;
    --navbar-height: max(2cm, 12vh);
    --navbar-button-gaps: 3vw;
    --navbar-button-padding: calc(var(--navbar-button-gaps) / 3.5); /* button-gap must be > 2* button padding */

    --main-base-font-size: calc(8px + min(2vw, 2vh));
    --main-margin-top: 2vh;
    --section-gap: 10vh;
    --section-height: calc(90vh - var(--navbar-height) - var(--main-margin-top));

    --footer-height: 20vh;
    --footer-font-size: calc(8px + min(2vw, 2vh));
    --footer-mobile-font-size: calc(var(--footer-font-size) * 1.5);
}


html {
    overflow-x: hidden;
}

body {
    position: relative;
    background-color: var(--bgcl);
    margin: 0;
    font-family: 'Rubik', sans-serif;
    
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: var(--font-color);
}

header {
    width: 100%;
    display: flex;
    justify-content: center;
    height: var(--navbar-height);
}

header > nav {
    width: var(--content-width);
    height: var(--navbar-height);
    font-size: calc(var(--navbar-height) * 0.2);
    border-bottom: 1px solid var(--primary-color-light);
    padding-inline: 0.5em;
    background-color: var(--bgcl);
    
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-div > a {
    display: contents;
} 

.logo-div img, .logo-div svg {
    transition: filter 0.5s;
}

.logo-div img:hover, .logo-div svg:hover {
    filter: brightness(1.5);
}

header > nav > .logo-div {
    height: 75%;
    display: flex;
    align-items: center;
    column-gap: clamp(0.5em, 3vw, 1.25em);
}

header > nav > .logo-div img {
    height: 100%;
}

header > nav > .logo-div svg {
    box-sizing: border-box;
    height: 40%;
}

#top-nav-buttons {
    font-weight: 500;

    display: flex;
    align-items: center;
    gap: 3em;
    gap: calc(var(--navbar-button-gaps) - var(--navbar-button-padding));
}

#top-nav-buttons > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

    display: flex;
    /* gap: 1.8em; */
    gap: calc(var(--navbar-button-gaps) - 2*var(--navbar-button-padding));
}

#top-nav-buttons > ul > li > a {
    position: relative;
    box-sizing: border-box;
    padding: 0.4em var(--navbar-button-padding);
    border-radius: 2em;
    transition: 0.5s;
    color: var(--primary-color);
    z-index: 0;
}

#top-nav-buttons > ul > li > a:hover {
    color: var(--font-color);
}

#top-nav-buttons > ul > li > a::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    border: 0.15em solid var(--primary-color);
    border-radius: 2em;

    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scaleX(1.3) scaleY(1.5);
    transition: opacity 0.5s, transform 0.5s;
    z-index: 0;
}

#top-nav-buttons > ul > li > a:hover::before {
    transform: scaleX(1) scaleY(1);
    opacity: 1;
}

#top-nav-buttons > ul > li > a::after {
    content: "";
    background-color: var(--primary-color-light);
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 2em;

    width: 100%;
    height: 100%;
    transition: transform 0.5s;
    transform: scale(0);
    z-index: -1;
}

#top-nav-buttons > ul > li > a:hover::after {
    transform: scale(1);
}

.cta-button {
    background-color: var(--primary-color);
    position: relative;
    box-sizing: border-box;
    max-width: 95%;
    width: max-content;
    height: max-content;
    padding: 0.4em 1.6em;
    border-radius: 2em;

    font-weight: 500;
    text-align: center;
    transition: all 0.5s;
    box-shadow: 0 2px 5px 0 var(--primary-color-dark);
}

.cta-button:hover {
    color: var(--bgcl);
}

.cta-button::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    border: 0.1em solid var(--primary-color);
    border-radius: 2em;

    width: 100%;
    height: 100%;
    opacity: 1;
    transform: scaleX(1) scaleY(1);
}

.cta-button:hover::before, .cta-button:hover::before {
    transition: opacity 1s, transform 1s;
    transform: scaleX(1.3) scaleY(2);
    opacity: 0;
}

.cta-button::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 2em;

    width: 100%;
    height: 100%;
    opacity: 0;
    box-shadow: inset 0 0 0.5em .25em hsla(120, 57%, 80%, 0.8);
    transition: opacity 0.5s;
}

.cta-button:hover::after {
    opacity: 1;
}

#hamburger, #hamburger-menu, #cta-list {
    display: none;
}


/* media query */

@media (max-width: 768px), (max-aspect-ratio: 7/6) {

    :root {
        --content-width: 90vw;
    }

    #top-nav-buttons > ul > li > a, 
    #top-nav-buttons > ul > li > a::before, 
    #top-nav-buttons > ul > li > a::after {
        all: unset;
    }

    #top-nav-buttons > a {
        display: none;
    }

    #hamburger-menu {
        --bar-width: min(6vh, 8vw) ;
        --bar-height: 0.3em;
        --bar-gap: 0.3em;
        --hamburger-diagonal: calc((var(--bar-height)*3 + var(--bar-gap)*2) * 1.41421356237);  
        --adjustments: 1.8;

        display: flex;
        flex-direction: column;
        gap: var(--bar-gap);

        cursor: pointer;
        z-index: 4;
    }

    #hamburger-menu::before, #hamburger-menu::after, #hamburger-menu > span {
        content: "";
        width: var(--bar-width);
        border: calc(var(--bar-height)/2) solid var(--primary-color);
        border-radius: 2em;
        transition: width 0.3s, rotate 0.5s, opacity 0.3s;
        transform-origin: center left;
    }

    #hamburger:checked + #top-nav-buttons > #hamburger-menu::before {
        width: var(--hamburger-diagonal);
        rotate: 45deg;
        translate: 0 calc(var(--bar-height) / -2 * var(--adjustments));
    }

    #hamburger:checked + #top-nav-buttons > #hamburger-menu::after {
        width: var(--hamburger-diagonal);
        rotate: -45deg;
        translate: 0 calc(var(--bar-height) / 2 * var(--adjustments));
    }

    #hamburger:checked + #top-nav-buttons > #hamburger-menu > span {
        opacity: 0;
    }

    #top-nav-buttons > ul {
        background-color: var(--primary-color-light);
        position: absolute;
        top: 5px;
        right: 0;
        padding-top: calc(var(--navbar-height) - 5px);
        width: 80vw;
        border-radius: 20px 0 0 20px;
        
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;

        translate: 100%;
        transition: translate 0.5s;
        z-index: 3;
    }

    #hamburger:checked + #top-nav-buttons > ul {
        translate: 0%;
    }

    #top-nav-buttons > ul > li {
        width: 100%;
    }

    #top-nav-buttons > ul > li > a {
        display: block;
        box-sizing: border-box;
        padding-block: 1em;
        width: 100%;
        border-block: 1px solid var(--bgcl);

        color: var(--primary-color-dark);
        font-size: 5vw;
        text-align: center;
        cursor: pointer;
    }

    #top-nav-buttons > ul > li:last-of-type > a {
        border-bottom: 0;
        border-bottom-left-radius: 20px;
    }

    #top-nav-buttons > ul > li > a:hover {
        background-color: var(--primary-color);
    }

    #cta-list {
        display: block;
    }

    #cta-list#cta-list > a {
        color: var(--font-color);
    }
}

main {
    min-height: calc(90vh - var(--navbar-height) - var(--footer-height));

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--section-gap);

    font-size: var(--main-base-font-size);
    margin-top: var(--main-margin-top);
    margin-bottom: var(--section-gap);
}

main .link {
    color: var(--primary-color);
}

main .link:hover {
    color: var(--primary-color-dark);
}

.section-img {
    position: relative;
    /* height: 65vh; */
    /* width: var(--content-width); */
    padding-inline: calc((100vw - var(--content-width)) / 2);
    
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 4fr 3fr;
    grid-template-rows: var(--section-height);
    gap: 2em;

    align-items: center;
    justify-items: center;
}

.section-img.reverse {
    grid-template-columns: 3fr 4fr;
}

.section-img.alt-color {
    background-color: var(--primary-color-light);
}

.section-img > div > h1, .section-img > div > h2 {
    font-weight: 400;
    font-size: 2em;
    margin: 0;
}

.section-img > div > h1 + h2, .section-img > div > h3 {
    font-weight: 300;
    font-size: 1em;
    margin: 1em 0;
}

.section-img > div > h3:nth-last-child(1) {
    margin-bottom: 0;
}

.section-img > div > a {
    font-size: min(1.75vw, 0.75em);
}

.js .section-img > div > * {
    transition: translate 1s, opacity 1s;
}

.js .section-img.scroll > div > * {
    translate: -25%;
    opacity: 0;
}

.js .section-img.scroll.reverse > div > * {
    translate: 25%;
}

.js .section-img > :first-child > :nth-child(2) {
    transition-delay: 250ms;
}

.js .section-img > :first-child > :nth-child(3) {
    transition-delay: 500ms;
}

.section-img > img {
    max-height: 100%;
    max-width: 100%;
    transition: translate 1s, opacity 1s;
}

.js .section-img.scroll > img {
    translate: 25%;
    opacity: 0;
}

.section-img.reverse > img {
    grid-column: 1;
}

.js .section-img.scroll.reverse > img {
    translate: -25%;
}


.top-semi::before {
    content: "";
    background-color: inherit;
    position: absolute;
    left: 0;
    bottom: calc(var(--section-gap));
    
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: scaleX(2);

    z-index: -1;
}

.bottom-grad::after {
    content: "";
    background-image: linear-gradient(var(--primary-color-light), var(--bgcl) );
    position: absolute;
    top: 100%;
    left: 0;
    
    width: 100%;
    height: var(--section-gap);
    
    z-index: -1;
}

.section-button {
    background-color: var(--primary-color-light);
    box-sizing: border-box;
    border-radius: 3em;
    max-width: 66vw;
    margin-inline: calc((100vw - var(--content-width)) / 2);
    padding: 2em;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    transition: opacity 1s;
}

.js .section-button.scroll, .js .section-button.scroll > * {
    opacity: 0;
}

.section-button > h2 {
    font-weight: 400;
    font-size: 2em;
    text-align: center;
    margin: 0 0 1em 0;
}

.section-button > * {
    transition: opacity 1s;
}

.js .section-button > a {
    transition-delay: 250ms;
}

.section-text {
    width: 100%;
    box-sizing: border-box;
    padding-inline: calc((100vw - var(--content-width)) / 2);
}

.section-text > h1 {
    font-weight: 400;
    font-size: 2em;
}

.section-text > h2 {
    font-weight: 400;
    font-size: 1.25em;
}

.section-text > p, .section-text > ul {
    font-weight: 300;
}

.section-text b {
    font-weight: 400;
}

.js .section-text > * {
    transition: translate 1s, opacity 1s;
}

.js .section-text.scroll > * {
    translate: 0 2vh;
    opacity: 0;
}

.js .section-text > :nth-child(2) {
    transition-delay: 100ms;
}

.js .section-text > :nth-child(3) {
    transition-delay: 200ms;
}

.js .section-text > :nth-child(4) {
    transition-delay: 300ms;
}

.js .section-text > :nth-child(5) {
    transition-delay: 400ms;
}

.js .section-text > :nth-child(6) {
    transition-delay: 450ms;
}

.js .section-text > :nth-child(7) {
    transition-delay: 500ms;
}

.js .section-text > :nth-child(8) {
    transition-delay: 550ms;
}

.js .section-text > :nth-child(9) {
    transition-delay: 600ms;
}

.js .section-text > :nth-child(10) {
    transition-delay: 650ms;
}

.js .section-text > :nth-child(11) {
    transition-delay: 700ms;
}

.card-large {
    background-color: var(--primary-color-light);
    margin-block: 2em;
    padding: 2em 3em;
    border-radius: 5em;

    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto min-content;
    gap: 1em;
}

.card-large > h2 {
    grid-column: span 2;
    text-align: center;
    margin: 0;
    
    font-weight: 400;
    font-size: 1.25em;
}

.card-large > svg {
    align-self: center;
    justify-self: center;
    max-height: 100%;
    max-width: 100%;
    height: 5em;
}

.card-large > p {
    margin: 0;
    font-weight: 300;
}

.card-short-container {
    margin-block: 2em;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
    gap: 2em;
    align-items: normal;
    justify-items: center;
}

.card-short-container > * {
    box-sizing: border-box;
    background-color: var(--primary-color-light);
    padding: 2em;
    border-radius: 5em;

    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: center;
    justify-items: center;
}

.card-short-container > * > h1, .card-short-container > * > h2 {
    text-align: center;
    margin: 0;
    
    font-weight: 400;
    font-size: 1.25em;
}

.card-short-container > * > p {
    text-align: center;
    margin: 0;
    font-weight: 300;
}

.card-short-container > * > svg {
    height: 4em;
}

.card-short-container > * > address {
    font-size: 0.75em;
}

.card-short-container > form {
    border-radius: 2em;
    padding: 2em 1.5em 1.5em 1.5em; 
    width: 100%;
}

.card-short-container > form > label {
    align-self: flex-start;
    font-weight: 300;
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 0.5em;

    font-size: 0.75em;
}

.card-short-container label > input, .card-short-container label > textarea {
    border: 0;
    border-radius: 0.75em;
    padding: 0.5em 0.75em;
    resize: none;
    
    font-size: 1em;
}

.card-short-container > form > button {
    align-self: flex-end;
    border: 0;
    
    font-family: 'Rubik', sans-serif;
    font-size: 0.75em;
}

#card-address {
    align-self: flex-start;
    background-color: var(--secondary-color);
}

#card-address > address {
    font-style: normal;
    display: grid;
    grid-template-columns: 5em 1fr;
    gap: 0.5em;
    align-items: center;
}

#card-address > address > :nth-child(odd) {
    justify-self: end;
}

#card-address svg {
    height: 2em;
}

@media (max-width: 768px), (max-aspect-ratio: 7/6) {

    .section-img, .section-img.reverse {
        grid-template-columns: var(--content-width);
        gap: 0;
    }

    .section-img > div {
        display: flex;
        flex-direction: column;
        align-items: center;

        z-index: 2;
    }

    .section-img > div > h1, .section-img > div > h2, .section-img > div > h3 {
        text-align: center;
    }

    .section-img > div > a {
        font-size: 0.75em;
    }
    
    .section-img > img {
        position: absolute;
        max-height: 100%;
        max-width: 100%;
        
        opacity: 0.2;
        filter: blur(0.25em);
    }

    .js .section-img.scroll > img, .js .section-img.scroll.reverse > img {
        translate: unset;
    }
    
    .section-img.reverse > img {
        grid-column: unset;
    }

    .section-button {
        max-width: 90%;
    }
}

footer {
    background-color: var(--secondary-color-light);
    padding: 1em calc((100vw - var(--content-width)) / 2);

    font-size: var(--footer-font-size);

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 0.75em;
    align-items: start;
}

footer > :nth-child(2n) {
    grid-row: 1;
}

footer > .logo-div {
    grid-row: 1 / span 2;
    box-sizing: border-box;
    height: 100%;
    width: 50%;

    display: grid;
    grid-template-rows: 60% 30%;
    justify-items: center;
    gap: 10%;
}

footer > .logo-div > a > img {
    align-self: end;
    max-height: 100%;
    max-width: 100%;
}

footer > .logo-div > a > svg {
    max-height: 100%;
    max-width: 100%;
}

footer > h2 {
    margin: 0;
    font-size: 1em;
}

footer > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.75em;
}

footer > ul > li {
    margin: 0 0 0.325em 0;
}

footer > ul > li > a, footer > address > a {
    color: var(--primary-color-dark);
}

footer > ul > li > a:hover, footer > address > a:hover {
    color: var(--primary-color);
}

footer > address {
    font-size: 0.75em;
    font-style: normal;
    line-height: calc(0.75em * 2);
}

footer > address > b {
    font-weight: 500;
}

footer > .social-media {
    display: flex;
    gap: 0.75em;
}

footer > .social-media svg {
    height: 2.5em;
    transition: filter 0.5s;
}

footer > .social-media svg:hover {
    filter: brightness(1.5);
}

@media (max-width: 768px), (max-aspect-ratio: 7/6) {
    footer {
        display: flex;
        flex-direction: column;
        font-size: var(--footer-mobile-font-size);
    }

    footer > .logo-div {
        align-self: center;
        width: 25%;
    }
}

/* .center-modal {
    z-index: 10;
    background-color: hsl(120, 57%, 95%);
    margin-top: 7%;
    position: fixed;

    border: 1px solid hsl(120, 57%, 50%);
    border-radius: 15px;
    box-shadow: 0 .1vh 1vh grey;
    padding: 1.5em;
    max-height: 80%;
    max-width: 80%;
} */

#loading-screen {
    margin-top: 25%;
    background-color: transparent;
    width: 2rem;
    height: 2rem;
    border: 1rem solid var(--primary-color-light);
    border-top-color: var(--primary-color-dark);
    border-radius: 50%;
    animation: loading 0.75s ease infinite;
}

#loading-screen::backdrop {
    background-color: gray;
    opacity: 0.5;
}

@keyframes loading {
    from { transform: rotate(0turn);}
    to { transform: rotate(1turn);}
}

#alert {
    margin-top: 5%;
    padding: 0;
    border: 0;

    max-width: 60vw;
    opacity: 0;
    transition: 0.5s;

    font-size: 1rem;
}

#alert > form {
    margin: 1em;

    display: flex;
    align-items: center;
    column-gap: 3em;    
}

#alert > form > h1 {
    margin: 0;
}

#alert > form > button {
    background-color: inherit;
    padding: 0.25em;
    border: 0;
    border: 1px dashed transparent;
    border-radius: 0.25em;
    color: white;

    font-size: 1em;
    transition: 0.5s;
}

#alert > form > button:hover {
    color: black;
    translate: 0 10%;
}

#alert > form > button:focus-visible {
    outline: 0;
    border: 1px dashed white;
}

#alert.success {
    background-color: hsl(120, 80%, 60%);
}

#alert.success > form > button {
    background-color: hsl(120, 80%, 70%);
}

#alert.failed {
    background-color: hsl(0, 90%, 70%);
    color: white;
}

#alert.failed > form > button {
    background-color: hsl(0, 90%, 80%);
}