*{
    margin: 0;
    padding: 0;
    font-family: "poppins", "sans-serif";
    font-weight: 600;
    box-sizing: border-box;
}

body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1f2029;
}

#card{
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 300%;
    border-radius: 6px;
    width: 55vh;
    padding-top: 6vh;
    padding-bottom: 4vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: #2a2b38;
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat.svg');
}

input[type="text"] {
    background-color: #1f2029;
    width: 30vh;
    padding: 10px;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    color: #c4c3ca;
    border: none;
  }

  .combo p{
    margin-left: 0.7vh;
    margin-bottom: 0.2vh;
    font-size: 0.86rem;
    color: #c4c3ca;

  }
.combo{
    margin-top: 10px;
    margin-bottom: 2px;
}

  #title{
    margin-bottom: 5vh;
    color: #c4c3ca;
    text-align: center;

  }

  #result{
    font-size: 1.2rem;
    text-align: center;
    margin-top: 3vh;
    color: #c4c3ca;

  }

#btn {
  background-color: #007bff;      
  color: white;   
  margin-top: 2vh;                
  padding: 1vh 2vh;             
  border: none;                   
  border-radius: 8px;             
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;                
  transition: all 0.3s ease;      
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

#btn:hover {
  background-color: #0056b3;      
  transform: translateY(-2px);    
}

#btn:active {
  transform: scale(0.98);         
}