/* GLOBAL */

:root {
    --body-color: #f0f0f0f3;
    --background-color: #121212;
    --scrollbar-color: #1A6353;
}

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

html { 
    background-color: var(--background-color);
    scrollbar-gutter: stable;
    scrollbar-color: var(--scrollbar-color) var(--background-color); 
}

@font-face {
    font-family: "Equestria Neue";
    src: url("/assets/fonts/Equestria\ Neue.woff2") format("woff2");
    font-style: normal;
}

@font-face {
    font-family: "Georgia";
    src: url("/assets/fonts/Georgia.woff2") format("woff2");
    font-style: normal;
}

body {
    background-color: var(--background-color);;
    color: var(--body-color);
    font-family: "Equestria Neue", 'Bodoni MT', 'Georgia', 'Times New Roman', serif;
    min-height: 100vh;
}

a {
    color: inherit;
    text-decoration: underline;
}

.greentext { 
    color: #789922; 
    white-space: inherit;
}

/* HEADER */

.site-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: min(100% - 8rem, 1621px);
    margin-inline: auto;
    padding-block: 2.6rem;
}

.logo img {
    display: block;
    height: 100px;
    user-select: none;
}

/* NAV */

.main-nav > ul {
    display: flex;
    list-style: none;
    gap: 3.62rem;
}

.main-nav > ul > li {
    position: relative;
}

.main-nav p { font-size: 1.126rem; }

.main-nav p,
.main-nav a {
    color: inherit;
    text-decoration: none;
    text-transform: lowercase;
    letter-spacing: 0.162em;
    user-select: none;
}

.submenu {
    display: none;
    position: absolute;
    flex-direction: column;
    white-space: nowrap;
    gap: 0.621rem;
    padding-top: 1.26rem;
}

.main-nav > ul > li:hover .submenu { display: flex; }

.nav-toggle { display: none; }

/* SOCIAL BAR */

.social-bar {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding-bottom: 2rem;
}

.social-bar img {
    height: 20px;
    width: 20px;
}

/* MOBILE */

@media (max-width: 768px) {
  .site-header {
    width: min(100% - 2.5rem, 1621px);
    padding-block: 1.2rem;
  }

  .logo img { height: 5.62rem; }

  .nav-toggle {
    margin-left: 56.21%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 1.621rem;
    height: 1.621rem;
    background: none;
    border: none;
    cursor: pointer;
  }

  .nav-toggle span {
    display: block;
    height: 2px;
    background: var(--body-color);
    transition: transform 0.216s ease, opacity 0.216s ease;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .main-nav > ul {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    gap: 0;
    background: var(--background-color);
    border-radius: 6px;
    padding: 1rem 1.621rem 2rem;
    z-index: 621;
  }

  .main-nav.open > ul { display: flex; }

  .main-nav > ul > li { width: 100%; }

  .main-nav p {
    display: flex;
    text-align: right;
    padding: 1rem 0;
    font-size: 0.96rem;
  }

  .submenu {
    position: static;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 0 0 0.621rem 1.126rem;
  }

  .main-nav > ul > li.open .submenu { display: flex; }

  .submenu a { padding: 0.621rem 0; font-size: 0.76rem; }
}

@media (max-width: 768px) {
    .logo img { height: 4.86rem; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .logo img { height: 5.62rem; }
  .main-nav p { font-size: 0.96rem; }
  .submenu > a { font-size: 0.86rem; }
}