* {
    color: var(--color-dark);
    font-family: var(--fFamily-body);
    text-decoration: none;

    padding: 0;
    margin: 0;
}

html,
body {
    font-size: 16px;

    width: 100%;
    height: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    background-image: url("../media/2_background/oogbites_background.svg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

:root {
    /* colors */
    --color-primary: rgba(250, 179, 0, 1);
    --color-primary25: rgba(255, 219, 128, 1);
    --color-primary05: rgba(255, 248, 229, 1);

    --color-secondary: rgba(28, 62, 126, 1);
    --color-secondary25: rgba(151, 179, 232, 1);
    --color-secondary05: rgba(234, 240, 250, 1);

    --color-accent: rgba(229, 51, 23, 1);
    --color-accent25: rgba(243, 153, 139, 1);
    --color-accent05: rgba(253, 235, 232, 1);

    --color-dark: rgba(51, 37, 0, 1);
    --color-light: rgba(255, 248, 235, 1);

    /* font-sizes */
    --fSize-base: 1.25rem;
    --fSize-small: 0.875;

    /* font-sizes (desktop) */
    --fSize-desktop-h1: 6rem;
    --fSize-desktop-h1sub: 1.25rem;
    --fSize-desktop-h2: 4rem;

    /* font-sizes (mobile) */
    --fSize-mobile-h1: 3rem;
    --fSize-mobile-h1sub: 1.5rem;
    --fSize-mobile-h2: 2rem;

    /* font-family */
    --fFamily-display: poster-cut-neue, serif;
    --fFamily-body: "Nunito", sans-serif;

    /* corner-radius */
    --cRadius-L: 4rem;
    --cRadius-S: 2rem;
    --cRadius-XS: 1rem;
}

.textMarked {
    color: var(--color-accent);
    font-family: var(--fFamily-display);
    text-transform: uppercase;
}

header .header__nav {
    z-index: 1;
    position: fixed;
    top: 0;
    width: 100%;

    background-color: var(--color-secondary);
}

header .nav__list {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;

    gap: .5rem;
    padding: 0 8rem;
}

header .list__item {
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 1rem 0;
}

header .list__item:first-child {
    padding: 0;
    margin-right: auto;
}

header .item__link:not(.item__link-logo) {
    color: var(--color-secondary05);
    font-family: var(--fFamily-body);
    font-weight: 600;
    text-transform: capitalize;

    padding: 1rem;
}

header .item__link:not(.item__link-logo):hover {
    color: var(--color-secondary25);

    transition: .3s;
}

header .item__link-logo {
    display: grid;
    place-items: center;
}

header .item__link>img {
    height: 3rem;
}

header .header__hero {
    height: calc(100vh - 5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding-top: 5rem;
}

header h1 {
    color: var(--color-secondary);
    font-family: var(--fFamily-display);
    font-size: var(--fSize-desktop-h1);
    text-align: center;

    margin-bottom: 1rem;
}

header .h1sub {
    font-family: var(--fFamily-body);
    font-size: var(--fSize-desktop-h1sub);
    font-weight: 700;
    text-align: center;

    width: 30%;

    margin-bottom: 4rem;
}

header .button {
    font-family: var(--fFamily-display);
    font-size: var(--fSize-base);

    padding: 1rem 2rem;

    border: none;
    border-radius: var(--cRadius-XS);
    background-color: var(--color-primary);
}

header .button:hover {
    background-color: var(--color-primary25);
}

header .header__mascotte {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20%;

    margin: 2rem 8rem;
}

header .header__mascotte-mirror {
    transform: scaleX(-1);
    left: 0;
}

section {
    padding: 8rem;
}

section h2 {
    color: var(--color-secondary);
    font-family: var(--fFamily-display);
    font-size: var(--fSize-desktop-h2);

    margin-bottom: 2rem;
}

section h3 {
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

section p {
    font-size: var(--fSize-base);
    line-height: 1.5rem;

    margin-bottom: 1rem;
}

section .section__text {
    padding: 1rem 0;
}

.s1,
.s3,
.s4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: flex-end;

    gap: 4rem;
}

.s1 img,
.s3 img,
.s4 img {
    box-sizing: border-box;
    transform: rotate(-1deg);
    width: 100%;

    border: solid 2rem var(--color-light);
    border-radius: var(--cRadius-L);
    background-color: var(--color-light);
}

.s2 {
    width: 50%;

    margin: 0 auto;
}

.s2 h2 {
    text-align: center;
}

.s2 .grid {
    display: grid;
    grid-template: 1fr 1fr / 1fr 1fr;

    gap: 1rem;
}

.s2 .grid__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 1rem;
    padding: 2rem;

    border-radius: var(--cRadius-S);
    background-color: var(--color-secondary05);
}

.s2 .grid__card:hover {
    background-color: var(--color-secondary25);
}

.s3 .section__text {
    grid-row: 1;
}

.s4 img {
    border: none;
}

.s5 h2 {
    text-align: center;
}

.s5 img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;

    border-radius: var(--cRadius-S);
    background-color: var(--color-accent05);
}

.s5 div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 2rem;
}

.s6 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    gap: 2rem;
}

.s6 * {
    color: var(--color-light);
}

.s6 form {
    grid-column: 1 / span 2;
    display: flex;
    flex-direction: column;

    gap: 1rem;
    padding: 4rem;

    border-radius: var(--cRadius-L);
    background-color: var(--color-secondary);
}

.s6 input {
    color: var(--color-secondary25);
    font-size: var(--fSize-small);

    padding: 1rem 2rem;

    border: none;
    border-radius: var(--cRadius-XS);
    background-color: var(--color-light);
}

