@font-face {
    font-family: Reenie;
    src: url(/media/Reenie.ttf);
}

@font-face {
    font-family: Quicksand;
    src: url(/media/Quicksand.ttf);
}

:root {
    --lt: #FFFBEA;
    --lt-rgb: 255, 251, 234;
    --md: #6B6961;
    --md-rgb: 107, 105, 97;
    --dk: #333333;
    --dk-rgb: 51, 51, 51;
    --applique-lt: #FB9D9D;
    --applique-lt-rgb: 251, 157, 157;
    --applique-md: #FA7575;
    --applique-md-rgb: 251, 117, 117;
    --applique-dk: #F84848;
    --applique-dk-rgb: 248, 72, 72;
    --crochet-lt: #FA9EAF;
    --crochet-lt-rgb: 250, 158, 175;
    --crochet-md: #F9778E;
    --crochet-md-rgb: 249, 119, 142;
    --crochet-dk: #F7506E;
    --crochet-dk-rgb: 247, 80, 110;
    --cross-lt: #FBB2CE;
    --cross-lt-rgb: 251, 178, 206;
    --cross-md: #F88BB5;
    --cross-md-rgb: 248, 139, 181;
    --cross-dk: #F55793;
    --cross-dk-rgb: 245, 87, 147;
    --embroidery-lt: #E0A4CE;
    --embroidery-lt-rgb: 224, 164, 206;
    --embroidery-md: #D585BD;
    --embroidery-md-rgb: 213, 133, 189;
    --embroidery-dk: #CA65AC;
    --embroidery-dk-rgb: 202, 101, 172;
    --knit-lt: #CAC2EA;
    --knit-lt-rgb: 202, 194, 234;
    --knit-md: #B0A4E0;
    --knit-md-rgb: 176, 164, 224;
    --knit-dk: #8A79D1;
    --knit-dk-rgb: 138, 121, 209;
    --quilt-lt: #9EC3FA;
    --quilt-lt-rgb: 158, 195, 250;
    --quilt-md: #77ABF9;
    --quilt-md-rgb: 119, 171, 249;
    --quilt-dk: #498DF6;
    --quilt-dk-rgb: 73, 141, 246;
    --sew-lt: #8DC7E2;
    --sew-lt-rgb: 141, 199, 226;
    --sew-md: #6CB7DA;
    --sew-md-rgb: 108, 183, 218;
    --sew-dk: #3DA0CF;
    --sew-dk-rgb: 61, 160, 207;
    --dye-lt: #D3DD7E;
    --dye-lt-rgb: 211, 221, 126;
    --dye-md: #C8D45E;
    --dye-md-rgb: 200, 212, 94;
    --dye-dk: #BDCC3E;
    --dye-dk-rgb: 189, 204, 62;
    --print-lt: #FDE35D;
    --print-lt-rgb: 253, 227, 93;
    --print-md: #FDDC35;
    --print-md-rgb: 253, 220, 53;
    --print-dk: #FDD50D;
    --print-dk-rgb: 253, 213, 13;
    --home-lt: #F9C076;
    --home-lt-rgb: 249, 192, 118;
    --home-md: #F8AE4F;
    --home-md-rgb: 245, 174, 79;
    --home-dk: #F6971C;
    --home-dk-rgb: 246, 151, 28;
    --personal-lt: #FEA485;
    --personal-lt-rgb: 254, 164, 133;
    --personal-md: #FE855D;
    --personal-md-rgb: 254, 133, 93;
    --personal-dk: #FE6736;
    --personal-dk-rgb: 254, 103, 54;
}

html {
    font-size: 20px;
}

body {
    background-color: var(--lt);
    color: var(--dk);
    font-family: "Quicksand", sans-serif;
    margin: 0;
}

h1 {
    font-family: "Quicksand";
}

.layout {
    display: grid;
    grid-template-columns: 15% 85%;
    grid-template-rows: 1fr;
}

.nav {
    height: 98dvh;
    overflow-y: scroll;
    scrollbar-width: none;
    display: flex;
    flex-flow: column;
    gap: .2rem;
    padding: 5px;
}

.nav-container::-webkit-scrollbar {
    display: none;
}

.nav-item {
    display: flex;
    flex-flow: column;
    gap: .2rem;
}

.nav-header {
    padding: 10px 20px 10px 30px;
    cursor: pointer;
    border-radius: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.nav-header:hover {
    background-color: var(--lt);
}

.nav-header-planner {
    background-color: var(--personal-md);
    border: 3px solid var(--personal-dk);
}

.nav-header-applique {
    background-color: var(--applique-md);
    border: 3px solid var(--applique-dk);
}

.nav-header-crochet {
    background-color: var(--crochet-md);
    border: 3px solid var(--crochet-dk);
}

.nav-header-cross {
    background-color: var(--cross-md);
    border: 3px solid var(--cross-dk);
}

.nav-header-embroidery {
    background-color: var(--embroidery-md);
    border: 3px solid var(--embroidery-dk);
}

.nav-header-knit {
    background-color: var(--knit-md);
    border: 3px solid var(--knit-dk);
}

.nav-header-quilt {
    background-color: var(--quilt-md);
    border: 3px solid var(--quilt-dk);
}

.nav-header-sew {
    background-color: var(--sew-md);
    border: 3px solid var(--sew-dk);
}

.nav-header-dye {
    background-color: var(--dye-md);
    border: 3px solid var(--dye-dk);
}

.nav-header-print {
    background-color: var(--print-md);
    border: 3px solid var(--print-dk);
}


.nav-sub-header-applique {
    background-color: var(--applique-lt);
    border: 3px solid var(--applique-dk);
}

.nav-sub-header-crochet {
    background-color: var(--crochet-lt);
    border: 3px solid var(--crochet-dk);
}

.nav-sub-header-cross {
    background-color: var(--cross-lt);
    border: 3px solid var(--cross-dk);
}

.nav-sub-header-embroidery {
    background-color: var(--embroidery-lt);
    border: 3px solid var(--embroidery-dk);
}

.nav-sub-header-knit {
    background-color: var(--knit-lt);
    border: 3px solid var(--knit-dk);
}

.nav-sub-header-quilt {
    background-color: var(--quilt-lt);
    border: 3px solid var(--quilt-dk);
}

.nav-sub-header-sew {
    background-color: var(--sew-lt);
    border: 3px solid var(--sew-dk);
}

.nav-sub-header-dye {
    background-color: var(--dye-lt);
    border: 3px solid var(--dye-dk);
}

.nav-sub-header-print {
    background-color: var(--print-lt);
    border: 3px solid var(--print-dk);
}

.nav-planner li {
    border: 3px solid var(--personal-dk);
}

.nav-applique li {
    border: 3px solid var(--applique-dk);
}

.nav-crochet li {
    border: 3px solid var(--crochet-dk);
}

.nav-cross li {
    border: 3px solid var(--cross-dk);
}

.nav-embroidery li {
    border: 3px solid var(--embroidery-dk);
}

.nav-knit li {
    border: 3px solid var(--knit-dk);
}

.nav-sew li {
    border: 3px solid var(--sew-dk);
}

.nav-dye li {
    border: 3px solid var(--dye-dk);
}

.nav-print li {
    border: 3px solid var(--print-dk);
}

.nav-sub {
    display: none;
    flex-flow: column;
    gap: .2rem;
}

.nav-sub ul {
    padding: 0px;
    list-style: none;
    margin: 0;
    display: flex;
    flex-flow: column;
    gap: .2rem;
}

.nav-sub li {
    padding: 10px 20px 10px 30px;
    cursor: pointer;
    border-radius: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.nav-sub .nav-item {
    border: none;
}

.rotate {
    transform: rotate(90deg);
    transition: transform 0.2s ease;
}

.nav-star {
    transition: transform 0.2s ease;
}


.contents {
    background-color: red;
}