.loadm{
  animation: bye 2s ease-in 1.5s;
  animation-fill-mode: forwards;
  position: relative;
  left: 50%;
  top: 50%;
}

@keyframes spin{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}

.loading{
  animation: spin 1.5s infinite;
  animation-fill-mode: forwards;
  padding: 3vh;
  height: 1vh;
  width: 1vh;
  border: 10px;
  border-radius: 50%;
  border-top: solid red;
  border-bottom: solid grey;
  border-right: solid grey;
  border-left: solid grey;
  background-color: black;
}

@keyframes bye{
  100%{
  }
  from{
    opacity: 1;
    visibility: visible;
  }
  to{
    opacity: 0;
    padding: 0;
    height: 0;
    width: 0;
    visibility: hidden;  
}
}

.main{
  visibility: hidden;
  animation: sup 1.5s ease-in 3.5s;
  animation-fill-mode: forwards;
}

@keyframes sup{
  from{
    visibility: hidden;
    opacity: 0;
  }
  to{
    visibility: visible;
    opacity: 1;
  }
}

.thebox{
  animation: colorch 6.7s infinite;
  animation-fill-mode: forwards;
  padding: 4vh;
  height: 4vh;
  width: 4vh;
  background-color: red;
}

@keyframes colorch{
  from{
    background-color: red;
  }
  to{
  background-color: darkred;
  }
}