/* UNIVERSAL STYLES */
*{
      padding: 0px;
      margin: 0px;
      box-sizing: border-box;
}

body{
      background-color: hsl(218, 23%, 16%);
      color: hsl(193, 38%, 86%);
      font-family: Manrope, Arial, Helvetica, sans-serif;
}

main{
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
}


/* QUOTE CARD */
#quote-card{
      background-color: hsl(217, 19%, 24%);
      padding: 30px;
      width: 540px;
      height: 332px;
      border-radius: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      position: relative;
      transition: 1s ease-in;
}

#advice-title{
      color: hsl(150, 100%, 66%);
      font-weight: bold;
      letter-spacing: 4px;
      text-transform: uppercase;
}

#quote {
      font-size: 28px;
      display: flex;
      text-align: center;
}

#divider-desktop {
      display: block;
}

#divider-mobile{
      display: none;
}

#dice-btn{
      background-color: hsl(150, 100%, 66%);
      height: 64px;
      width: 64px;
      border-radius: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: -32px;
      transform: none;
}

#dice-btn:hover{
      cursor: pointer;
}

@media only screen and (max-width: 600px){
      #quote{
            font-size: 24px;
      }

      #quote-card{
            width: 343px;
            height: 325px;
            padding: 15px;
      }

      #divider-desktop{
            display: none;
      }

      #divider-mobile{
            display: block;
      }
}

/* FOOTER */
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }