:root {
	--color-primary: #7d7399;
  --color-primary-dark: #5b5177;
  --font-brand: monoMMM, monospace;
  --font-default: monospace;
  --font-small: 1rem;
  --font-medium: 1.2rem;
  --font-large: 1.4rem;
}

@font-face {
	font-family: monoMMM;
	src: url(/assets/fonts/monoMMM_5.ttf);
  font-display: block;
}

body {
  position: relative;
  margin: 0px;
}

#background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  margin: 0px;
  background: #112;
  background: linear-gradient(rgba(30, 30, 50, 1), black);
}

.scroll-fade-top {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 90px;
  z-index: 99;
  background: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.scroll-fade-bottom {
  position: fixed;
  top: calc(100vh - 90px);
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 90px;
  z-index: 99;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  pointer-events: none;
}

header {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 52px;
  max-width: 500px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #333;
  box-shadow: 8px 8px var(--color-primary);
  padding: 2px 5px;
  box-sizing: border-box;
  z-index: 100;
}

header a {
  display: inline-block;
  padding: 8px 5px;
  font-family: var(--font-brand);
  font-size: 12pt;
  color: var(--color-primary);
  text-decoration: none;
  border-radius: 20px;
  transition: transform 0.1s linear;
}

header a:hover {
  transform: scale(1.2);
}

header a #home {
  width: 48px;
  margin: -10px;
  image-rendering: pixelated;
}

header a.current_page {
  background: var(--color-primary);
  color: #333;
  padding: 8px 10px;
}

h1 {
  color: var(--color-primary);
  font-family: var(--font-brand);
  font-size: 24pt;
  padding-left: 10px;
}

#wrapper {
  width: 100%;
  position: absolute;
  padding: 90px 0px;
}

#whalebot {
  position: fixed;
  bottom: 1%;
  right: 0%;
  width: 50%;
  min-width: 200px;
  max-width: 90vh;
  filter: brightness(50%);
  image-rendering: pixelated;
  pointer-events: none;
}

#whales {
  position: fixed;
  width: 50%;
  max-width: 200px;
  top: calc(50px + 5vw);
  left: 10%;
  image-rendering: pixelated;
  pointer-events: none;
}

#bubbles {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.bubble {
  top: 110%;
  width: 60px;
  height: 60px;
  border-radius: 200px;
  position: absolute;
  border: 2px solid var(--color-primary);
  opacity: 0.5;
}

.x1 {
  left: 0%;
  transform: scale(0.9);
  animation: moveBubblesY 30s linear 1s infinite, moveBubblesX 3s ease-in-out infinite alternate;
}
.x2 {
  left: 10%;
  transform: scale(0.6);
  animation: moveBubblesY 25s linear 5s infinite, moveBubblesX 5s ease-in-out infinite alternate;
}
.x3 {
  left: 20%;
  transform: scale(0.8);
  animation: moveBubblesY 35s linear 9s infinite, moveBubblesX 4s ease-in-out infinite alternate;
}
.x4 {
  left: 30%;
  transform: scale(0.3);
  animation: moveBubblesY 15s linear 2s infinite, moveBubblesX 2s ease-in-out infinite alternate;
}
.x5 {
  left: 40%;
  transform: scale(0.5);
  animation: moveBubblesY 20s linear 7s infinite, moveBubblesX 3s ease-in-out infinite alternate;
}
.x6 {
  left: 50%;
  transform: scale(0.8);
  animation: moveBubblesY 40s linear 3s infinite, moveBubblesX 2s ease-in-out infinite alternate;
}
.x7 {
  left: 60%;
  transform: scale(0.6);
  animation: moveBubblesY 38s linear 8s infinite, moveBubblesX 5s ease-in-out infinite alternate;
}
.x8 {
  left: 70%;
  transform: scale(0.3);
  animation: moveBubblesY 22s linear 6s infinite, moveBubblesX 4s ease-in-out infinite alternate;
}
.x9 {
  left: 80%;
  transform: scale(0.7);
  animation: moveBubblesY 17s linear 4s infinite, moveBubblesX 4s ease-in-out infinite alternate;
}
@keyframes moveBubblesY {
  0% {
    top: 110%;
  }
  100% {
    top: -500px;
  }
}
@keyframes moveBubblesX {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: 50px;
  }
}