body { 
    padding-top: 80px; 
    
    }

h1{
    Font-size: 60px; 
}

img{
    max-width: 1000px; 
} 

.navbar { 
    width: 100%; 
    height: 10%; 
    background-color: black; 
    position: fixed; 
    position: absolute;
    top: 0; 
    left: 0; 
    
    
     
    
} 




footer { 
    
    background-color: black; 
    color: white;
    width: 100%;
    padding-bottom: 30px; 

    
}


.pagetitlebox {
    align-items: center; 
    display: flex;
    margin: auto; 
    max-width: 100%; 
    
}

.navbar .pagetitles {
    padding-left: 10px; 
    padding-right: 10px;
    margin-left: 90 px;
    margin-right: 90px; 
    margin-top: 10px; 
    color: pink; 
    font-weight: bold; 
    font-size: 40px;
    
    
} 

.content {
    flex: wrap; 
    padding-top: 80px;  
    max-width: 90%; 
    margin-top: 0px; 
    margin: auto; 
    color: rgb(29, 55, 80); 
} 

body {
    background-color: rgb(214, 244, 253);
    margin-bottom: 80px; 
} 

.images {
    display: flex;
    flex: wrap; 
    max-width: 60%; 

}


.btncontainer {
    margin: 0 10px 10px 0;
    padding: 20px;
    width: 200px;
    height: 100px;
    float: left;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
}




a#btnhome:hover {
    background-color: none;
    border: none;
    color: pink;
    font-size: 30px; 
}

a#btnhistory:hover {
    background-color: none;
    border: none;
    color: pink;
    font-size: 30px; 
} 
a#btnculture:hover {
    background-color: none;
    border: none;
    color: pink;
    font-size: 30px; 
} 

a#btnregions:hover {
    background-color: none;
    border: none;
    color: pink;
    font-size: 30px; 
}

a#btnclimate:hover {
    background-color: none;
    border: none;
    color: pink;
    font-size: 30px; 
}



/*  
then organize headings/ images/ paragraphs and get them to wrap properly, get cuter, anime style images. 
Consider anime pngs
Add media query for when it shrinks to a certain size.
Then add buttons
 */

@media (max-width: 600px) {
   
    .pagetitlebox {
        width:fit-content;    
    
    } 
    .images {
        display: flex;
        flex: wrap;
        width: 100%;
    }
    body{
       
        padding-top: 800px;  
       
    }

    .navbar .pagetitles {
        padding-left: 60px; 
        margin-left: 90 px;
        margin-right: 90px;  
        color: pink; 
        font-weight: bold; 
        font-size: 50px; 
        flex: wrap;
        
        
    } 

    .pagetitles{
        font-size: 100%;
    }
    


}