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

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

body{
  background-image: linear-gradient(#FBEE97,#ADEDD5);
}

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

audio {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  margin-top: 20%;
}

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

.date {
  color: green;
  margin-top: 20%;
}

.type {
  margin-top: 5%;
  font-size: 5vw;
  color: green;
}

.month {
  height: 20px;
  font-size: 375%;
  color: green;
}

.day {
  color: green;
}

.next, .prev {
  font-size: 8vw;
  margin-top: -15%;
  color: black;
}

button{
  background: none;
  border: none;
}

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

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

.title {
  color: green;
  position: relative;
  margin: 0 auto;
}

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