@import url('https://fonts.googleapis.com/css2?family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

html {
  height: 100%;
  width: 100%;
}
body {
  display: grid;
  place-items: center;
  font-family: "Sansation", sans-serif;
  font-weight: 400;
  font-style: normal;
  background: radial-gradient(circle, rgb(239, 239, 239) 0%, rgb(202, 202, 202) 100%);
  margin-bottom: 25%;
}

h1 {
  width: auto;
  text-align: center;
  height: 1vw;
  font-size: 0.25in;
}
h2, p {
  font-size: 1.5vmax;
  font-weight: 500;
  text-align: center;
  height: 5vmax;
}
h3 {
  font-size: 12vmin;
  margin-bottom: 0.5vmax;
  text-align: center;
  height: 3vmin;
}

h1, h2, h3, p {
  color: #252525;
}

.container {
  display: grid;
  place-items: center;
}

.input-box {
  width: 35vmin;
  height: 0.34in;
  font-size: 0.15in;
  font-weight:500;
  color: #1d1d1d;
  text-align: center;
}
.input-box::placeholder {
  font-size: 0.16in;
  color: #525252;
  font-family: "Sansation", sans-serif;
}

.input-box, .form-button {
  border-width: 1.7px;
  border-color: #bdbdbd;
  border-style: ridge;
  border-radius: 5px;
  background-color: #d8d8d8;
  box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.35);
}

.input-box:focus {
    outline: none;
}

.form-button {
  width: 1.6in;
  height: 0.35in;
  color: #292929;
  cursor: pointer;
  font-weight:400;
  font-family: "Sansation", sans-serif;
  margin-bottom: 3vmin;
  transition:0.2s;
}

.form-button:hover {
  background-color: #252525;
  font-weight:700;
  color: #dedede;
  transform: scale(1.075);
  cursor: pointer;
}