style.css

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

html{
    box-sizing: border-box; /* It prevents padding from adding extra width or extra height to the page. */

}

body{
    margin:0;
    min-height: 100vh; /* vh stands for viewport height. It always stretch our background, at least the full height of the screen, even if the content isn't enough to take up the full height of the screen. */
    background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg width='84' height='16' viewBox='0 0 84 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M78 7V4h-2v3h-3v2h3v3h2V9h3V7h-3zM30 7V4h-2v3h-3v2h3v3h2V9h3V7h-3zM10 0h2v16h-2V0zm6 0h4v16h-4V0zM2 0h4v16H2V0zm50 0h2v16h-2V0zM38 0h2v16h-2V0zm28 0h2v16h-2V0zm-8 0h6v16h-6V0zM42 0h6v16h-6V0z' fill='%23438908' fill-opacity='0.11' fill-rule='evenodd'/%3E%3C/svg%3E");
color:black;
font-family: 'Caveat', cursive;
font-weight: 700;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}

.quote-container{
    width: auto;
    max-width: 900px;
    padding: 20px 30px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 10px 10px rgba(0, 0, 0, 0.4) ;
}
.quote-text{
    font-size: 2.75rem;
}

.long-quote{
    font-size: 2rem;
}

.fa-quote-left{
    font-size: 4rem;
}

.quote-author{
    margin-top: 15px;
    font-size: 2rem;
    font-weight: 400;
    font-style: italic;
}

.button-container{
    margin-top:15px;
    display: flex;
    justify-content: space-between;
}

button{
    cursor: pointer;
    font-size: 1.2rem;
    height: 2.5rem;
    border: none;
    border-radius: 10px;
    color: #fff;
    background: #333;
    outline: none;
    padding: 0.5rem 1.8rem;
    box-shadow: 0 0.3rem rgba(121, 121, 121, 0.65);
}

button:hover{
    filter: brightness(110%);
}

button:active{
    transform: translate(0, 0.3rem);
    box-shadow: 0 0.1rem rgba(255, 255, 255, 0.65);
}

.twitter-button:hover{
    color: #38a1f3;
}

.fa-twitter{
    font-size: 1.5rem;
}

/* loader */
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #333; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }


/* Media Query: Tablet or Smaller */
@media screen and (max-width:1000px){
    .quote-container{
        margin: auto 10px;
    }
    .quote-text{
        font-size: 2.5rem;
    }

    button{
        font-size: 0.8rem;
        padding: 0.3rem 1.2rem;
    }
}