body{
    font-family: Roboto, Oxygen, Ubuntu, Cantarell ;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
}


.wrapper{
    display: grid;
    grid-template-columns: auto auto auto auto auto auto ;
    min-height: 100vh;
    background-color: #f5f5f5; 
    
  }
.grid-inner{
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    padding: 10px;
}
header{
    grid-area: 1 / 1 / span 1 / span 6;
    font-size: 1.5em;
    background-color: #282828;
    color: #f5f5f5;
    
    

}
header img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    align-self: center;
    

}
nav{
    grid-area: 2 / 1 / span 1 / span 6;
    background-color: #939598;
}
nav ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 16.667% 16.667% 16.667% 16.667% 16.667% 16.667%;
    height: 100%;
    font-size: large;
    border: black 10px;
    
}
nav li a {
    display: block;
    text-align: center;
    padding: 20px;
    text-decoration: none;
    color: #f5f5f5;
    
}
li a:hover:not(.active) {
    background-color: #c8102e;
  }
main{
    grid-area: 3 / 1 / span 1 / span 6;

}
main img{
    max-width: 500px;
    max-height: 500px;
    grid-area: 1 / 1 / span 2 / span 2;
    border-radius: 50px;
    justify-content: center;

}
.section1{
    grid-area: 1 / 2 / span 1 / span 1;
    padding-left: 20px;
    align-self: center;
   
}





footer{
    margin-top: auto;
    background-color: #c8102e;
    padding-bottom: 20px;
    
}
footer p{
    padding-left: 15px;
}