@font-face {
    font-family: "Snell Roundhand W01 Script";
    src: url("https://db.onlinewebfonts.com/t/f8deb3c1a029ec56b15bb462c1518f07.eot");
    src:
        url("https://db.onlinewebfonts.com/t/f8deb3c1a029ec56b15bb462c1518f07.eot?#iefix")
            format("embedded-opentype"),
        url("https://db.onlinewebfonts.com/t/f8deb3c1a029ec56b15bb462c1518f07.woff2")
            format("woff2"),
        url("https://db.onlinewebfonts.com/t/f8deb3c1a029ec56b15bb462c1518f07.woff")
            format("woff"),
        url("https://db.onlinewebfonts.com/t/f8deb3c1a029ec56b15bb462c1518f07.ttf")
            format("truetype"),
        url("https://db.onlinewebfonts.com/t/f8deb3c1a029ec56b15bb462c1518f07.svg#Snell Roundhand W01 Script")
            format("svg");
}

@font-face {
    font-family: "lulo-one", sans-serif;
    font-weight: 700;
    font-style: normal;
    src: url(https://use.typekit.net/znp3hac.css);
}

:root {
    --color-bg-light: rgb(247, 246, 240); /* alabaster */
    --color-text-light: #0a7b5fff; /* viridian */
    --color-accent-light: #f3a3c6ff; /* carnation pink */
    --color-bg-dark: rgb(208, 191, 168); /* khaki */
    --color-text-dark: #264e43ff; /* brunswick green */
    --color-accent-dark: #ee343dff; /* imperial red */
    --title-font: "Snell Roundhand W01 Script", cursive;
    --logo-font: "lulo-one", sans-serif;
    --body-font: "Poppins", sans-serif;
}

@media only screen and (max-width: 368px) {
    * {
        background-color: var(--color-bg-light);
        scrollbar-width: none;
        cursor: default;
    }

    body {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 50px 1fr 50px;
        justify-content: center;
        align-items: center;
        grid-area: "header" "main" "footer";
        background-color: var(--color-bg-light);
        padding: 0;
        margin: 0;
    }

    .hdr {
        grid-area: header;
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .ftr {
        grid-area: footer;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0;
    }

    .footr {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0;
    }

    #footer {
        font-family: var(--body-font);
        font-size: 0.6rem;
        color: var(--color-bg-dark);
    }

    #ftritem {
        font-family: var(--body-font);
        font-size: 0.75rem;
        color: var(--color-bg-dark);
        text-decoration: none;
        font-weight: 400;
    }

    #ftritem:hover {
        color: var(--color-text-dark);
    }

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    li {
        display: inline-flex;
        font-family: var(--body-font);
        font-size: 0.7em;
        text-transform: lowercase;
        font-weight: 400;
        color: var(--color-text-light);
        padding: 5px;
    }

    #item {
        text-decoration: none;
        color: var(--color-bg-dark);
        padding-block: var(--b);
        --b: 0.15em; /*  the thickness of the line */
        --c: var(--color-text-dark); /* the color */
        --d: 20px; /* the cube depth */
        --s: 0.5em; /* the line width */
        --_s: calc(var(--d) + var(--b));
        background:
            linear-gradient(var(--c) 50%, var(--color-bg-light) 0) 0%
                calc(100% - var(--_p, 0%)) / 100% 200%,
            linear-gradient(var(--c) 0 0) 0% var(--_p, 0%) / var(--_p, 0%)
                var(--b) no-repeat;
        -webkit-background-clip: text, padding-box;
        background-clip: text, padding-box;
        transition:
            0.3s var(--_s, 0s) linear,
            background-size 0.3s calc(0.3s - var(--_s, 0s));
    }

    #item:hover {
        color: var(--color-text-dark);
        --_p: 100%;
        --_s: 0.3s;
        cursor: pointer;
    }

    .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo {
        font-size: 0.9em;
        font-family: var(--logo-font);
        color: var(--color-bg-dark);
        font-weight: 700;
    }

    #logolink {
        text-decoration: none;
        color: var(--color-bg-dark);
    }
}

@media only screen and (min-width: 368px) {
    * {
        background-color: var(--color-bg-light);
        scrollbar-width: none;
        scrollbar-color: var(--color-accent-light) var(--color-bg-light);
        cursor: default;
    }

    body {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 50px 1fr 50px;
        justify-content: center;
        align-items: center;
        grid-area: "header" "main" "footer";
        background-color: var(--color-bg-light);
        padding: 0;
        margin: 0;
    }

    .hdr {
        grid-area: header;
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .ftr {
        grid-area: footer;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0;
    }

    .footr {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0;
    }

    #footer {
        font-family: var(--body-font);
        font-size: 0.75rem;
        color: var(--color-bg-dark);
    }

    #ftritem {
        font-family: var(--body-font);
        font-size: 0.85rem;
        color: var(--color-bg-dark);
        text-decoration: none;
        font-weight: 400;
    }

    #ftritem:hover {
        color: var(--color-text-dark);
    }

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    li {
        display: inline-flex;
        font-family: var(--body-font);
        font-size: 0.75em;
        text-transform: lowercase;
        font-weight: 400;
        color: var(--color-text-light);
        padding: 5px;
    }

    #item {
        text-decoration: none;
        color: var(--color-bg-dark);
        padding-block: var(--b);
        --b: 0.15em; /*  the thickness of the line */
        --c: var(--color-text-dark); /* the color */
        --d: 20px; /* the cube depth */
        --s: 0.5em; /* the line width */
        --_s: calc(var(--d) + var(--b));
        background:
            linear-gradient(var(--c) 50%, var(--color-bg-light) 0) 0%
                calc(100% - var(--_p, 0%)) / 100% 200%,
            linear-gradient(var(--c) 0 0) 0% var(--_p, 0%) / var(--_p, 0%)
                var(--b) no-repeat;
        -webkit-background-clip: text, padding-box;
        background-clip: text, padding-box;
        transition:
            0.3s var(--_s, 0s) linear,
            background-size 0.3s calc(0.3s - var(--_s, 0s));
    }

    #item:hover {
        color: var(--color-text-dark);
        --_p: 100%;
        --_s: 0.3s;
        cursor: pointer;
    }

    .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo {
        font-size: 1em;
        font-family: var(--logo-font);
        color: var(--color-bg-dark);
        font-weight: 700;
    }

    #logolink {
        text-decoration: none;
        color: var(--color-bg-dark);
    }
}

