h1{
    display:block;
    font-size:500%;
    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(255, 255, 255);
    z-index:0;
    position:absolute;
    top: 0px;
    left:0px;
    grid-row-end:-1;
    grid-area:header;
    box-shadow:0px 2px 8px #000
}
#Logo{
    height:100%;
    width:100%;
    top:0;
    right:0;
    align-self:center;
    position:absolute;
}
#About{
    background-image:url("../Images/Header-Background.jpg");
    object-fit:cover;
    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;
    font-family:'Arial';
    margin-left:10%;
    margin-right:10%;
    color:black;
    z-index:5;
}
li{
    font-family: Arial;
}
#subTitle{
    font-size:30%;
    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;
    justify-self:left;
    justify-items:center;
    overflow-x:hidden;
    width:100%;
    grid-area:body;
    background-color:rgb(255, 255, 255);
    color:white;
}
.Headertext{
    z-index:0;
    color:white;
    display:block;
    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:rgb(0, 0, 0);
    height:100vh;
    width:100%;
    overflow-x:hidden;
}
html{   
    align-items:top;
    background-color:rgb(0, 0, 0);
    overflow-x:auto;
    overflow-y:hidden;
}
image{
    justify-self:center; 
    aspect-ratio: 1/1;
    width:15vw; 
    height:20vw;
}
#vex{
    aspect-ratio:1/1;
    width:15vw; 
    height:20vw;
}
.paragraphSquare{
    border-radius:8px; 
    background-color:rgb(255, 255, 255); 
    border:1px solid rgb(210, 210, 210);
    box-shadow:2px 3px 5px #ababab;
    padding:1%;
    position:relative;
}

.grid{
    height:100%;
    width:100%;
    display:grid;
    grid-template-columns:  30% 1fr;
    grid-template-rows:1fr;
    grid-template-areas:
    "logo" "title";
    align-content:center;
    justify-content:center;
    justify-self: center;
    position:absolute;
}
#title{
    height:100%;
    width:100%;
    grid-area:title;
}
.icon{
    aspect-ratio:1/1;
}
[hoverable] {
    transform: translateY(0);
    filter: drop-shadow(0px 0px 1px rgba(12, 13, 20, 0.4));
    transition: transform 0.2s ease, filter 0.2s ease;
}

[hoverable]:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0px 8px 8px rgba(16, 17, 25, 0.4));
}

.no-animations *,
.no-animations *::before,
.no-animations *::after {
    animation: none !important;
    transition: none !important;
}