.moon-container {
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 700px;
            height: 650px;
            margin: 20 auto 10px 0;
          
            justify-content: center;
            align-items: center;

            margin: 2% auto 50px auto;
            margin-top: 10px;
            z-index: 0;
            position: relative;
}

        .moon-image {
            max-width: 100%;
            max-height: 100%;
            margin-right: 0;
            object-fit: contain;

}

@media (max-width: 700px) {
    .moon-image,
    .moon-image img {
        max-width: 100vw;
        max-height: 200px;
        margin: none; 
        bottom: 50%;
        top: 30%;}
}   

.text1 {
    position: relative;
    display : flex;
    width: 90%;
    max-width: 100%;
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    color: #30bbf1;
    line-height: 1.6;
    z-index: 2;
    padding: 0;
    letter-spacing: 0.08em;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;  
}  

@media screen and (max-width: 700px) {
    .text1 {
        top: 0px; /* Adjust for smaller screens */
        font-size: .7rem; /* Adjust font size for smaller screens */
        padding: 35px 0px; /* Adjust padding for smaller screens */
    }
    
}