@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap"); /*main font*/

h2 {
  /*h2 size title settings*/
  color      : #fff;
  font-weight: 400;
  text-align : center;
  font-size  : 40px;
  text-shadow: 2px 2px 5px #808080;
}

html,
body {
  /*general settings*/
  height          : 100%;
  margin          : 0;
  font-family     : "Luckiest Guy", cursive;
  background-color: #1B5E20;
  /*background color code*/
  letter-spacing  : 0.1em;
}

.block {
  /*general layout div*/
  background: #388E3C;
  width     : auto;
  margin    : 0 auto;
  width     : 1280px;
  height    : 720px;
  padding   : 80px 0;
  border    : 1px solid #333;
}

.block-in {
  width   : 300px;
  margin  : 80px auto;
  overflow: hidden;
}

.vc {
  /*vertical center settings*/
  display        : flex;
  align-items    : center;
  justify-content: center;
}

.vertical-center {
  /*vertical center outer div*/
  min-height : 100%;
  min-height : 100vh;
  display    : flex;
  align-items: center;
}

/*---Gear Loader---*/
.gear {
  width        : 80px;
  height       : 80px;
  border-radius: 10%;
  margin       : 20px auto;
  border       : 5px solid #fff;
  position     : relative;
  box-shadow   : 2px 2px 5px #808080;
}

.gear:after {
  content      : "";
  width        : 100px;
  height       : 100px;
  border-radius: 100%;
  display      : block;
  border       : 5px dashed #fff;
  position     : absolute;
  top          : -24px;
  left         : -24px;
  box-shadow   : inset 0px 0 0 20px #fff;
  transform    : scale(.5) rotate(0deg);
  animation    : gear 6s linear infinite;
}

.gear:before {
  content      : "";
  width        : 58px;
  height       : 58px;
  border-radius: 100%;
  display      : block;
  border       : 5px dashed #fff;
  position     : absolute;
  top          : 26px;
  right        : -14px;
  box-shadow   : inset 0px 0 0 10px #fff;
  transform    : scale(.5) rotate(0deg);
  animation    : gear2 4s linear infinite;
}

@keyframes gear {
  0% {
    transform: scale(.5) rotate(0deg);
  }

  100% {
    transform: scale(.5) rotate(360deg);
  }
}

@keyframes gear2 {
  0% {
    transform: scale(.5) rotate(0deg);
  }

  100% {
    transform: scale(.5) rotate(-360deg);
  }
}

/*responsive media screen code*/
@media screen and (max-width:1280px) {

  .vertical-center {
    width: 100vw;
  }

  #load_text {
    font-size: min(5vw, 30px);
    /*at most 30px but decrease 5vw if the viewport is less than 1280px*/
  }

}