:root {
  --lavender: #cdb4db;
  --light-pink: #ffc8dd;
  --pink: #ffafcc;
  --light-blue: #bde0fe;
  --blue: #a2d2ff;
  --darker-pink: #ff75a7;
  --darkerer-pink: #ff4287;
}

body {
  background-image: url(assets/images/tiledbgpink.webp);
  background-size: cover;
  background-position: center;
  height: 100lvh;
  width: 100lvw;
  overflow: auto;
  font-family: "DotGothic16", sans-serif;

  main {
    padding-top: 3.5rem;
  }
}

/* Navbar */
navbar {
  font-family: "VT323", monospace;
  position: fixed;
  top: 0;
  left: 0;
  width: 100svw;
  height: 3.5rem;
  background-color: #c0c0c0;
  border-bottom: 2px solid #000;

  navbar-content {
    display: flex;
    gap: 1rem;

    label {
      cursor: pointer;
      padding: 4px 8px;
      border: 2px solid;
      border-color: #ffffff #808080 #808080 #ffffff;
      background: #c0c0c0;

      &:has(input:checked) {
        background: #ff75a7;
        color: #ffffff;
        border-color: #808080 #ffffff #ffffff #808080;
      }

      &:active {
        border-color: #808080 #ffffff #ffffff #808080;
        padding: 5px 7px 3px 9px;
      }

      &:hover {
        background: #0004;
      }
    }

    input {
      opacity: 0;
      position: absolute;
      pointer-events: none;
    }

    & a {
      text-decoration: none;
      color: inherit;
    }
  }


}