{ 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);
  
  text-align: center ;


button {
  width: 100%;
  
  margin-top: 20px;
  
  border-radius: 10px;
  
  
} 
button:hover {
  background: #2563eb;
}















h1  {
  color: yellow;
  
  margin-bottom: 30px;
  }

.inputs {
  display: flex;
  
  
  input {
    padding: 12px;
    
    border: none;
    
    border-radius: 20px;
    
    outline: none;
    
    background: rgba(255,255,255,0.12);
    
    color: yellow;
    
    font-size: 15px;}
   
  
  
  flex-direction: column;
  
  gap: 13px;
  
  
  
}
input::placeholder {
  color: #d1d5db;
}
  /* Firefpx*/
  input[type=number] {
    -moz-appearance: textfield;
  }
  
  buton {
    width:100% ;
    
    margin-top: 20px;
    
    padding: 14px;
    
    border: none;
    
    border-radius: 10px;
    
    background: #3b82f6;
    
    color: yellow;
    
    font-size: 16px;
    
    cursor: pointer;
    
    transition: 0.3s;
    
  }
h2 {
  margin-top: 20px;
  
  color:  #22c55e;
}