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

.container{
    max-width: 992px;/*set up max-width992px*/
	margin: 0 auto;
    color:#000000;
    text-align: center;
}

/*nav for all pages..........................................*/
#menu{
    margin-top: 0;
    background-color: rgb(255, 242, 0);
    padding:30px 20px;
}
 
ul#menu li{ 	
    display: inline;
}
 
ul#menu li a {	
    padding: 10px 30px;  
    text-decoration: none;
    border-radius: 25px;
    color: #000000;
} 

ul#menu li a:hover{
    background-color: rgb(237, 55, 91);
    color: white;
}
 
ul#menu li a.active{  
    background-color: rgb(26, 44, 122);  
    color: white;  
}

/*flex for all pages..........................................*/
.page1-flex, .page2-flex, .page3-flex, .page4-flex{ /*flex column for all 4 pages for mobile device*/
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

/*page1-flex......................................*/
.page1-group1{
    background-color: chartreuse;
    width: 100%;
    height: 160px;
}

.page1-group2{
    flex-direction: column;
}

.page1-group2 div{
    width: 100%;
    height: 160px;
    background-color: chartreuse;
    margin-top: 10px;
}

/*page2-flex.........................................*/
.page2-flex{
    width: 100%;
    gap: 10px;
}

.page2-flex div{
    width: 100%;
    background-color: chartreuse;
}

.h50{
    height: 100px;
}


/*page3 flex..........................................*/
.page3-flex{
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    gap: 10px;
}

.page3-flex div{
    width: 100%;
    background-color: chartreuse;
    height: 160px;
}


/*page4............................................*/
.page4-flex{
    gap: 10px;
}

.p4-g1,.p4-g1-1, .p4-g2{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.green{
    background-color: chartreuse;
    height: 100px;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    #menu{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    #menu li{
        margin-top: 20px;
    }
}

/* Medium devices (landscape tablets, 768px and up) */


@media only screen and (min-width: 768px) {
    /*page1 flex..........................................*/
    .page1-group1{
        width: 100%;
        height: 160px;
        background-color: chartreuse;
    }
    
    .page1-group2{
        display: flex;
        flex-direction: row;
        gap: 10px;
    }
    
    .page1-group2 div{
        width: 49.49%;
        height: 160px;
        background-color: chartreuse;
    }
    
   

    /*page2..........................................*/
    .page2-flex{
        display: flex;
        flex-flow: column wrap;
        height: 430px;
        gap: 10px;
    }

    .page2-flex div{
        width: 19.19%;
        background-color: chartreuse;
    }
    
    .h100{
        height: 100%;
    }
    
    .h4883{
        height: 48.83%;
    }
    
    .h3178{
        height: 31.78%;
    }
    
    .h80{
        height: 78.13%;
    }
    
    .h20{
        height: 19.53%;
    }
    
    .h2325{
        height: 23.25%;
    }
    
    /*page3.........................................*/
    .page3-flex{
        display: flex;
        flex-flow: row wrap;
        gap: 10px;
        justify-content: center;
    }
    
    .page3-flex div{
        width: 24.23%;
        background-color: chartreuse;
    }

    /*page4..........................................*/
    .p4-g1{
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

    .p4-g2{
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

    .h1{
        height: 210px;
    }

    .w4949{
        width: 49.49%;
    }
    .w2424{
        width: 24.24%;
    }
}