h1 {
    display: block;
    font-size: 500%;
    z-index:5;
    width: 100vw;
    grid-row: span 2;
    margin-top: 0;
    height: 100%;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    background-position: absolute;
    background-position-y: center;
    position: fixed;
    color: rgb(0, 0, 0);
    box-shadow: 3px 3px 3px rgb(0, 0, 0);
    z-index: 0;
    position: relative;
    top: 0px;
    left: 0px;
    grid-row-end: -1;
    grid-area: header;

}
header{
    font-size:16px;
    font-family:'Arial';
}
ol{
    font-family:'Arial';
    margin-left:10%;
}
ul{
    font-family:'Arial';
    margin-left:10%
}
li{
    font-family:'Arial';
}
#About {
    background-image: url("Images/Header-Background.jpg");
    background-size: 100vw;
    background-size: 100%;
}

#Blog {
    background-image: url("Images/BlogPost.jpg");
    background-position-y: bottom;
    background-size: 100vw;
}

body {
    overflow-y: hidden;
    width: 100%;
}
p{
    overflow-wrap: break-word;
    line-height: 2;
    font-family:'Arial';
    color:black;
    font-size: 14px;
    margin-left: 10%;
    margin-right: 10%;
}

#subTitle {
    font-size: 50%;
    margin: 0;
    padding: 0;
    color: white;
    justify-content: center;
    justify-self: center;
}

.formatGrid {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100vh;
    width: 100vw;
    margin: 0;
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar body";
    grid-template-columns: 20% 1fr;
    grid-template-rows: minmax(10%, 1fr) minmax(0%, 70%)
}

button {
    max-width: 100%;
    min-width: 10%;
}

div#body {
    font-size: 90%;
    display: block;
    height: auto;
    overflow: auto;
    word-break: normal;
    overflow-wrap: break-word;
    justify-content: center;
    padding:0;
    margin:0;
    justify-self: left;
    justify-items: left;
    overflow-x:hidden;
    width: 100%;
    grid-area: body;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    z-index:-1;
}

#Headertext {
    z-index: 0;
    color: white;
    display: flex;
    justify-content: center;

    justify-self: center;
    justify-items: center;
    width: 100vw;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

title {
    display: block;
    color: white;
    font-size: 70%;
    justify-content: center;
    justify-self: center;
    z-index: 2;
}

div#sideCol {
    grid-area: sidebar;
    margin: 0 0 0;
    overflow-y: hidden;
    justify-items: center;
    display: block;
    z-index: -1;
    position: absolute;
    justify-items: center;
    justify-content: center;
    left: 0px;
    align-items: stretch;
    background: black;
    height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

html {
    align-items: top;
    background-color: rgb(0, 0, 0);
    overflow-x: auto;
    overflow-y: hidden;
}
span.s1 {
    font: 12.0px Helvetica
}

image {
    justify-self: center;
    aspect-ratio: 1/1;
    width: 15vw;
    height: 20vw;
}

.displayImg {
    object-fit:fill;
    position:relative;
    flex:1;
    flex-shrink:1;
    display:block;
    min-width:0;
    max-width: 60%;
    height:auto;
    margin: 0 2%;
}
.displayImg:hover{
    animation: lift 0.6s forwards;
}
.displayImg:not(:hover){
    animation: drop 0.6s forwards;
}
#imgDisplay{
    display:flex;
    flex-flow:row nowrap;
    position:relative;
    justify-self:center;
    justify-content:space-around;
    align-content:flex-start;
    flex-basis:1;
    padding:0.5em;
    width:100%;
    height:auto;
}
@keyframes lift{
    0%{
        transform:translateY(0px);
        box-shadow:none;
        size:100%;  
    }
    30%{
        size:200%;
        box-shadow: 4px 9px 9px rgb(102, 102, 102);
        transform:translateY(-12px);
    }
    100%{
        transform:translateY(-5px);
        box-shadow: 4px 4px 4px rgb(102, 102, 102);
    }

}
@keyframes drop{
    0%{
        transform:translateY(-5px);
        box-shadow: 4px 4px 4px rgb(102, 102, 102);
    }
    100%{
        transform:translateY(0px);
        box-shadow:none;
        size:100%;  
    }
    
}