@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

body {

  background: rgb(58, 56, 56);
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  color: white;
}

.content {


  padding: 3%;
  width: 100%;
  height: 100%;
  display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) { 
  
  .box {
    text-align: center;
    padding: 5%;
    width: 100%;
    background-color: rgb(80, 80, 80);
    border-radius: 1vw;
    box-shadow: 5px 5px 5px rgba(80, 80, 80, 0.477) ;
  }

} 

@media (min-width: 768px) { 

  .box {
    text-align: center;
    padding: 5%;
    width: 50%;
    background-color: rgb(80, 80, 80);
    border-radius: 1vw;
    box-shadow: 5px 5px 5px rgba(80, 80, 80, 0.477) ;
  }


} 



.box form {

  margin: 4%;
  
}

.box form input {

  border-style: hidden;
  border-radius: 1vw;
  transition: all 0.2s ease 0s;

}

.box form input:hover {

  box-shadow: 5px 5px 5px rgba(0, 174, 255, 0.477) ;

}

.box form .inp {

  margin: 2%;
}

.box button {

  border-style:solid;
  border-radius: 1vw;
  padding: 1%;
  margin: 3%;
  transition: all 0.2s ease 0s;
  color: white;
  background-color: transparent;
}

.box button:hover {

  background: white;
  color: black;
  border-color: transparent;
  box-shadow: 2px 2px 5px rgba(0, 174, 255, 0.477);

}

.box button:active {

  border-style:solid;
  border-radius: 1vw;
  padding: 1%;
  margin: 3%;
  transition: all 0.2s ease 0s;
  color: white;
  background-color: transparent;
  border-color: black;
  box-shadow: none;
}



#remindus:hover {
  box-shadow: 1px 1px 5px rgba(0, 174, 255, 0.477);

}


#info {

  color: #ff0012;
  font-size: larger;
 
}