{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: Arial, Helvetica, Sans-Serif;
}

 body{
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   
   background: linear-gradient(135deg,#0f172a, #1e293b);
   
 }
 
 .container {
   width: 350px;
   
   padding: 30px;
   
   border-radius: 20px;
   
   background: rgba(255, 255, 255, 0.08);

   backdrop-filter: blur(10px);
   
   box-shadow: 0 10px 30px rgba(0,0,0,0,3);
   
   text-align: center;


}

h1 {
 color: blue;
 
 margin-bottom: 25px;
}
 
.inputs {
   display: flex;
   

   flex-direction: column;
   
   gap: 12px;
 }

input {
   padding: 12px;
   
   border: none;
   
   border-radius: 10px;
   
   outline: none;
   
   background: rgba(255,255,255,0.12);
   
   color: white;
   
   font-size: 15px;
 }
 
 input::placeholder {
   color:#d1d5db;
 }
 
 /*Remove setinhas do input number */
 
 /*chrome, Edge e safari */ 
 input::-webkit-outer-spin-button,
 input::-webkit-outer-spin-button {
   -webkit-appearance: none;
   
   margin: 0;
 }
 /*Fiferox */ 
 input[type=number] {
   -moz-appearance: textfield;
 }
 
 button { 
   width: 100%;
   
   margin-top: 20px;
   
   padding: 12px;
   
   border: none;
   
   border-radius: 10px;
   
   color: white;
   
   font-size: 16px;
   
   cursor: pointer;
   
   transition:0.3s;
   
 }
 
 button:hover {
   background: #8beb25;
 }
   
   h2 {
     margin-top: 20px;
     
     color: #22c55e;
   }