body {
  margin: 0;

  background-position: 0px 0px,
  16px 16px;
  background-size: 32px 32px;
  background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),
  linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
  font-family: "com";
}

#root {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#canvas {
  width: 100%;
  height: 100%;
}

#loading {
    position: absolute;
    z-index: -1;
    font-family: 'Segoe UI', Roboto, Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2em;
    color: gray;
}

p {
  color: white;
  font-family: "com";
  text-indent:50px;
}

.scaredy span {
    display: inline-block;
}

.scaredy span:nth-child(1) {
    animation: shake 0.5s infinite;
}
.scaredy span:nth-child(2) {
    animation: shake 0.5s infinite;
    animation-delay: 0.2s
}
.scaredy span:nth-child(3) {
    animation: shake 0.5s infinite;
    animation-delay: 0.4s
}
.scaredy span:nth-child(4) {
    animation: shake 0.5s infinite;
    animation-delay: 0.6s
}
.scaredy span:nth-child(5) {
    animation: shake 0.5s infinite;
    animation-delay: 0.8s
}
.scaredy span:nth-child(6) {
    animation: shake 0.5s infinite;
    animation-delay: 1s
}
.scaredy span:nth-child(7) {
    animation: shake 0.5s infinite;
    animation-delay: 1.2s
}
.scaredy span:nth-child(8) {
    animation: shake 0.5s infinite;
    animation-delay: 1.4s
}
.scaredy span:nth-child(9) {
    animation: shake 0.5s infinite;
    animation-delay: 1.6s
}
.scaredy span:nth-child(10) {
    animation: shake 0.5s infinite;
    animation-delay: 1.8s
}
.scaredy span:nth-child(11) {
    animation: shake 0.5s infinite;
    animation-delay: 2s
}

span {
  text-indent:0px;
}

.suspense {
  margin-top:100px;
  text-indent:0px;
}

.suspense2 {
  margin-bottom:100px;
  text-indent:0px;
}

.suspensely {
  transform: scale(-1, -1);
  -moz-transform: scale(-1, -1);
  -webkit-transform: scale(-1, -1);
  -o-transform: scale(-1, -1);
  -ms-transform: scale(-1, -1);
  margin-top:100px;
  text-indent:0px;
}

.friendly {
  background-color: black;
}

.insideme {
  background-image: linear-gradient(to right, yellow, pink);
  background-clip: text;
  color: transparent;
}

.white {
  color: white;
}

@font-face {
  font-family: "digital";
  src: url("digital.ttf");
}

.archive {
 color: #fd43ff;
 font-family: "archive";
}

@font-face {
  font-family: "archive";
  src: url("archive.ttf");
}

@font-face {
  font-family: "com";
  src: url("com.ttf");
}

@font-face {
  font-family: "papyrus";
  src: url("papyrus.ttf");
}

.text {
  background-color: transparent;
  width: 1400px;
  padding: 10px;
  margin: 10px;
  margin: auto;
}

div {
  background-color: transparent;
}

.shake:hover {
    /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

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

@keyframes hop {
  0% { transform: translate(0px, -5px); }
  5% { transform: translate(0px, -10px); }
  10% { transform: translate(0px, -13px); }
  20% { transform: translate(0px, -15px); }
  30% { transform: translate(0px, -17px); }
  40% { transform: translate(0px, -19px); }
  50% { transform: translate(0px, -20px); }
  60% { transform: translate(0px, 25px); }
  70% { transform: translate(0px, -10px); }
  80% { transform: translate(0px, 10px); }
  90% { transform: translate(0px, -5px); }
  100% { transform: translate(0px, 5px); }
}

.car:hover {
  animation: hop 1s;
}

.hell {
  background-image: url(6.png);  
  width:354px;
  height:163px;
  color: transparent;
  padding: 0;
  border: none;
  background-color: transparent;
  background-size: 100%;
}

.hell:hover {
  background-image: url(hell.gif);  
  width:354px;
  height:163px;
  color: transparent;
  padding: 0;
  border: none;
  background-color: transparent;
  background-size: 100%;
}

rainbow {
  background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: coloranim 3s ease-in-out infinite;
  background-size: 400% 100%;
}

.wavey span {
    display: inline-block;
    animation: wave 2s ease-in-out infinite;
}

.wavey span:nth-child(4) {
    animation-delay: 0s;
    color: yellow;
    background-color: black;
}

.wavey span:nth-child(5) {
    animation-delay: 0.2s;
    color: yellow;
    background-color: black;
}

.wavey span:nth-child(6) {
    animation-delay: 0.4s;
    color: pink;
    background-color: black;
}

.wavey span:nth-child(7) {
    animation-delay: 0.6s;
    color: pink;
    background-color: black;
}

.wavey span:nth-child(9) {
    animation: shake 0.5s infinite;
    color: pink;
}

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

    50% {
        background-position: 100% 0;
    }
}

@keyframes wave {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}