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

:root {
  --fs-body: 1.25rem;
  /* Color variables */
  --accent-orangered: orangered;
  --color-white: #ffffff;
  --color-black: #000000;
  --container-bg: #555;
  --shadow-50: rgba(0, 0, 0, 0.5);
  --overlay-bg: rgba(0, 0, 0, 0.9);
  --accent-green: green;
}

html {
  color-scheme: dark;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: var(--fs-body);
  /* display: grid;
  min-block-size: 100dvh;
  place-content: center; */
}

/* DESKTOP MENU SYSTEM */

@media (min-width: 451px) {
  nav.navM {
    display: none;
  }

  nav.navD ul {
    --_gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
  }

  nav.navD li {
    overflow: hidden;
    position: relative;
    padding: calc(var(--_gap) / 2);
  }

  nav.navD li::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--accent-orangered);
    translate: var(--_translate, 0);
    scale: var(--_width, 0) 1;
    transition: scale 300ms var(--_scale-delay, 0ms);
    translate: 500ms var(--_translate-delay, 0ms);
  }

  nav.navD li:hover,
  nav.navD li:focus-within {
    --_width: 1;
  }

  @supports selector(:has(h1)) {
    nav.navD li:hover + li {
      --_translate: -100%;
      --_scale-delay: 0ms;
      --_translate-delay: 0ms;
    }

    nav.navD li:has(+ :hover) {
      --_translate: 100%;
      --_scale-delay: 0ms;
      --_translate-delay: 0ms;
    }
  }

  nav.navD a {
    color: inherit;
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    font-weight: 500;
    position: relative;
  }

  nav.navD a:hover,
  nav.navD a:focus-visible {
    opacity: 1;
  }
}

/* MOBILE MENU SYSTEM */

@media (max-width: 450px) {
  nav.navD {
    display: none;
  }

  .containerM {
    width: 100%;
    margin: 0 auto;
    background: var(--color-white);
    box-shadow: 0px 0px 5px 0px var(--shadow-50);
    position: relative;
    background: var(--container-bg);
    font-family: "Montserrat";
    font-size: 16px;
    line-height: 1.3em;
  }

  a {
    text-decoration: none;
    color: var(--color-white);
  }

  .Mbar {
    width: 100%;
    height: 80px;
    background: var(--color-black);
    z-index: 200;
  }

  .Mbutton {
    width: 40px;
    height: 40px;
    background: var(--color-black);
    top: 20px;
    left: 20px;
    position: absolute;
  }

  .Mbutton:hover {
    cursor: pointer;
  }

  .Mbutton:before,
  .Mbutton:after {
    content: "";
    width: 30px;
    height: 1px;
    background: var(--color-white);
    display: block;
    position: absolute;
    left: 5px;
    transition: all 0.3s ease-in-out;
  }

  .Mbutton:before {
    top: 13px;
  }

  .Mbutton:after {
    top: 27px;
  }

  .Mbutton-open:before {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .Mbutton-open:after {
    transform: rotate(135deg) translate(-5px, 5px);
  }

  .Mitems {
    position: absolute;
    background: var(--overlay-bg);
    width: 100%;
    padding: 20px 55px;
    top: 80px;
    font-size: 1.5em;
    color: var(--color-white);
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    height: auto;
    max-height: 0px;
    opacity: 0.6;
  }

  .Mitems-open {
    opacity: 1;
    max-height: 2000px;
    transition: all 0.5s ease-in-out;
  }

  .Mitems ul li {
    display: block;
    padding: 20px 15px;
    border-bottom: 1px solid var(--color-white);
    opacity: 0;
    transform: translateX(-100px);
  }

  .Mitems ul li:last-of-type {
    border-bottom: none;
  }

  .Mitems ul li:hover {
    background: var(--accent-green);
  }

  @keyframes menu-item-animation {
    0% {
      transform: translate(-300px, 0px);
      opacity: 0;
    }
    100% {
      transform: translate(0px, 0px);
      opacity: 1;
    }
  }

  .Mitems-open ul li:nth-of-type(0) {
    animation: 0.8s ease-in-out 0s forwards menu-item-animation;
  }

  .Mitems-open ul li:nth-of-type(1) {
    animation: 0.7s ease-in-out 0.1s forwards menu-item-animation;
  }

  .Mitems-open ul li:nth-of-type(2) {
    animation: 0.6s ease-in-out 0.2s forwards menu-item-animation;
  }

  .Mitems-open ul li:nth-of-type(3) {
    animation: 0.5s ease-in-out 0.3s forwards menu-item-animation;
  }

  .Mitems-open ul li:nth-of-type(4) {
    animation: 0.4s ease-in-out 0.4s forwards menu-item-animation;
  }

  .Mitems-open ul li:nth-of-type(5) {
    animation: 0.3s ease-in-out 0.5s forwards menu-item-animation;
  }
}