.container {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    grid-template-rows: 1fr 1fr 1fr 80px;
    grid-gap: 1em;
    padding: 1em;
  
    
}

.bioBox {
    border-radius: 25px;
    border: 4px #800000;
    border-style: double;
    padding: 1em;
    box-shadow: 3px 3px #888888;
    background-color: rgb(245, 238, 248);
}

#myPhoto {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    text-align: center;
}

#bioAbout {
    text-align: center;
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    background-color: rgb(245, 238, 248);
}

#bioSkills { 
    grid-column: 1 / 2;
    grid-row: 2 / 4;
    background-color: rgb(245, 238, 248);
}

#bioVideo {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    background-color: rgb(245, 238, 248);
}

.description{
    display: inline-block;
    background-color: rgb(245, 238, 248);
}

iframe {
    width: 100%;
    background-color: rgb(245, 238, 248);
}

#myFooter {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
    background-color: rgb(245, 238, 248);
    text-align: center;
    padding: 1em;
  
}

h1 {
    font-family: monospace;
    text-align: center;
    font-size: 2em;
    color: rgb(89,12,12);
}

h2 {
    font-family: monospace;
    text-align: center;
    font-size: 2em;
    color: rgb(89, 12, 12);
    background-color: rgb(245, 238, 248);
}

li {
    font-family: monospace;
    text-align:left;
}

p { font-family: monospace;
    text-align: left;
    margin: 2px;
}

#headshot {
    height:auto;
    max-width: 100%;
}

.projectsContainer {
    border-radius: 25px;
    border: 4px #800000;
    border-style: double;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1em;
    padding: 1em;
    background-color: rgb(245, 238, 248);
}

#projectsFooter {
    font-family: monospace;
    grid-row: 2 / 3;
    grid-column: 1 /4;
    background-color: rgb(245, 238, 248);
    text-align: center;
    padding: 1em;
}

.bioBoxProject {
    border-style: double;
    border-radius: 25px;
    border: 4px #800000;
    padding: 1em;
    box-shadow: 3px 3px #888888;
    display: grid;
    grid-template-rows: auto auto 150px;
    background-color: rgb(245, 238, 248);
}

.imgContainer {
    font-family: monospace;
    text-align: center;
    background-color: rgb(245, 238, 248);
}

.projectsImg {
    max-width: 100%;
    max-height: 100%;
    background-color: rgb(245, 238, 248);
}

.myLinks {
    text-shadow: 0 0 0.10em #E5CCFF;
    background-color: rgb(245, 238, 248);
}

a:hover {
    background-color: rgb(244, 236, 247);
}

.nav ul li:hover a{ 
     color:#34495E ;
    !important
}