body {
        font-family: Arial, Helvetica, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
        padding: 1rem;
        justify-content: center;
        min-height: 100vh;
        box-sizing: border-box;
        
    }

    #bg-video {
        position: fixed;
        right: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        transition: opacity 1s ease;
        /* put behind everything else */
        z-index: -1;    
        /* make video cover entire background */
        object-fit: cover;
        filter: brightness(83%);
        
    }
  
    #page-title {
        display: inline-block;
        text-align: center;
        padding: 1rem;
        font-size:  clamp(2rem, 8vw, 4rem);
        margin-top: 10px;
        margin-bottom: 5vh;
        opacity: .6;
        color: black;
        background: none;
        border: none;  
       
}

    #quote-box {
        color: rgb(255, 255, 255);
        font-size: 1.5rem;
        text-shadow: 5px 5px 5px rgb(0, 21, 59);
        padding: clamp(20px, 5vw, 100px);
        margin-bottom: 5vh;
        opacity: .85;
        max-width: 500px;
        width: 90%;
        text-align: center;
    }

    #quote {
        font-size: clamp(1.25rem, 5vh, 2rem);
        margin-bottom: 15px;
        font-weight: bold;
        text-shadow: 5px 5px 5px rgb(0, 21, 59);
        color: rgb(255, 255, 255);
        
    }

    #author {
        font-weight: bold;
        margin-bottom: 20px;
        font-size: clamp(1rem, 3vw, 1.25rem);
    }

    .button-container {
       display: flex;
       flex-wrap: wrap; /* Allows buttons to wrap on small screens */
       justify-content: center;
       gap: 1rem; /* Space between buttons */
       margin-top: 20px;
     }

    button {
        mind-width: 120px;
        padding: 12px 24px;
        font-size: 1rem;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        font-weight: 600;
        transition: background-color 0.3s, color 0.3s;
    }

    button:hover {
        transform: translateY(-2px)scale(1.05);
        background-color: #1c6ad6;
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
        color: white;
    }

    #new-quote {
        background-color: rgba(29, 129, 243, 0.8);
        color: rgb(255, 255, 255);
        text-shadow: 4px 4px 4px rgb(0, 0, 0);
    }

    #copy-quote {
       background-color: rgba(131, 169, 240, 0.8);
        color: rgb(255, 255, 255);
        text-shadow: 4px 4px 4px rgb(0, 0, 0);
    }

    #thank-you {
        margin-top: 15px;
        color: white;
        font-weight: bold;
        display: none;
        text-shadow: 4px 4px 4px rgb(0, 0, 0);
    }
/* ------------------- MEDIA QUERIES (ADAPTIVE DESIGN) ------------------- */
/* Apply larger spacing and font sizes for wide screens (Laptops/Desktops) */
@media (min-width: 1024px) {
    body {
        /* Restore original large padding for large screens */
        padding: 50px; 
    }
    
    #quote-box {
        /* Larger padding */
        padding: 80px; 
        margin-bottom: 100px;
    }

    @keyframes gradientBG {
         0% { backgroun-position: 50% 50%; }
        100% { background-position: 50% 50%; }
   }
   #quote, #author {
        /* starts hidden */
        opacity: 0;
        /* smooth fade */
        transition: opacity 0.8s ease-in-out;
    }

    #quote.show, #author.show {
        /* fade in */
        opacity: 1;
    }
}