:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #0e0c0c;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  min-width: 320px;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}



.main-text{
  font-size: 60px;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-weight: 600;
  margin-left: 20;
  margin-top: -60px;
  z-index: 1;

}
.submain-text{
  color: rgb(16, 16, 133);
  font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.paragraph-text{
  font-size: 20px;
  text-align: center;
  z-index: 1;
}

#register-button{
  width: 200px;
  height: 55px;
  background-color: rgb(16, 16, 133);
  color: white;
  border-radius: 5px;
  cursor: pointer;
  border-color: transparent;
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 20px;
  margin-top: 30px;
  margin-left: 5%;
}

#register-button:hover{
  background-color: white;
  border: 2px solid rgb(16, 16, 133);
  transition: 0.7s ease;
  color: rgb(16, 16, 133);

}

#login-button{
  width: 200px;
  height: 55px;
  background-color: white;
  color:  rgb(16, 16, 133);
  border-radius: 5px;
  cursor: pointer;
  border-color:  rgb(16, 16, 133);
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 20px;
  margin-top: 30px;
  margin-left: 5%;
}

#login-button:hover{
  background-color:  rgb(16, 16, 133);
  border: 2px solid  rgb(16, 16, 133);
  transition: 0.7s ease;
  color: white;
}
.square1{
  position: absolute;
  width: 25%;
  height: 40%;
  background-color:rgb(16, 16, 133);
  margin-top: 40px;
  rotate: 60deg;
  margin-left: -40%;
  animation-name: square1-rotation;
  animation-duration: 5s;
  border: 2px solid  rgb(16, 16, 133);
}
.square2{
position: absolute;
width: 25%;
height: 40%;
background-color: transparent;
border: 2px solid  rgb(16, 16, 133);
margin-top: -40%;
rotate: 50deg;
margin-left: 650px;

}
@keyframes square1-rotation{
  0%{
    rotate: 60deg;
  }
  10%{
    rotate: 61deg;
  }
  20%{
    rotate: 62deg;
  }
  30%{
    rotate: 63deg;
  }
  40%{
    rotate: 64deg;
  }
  50%{
    rotate: 65deg;
    background-color: white;
    border: 2px solid rgb(16, 16, 133);
    }
    60%{
      rotate: 64deg;
    }
    70%{
      rotate: 63deg;
    }
  80%{
    rotate: 62deg;
  }
  90%{
    rotate: 61deg;
  }
  100%{
    rotate: 60deg;
    background-color:  rgb(16, 16, 133);
    border: 2px solid white;
  }
}
@media (prefers-color-scheme: light) {
    :root {
    color: #0a0b0c;
    background-color: #ffffff;
  }
  @media screen and (max-width: 650px){
  
  .main-text{
    width: 80%;
    font-size: 50px;
    margin-left: 20%;
  }
  .paragraph-text{
    font-size: 17px;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  }

  #register-button{
  width: 150px;
  height: 50px;
  font-size: 20px;
  margin-top: 10px;
  margin-left: 30%;
}


#login-button{
  width: 150px;
  height: 50px;
  font-size: 20px;
  margin-top: 10px;
  margin-left: 30%;
}
.square2{
  margin-top: -100%;
}
}
}