html, body {
  margin: 0;
  min-height: 100vh;
  width: 100%;
}

hr {
    border: 0;
    height: 0; /* Firefox... */
    box-shadow: 0 0 10px 1px black;
}

.main {
  width: 70vw;
  height: 70vw;
  background: #6abdf0;
  margin-top: 12%;
  border-radius: 20px;
  position: relative;
}

body{
  background-image: linear-gradient(#A2C5FE,#C2E9FC);
}

img {
  width: 78%;
  margin-top: 45%;
  max-height: 78%;
}

audio {
  position: relative;
  margin-top: 8%;
  left: 50%;
  transform: translateX(-50%);
}

.date p{
  margin-left: 60%;
}

.date {
  color: #3f4b50;
  margin-top: 20%;
}

.type {
  margin-top: 5%;
  font-size: 5vw;
  color: #3f4b50;
}

.month {
  height: 20px;
  font-size: 375%;
  color: #3f4b50;
}

.day {
  color: #3f4b50;
}

.next, .prev {
  font-size: 8vw;
  margin-top: -10%;
  color: #3f4b50;
}

button{
  background: none;
  border: none;
}

.mode {
  position: relative;
  left: 50%;
  margin-top: 5%;
  transform: translateX(-48%);
}

.mode button{
  font-size: 195%;
}

.title {
  color: #3f4b50;
  position: relative;
  margin: 0 auto;
}

.title h1{
  font-size: 200%;
  text-shadow: 1px 1px #0091ff;
}

.cur-age{
  position: relative;
  margin-top: 8%;
  left: 55%;
  transform: translateX(-50%);
}

 .then-age {
  position: relative;
  margin-top: 3%;
  left: 55%;
  transform: translateX(-52%);
 }

.then-age {
  margin-bottom: -5%;
}

#then-age-value-p, #age-value{
  font-size: 150%;
}

.go-to-index {
  margin-top: 5%;
  margin-left: 2%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#calculate, #submit {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4%;
  margin-bottom: 4%;
}