* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: linear-gradient(135deg, #d4fc79, #96e6a1);
  display: flex;
  justify-content: center;
  font-family: 'Sour Gummy';
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.main {
  background: #f0fff4;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  padding: 5vw;
  gap: 2vw;
  border-radius: 12px;
  text-align: center;
}

.title {
  font-size: 5vw;
}

.text {
  font-size: 4vw;
}

input {
  width: 40vw;
  height: 10vw;
  font-family: 'Sour Gummy';
  font-size: 7vw;
  text-align: center;
  border-radius: 3px;
}

button {
  width: 15vw;
  height: 7vw;
  font-size: 3vw;
  border-radius: 10px;
  background: white;
  color: #4caf50;
  border: 2px solid #4caf50;
  box-shadow: 0 4px 100px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font-weight: 700;
}

.line {
  border: #4caf50 1px solid;
  width: 100%;
}

#result,
#finalResult {
  font-size: 3vw;
}

@media (min-width: 610px) {
  .main {
    width: 35%;
    padding: 20px;
    gap: 0.5vw;
    border-radius: 12px;
    text-align: center;
  }

  .title {
    font-size: 2vw;
  }

  .text {
    margin-top: 5px;
    font-size: 1.2vw;
  }

  input {
    width: 13vw;
    height: 3.5vw;
    font-family: 'Sour Gummy';
    font-size: 2vw;
    text-align: center;
    border-radius: 3px;
  }

  button {
    width: 8vw;
    height: 3.5vw;
    font-size: 1.5vw;
    border-radius: 7px;
    background: white;
    color: #4caf50;
    border: 2px solid #4caf50;
    box-shadow: 0 4px 100px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    font-weight: 700;
  }

  .line {
    border: #4caf50 1px solid;
    width: 100%;
  }

  #result,
  #finalResult {
    font-size: 1.5vw;
  }
}