/* For devices with width of 480px and less, like phones */
@media only screen and (max-width: 480px){
      section .box {
        position: relative;
        width: 350px;
        height: 622px;
        padding: 30px;
      }
      .quote-area i {
        font-size: 20px;
      }
      .quote-area .quote {
        
        font-size: 16px;
        text-align: center;
        
      }
      .content .author {
        font-size: 12px;
      }
      #current-date {
        font-family: "Lexend";
        text-align: center;
        font-style: italic;
        font-size: 12px;
        display: flex;
        justify-content: flex-end;
        padding: 10px 10px 0 0;
      }
      .btn-container{
        position: relative;
        display: flex;
        justify-content: center;
      }
      .btn-comp{
        position: fixed;
        top: 93%;
        font-family: "Bangers";
      }
} 


/* For devices with width between 481px and 768px, like larger phones and portrait tablets */
@media only screen and (min-width:481px) {
  

} 

/* For devices with width between 769px and 1279px, like landscape tablets and laptops */
@media only screen and (min-width: 769px) {


} 

/* For devices with width of 1280px and more, like desktop computers */
@media only screen and (min-width: 1280px) {
       
}