@media screen and (max-width : 500px){

body{
font-size : 9pt;

}

ul{
list-style : none;
}

#head{
display : flex;
flex-direction : column;
position : relative;

}

#mobileMenu{
display : block;
position : absolute;
z-index : 1;
height : auto;

}
#mobileMenuView li{

margin : 5px;
padding : 5px auto 5px 25px;
border : 2px solid black;
border-radius : 2px;
background-color : darkblue;
color : white;
text-decoration : none;
font-size : 12pt;
font-weight : bold;
width : 350px;

}

summary{
border : 2px solid black;
border-radius : 30%;

}

#desktopMenu{
display : none;
}

header{
display : flex;
margin : 15px;
background-color : gray;
color : black;
flex-direction : column;
order : 2;

}

nav{
order : 1;

}

#headerItem1{
margin : auto;
padding : auto;

}

#logo{
width : 120px;
height : 120px;

}

#headerItem2{
margin : auto;
padding : auto;
border : 3px solid blue;
font-size : 18pt;

}

main {
width : 100%;
margin : 10px;

}

footer .vidget{
margin : 10px;
padding : 10px;
width : 100%;
background-color : green;
color : white;

}

footer{
display : flex;
flex-direction : column;

}

#copyrightArea {
text-align : center;

}

#footerDiv1{
display : flex;
flex-direction : column;

}

}