* {
  box-sizing: border-box;
}
body {
  height: 100vh;
  max-width: 2000px;
  margin: 0;
  font-family: "Josefin Sans", sans-serif;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr 4.5fr 3fr;
  grid-column-gap: 10px;
  grid-row-gap: 0px;
  background-color: rgb(182 230 238);
}
header {
  grid-area: 1/1/2/3;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 150%;
}
#flower-message {
  grid-area: 2/1/3/2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 10%;
}
#message {
  font-size: 150%;
  max-height: 200px;
  margin: 5%;
  text-align: center;
}
#flower {
  height: 300px;
  width: 300px;
  position: relative;
}
#flower > div {
  position: absolute;
  width: 100px;
  height: 100px;
  border-width: 5%;
  border-style: solid;
  border-color: rgba(0, 132, 255, 0.993);
}
#p1 {
  top: 10%;
  left: 10%;
  background-color: rgb(255 188 193);
  border-top-right-radius: 50%;
  border-bottom-left-radius: 50%;
}
#p2 {
  top: 2%;
  left: 33.33%;
  background-color: rgb(255 188 193);
  border-top-right-radius: 50%;
  border-bottom-left-radius: 50%;
  transform: rotate(45deg);
}
#p3 {
  top: 10%;
  right: 10%;
  background-color: rgb(255 188 193);
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
#p4 {
  top: 33.33%;
  left: 3px;
  background-color: rgb(255 188 193);
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  transform: rotate(45deg);
}
#p6 {
  top: 33.33%;
  right: 3px;
  background-color: rgb(255 188 193);
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  transform: rotate(45deg);
}
#p7 {
  top: 56.63%;
  left: 10%;
  background-color: rgb(255 188 193);
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
#p8 {
  top: 64.63%;
  left: 33.33%;
  background-color: rgb(255 188 193);
  border-top-right-radius: 50%;
  border-bottom-left-radius: 50%;
  transform: rotate(45deg);
}
#p9 {
  top: 56.63%;
  right: 10%;
  background-color: rgb(255 188 193);
  border-width: 5%;
  border-top-right-radius: 50%;
  border-bottom-left-radius: 50%;
}
#p5-core {
  top: 33.33%;
  left: 33.33%;
  background-color: rgb(255 254 214);
  border-radius: 50%;
}
#letter-buttons {
  grid-area: 2/2/3/3;
  margin-right: 10%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-around;
  gap: 0% 5%;
}
#letter-buttons > button {
  background-color: rgb(52, 200, 173);
  color: rgb(45, 43, 45);
  height: 10%;
  width: 10%;
  border-radius: 15%;
  font-size: 20px;
  font-family: "Rubik", sans-serif;
  border-color: rgb(116, 166, 150);
  border-style: solid;
  border-width: 5%;
  transform: scale(0.9);
}
#letter-buttons > button:hover {
  background-color: rgb(18, 161, 222);
  transform: scale(1);
  transition: transform 150ms ease-in;
}
#guess-word {
  grid-area: 3/1/4/2;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-left: 10%;
}
#guess-word > div {
  width: 15%;
  height: 30%;
  min-height: 70px;
  max-height: 80px;
  border-width: 2px;
  border-style: solid;
  border-color: darkgrey;
  border-radius: 15%;
  font-family: "Josefin Sans", sans-serif;
  font-size: 175%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#game-buttons {
  grid-area: 3/2/4/3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#start-game {
  visibility: visible;
  margin-bottom: 10px;
  width: 25%;
  height: 25%;
  min-height: 50px;
  border-radius: 15%;
  font-size: 110%;
  font-family: "Rubik", sans-serif;
  background-color: rgb(197, 151, 228);
  border-color: rgb(126, 98, 145);
  border-style: solid;
  border-width: 5%;
  transform: scale(0.9);
}
#start-game:hover {
  background-color: rgb(126, 98, 145);
  color: white;
  transform: scale(1);
  transition: transform 150ms ease-in;
}
#start-over {
  visibility: hidden;
  width: 25%;
  height: 25%;
  min-height: 50px;
  background-color: rgb(228, 155, 180);
  border-radius: 15%;
  font-size: 110%;
  font-family: "Rubik", sans-serif;
  border-color: rgb(166, 116, 133);
  border-style: solid;
  border-width: 5%;
  transform: scale(0.9);
}
#start-over:hover {
  background-color: rgb(159, 110, 127);
  color: white;
  transform: scale(1);
  transition: transform 150ms ease-in;
}
@keyframes petal-fall {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(100px);
  }
}
.opacity-transition {
  transition: opacity 1s ease-in-out;
}
.animate-forward {
  animation: petal-fall 1s;
  animation-fill-mode: forwards;
}
@media only screen and (max-height: 770px) {
  #flower {
    height: 240px;
    width: 240px;
  }
  #flower > div {
    height: 80px;
    width: 80px;
  }
}
@media only screen and (max-width: 768px) {
  #flower {
    height: 200px;
    width: 200px;
  }
  #flower > div {
    height: 66px;
    width: 66px;
  }
}
@media only screen and (max-width: 600px) {
  header {
    font-size: 20px;
  }
  #flower {
    height: 100px;
    width: 100px;
  }
  #message {
    font-size: 20px;
  }
  #letter-buttons {
    align-items: flex-start;
    justify-content: center;
  }
  #letter-buttons > button {
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #flower > div {
    height: 33px;
    width: 33px;
  }
  #game-buttons {
    font-size: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #guess-word > div {
    min-height: 5px;
    height: 30px;
    font-size: 20px;
  }
}