@media screen and (max-width: 767px){
    .mobileIncomplete {
        display: block;
        background-color: #f8d7da; /* Light red background */
        color: #721c24; /* Dark red text color */
        padding: 10px;
        text-align: center;
        font-size: 16px;
        margin-bottom: 20px; /* Adds some space between the message and the content */
        border: 1px solid #f5c6cb; /* Border for emphasis */
    }
    
    .mobileIncomplete p {
        margin: 0; /* Remove default margin for paragraphs */
    }
    main{
        display: none;
    }
    footer{
        display: none;
    }
}
/* @media screen and (min-width: 768px) and (max-width: 1023px){
    tablet
    .mobile-incomplete {
        display: none;
    }
} */


@media screen and (min-width: 1024px){
    .mobileIncomplete {
        display: none; /* Hide the message on larger screens */
    }
    body{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        min-height: 100vh;
        overflow-x: hidden;
        background-image: url(images/santamonicabeach.jpeg);
        background-size: cover;
        background-position: 0px top; 
        background-repeat: no-repeat;
    }
    main{
        margin: 200px 24px 0px 24px;
        box-sizing: border-box;
        letter-spacing: 0.03em;
        line-height: 1.6
    }
    #gallery{
        margin: 0 auto;
        margin-top: 75px;
        margin-bottom: 96px;
        display: flex;
        width: 100%;
    }
    #gallery div{
        flex: content;
    }
    #gallery article{
        padding: 8px;
        margin: 8px;
        border-radius: 40px;
    
        /* glassmorphism core */
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(8px);          
        -webkit-backdrop-filter: blur(8px); 
    
        /* gradient border */
        /* border: 1.5px double transparent;
        background-image: 
            linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)),
            linear-gradient(
                to right,
                rgba(82, 209, 252, 0.9) 20%, 
                rgba(207, 240, 255, 1) 41%, 
                rgba(229, 156, 252, 0.9) 66%
            );
        background-origin: border-box;
        background-clip: padding-box, border-box;
    
        box-sizing: border-box;
        background-size: 200% auto;
        animation: animateBackground 5s infinite linear; */
    }
    #gallery article img {
        display: block;
        margin: auto;
        padding: 16px;
    }
    #gallery article video{
        display: block;
        margin: auto;
        padding: 16px;
    }
    #gallery article p {
        margin: 16px;
        text-align: left;
        font-size: 16px;
    }
    footer{
        background-color: rgba(255, 255, 255, 0.6);
    }
}
@keyframes animateBackground {
    0% {
        background-position: 0 0; /* Start position of the background */
    }
    100% {
        background-position: 200% 0; /* End position of the background */
    }
}