@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;800&display=swap");

:root {
  /* Colors */
  /* ----- Primary ----- */
  --light-cyan: hsl(193, 38%, 86%);
  --neon-green: hsl(150, 100%, 66%);

  /* ---- Neutral ----- */
  --grayish-blue: hsl(217, 19%, 38%);
  --dark-grayish-blue: hsl(217, 19%, 24%);
  --dark-blue: hsl(218, 23%, 16%);
}

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Manrope", sans-serif;
}

main {
  background: var(--dark-blue);
}

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

.advice_box {
  position: relative;
  width: 90%;
  max-width: 40rem;
  background: var(--dark-grayish-blue);
  padding: 2rem 4rem;
  border-radius: 15px;
  text-align: center;
}
.advice_title {
  color: var(--neon-green);
  letter-spacing: 3px;
  font-weight: 600;
  margin-bottom: 1rem;
}
.advice {
  color: #cfe3ea;
}
.advice::before {
  content: "\275D";
  margin-right: 0.5rem;
}
.advice::after {
  content: "\275E";
  margin-left: 0.5rem;
}
.divider {
  margin: 3rem 0;
}
.divider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.advice_generator {
  background: var(--neon-green);
  position: absolute;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transform: box-shadow 0.2s ease;
}
.advice_generator:hover {
  box-shadow: 0px 0px 30px 0px hsl(150, 100%, 66%);
}
.advice_generator img {
  width: 40%;
  height: 40%;
}
.attribution {
  font-size: 13px;
  text-align: center;
  color: #ffffffc2;
}
.attribution a {
  color: hsl(228, 45%, 44%);
}

/* MEDIA QUERIE FOR PHONE */
@media screen and (max-width: 1000px) {
  .advice_box {
    padding: 2rem 1rem;
  }
  .advice {
    font-size: 1.4rem;
  }
  .divider {
    margin: 2rem 0;
  }
}