html, body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
	background-image: url("../Main/Auuugh.net BG.png");
	background-size: 20%;
	animation: scrollBackground 15s linear infinite;
}

@keyframes scrollBackground {
    0% {
        background-position: 0 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}

.video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
  cursor: pointer;
}

#intro-video {
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  object-fit: contain;
}

.map-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.corkboard-img {
  width: 100%;
  height: 100vh;
  object-fit: contain;
  position: relative;
}

.hitbox {
  position: absolute;
  display: block;
  
  /*
  border: 2px dashed #00ffcc;
  background: rgba(0, 255, 204, 0.2);
  box-shadow: 0 0 10px rgba(0, 255, 204, 0.5);
  */
}

.modrinth { top: 60%; left: 32%; width: 15%; height: 35%; }
.forge    { top: 75%; left: 50%; width: 8%; height: 15%; }
.discord  { top: 75%; left: 70%; width: 10%; height: 15%; }
.yt       { top: 55%; left: 58%; width: 13%; height: 18%; }
.twitch   { top: 50%; left: 73%; width: 10%; height: 18%; }

.auuugh-smp { top: 12%; left: 20%; width: 35%; height: 15%; }
.cindoria   { top: 25%; left: 48%; width: 35%; height: 20%; }
.yippee-smp { top: 45%; left: 18%; width: 36%; height: 15%; }

.map-container img {
  width: 100%;
  height: auto;
  max-height: 100vh;
  object-fit: contain;
}

#video {
  width: 90%;
  height: auto;
  object-fit: contain;
}