@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;700&display=swap');

html {
    font-size: 15px;
    scroll-behavior: smooth;
}

:root {
    /* Colors */
        /* Background */
        --background: #FFFFFF;

        /* Divider */
        --divider:  rgb(233, 233, 233); ;

        /* Accents */
        --accent1: #485C11;
        --accent2: #DFECC6;
        --accent3: #8E9C78;
        --accent4: #000000;
        --accent5: #6F6F6F;
        --accent6: #929292;
    
    /* Fonts */
        /* Font Families */
        --font-heading: "Crimson Text", serif;
        --font-paragraph-link: "DM Sans", sans-serif;
        --font-caption: "Roboto Mono", monospace;

        /* Font Weights*/
        --display-weight: 400;
        --heading1-weight: 400;
        --heading2-weight: 400;
        --heading3-weight: 400;
        --paragraph-weight: 400;
        --caption-weight: 400;
        --link-weight: 700;

        /* Font Sizes */
        --display-size: 4.75rem;
        --heading1-size: 3.125rem;
        --heading2-size: 2rem;
        --heading3-size: 1.125rem;
        --paragraph-size: 0.94rem;
        --caption-size: 0.656rem;
        --link-size: 0.875rem;

        /* Line Height */
        --line-height-display: 0.85;
        --line-height-heading1: 0.95;
        --line-height-heading2: 1.1;

        /* Letter Spacing */
        --letter-spacing-display: -0.06em;
        --letter-spacing-heading1: -0.03em;
        --letter-spacing-heading2: -0.04em;
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    display: grid;
    background-color: var(--background);
    grid-template-columns:  4vw 1fr 4vw;
    grid-template-rows: 1fr auto;
    grid-template-areas: 
        "margin-left main margin-right"
        "margin-left footer margin-right";
    min-height: 100dvh;
    font-family: var(--font-paragraph-link);
}

header {
    grid-area: header;
}

main {
    grid-area: main;
    margin-top: 7.5em;
}

footer {
    grid-area: footer;
}

.reveal {
    opacity: 0;
    transform: translateY(1.25rem);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .8s ease-out, transform .8s ease-out;
}

.learn-more {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 7.94rem;
    height: 3rem;
    border-style: none;
    text-decoration: none;
    border-radius: 3.125rem;
    background-color: var(--accent1);
    margin: 5rem 0rem 0.75rem 0rem;
    transition: background-color .5s;
}

.learn-more:hover {
    background-color: var(--accent3);
}

.learn-more > span {
    color: rgb(255, 255, 255);
    font-size: var(--link-size);
    font-weight: var(--link-weight);
}

.learn-more > img {
    width: 0.44rem;
    height: 1.25rem;
    margin: 0rem 0rem 0.06rem 0.18rem;
    transition: margin-bottom .5s, height .5s;
}

.learn-more:hover > img {
    margin-bottom: 0.87rem;
    height: 1.06rem;
}

.discover-more {
    display: block;
    background-color: var(--accent2);
    color: var(--accent4);
    width: max-content;
    font-weight: var(--link-weight);
    font-size: var(--link-size);
    text-decoration: none;
    border-style: none;
    border-radius: 1.5rem;
    padding: 0.9rem 1.2rem;
    margin: 3rem 0rem;
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.discover-more:hover {
    color: white;
    background-color: var(--accent3);
}

.anchor {
    text-decoration: none;
    width: max-content;
    font-weight: var(--link-weight);
    font-size: var(--link-size);
    color: var(--accent4);
    transition: color .6s;
}

.anchor:hover {
    color: var(--accent5);
    transform: translateY(1px);
}

.benefits, .specs, .how-it-works, .cta {
    scroll-margin-top: 60px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }

    body {
        grid-template-rows: auto 1fr auto;
        grid-template-areas: 
        "margin-left header margin-right"
        "margin-left main margin-right"
        "margin-left footer margin-right";
    }

    main {
        margin-top: 3.5rem;
    }

    .benefits, .specs, .how-it-works, .cta {
        scroll-margin-top: 0px;
    }
}

@media (min-width: 1200px) {
    html {
        font-size: 17px;
    }
}