html {
  margin: 0px;
  padding: 0px;
}

.navbar {
  position: relative;
  z-index: 2;
  -webkit-animation: backchn 1s linear infinite forwards;
          animation: backchn 1s linear infinite forwards;
}

.navbar .backcont {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  -webkit-clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%);
  background-color: #34495e;
}

@-webkit-keyframes backchn {
  0% {
    background-color: #ffc107;
  }
  25% {
    background-color: #a41313;
  }
  50% {
    background-color: #38eb0c;
  }
  75% {
    background-color: #e74c3c;
  }
  100% {
    background-color: #2ecc71;
  }
}

@keyframes backchn {
  0% {
    background-color: #ffc107;
  }
  25% {
    background-color: #a41313;
  }
  50% {
    background-color: #38eb0c;
  }
  75% {
    background-color: #e74c3c;
  }
  100% {
    background-color: #2ecc71;
  }
}

#hd1, .grow {
  -webkit-animation: rk1 1s linear  infinite forwards;
          animation: rk1 1s linear  infinite forwards;
}

#hd2, .grow1 {
  -webkit-animation: rk2 1s linear  infinite forwards;
          animation: rk2 1s linear  infinite forwards;
}

#hd3 {
  -webkit-animation: rk3 1s linear  infinite forwards;
          animation: rk3 1s linear  infinite forwards;
}

#hd4 {
  -webkit-animation: rk4 1s linear  infinite forwards;
          animation: rk4 1s linear  infinite forwards;
}

@-webkit-keyframes rk1 {
  0% {
    color: #e74c3c;
  }
  33% {
    color: #f1c40f;
  }
  66% {
    color: #34495e;
  }
  99% {
    color: #2ecc71;
  }
}

@keyframes rk1 {
  0% {
    color: #e74c3c;
  }
  33% {
    color: #f1c40f;
  }
  66% {
    color: #34495e;
  }
  99% {
    color: #2ecc71;
  }
}

@-webkit-keyframes rk2 {
  0% {
    color: #2ecc71;
  }
  33% {
    color: #e74c3c;
  }
  66% {
    color: #f1c40f;
  }
  99% {
    color: #34495e;
  }
}

@keyframes rk2 {
  0% {
    color: #2ecc71;
  }
  33% {
    color: #e74c3c;
  }
  66% {
    color: #f1c40f;
  }
  99% {
    color: #34495e;
  }
}

@-webkit-keyframes rk3 {
  0% {
    color: #34495e;
  }
  33% {
    color: #2ecc71;
  }
  66% {
    color: #e74c3c;
  }
  99% {
    color: #f1c40f;
  }
}

@keyframes rk3 {
  0% {
    color: #34495e;
  }
  33% {
    color: #2ecc71;
  }
  66% {
    color: #e74c3c;
  }
  99% {
    color: #f1c40f;
  }
}

@-webkit-keyframes rk4 {
  0% {
    color: #f1c40f;
  }
  33% {
    color: #34495e;
  }
  66% {
    color: #2ecc71;
  }
  99% {
    color: #e74c3c;
  }
}

@keyframes rk4 {
  0% {
    color: #f1c40f;
  }
  33% {
    color: #34495e;
  }
  66% {
    color: #2ecc71;
  }
  99% {
    color: #e74c3c;
  }
}

#front {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(129, 243, 129, 0.815)), to(rgba(255, 108, 199, 0.739))), url(img2.jpg);
  background: linear-gradient(to top, rgba(129, 243, 129, 0.815), rgba(255, 108, 199, 0.739)), url(img2.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

.ico {
  display: inline-block;
  margin: 10px 20px;
  text-decoration: none;
  padding: 4px 5px;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  color: black;
  border-radius: 7px;
}

.ico .fa {
  font-size: 25px;
}

.ico:hover {
  background-color: black;
  color: #ffc107;
}

footer {
  background-color: #ffc107;
}

.outer, .outer1, .outer2, .outer3 {
  position: relative;
  background-color: #f1c40f;
  z-index: 2;
}

.instable, .instable1, .instable2, .instable3 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #34495e;
  z-index: -1;
}

.instable1 {
  -webkit-clip-path: polygon(0 4%, 100% 63%, 100% 100%, 0% 100%);
          clip-path: polygon(0 4%, 100% 63%, 100% 100%, 0% 100%);
}

.instable2 {
  -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%, 0% 100%);
          clip-path: polygon(100% 0, 0 0, 100% 100%, 0% 100%);
}

.instable3 {
  -webkit-clip-path: polygon(0 62%, 100% 4%, 100% 100%, 0% 100%);
          clip-path: polygon(0 62%, 100% 4%, 100% 100%, 0% 100%);
}

.mybtn {
  -webkit-animation: backchn 1s linear infinite forwards;
          animation: backchn 1s linear infinite forwards;
}

#openback {
  background: -webkit-gradient(linear, left bottom, left top, from(#e44a436b), to(#0a0d10a1)), url(img4.jpg);
  background: linear-gradient(to top, #e44a436b, #0a0d10a1), url(img4.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}
/*# sourceMappingURL=main.css.map */