*{
    margin: 0;
    padding: 0;
 }

body {    
    background-color:#FF6600;
    color: #000080;
    font-family: Verdana, Geneva, sans-serif;
    padding:5px;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 6fr 1fr;
    grid-template-rows: 100px auto auto auto;
    grid-template-areas: 
    ". title title ."
    ". header header ."
    ". nav content ."    
    ". footer footer .";
    grid-gap: 5px;  
}

.title {
    grid-area: title;
    background-color: #ffffff; 
    width:auto;
    float: left;
    padding:0px;
}

.header {
    grid-area: header;
    background-color: #ffffff;
    color: black; 
    width:auto;
    float:left;
    padding:15px;
    
}





.nav {
    grid-area: nav;
    background-color: #ffffff; 
    color: black; 
    line-height:30px;
    height:auto;
    min-width: 140px;
    float:left;
    padding:5px;   
}

ul.sidenav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: auto;
    background-color: #ffffff;
    position: relative;
    height: auto;
    overflow: auto;
}

ul.sidenav li a {
    display: block;
    color: #000080;
    background-color: #ffffff;
    padding: 8px 0px 8px 16px;
    text-decoration: none;
}
 
ul.sidenav li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.sidenav li a:hover:not(.active) {
    background-color: #555;
    color: white;
}


















ul.mapnav li a {
    display: table-cell;
    color: #000080;
    background-color: #ffffff;
    padding: 8px 0px 8px 16px;
    text-decoration: none;
}
 
ul.mapnav li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.mapnav li a:hover:not(.active) {
    background-color: #555;
    color: white;
}































































.nested{
    display:grid;
    grid-template-columns: 1f;
    grid-gap: 5px;
    grid-column: auto
    
}

.nested p{
    
    padding: 5px;
    margin: 0;
}


.content {
    grid-area: content;
    display: grid;
    
    
    
    text-align: justify;
    
    
    
    
    
    
    
    background-color: #ffffff;
    grid-template-columns: 1fr;
    grid-gap: 1px;
    max-width: auto;
    margin: 0;
  
}

.footer {
    grid-area: footer;
    background-color: #ffffff;
    text-align: center;
    
}



ul.footerlinks {
    
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    overflow: hidden;
    
}

ul.li {
  float: left;
}









ul.footerlinks li a {
    display: inline-block;
    color: #000080;
    text-align: center;
    background-color: #ffffff;
    padding: 14px 16px;
    text-decoration: none;
}
 


ul.footerlinks li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
    
    
    
    
    
    
    
    
}













@media screen and (max-width:1281px)
{
    .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 8fr 1fr;
    grid-template-rows: 100px 100px auto auto;
    grid-template-areas: 
    ". title title ."
    ". header header ."
    ". nav content ."
    ". footer footer .";
    grid-gap: 5px;   
  }
    
  
}

@media screen and (max-width:1025px)
{
    .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 10fr 1fr;
    grid-template-rows: 100px auto auto auto;
    grid-template-areas: 
    ". title title ."
    ". header header ."
    ". nav content ."
    ". footer footer .";
    grid-gap: 3px;   
  }
    
  
}


@media screen and (max-width:961px)
{
    .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 12fr 1fr;
    grid-template-rows: 100px auto auto auto;
    grid-template-areas: 
    ". title title ."
    ". header header ."
    ". nav content ."
    ". footer footer .";
    grid-gap: 3px;   
  }
    
  
  .nav {
    grid-area: nav;
    background-color: #ffffff; 
    color: black; 
    line-height:30px;
    height:auto;
    min-width: 110px;
    float:left;
    padding:2px;   
}  
    
    
    
    
    
    
    
    
}


@media screen and (max-width:768px)
{
    
    
    
    
    
    
    
    
    .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 14fr 1fr;
    grid-template-rows: 100px auto auto auto;
    grid-template-areas: 
    ". title title ."
    ". header header ."
    ". nav content ."
    ". footer footer .";
    grid-gap: 2px;   
  }
    
  .nav {
    grid-area: nav;
    background-color: #ffffff; 
    color: black; 
    line-height:30px;
    height:auto;
    min-width: 90px;
    float:left;
    padding:2px;   
}
    
    
    
    
    
    
}


@media screen and (max-width:640px)
{
    .grid {
    display: grid;
    grid-template-columns: 1fr 16fr;
    grid-template-rows: 100px auto auto auto;
    grid-template-areas: 
    "title title"
    "header header"
    "nav content"
    "footer footer";
    grid-gap: 2px;   
  }
    
    .nav {
    grid-area: nav;
    background-color: #ffffff; 
    color: black; 
    line-height:20px;
    height:auto;
    min-width: 90px;
    float:left;
      
} 
  
    
  ul.sidenav li a {
    display: block;
    color: #000080;
    background-color: #ffffff;
    padding: 8px 1px 8px 1px;
    text-decoration: none;
}  
    
    
    
    
    
    
    
    
    
}







@media screen and (max-width:550px)
{
    
   .body {    
    background-color:#FF6600;
    color: #000080;
    font-family: Verdana Geneva sans-serif;
    padding:2px;
} 
    
    
    
    .grid {
    display: grid;
    grid-template-columns: 1fr 18fr;
    grid-template-rows: 100px auto auto auto;
    grid-template-areas: 
    "title title"
    "header header"
    "nav content"
    "footer footer";
    grid-gap: 1px;   
  }
    
    .nav {
    grid-area: nav;
    background-color: #ffffff; 
    color: black; 
    line-height:20px;
    height:auto;
    min-width: 90px;
    float:left;
      
}

ul.sidenav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: auto;
    background-color: #ffffff;
    position: relative;
    height: auto;
    overflow: auto;
}

ul.sidenav li a {
    display: block;
    color: #000080;
    background-color: #ffffff;
    padding: 8px 1px 8px 1px;
    text-decoration: none;
}
 
ul.sidenav li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.sidenav li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

.nested{
    display:grid;
    grid-template-columns: 1f;
    grid-gap: 5px;
    grid-column: auto
    
}

.nested p{
    
    padding: 5px;
    margin: 0;
}

    
    
    
    
    
    
    
    
    
    
    
    
  
}


@media screen and (max-width:481px)
{
    .grid {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 100px auto auto auto auto;
    grid-template-areas: 
    "title title"
    "header header"
    "nav nav"
    "content content"
    "footer footer";
    grid-gap: 1px; 
  }
    
 
.nav {
    grid-area: nav;
    display: inline
    background-color: #ffffff; 
    color: black; 
    line-height:30px;
    height: auto;
    width: auto;
    float:left;
    padding:5px;   
}

    
  
}