css.css

body {
  background: rgb(2, 0, 36);
  overflow: hidden;
}
body.hidden > *:not(#nya) {
  display: none;
}
.carmelo {
  background-color: #00b894;
  border: 8px solid #117b63;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition: transform 2s;  
}
#nya {
  display: none;
  padding: 20px;
  background-color: lightblue;
  border: 1px solid #000;
  margin-top: 10px;
  font-family: 'Terminal';
}
.carmelo:hover {
  transition: .1s;
  transform: translateY(-1px);
  transform: perspective(200px) rotateX(40deg);
}
.rediblesky {
  background-color: #fd6a6b;
  border: 8px solid #e15758;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition: transform 2s;  
}
.rediblesky:hover {
  transition: .1s;
  transform: translateY(-1px);
  transform: perspective(200px) rotateX(40deg);
}
.orcapet {
  background-color: #afafaf;
  border: 8px solid #76767f;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition: transform 2s;  
}
.orcapet:hover {
  transition: .1s;
  transform: translateY(-1px);
  transform: perspective(200px) rotateX(40deg);
}
.eryquicc {
  background-color: #117b63;
  border: 8px solid #0b4e3f;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition: transform 2s;
}
.eryquicc:hover {
  transition: .1s;
  transform: translateY(-1px);
  transform: perspective(200px) rotateX(40deg);
}
.steeldev{
  background-color: blue;
  border: 8px solid darkblue;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition: transform 2s;
}
.steeldev:hover{
  transition: .1s;
  transform: translateY(-10px);
  transform: perspective(200px) rotateX(40deg);
}
.polishboiyt{
  background-color: #007cff;
  border: 8px solid #0036ff;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition: transform 2s;
}
.polishboiyt:hover{
  transition: .1s;
  transform: translateY(-10px);
  transform: perspective(200px) rotateX(40deg);
}
h1 {
  color: white;
  font-family: 'Roboto', sans-serif;
}
h2 {
  color: white;
  font-family: 'Roboto', sans-serif;
}

bold {
  color: white;
  font-family: 'Roboto', sans-serif;
}

