body {
  position: relative;
  background-color: #ffffff;

  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

.info{
  background-color: #c0c0f6;
  margin-top: 7%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200px;
  width: 40%;
  border-radius: 20px;
  gap: 3%;
}

button{
  margin-top: 2%;
  background-color: #ffffff;
  border-radius: 10px;
  border: none;
  box-shadow: 4px 5px 6px rgba(0, 0, 0, 0.172);
  transition: transform .3s;
}

button:hover{
  transform: translateY(-20%);
}

input[type=text]{
  border-width: 1px;
  border-radius: 10px;
  height: 10px;
  width: 150px;
  padding: 2%;
  outline: none;
  border-style: solid;
  transition: 0.5s ease;
  box-shadow: 4px 5px 6px rgba(0, 0, 0, 0.172);
  border: none;
  margin-bottom: 3%;
}

input[type=text]:focus {
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.172);

}

input[type=password]{
  border-width: 1px;
  border-radius: 10px;
  height: 10px;
  width: 150px;
  padding: 2%;
  outline: none;
  border-style: solid;
  transition: 0.5s ease;
  box-shadow: 4px 5px 6px rgba(0, 0, 0, 0.172);
  border: none;
  margin-bottom: 3%;
}

input[type=password]:focus {
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.172);

}

.sectionTitle{
  font-size: xx-large;
}
.box{
  font-size: larger;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 7%;
  background-color: rgba(117, 211, 243, 0.328);
  box-shadow: 6px 7px 8px rgba(0, 0, 0, 0.172);
  border-radius: 20px;
  padding: 4%;
  width: 30%;

}