/* For devices with width of 480px and less, like phones */
@media only screen and (max-width: 480px) {
    section .box {
        max-width: 350px;
        padding: 20px;
      }
      .box header {
        font-size: 40px;
        font-weight: 700;
        border-bottom: 1px solid #9c0a0f;
        border-top: 1px solid #9c0a0f;
      }
      .quote-area i {
        font-size: 30px;
      }
      .quote-area .quote {
        font-size: 20px;
        text-align: center;
        line-height: 30px;
        font-weight: 600;
      }
      .content .author {
        font-style: italic;
        font-size: 18px;
      }
      #current-date {
        text-align: center;
        font-style: italic;
        font-size: 14px;
        margin-top: 10px;
        display: flex;
        justify-content:center;
      }
} 

/* For devices with width between 481px and 768px, like larger phones and portrait tablets */
@media only screen and (min-width: 481px) {
    section .box {
        max-width: 650px;
        padding: 30px;
      }
      .box header {
        font-size: 80px;
        font-weight: 700;
        border-bottom: 1px solid #9c0a0f;
        border-top: 1px solid #9c0a0f;
      }
} 

/* For devices with width between 769px and 1279px, like landscape tablets and laptops */
@media only screen and (min-width: 769px) {
    section .box {
        max-width: 700px;
        padding: 40px;
      }

} 

/* For devices with width of 1280px and more, like desktop computers */
@media only screen and (min-width: 1280px) {
    section .box {
        transform: scale(1.2);
      }
      
}