.square {
  background: rgb(9,9,121);
  background: linear-gradient(90deg, rgba(9,9,121,1) 35%, rgba(2,0,36,1) 51%, rgba(0,212,255,1) 100%);
  width: 75vw;
  height: 18vw;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

footer {
  color: white;
  font-family: 'Roboto', sans-serif;
}

.toaster {
  position: absolute;
  width: 64px;
  height: 64px;
  background-image: url("img/toaster-sprite.gif");
}

.toast {
  position: absolute;
  width: 64px;
  height: 64px;
  background-image: url("img/toast1.gif");
}

.t1 {
  -webkit-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
  -moz-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
  -ms-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
  -o-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
  animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
}

.t2 {
  -webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
  -moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
  -ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
  -o-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
  animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
}

.t3 {
  -webkit-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
  -moz-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
  -ms-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
  -o-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
  animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
}

.t4 {
  -webkit-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
  -moz-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
  -ms-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
  -o-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
  animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
}

.t5 {
  -webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
  -moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
  -ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
  -o-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
  animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
}

.t6 {
  -webkit-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
  -moz-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
  -ms-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
  -o-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
  animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
}

.t7 {
  -webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
  -moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
  -ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
  -o-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
  animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
}

.t8 {
  -webkit-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
  -moz-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
  -ms-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
  -o-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
  animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
}

.t9 {
  -webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
  -moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
  -ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
  -o-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
  animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
}

.tst1 {
  -webkit-animation: fly 10s linear infinite;
  -moz-animation: fly 10s linear infinite;
  -ms-animation: fly 10s linear infinite;
  -o-animation: fly 10s linear infinite;
  animation: fly 10s linear infinite;
}

.tst2 {
  -webkit-animation: fly 16s linear infinite;
  -moz-animation: fly 16s linear infinite;
  -ms-animation: fly 16s linear infinite;
  -o-animation: fly 16s linear infinite;
  animation: fly 16s linear infinite;
}

.tst3 {
  -webkit-animation: fly 24s linear infinite;
  -moz-animation: fly 24s linear infinite;
  -ms-animation: fly 24s linear infinite;
  -o-animation: fly 24s linear infinite;
  animation: fly 24s linear infinite;
}

.tst4 {
  -webkit-animation: fly 24s 12s linear infinite;
  -moz-animation: fly 24s 12s linear infinite;
  -ms-animation: fly 24s 12s linear infinite;
  -o-animation: fly 24s 12s linear infinite;
  animation: fly 24s 12s linear infinite;
}

.p6 {
  right: -2%;
  top: -10%;
}

.p7 {
  right: 10%;
  top: -12%;
}

.p8 {
  right: 20%;
  top: -18%;
}

.p9 {
  right: 30%;
  top: -13%;
}

.p10 {
  right: 40%;
  top: -17%;
}

.p11 {
  right: 50%;
  top: -11%;
}

.p12 {
  right: 60%;
  top: -20%;
}

/* Right side, from top to bottom */
.p13 {
  right: -10%;
  top: 10%;
}

.p14 {
  right: -13%;
  top: 20%;
}

.p15 {
  right: -17%;
  top: 30%;
}

.p16 {
  right: -15%;
  top: 50%;
}

.p17 {
  right: -20%;
  top: 70%;
}

/* Batch 2 (-20% to -40%) */
/* Top edge, from right to left */
.p18 {
  right: 0%;
  top: -26%;
}

.p19 {
  right: 10%;
  top: -20%;
}

.p20 {
  right: 20%;
  top: -36%;
}

.p21 {
  right: 30%;
  top: -24%;
}

.p22 {
  right: 40%;
  top: -33%;
}

.p23 {
  right: 60%;
  top: -40%;
}

/* Right side, from top to bottom */
.p24 {
  right: -26%;
  top: 10%;
}

.p25 {
  right: -36%;
  top: 30%;
}

.p26 {
  right: -29%;
  top: 50%;
}

/* Batch 3 (-40% to -60%)*/
/* Top edge, from right to left */
.p27 {
  right: 0;
  top: -46%;
}

.p28 {
  right: 10%;
  top: -56%;
}

.p29 {
  right: 20%;
  top: -49%;
}

.p30 {
  right: 30%;
  top: -60%;
}

/* Right side, from top to bottom */
.p31 {
  right: -46%;
  top: 10%;
}

.p32 {
  right: -56%;
  top: 20%;
}

.p33 {
  right: -49%;
  top: 30%;
}

/* Flapping animation */
@-webkit-keyframes flap {
  from {
    background-position: 0px;
  }

  to {
    background-position: -256px;
  }
}

@-moz-keyframes flap {
  from {
    background-position: 0px;
  }

  to {
    background-position: -256px;
  }
}

@-o-keyframes flap {
  from {
    background-position: 0px;
  }

  to {
    background-position: -256px;
  }
}

@keyframes flap {
  from {
    background-position: 0px;
  }

  to {
    background-position: -256px;
  }
}

/* Gliding animation using translate */
/* Moving 1600px, to accomodate for large screens */
@-webkit-keyframes fly {
  from {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  to {
    -webkit-transform: translate(-1600px, 1600px);
    -moz-transform: translate(-1600px, 1600px);
    -o-transform: translate(-1600px, 1600px);
    -ms-transform: translate(-1600px, 1600px);
    transform: translate(-1600px, 1600px);
  }
}

@-moz-keyframes fly {
  from {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  to {
    -webkit-transform: translate(-1600px, 1600px);
    -moz-transform: translate(-1600px, 1600px);
    -o-transform: translate(-1600px, 1600px);
    -ms-transform: translate(-1600px, 1600px);
    transform: translate(-1600px, 1600px);
  }
}

@-o-keyframes fly {
  from {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  to {
    -webkit-transform: translate(-1600px, 1600px);
    -moz-transform: translate(-1600px, 1600px);
    -o-transform: translate(-1600px, 1600px);
    -ms-transform: translate(-1600px, 1600px);
    transform: translate(-1600px, 1600px);
  }
}

@keyframes fly {
  from {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  to {
    -webkit-transform: translate(-1600px, 1600px);
    -moz-transform: translate(-1600px, 1600px);
    -o-transform: translate(-1600px, 1600px);
    -ms-transform: translate(-1600px, 1600px);
    transform: translate(-1600px, 1600px);
  }
}

.typewriter h3 {
  font-family: 'Roboto', sans-serif;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .15em;
  color: white;
  animation:
    typing 3.5s steps(40, end);
}

.button {
  background-color: darkblue;
  border: 8px solid blue;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition: transform 250ms;
}

.button:hover {
  transition: .5s;
  transform: translateY(-1px);
  transform: perspective(200px) rotateX(40deg);
}

@keyframes typing {
  from {
    width: 0
  }

  to {
    width: 100%
  }
}

.wrapper {
  position: absolute;
  right: 0;
}