:root {
    box-sizing: border-box; 
    list-style: none;

    --red: #94214d;
    --gray: #9f9d89;
    --purple: #334063;
    --brown: #9b7131;
    --yellow: hsl(36, 37%, 65%);
    --paper-yellow: hsl(36, 27%, 77%);
    --white: #ffffff;
    --whitegray: hsl(223.75, 32%, 90%);
    --whitegrayer: hsl(223.75, 32%, 85%);
    --gallery-paper: hsl(190, 10%, 82%);

}

@font-face {
    font-family: "chubbo";
    src: url("fonts/Chubbo-Variable.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "zodiak";
    src: url("fonts/Zodiak-Bold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "songti";
    src: url("fonts/SourceHanSerifSC-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "noto-serif";
    src: url("fonts/NotoSerifSC-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}


*, *::before, *::after {
    box-sizing: inherit;
    list-style: inherit;
    text-decoration: none;

    padding: 0;
    margin: 0;
    
    font-family: noto-serif;
}

a {
    color: var(--white);
}

body {
    background-color: var(--red);
    color: white;
    overflow: hidden;
}

.background {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}

.nav-bar {   
    display: flex;
    background-color: var(--purple);
    height: calc(var(--grid-h) * 2);
}

@media (min-width: 900px) {
    .nav-bar {
        height: calc(var(--grid-h) * 1);
    }
}

.nav-bar > a {
    flex: 1;
    color: var(--whitegray);
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition-property: all;
    transition-duration: 0.5s;
}

.nav-bar > a:hover {
    background-color: var(--white);
    color: var(--purple);
    cursor: pointer;
}

.nav-bar > a > svg {
    height: var(--grid-h);
    width: var(--grid-l);
    display: block;
}
.nav-bar > a > p {
    position: relative;
    top: -0.1rem;
    font-size: calc(var(--grid-h) / 4);
}


.decoration {
    height: fit-content;
    display: flex;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #555 transparent;
}

/* Chromium / Edge / Safari */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 6px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #444;
}

*::-webkit-scrollbar-thumb:active {
    background-color: #333;
}