styles.css

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

* {
      font-family: 'Manrope', sans-serif;
      margin: 0;
}

body {
      height: 100vh;
      width: 100vw;
      background-color: #202733;
      display: flex;
      justify-content: center;
      align-items: center;
}

#advice {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #313b48;
      width: 32%;
      border-radius: 20px;
      padding: 40px;
}

#advice--id {
      font-family: 400;
      letter-spacing: 6px;
      color: hsl(150, 100%, 66%)
}

#advice--text {
      font-size: 28px;
      font-weight: 800;
      color: hsl(193, 38%, 86%);
      margin-top: 32px;
      text-align: center;
}

#pattern--divider {
      padding-top: 40px;
      padding-bottom: 40px;
}

#pattern--divider--mobile {
      display: none;
}

#dice {
      position: absolute;
      bottom: -36px;
      background-color: hsl(150, 100%, 66%);
      border: none;
      border-radius: 50%;
      width: 72px;
      height: 72px;
      transition: 0.5s;
}

#dice:hover {
      cursor: pointer;
      box-shadow: 0 0 36px hsl(150, 100%, 66%);
}

@media only screen and (max-width: 426px) {
      #pattern--divider {
            display: none;
      }

      #pattern--divider--mobile {
            display: block;
            padding-top: 40px;
            padding-bottom: 40px;
      }

      #advice {
            width: 70%;
            margin: 0 40px 0 40px;
      }
}