* {
  box-sizing: border-box;
}

@font-face {
  font-family: "manrope";
  src: url("./manrope.ttf");
}
@keyframes turn {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: #202632;
}

.home-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 0.5rem 0.75rem;
  width: 3rem;
  height: 2.5rem;
  background: #323a49;
  border-radius: 5px;
}
.home-btn .home {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23ffffff' viewBox='0 0 24 24'%3E%3Cpath d='M20 7.093l-3-3v-2.093h3v5.093zm4 5.907h-3v10h-18v-10h-3l12-12 12 12zm-10 2h-4v6h4v-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.advice {
  font-family: "manrope";
  font-weight: 600;
  position: relative;
  background: #323a49;
  border-radius: 15px;
  width: 45%;
  padding: 2.5rem;
  text-align: center;
  box-shadow: #202632 0.5px 0.5px 20px;
}
@media (max-width: 720px) {
  .advice {
    width: 80%;
  }
}
@media (max-width: 450px) {
  .advice {
    width: 90%;
    padding: 1.5rem;
  }
}
.advice .title {
  letter-spacing: 7px;
  text-transform: uppercase;
  color: #52ffa8;
  padding: 0.5rem;
  margin-bottom: 1rem;
}
.advice .content {
  margin-bottom: 3rem;
  font-size: 28px;
  color: #cee3e9;
}
.advice .divider {
  margin: 1rem 0;
  width: 100%;
  height: 20px;
  background-image: url("data:image/svg+xml,%0A%3Csvg width='444' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23cde1e8' d='M0 8h196v1H0zM248 8h196v1H248z'/%3E%3Cg transform='translate(212)' fill='%23cde1e8'%3E%3Crect width='6' height='16' rx='3'/%3E%3Crect x='14' width='6' height='16' rx='3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.advice .change {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #52ffa8;
  padding: 1rem;
  cursor: pointer;
  transition: 0.2s;
}
.advice .change .dice {
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0H4a4.005 4.005 0 0 0-4 4v16a4.005 4.005 0 0 0 4 4h16a4.005 4.005 0 0 0 4-4V4a4.005 4.005 0 0 0-4-4ZM7.5 18a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0-9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm4.5 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm4.5 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0-9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z' fill='%23252639'/%3E%3C/svg%3E");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.advice .change.searching .dice {
  animation: turn 1s infinite;
}
.advice .change:hover {
  box-shadow: rgba(82, 255, 168, 0.8) 0.5px 0.5px 30px;
}

/*# sourceMappingURL=style.css.map */