* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: #EFE8CF;
    font-family: "Xanh Mono", monospace;
    font-weight: 400;
    font-style: normal;
    font-size: 1.125rem;
    line-height: 1.65rem;
    margin-top: 5rem;
}

main {
    padding: 0 2rem;
}

:root {
    --olive: #EFE8CF;
    --olive-s1: #E2D5A7;
}

::selection {
    background-color: greenyellow;
    color: #000;
}

a {
    text-decoration: none;
    color: black;
}

a:hover {
    opacity: .7;
}

.xanh-mono-regular {
  font-family: "Xanh Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.xanh-mono-regular-italic {
  font-family: "Xanh Mono", monospace;
  font-weight: 400;
  font-style: italic;
}

.rock-3d-regular {
  font-family: "Rock 3D", system-ui;
  font-weight: 400;
  font-style: normal;
}

h1 {
    font-family: "Xanh Mono", system-ui;
    font-weight: 400;
    font-style: normal;
}

h2 {
    color: red;
    font-family: 'VT323', monospace;
    font-weight: normal;
    font-size: 5rem;
    line-height: 110%;
    margin: 0 0 1.5rem 0;
    letter-spacing: -.1rem;
}


.expanded-menu h2 {
    font-family: "Rock 3D", system-ui;
    margin: 0;
    font-weight: 400;
}

.expanded-menu p, .expanded-menu ul {
    margin: 1rem 0;
    font-style: italic;
}

.expanded-menu {
    background-color: rgb(255,255,255,.8);
    padding: 2rem;
    border: 1px solid black;
    width: 394px;
    position: fixed;
    top: 2rem;
    right: 2rem;
    display: none;
    z-index: 101;
}

.expanded-menu a {
    text-decoration: underline;
}

.expanded-menu a:hover {
    text-decoration: none;
}

.expanded-menu li a {
    text-decoration: none;
    font-style: normal;
}

.expanded-menu li a:hover {
    font-style: italic;
    background-color: greenyellow;

}

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 2rem;
    position: fixed;
    top: 1rem;
    z-index: 100;
    color: white;
    mix-blend-mode: difference;
}

.bottom-nav {
    position: fixed;
    bottom: 3rem;
    right: 2rem;
    z-index: 100;
    mix-blend-mode: difference;
}

.bottom-nav a {
    color: white;
    text-transform: uppercase;
    border: 1px solid white;
    padding: 1rem 2rem;
    border-radius: 50%;
}

.bottom-nav:hover a {
    border: 1px dashed #10E8CF;
    color: #10E8CF;
}

.site-title {
    font-family: "UnifrakturMaguntia", cursive;
    font-weight: 400;
    font-style: normal;
    color: white;
    margin: 0;
}

.site-title-mobile {
    font-family: "UnifrakturMaguntia", cursive;
    font-weight: 400;
    font-style: normal;
    color: white;
    margin: 0;
    display: none;
}

.nav-right {
    display: flex;
    gap: 6rem;
}

.nav-right a {
    color: white;
    mix-blend-mode: difference;
    text-transform: uppercase;
    font-size: 1.25rem;
}

.nav-right a:hover {
    opacity: 1;
    color: #10E8CF;
    border-bottom: 1px dashed #10E8CF;
}


.collapse-menu {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.expand-menu {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: white;
}

.collapse-menu:hover {
    opacity: 0.7;
}

.arrow-list {
    list-style: none;
    padding-left: 0;
}

.arrow-list li::before {
    content: '→'; /* Unicode for a black rightwards arrowhead */
    margin-right: 0.5em; /* Space between the arrow and the text */
}

img {
    max-width: 100%;
}

/* RESPONSIVES */

@media screen and (max-width: 768px) {
    .nav-right {
        gap: 2rem;
    }

    .nav-right a {
        font-size: 1rem;
    }

    .site-title {
        font-size: 1.5rem;
    }

    .main-nav {
        padding: 0 1rem;
    }

    .bottom-nav a {
        padding: .75rem 1.5rem;
        font-size: 1rem;
    }
}

@media screen and (max-width: 480px) {
    .site-title {
        display: none;
    }

    .site-title-mobile {
        display: block;
    }
}