/* =========================
   FONTS
========================= */

@font-face {
  font-family: "Minecraftia";
  src: url("minecraft.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Roboto Mono Thin";
  src: url("robotomono.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Outfit";
  src: url("outfit.woff2") format("woff2");
  font-display: swap;
}

/* =========================
   GLOBAL / BASE
========================= */

#ca {
  padding-top: 20px;
}

#bbox {
  display: block;
}

.warnformobies {
  display: flex;
  justify-content: center;
}

/* =========================
   HEADER
========================= */

/* =========================
   HEADER
========================= */
		.mmenu {
			background-color: #1e1e1e;
			color: white;

			border: 1px solid white;
			border-radius: 5px;

			padding: 8px 16px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.mmenu:focus {
			color: red;
		}

		.menul {
			display: none;

			position: absolute;

			background-color: black;

			min-width: 6vw;

			padding: 5px 7px 5px 7px;

			border: 1px solid white;
			border-radius: 5px;

			z-index: 999;
			
			justify-self: right;
			
		}

		.menu:focus-within .menul {
			display: grid;
		}
		
		#mbtn {
			background-color: black;
			color: white;
			border: 1px solid white;
			border-radius: 5px;
			margin: 1.5px 0px 1.5px 0px;
			transition: 0.2s;
			transition-timing-function: ease-in;
			cursor: pointer;
		}
		
		#mbtn:hover {
			background-color: white;
			color: black;
		}

.vaheader {
  background-color: rgba(59, 59, 59, 0.9);

  position: sticky;
  top: 0;
  z-index: 1000;

  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;

  padding: 10px 10px;

  border-radius: 0 0 5px 5px;
}

.vaheader h1 {
  margin: 0;

  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-size: 28px;

  color: rgb(227, 226, 225);
  text-shadow: 0 0 16px white;

  cursor: pointer;
}

/* =========================
   BUTTONS
========================= */

.hbtns {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* =========================
   SMALL PHONES
   0px - 320px
========================= */
@media (max-width: 320px) {
  .vaheader h1 {
    font-size: 20px;
  }

  .hbtn {
    height: 25px;
  }
}

  .mmenu {
    height: 25px;
  }
}

/* =========================
   PHONES
   321px - 425px
========================= */

@media (min-width: 321px) and (max-width: 425px) {
  .vaheader h1 {
    font-size: 25px;
  }

  .hbtn {
    height: 30px;
  }
}

  .mmenu {
    height: 30px;
  }
}

/* =========================
   TABLET / DESKTOP
   426px+
========================= */

@media (min-width: 426px) {
  .vaheader h1 {
    font-size: 25px;
  }

  .hbtn {
    height: 30px;
  }
}

  .mmenu {
    height: 30px;
  }
}
/* =========================
   4K / ULTRAWIDE
   2560px+
   padding: top right bottom left
========================= */

@media (min-width: 2560px) {
  .vaheader h1 {
    font-size: 50px;
    text-shadow: 0 0 32px white;
  }

  .hbtn {
    padding: 30px;

    font-size: 30px;

    border-radius: 15px;
  }
}