@font-face {
  font-family: "Haros Baelz";
  src: url("../fonts/Baefont_normal-Regular_V1.ttf");
  font-display: swap;
}

body {
  --header-height: 4rem;
}

header {
  height: var(--header-height);
  background-color: #f02017;
  border-bottom: solid 2pt black;
  position: sticky;
  top: 0;
  z-index: 99;

  nav {
    display: flex;
    height: 100%;
    gap: 3rem;
    padding: 0 2rem;
    align-items: center;

    a {
      color: yellow;
      font-size: 2rem;
      font-weight: 800;
      font-family: "Haros Baelz", sans-serif;
      text-shadow: 2px 2px black;
      text-decoration: none;

      &.active {
        text-decoration: underline;
      }
    }

    menu {
      display: contents;

      li {
        list-style-type: none;

      }
    }
  }
}