@media screen {

    h3 {
        margin-block-start: 0;
        margin-block-end: 0;
    }

    #refresh {
        background-color: #454B66;; /* Same color as your h1 element */
        border: none; /* Remove default border */
        color: #ffffff; /* Text color, choose a color that ensures text is readable on the background color */
        padding: 10px 20px; /* Adjust as needed */
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px; /* Adjust as needed */
        margin: 3%;
        cursor: pointer;
        border-radius: 12px; /* Adjust as needed to get the desired roundness */
        font-family: Arial, Helvetica, sans-serif;
        transition: color 0.3s ease;
    }

    #refresh:hover {
        color: #ff7e5f;
    }

    #refresh:active {
        color: #ff7e5f;
        background-color: #282b3a;
    }
    
    * {
        box-sizing: border-box;
    }

    #titlequote {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    body {
        background-image: linear-gradient(to right, #ff7e5f, #9CA3DB);
        display: flex;
        justify-content: center; /* Center #content-container */
        min-height: 90vh; /* Full viewport height */
        font-family: Arial, Helvetica, sans-serif;
        flex-wrap: wrap;
        align-content: flex-start;
        border-style: outset;
        border: #454B66;
        border-radius: 5%;
    }

    #content-container {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        flex-direction: column;
        align-content: center;
        flex-wrap: wrap;
    }

    h1, p {
        max-width: 100%;
        text-align: center; /* Space between text and image */
        margin:1.5%;
        justify-self: auto;
    }

    h1 {
        color: #454B66;
        font-size: 300%;
    }

    p {
        color: white;
        font-family: 'Courier New', Courier, monospace;
        font-style: italic;
        font-size: 150%;
    }

    #image-container {
        display: flex;
        max-width: 100%;
        height: auto;
        align-content: center;
        flex-wrap: wrap;
        align-self: center;
        margin: 1.5%;
    }

    img {
        max-width: 90vw;
        height: auto;
        max-height: 50vh;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.7);
    }    

    @media (max-width: 768px) {

        
        h1 {
            font-size: 2rem;
        }

        h3 {
            font-size: 1rem;
        }
    

        p {
            font-size: 1rem;
        }

        img {
            max-width: 80vw;
            margin:3%;
        }
        body{align-content: center;
        
        }
    }

    /* Media Query for Mobile Devices */
    @media (max-width: 480px) {
        h1 {
            font-size: 1.5rem;
        }

        p {
            font-size: 1rem;
        }

        img {
            max-width: 70vw;
        }
    }
}