@font-face {
  font-family: pricedown;
  src: url("Pricedown\ Bl.otf");
}

body {
  background-image: url("spongebob-gangsta.png");
}
.notice {
  /* The cookie notice */
  /* position: sticky;
	top: 1em; */
  /* SORRY FOR UNSTICKING I CANT SEE SHIT */
  z-index: 3;
  padding: 0.3em;
  background-color: #ff8888;
  color: #330000; /* Now compliant with WCAG (Wicked Cool Accessibility Guidelines) colour contrast accessibility guidelines! */
  border: 0.7em inset red;
}
.notice a {
  color: #000055;
}
.notice h2 {
  font-family: pricedown, serif;
} /* you can add the gta font anywhere it's part of the site now */

/* the plight animation of the woke animal */
@keyframes --woke-spin {
  from {
    transform: rotate(0deg);
  } /* aka 0% */
  to {
    transform: rotate(360deg);
  } /* aka 100% */
}
.rainbow-text {
  background: linear-gradient(
    90deg,
    rgba(253, 29, 29, 1) 0%,
    rgba(204, 135, 39, 1) 33%,
    rgba(45, 168, 76, 1) 67%,
    rgba(65, 59, 255, 1) 100%
  );
  color: white;
}

#musicplayer {
  display: inline-block;
  background-color: rebeccapurple;
  border: 0.3em solid purple;
  text-align: center;
}

#musicplayerheader {
  display: inline-block;
  padding: 0.5em;
  background-color: #77aaff;
  color: #000;
}

img.portal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  scale: 0.5;
}

.scrdown {
  transform: translate(30%, -1200%);
  scale: 0.5;
}

/* jumpy fog tweaking */
.fog {
  animation: fogtime 3s infinite;
}

/* i dont really know man im freestyling this*/
@keyframes fogtime {
  0% {
    transform: translate(20%, 50%);
  }
  20% {
    transform: translate(100%, -80%);
  }
  50% {
    transform: translate(40%, 30%);
  }
  80% {
    transform: translate(-40%, -80%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}

/* portal to ratzone */
.ratzone {
  position: relative;
  left: 20%;
}