@media only screen and (min-width: 521px) {
    * {
        background-color: var(--color-bg-light);
        scrollbar-width: none;
        scrollbar-color: var(--color-accent-light) var(--color-bg-light);
        cursor: default;
    }

    body {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 75px 1fr 75px;
        justify-content: center;
        align-items: center;
        grid-area: "header" "main" "footer";
        background-color: var(--color-bg-light);
        padding: 0;
        margin: 0;
    }

    .hdr {
        grid-area: header;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .ftr {
        grid-area: footer;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0;
    }

    .footr {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0;
    }

    #footer {
        font-family: var(--body-font);
        font-size: 0.8rem;
        color: var(--color-bg-dark);
    }

    #ftritem {
        font-family: var(--body-font);
        font-size: 0.9rem;
        color: var(--color-bg-dark);
        text-decoration: none;
        font-weight: 400;
    }

    #ftritem:hover {
        color: var(--color-text-dark);
    }

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    li {
        display: inline-flex;
        font-family: var(--body-font);
        font-size: 0.85em;
        text-transform: lowercase;
        font-weight: 400;
        color: var(--color-text-light);
        padding: 15px;
    }

    #item {
        text-decoration: none;
        color: var(--color-bg-dark);
        padding-block: var(--b);
        --b: 0.15em; /*  the thickness of the line */
        --c: var(--color-text-dark); /* the color */
        --d: 20px; /* the cube depth */
        --s: 0.5em; /* the line width */
        --_s: calc(var(--d) + var(--b));
        background:
            linear-gradient(var(--c) 50%, var(--color-bg-light) 0) 0%
                calc(100% - var(--_p, 0%)) / 100% 200%,
            linear-gradient(var(--c) 0 0) 0% var(--_p, 0%) / var(--_p, 0%)
                var(--b) no-repeat;
        -webkit-background-clip: text, padding-box;
        background-clip: text, padding-box;
        transition:
            0.3s var(--_s, 0s) linear,
            background-size 0.3s calc(0.3s - var(--_s, 0s));
    }

    #item:hover {
        color: var(--color-text-dark);
        --_p: 100%;
        --_s: 0.3s;
        cursor: pointer;
    }

    .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo {
        font-size: 1.25em;
        font-family: var(--logo-font);
        color: var(--color-bg-dark);
        font-weight: 700;
    }

    #logolink {
        text-decoration: none;
        color: var(--color-bg-dark);
    }
}

@media only screen and (min-width: 690px) {
    * {
        background-color: var(--color-bg-light);
        scrollbar-width: none;
        scrollbar-color: var(--color-accent-light) var(--color-bg-light);
        cursor: default;
    }

    body {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 100px 1fr 100px;
        justify-content: center;
        align-items: center;
        grid-area: "header" "main" "footer";
        background-color: var(--color-bg-light);
        padding: 0;
        margin: 0;
    }

    .hdr {
        grid-area: header;
        padding: 0 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .ftr {
        grid-area: footer;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0;
    }

    .footr {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0;
    }

    #footer {
        font-family: var(--body-font);
        font-size: 0.85rem;
        color: var(--color-bg-dark);
    }

    #ftritem {
        font-family: var(--body-font);
        font-size: 1rem;
        color: var(--color-bg-dark);
        text-decoration: none;
        font-weight: 400;
    }

    #ftritem:hover {
        color: var(--color-text-dark);
    }

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    li {
        display: inline-flex;
        font-family: var(--body-font);
        font-size: 1.1em;
        text-transform: lowercase;
        font-weight: 400;
        color: var(--color-text-light);
        padding: 20px;
    }

    #item {
        text-decoration: none;
        color: var(--color-bg-dark);
        padding-block: var(--b);
        --b: 0.15em; /*  the thickness of the line */
        --c: var(--color-text-dark); /* the color */
        --d: 20px; /* the cube depth */
        --s: 0.5em; /* the line width */
        --_s: calc(var(--d) + var(--b));
        background:
            linear-gradient(var(--c) 50%, var(--color-bg-light) 0) 0%
                calc(100% - var(--_p, 0%)) / 100% 200%,
            linear-gradient(var(--c) 0 0) 0% var(--_p, 0%) / var(--_p, 0%)
                var(--b) no-repeat;
        -webkit-background-clip: text, padding-box;
        background-clip: text, padding-box;
        transition:
            0.3s var(--_s, 0s) linear,
            background-size 0.3s calc(0.3s - var(--_s, 0s));
    }

    #item:hover {
        color: var(--color-text-dark);
        --_p: 100%;
        --_s: 0.3s;
        cursor: pointer;
    }

    .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo {
        font-size: 1.5em;
        font-family: var(--logo-font);
        color: var(--color-bg-dark);
        font-weight: 700;
    }

    #logolink {
        text-decoration: none;
        color: var(--color-bg-dark);
    }
}