/* implement flex */

body {
    background-color:#E3D9B8;
    font-family: 'Muli', serif;
    display:grid;
    grid-template-columns: 1fr 5fr 1fr;
  grid-template-rows: 1fr 2fr 3fr 1fr;
   
    
   
}
header {
text-align:center;
grid-column-start: 1;
    grid-row: 1;
    background-color: #7FFFD4;
}

.top-color
{
    background-color: #7FFFD4;
    grid-column-start:3;
    grid-row-start:1; 
}

.subhead
{
    text-align: center;
    margin-top: 30px;
}

    
.main {
    grid-column-start: 2;
    grid-row: 2;
    padding: 1px 1px;
    margin: -25px 10px;
}

.main-pic 
    {
        height: auto; 
        width: auto; 
        max-width: 300px; 
        max-height: 300px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
        grid-column-start: 1;
        grid-row-start:2;

  }

  .nav-bar
{   padding: 2px 2px;
    display: inline-block;
    grid-column-start: 2;
    grid-row: 1;
    text-align: center;
    background-color: #7FFFD4;
    cursor:pointer;

    
}

a{ 
    color: inherit; 
  }

.links

{
    color:blue;
    margin: 2px 2px;
    padding: 3px 3px;
    display: inline-block;
    text-decoration: underline;
}

.links:hover {
    background-color: white;
}

.Contact {
    margin: 40px 2px 0px 2px;
    padding: 2px 2px;
    display: inline-block;
    grid-column-start: 1;
    grid-row-start:3;
    border: solid #CBBA80 1px;
    white-space: nowrap;
    height: 150px;
}

.Info
{
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

footer 

{
    text-align: center;
    border-top: .5px solid #254A73;
    grid-column-start: 2;
    grid-row-start: 5;
}

.LinkedIn-icon {
    height: auto; 
        width: auto; 
        max-width: 50px; 
        max-height: 50px;
}

.GitHub-icon {
    height: auto; 
        width: auto; 
        max-width: 50px; 
        max-height: 50px;
}

.Email-icon {
    height: auto; 
        width: auto; 
        max-width: 50px; 
        max-height: 50px;
}

.Phone-icon {
    height: auto; 
        width: auto; 
        max-width: 50px; 
        max-height: 50px;
}


@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
      width: 100%;
    }
  }

@media only screen and (max-width: 600px) {
    body {
      background-color: pink;
    }
  }