.s6 .form__submit {
    color: var(--color-dark);
    font-family: var(--fFamily-display);

    margin-top: 1rem;

    background-color: var(--color-primary);
}

.s6 .form__submit:hover {
    background-color: var(--color-primary25);
}

.s6 img {
    width: 50%;
    grid-column: 3 / span 3;
    margin: auto;
}

footer div>img {
    height: 3rem;
}

footer div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding: 2rem 8rem;

    background-color: var(--color-secondary);
}

footer .nav__list {
    display: flex;
    flex-direction: column;

    gap: 1rem;
    padding: 1rem 0;
}

footer .item__link,
footer p {
    color: var(--color-light);
    font-family: var(--fFamily-body);
    text-decoration: underline;
}

footer .legal {
    flex-direction: row-reverse;

    background-color: var(--color-light);
}

.legal__text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;

    gap: 1rem;
    padding: 1rem 0;

    background-color: var(--color-light);
}

.legal p {
    color: var(--color-secondary);
    font-size: var(--fSize-small);
    font-weight: 600;
    text-decoration: none;
}

footer .disclaimer {
    color: var(--color-secondary);
    font-size: var(--fSize-small);
    text-decoration: none;
    text-align: center;

    padding: 1rem 8rem;

    background-color: var(--color-light);

    border-top: solid 1px var(--color-secondary);
}

@media only screen and (max-width: 600px) {

    header .header__nav {
        position: fixed;
        padding: 0;
    }

    header .nav__list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
        gap: 0;
    }

    header .list__item {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    header .item__link:not(.item__link-logo) {
        color: var(--color-secondary05);
        font-family: var(--fFamily-body);
        font-weight: 600;
        text-transform: capitalize;

        padding: .5rem;
    }

    header .item__link-logo {
        padding: 0.5rem;
    }

    header .header__hero {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        padding: 5rem 2rem;
    }

    header h1 {
        font-size: var(--fSize-mobile-h1);

        margin-bottom: 1rem;
    }

    header .h1sub {
        font-size: var(--fSize-mobile-h1sub);

        width: 100%;

        margin-bottom: 2rem;
    }

    header .header__mascotte {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 40%;

        margin: 1rem 1rem;
    }

    section {
        padding: 4rem 2rem;
        margin: 0;
    }

    section h2 {
        color: var(--color-secondary);
        font-family: var(--fFamily-display);
        font-size: var(--fSize-mobile-h2);

        margin-bottom: 1rem;
    }

    section p {
        margin-bottom: .5rem;
    }

    .s1,
    .s3,
    .s4 {
        display: grid;
        grid-template-columns: none;
        grid-template-rows: repeat(2, 1fr);

        gap: 0;
        row-gap: .5rem;
    }

    .s1 img,
    .s3 img,
    .s4 img {
        transform: none;

        border: solid 1rem var(--color-light);
        border-radius: var(--cRadius-S);
        background-color: var(--color-light);
    }

    .s2 {
        width: auto;
    }

    .s2 .grid {
        display: grid;
        grid-template: none;
        grid-template-rows: repeat(4, 1fr);

        gap: 1rem;
    }

    .s2 .grid__card {
        border-radius: var(--cRadius-S);
        background-color: var(--color-secondary05);
    }

    .s3 .section__text {
        grid-area: 2;
    }

    .s4 img {
        border: none;
    }

    .s5 h2 {
        text-align: center;
    }

    .s5 img {
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;

        border-radius: var(--cRadius-S);
        background-color: var(--color-accent05);
    }

    .s5 div {
        display: grid;
        grid-template-columns: none;
        grid-template-rows: repeat(3, 1fr);

        gap: 1rem;
    }

    .s6 {
        display: none;
        display: flex;
        flex-direction: column;
    }

    .s6 * {
        color: var(--color-light);
    }

    .s6 form {
        grid-column: none;
        display: flex;
        flex-direction: column;

        gap: .5rem;
        padding: 2rem;

        border-radius: var(--cRadius-S);
        background-color: var(--color-secondary);
    }

    .s6 input {
        color: var(--color-secondary25);
        font-size: var(--fSize-small);

        padding: 1rem 2rem;

        border: none;
        border-radius: var(--cRadius-XS);
        background-color: var(--color-light);
    }

    .s6 .form__submit {
        color: var(--color-dark);
        font-family: var(--fFamily-display);

        margin-top: 1rem;

        background-color: var(--color-primary);
    }

    .s6 .form__submit:hover {
        background-color: var(--color-primary25);
    }

    .s6 img {
        grid-column: none;
        width: 50%;
    }

    footer div>img {
        height: 3rem;
    }

    footer div {
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        align-items: center;

        padding: 2rem 8rem;

        background-color: var(--color-secondary);
    }

    footer .nav__list {
        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 1rem;
        padding: 1rem 0;
    }

    footer .item__link,
    footer p {
        color: var(--color-light);
        font-family: var(--fFamily-body);
        text-decoration: underline;
    }

    footer .legal {
        flex-direction: row-reverse;
        justify-content: space-between;

        padding: 1rem 2rem;

        background-color: var(--color-light);
    }

    .legal__text {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;

        gap: 1rem;
        padding: 1rem 0;

        background-color: var(--color-light);
    }

    .legal p {
        color: var(--color-secondary);
        font-size: var(--fSize-small);
        font-weight: 600;
        text-decoration: none;
    }

    footer .disclaimer {

        padding: 1rem 2rem;

        background-color: var(--color-light);

        border-top: solid 1px var(--color-secondary);
    }
}