html, body {
  margin: 0;
  padding: 0;
  background-color: rgb(138, 0, 251);
}

canvas {
  display: block;
}

.loadingclass{
  font-size: 3rem;
  display: flex;
  color: rgb(253, 131, 223);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 1rem;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  font-weight: bold;

}

.topimg{
  padding-bottom: 1em;
}

.loadchild{
  display: flex;
  padding-bottom: 1em;
  text-transform: uppercase;
}

.loadingclass img{
  display: flex;
  animation: shake 0.5s; 
  animation-iteration-count: infinite; 
  max-width: 60%;
  height: auto; 
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* This is for the intro page online */

#intro .container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 60vw;
    margin: 0 auto;
    gap: 2rem;
    font-family: sans-serif;
    font-size: 1.3rem;
    line-height: 1.4;
}

#intro .aligner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #00dbff;
}

#intro h1{
  font-family: "puffin-arcade-chrome", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 7rem;
  margin: 3rem 0;
  line-height: 0.7;
  color: #fffb00;
}

#intro .small{
  font-size: 1.1rem;
}
.myButton {
	background-color:#ff5bb0;
	border-radius:28px;
	border:1px solid #ee1eb5;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #c70067;
}
.myButton:hover {
	background-color:#ef027d;
}
.myButton:active {
	position:relative;
	top:1px;
}