*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.main{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    background: #ffffff;
    background: radial-gradient(circle, 
    rgba(255, 255, 255, 1) 0%,
    rgba(148, 187, 233, 1) 100%);
}
.text{
    width: 450px;
    padding: 30px;
    margin-right: 40px;
}
.text h1{
    color: #038ddd;
    padding-bottom: 20px;
    overflow: hidden; /* Ensures the text is not visible until animated */
  
    white-space: nowrap; /* Keeps the text on a single line */
    margin: 0 auto;
    letter-spacing: .10em;
    animation:
    typing 5s steps(30, end)infinite,
    blink-caret .75s step-end infinite;
}
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

.text p{
    width: 95%;
    font-size: small;
    color: grey;
}

.box {
  width: 400px;
  height: 400px;
  border: 2px solid #038ddd;
  background-color: rgb(228, 226, 226);
  border-radius: 15px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3), -2px -2px 5px rgba(255,255,255,0.1);
}
.box h1{
    color: #038ddd;
}
.result{
   color: rgb(180, 0, 0);
    padding-top: 20px;
    font-size: medium;
}
.box .field{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.field label{
    font-size: 15px;
}
.field input{
 height: 30px;
 font-size: 17px;
 padding-left: 10px;
 border: .5px solid;
 border-radius: 5px;
}
.btn{
  margin-top: 10px;
    width: 100%;
    font-size: 17px;
    background-color: green;
    border: none;
    padding: 9px 0px;
    border-radius: 5px;
    cursor: pointer;
    
}
.btn:hover {
  background-color: #02b12e;
  
}
.box h1{
    padding-bottom: 20px;
}
.reset{
  background-color: rgb(168, 166, 166);
  
  border: 2px solid #038ddd;
  border-radius: 7px;
  width: 30%;
  font-size: 17px;
  cursor: pointer;
  padding: 4px 0px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.reset:hover{
  background-color: red;
}


.text .box {
    width: 100%;
    max-width: 400px;
}
@media (max-width: 768px) {
  .main {
    flex-direction: column;
    align-items: center;
  }

  .text {
    margin-right: 0;
    margin-bottom: 20px;
    padding: 20px;
    text-align: center;
  }

  .box {
    height: auto;
    padding: 20px;
  }

  .box h1 {
    font-size: 22px;
  }
}
@media (max-width: 480px) {
  .text p {
    font-size: 14px;
  }

  .field input {
    font-size: 15px;
  }

  .box button {
    font-size: 16px;
  }
}