@charset "UTF-8";

   


.aboutme {
    display:block;
    max-width: 1300px;
    
}

hr {
    border: 1px solid navy;
   
    width: 61%;
    margin-left:0;
    opacity: 50%;
}

body {
    
    background-color: #e4eff0
}
.navgrid>div:hover {
    background-color: #2e2e2e;
}
.navgrid>div:visited {
    color:white;
}
.navgrid a:link {
    
    color:white;
}

/*nav  {
     
    
    text-align:center;
    color: white;
    background-color: black;
   
   font-size: 20px;
    
}*/

.logo {
    
    display: inline-block;
    margin: 0px;
    
    
    
}

navgrid {
   display: grid;
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr));
        
   justify-items: center;
    /*gap: 10px;*/
   
    
    
    
    
 
}

/*.navgrid > div {
    text-align:center;
    color: white;
    padding: 20px 80px;
   font-size: 20px;
}*/

/*.navgrid p {
    
    
}

*/

.picture {
     align-self: center;
  
   display: block;
    margin-left: auto;
    margin-right: auto;
    width: 25%;
  

}

.homepagetext {
    font-size: 20px;
    text-align:center;
 border-width: 5px;

  
    
}

.navgrid > div {
    font-family: Arial;
    color: white;
   
    font-size: 25px;
    display: inline-grid;
    padding-top:20px;
    padding-left:135px;
    padding-right:130px;
    padding-bottom:20px;
    background-color: black;
    
    
    grid-gap: 40px;
   
      /*  grid-template-areas: "index" "homepage" "portfolio" "resume" "contact"*/
      
    
}

/*<div class = "navgrid">
                <div class = "index"> <a href = "index.html"> Home</a> </div>
                <div class = "homepage"> <a href = "about-me-homepage.html"> About Me </a>  </div>
                   <div class = "portfolio"> <a href = "Portfolio.html"> Portfolio</a>  </div>
                  <div class = "resume"> <a href = "resume.html">  Resume</a>  </div>
                <div class = "contact"> <a href = "contact.html"> Contact</a>   </div>
                  */


@media screen and (max-width: 600px) {
    
    .navgrid a {
    float: none;
       padding: 10px 10px ;
  
        position:sticky;
}
    .homepagetext p { text-align: left !important;
   
}
    
}