/* ==================== VARIABLES ==================== */
:root {
    background-color: var(--primary-black);
	font-size: 120%;
    scroll-behavior: smooth;

    /* FONT SIZES */
    --landing-h1: 1.5rem;
    --landing-h2: 1.25rem;
    --landing-bodycopy: 0.75rem;

    @media (width > 600px) {
        --landing-h1: 2.5rem;
        --landing-h2: 1.25rem;
        --landing-bodycopy: 1rem;
    }

    @media (width > 900px) {
        --landing-h1: 4rem;
        --landing-h2: 2rem;
        --landing-bodycopy: 1rem;
    }

    /* GAP */
    --gap-main: 1.5rem;
    --gap-article: 0.5rem;

    /* PADDING */
    --padding-normal: 1rem;
    --padding-large: 2rem;
    --main-padding-block: 1rem;
    --main-padding-inline: 0.5rem;
    --section-padding: 1.5rem;
    --nav-padding: 0.375rem;
    --nav-btn-width: 4.5rem;
    --nav-btn-padding: 0.5rem;
    --nav-logo-height: 1.25rem;
    --nav-top: 0.5rem;
    --nav-offset: 4rem;
    --section-gap: 1rem;

    /* BORDER RADIUS */
    --br-section: 2rem;
    --br-element: 0.75rem;
    --br-btn: 0.5rem;

    @media (width > 600px) {
        --gap-main: 2rem;
        --main-padding-block: 2rem;
        --main-padding-inline: 2rem;
        --section-padding: 2rem;
        --nav-padding: 0.75rem;
        --nav-btn-width: 8rem;
        --nav-logo-height: 1.75rem;
        --nav-top: 0.75rem;
        --nav-offset: 5rem;
        --section-gap: 1.25rem;
        --br-section: 2.5rem;
        --br-element: 1.5rem;
        --br-btn: 0.75rem;
    }

    @media (width > 900px) {
        --gap-main: 3rem;
        --main-padding-block: 3rem;
        --main-padding-inline: 5rem;
        --section-padding: 2.5rem;
        --nav-padding: 1rem;
        --nav-btn-width: 10rem;
        --nav-btn-padding: 0.75rem;
        --nav-logo-height: 2rem;
        --nav-top: 1rem;
        --nav-offset: 6rem;
        --br-section: 4rem;
        --br-element: 2rem;
    }

    @media (width > 1200px) {
        --gap-main: 4rem;
        --main-padding-block: 5rem;
        --main-padding-inline: 12rem;
        --section-padding: 3rem;
    }

    @media (width > 1600px) {
        --main-padding-inline: 15rem;
    }
}

/* ==================== TEXT ==================== */
h1 {
    font-family: "Doto-Rounded";
    font-weight: 600;
    font-size: var(--landing-h1);
    color: var(--primary-white);
    line-height: 100%;
    text-transform: uppercase;
    text-align: center;
}

h2 {
    font-family: "Geist";
    font-weight: 700;
    font-size: var(--landing-h2);
    color: var(--primary-black);
}

p {
    font-family: "Geist";
    font-weight: 400;
    font-size: var(--landing-bodycopy);
    color: var(--primary-black);
    line-height: 140%;
}

strong {
    font-weight: 700;
}

/* ==================== LAYOUT ==================== */
.landing-title {
    width: 100%;
    padding: var(--padding-large);
}

.landing-nav {
    position: fixed;
    top: var(--nav-top);
    left: var(--main-padding-inline);
    right: var(--main-padding-inline);
    z-index: 1;
}

.landing-nav-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: var(--primary-yellow);
    border-radius: var(--br-element);
    corner-shape: squircle;
    padding: var(--nav-padding);
}

.landing-nav-wrapper img {
    width: auto;
    height: var(--nav-logo-height);
    max-block-size: unset;
}

.landing-nav-wrapper a {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Geist";
    font-weight: 600;
    font-size: var(--landing-bodycopy);
    background-color: var(--primary-black);
    color: var(--primary-white);
    padding: var(--nav-btn-padding);
    border-radius: var(--br-btn);
    corner-shape: squircle;
    cursor: pointer;
    width: var(--nav-btn-width);

    &:hover {
        background-color: var(--primary-white);
        color: var(--primary-black);
    }
}

main {
    background-color: var(--primary-black);
    padding-block-start: calc(var(--main-padding-block) + var(--nav-offset));
    padding-block-end: var(--main-padding-block);
    padding-inline: var(--main-padding-inline);
    display: flex;
    flex-direction: column;
    gap: var(--gap-main);
}

article {
    display: flex;
    flex-direction: column;
    gap: var(--gap-article);
}

section {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    background-color: var(--primary-white);
    border-radius: var(--br-section);
    padding: var(--section-padding);
    corner-shape: squircle;
}

img {
    width: 100%;
    max-block-size: unset;
    height: auto;
}

.guide {
    border-radius: var(--br-element);
    corner-shape: squircle;
    overflow: hidden;
}

ol {
    display: flex;
    flex-direction: column;
    gap: var(--gap-article);
    padding-left: var(--padding-normal);
}

ol li {
    display: list-item;
    list-style: disc;
}