style.css

.body{
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
  }
  .container{
    height: 100vh;
   
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    flex-wrap: wrap;
  }
 .box { 
  height: 75vh;
  color:white;
  width:60vh;
  border-radius: 3vh;
  
  background-color: hsl(228deg 21% 17%);
}
.box2{
  margin:4vh;
  z-index: 2;
}
.box2 h3{
  color:gray;
 
}
.circle{
  display: flex;
  justify-content: center;
  align-items: center;
  height:8vh;
  width:8vh;
  background-color: grey;
  border-radius: 50%;
  font-size: 2rem;
  cursor: pointer;
}
.circle:hover{
  background-color: black;
  color: aliceblue;
}
.circle button{
  background-color: grey;
}
.logo img{
  height: 30px;
}
.numbers{
  display: flex;
  justify-content: center;
  gap:2vh;
  
}
.submit{
  display: flex;
  justify-content: center;
}

.submit button{

  background-color: orange;
  width: 47vh;
  height: 6vh;
  margin: 2vh;
  color: white;
  border-radius: 4vh;
}
.box3{
  margin: 6vh;
  justify-content: center;
  text-align: center;
  z-index: 1;
 
}
.text{
  border-radius: 4vh;
  
  padding: 1vh;
  
}
.upper{
  top: 10vh;
}