body,html {
  background-color: rgb(249, 240, 204);
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}
canvas {
  width: 100vw;
  height: 100vw;
  max-height: 100vh;
  max-width: 100vh;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
}

/* implemented from this -> https://github.com/arnofaure/p5-loading-animation/  because I do not know how to html and css */
.loading-anim {
  position: relative;
  top: 50%;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
  z-index: 2;
}
.anim-components {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: auto;
  border-radius: 100%;
  animation-name: anim;
  animation-duration: 1.7s;
  animation-timing-function: cubic-bezier(.43, 0, .57, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

#comp1 {
  background-color: #fb0197;
}
#comp2 {
  background-color: #04c7b4;
  animation-delay: 100ms;
}
#comp3 {
  background-color: #31c93c;
  animation-delay: 200ms;
}
#comp4 {
  background-color: #fdbd3b;
  animation-delay: 300ms;
}
#comp5 {
  background-color: #fb0024;
  animation-delay: 400ms;
}

@keyframes anim {
  0% {transform: translateY(-50%) scale(0.3);
      opacity: 0.5;}
  50% {transform: translateY(50%) scale(1.3);
      opacity: 1;}
  100% {transform: translateY(-50%) scale(0.3);
      opacity: 0.5;}
}

.display-none {
display: none;
}