/*basic styling*/

*   {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    box-sizing: border-box;
    }

body  {
        height: 100%;
        background-color: rgb(12, 107, 170);
}



/*TAG STYLING*/


table   {
    border: 2px solid;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

td {
    text-align: center;
}

a   {
    color: orange;
}

/******************
    styling for lists
    ***************************/
    ul{
        margin-left: 1em;;
    }
    
    ul li ul    {
        margin-left: 2em;;
    }

        

/*************************************
home screen images*/

.home_screen_image  {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh; /* Full viewport height */
    box-sizing: border-box;
                    }

/* Responsive image styling */       
.home_screen_image img {
    max-width: 100%;
    max-height: 50vh;
    height: auto;
    width: auto;
    object-fit: contain; /* Optional for extra safety */
    display: block;
            }

/*no underline in the link overlaying the image on home page*/
.image a    {
    text-decoration: none;
    } 


.overlay-text   {    
                position: absolute;
                background-color: rgba(000,000,000, 0.4);
                top:1em;
                left: 50%;
                color: white;
                transform: translateX(-50%); /* Adjust to the exact center */
                padding: 1em;
                border-radius: 1em;
                text-align: center;
                }


/***********************************************************/

/*link text colour on a white background*/
.LinkOnWhite  {
    text-align: center;
    text-decoration: none;
    color: rgb(247, 8, 8);
}

/*red text*/
.red    {
    color:red;
}

.winter {
   
    background: url(../images/winter_background.jpg) no-repeat center center fixed;
    margin: 0; 
    display: flex;
    align-items: flex-start;
    justify-content: center; /* Centers the box horizontally */
    height: 100vh;
    position: static;
    background-size: cover;
    background-attachment: fixed;
    }


.summer  {
    
    background: url(../images/summer_background_9x8.jpg) no-repeat center center fixed;
    margin: 0; 
    display: flex;
    align-items: flex-start;
    justify-content: center; /* Centers the box horizontally */
    height: 100vh;
    position: static;
    background-size: cover;
    background-attachment: fixed;
    }

    .page   {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center; /* Centers the box horizontally */
        position: static;
        gap:20px;
        
    }

.textBox    {
    position: relative;
    background-color: rgba(122, 138, 139, 0.7);
    padding: 1em;
    box-sizing: border-box; /* Includes padding in width */
    width: 90vw; /* 90% of the viewport width */
    max-width: 50em;;
    border-radius: 15px; /* Rounds the corners */
    margin-top: 2em;
    height: auto;
    } 

    #calendar {
        margin: auto;
        max-width: 90%; /* Make the calendar responsive */
        padding: 20px;
      }
    

                

/******************
    responsive css to larger screensizes
    ***************************/

   /*close media query*/