* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100vh;
   flex-direction: column;
}

.container {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

.container input{
   width: 250px;
   height: 60px;
   padding: 0px 20px;
   font-size: 40px;
   outline: none;
   border: none;
   background-color: #003049;
   color: #fff;
   transition: 0.2s ease;
}

.container input:focus{
   background-color: #297fad;
}

.container button{
   height: 60px;
   width: 100px;
   border: none;
   outline: none;
   font-size: 25px;
   background-color: #669bbc;
   color: #fff;
   cursor: pointer;
   transition: 0.2s ease;
}

.container button:hover{
   background-color: #6facd2;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.container button:active{
   transform: scale(0.9);
}

#result{
   margin: 20px;
   font-size: 40px;
}

#attemps{
   margin: 20px;
   font-size: 40px;
   position: relative;
}

#attemps::after{
   content: '';
   width: 70%;
   height: 4px;
   background-color: #033c5a;
   position: absolute;
   bottom: -10px;
   left: 50%;
   transform: translateX(-50%);
}