*{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin:0;
    padding:0;
}
#header{
    background-color: #E8E9F3;
    color: #272635;

    display:flex;
    align-content:center;
    justify-content:center;
    
    font-weight:750;
    font-size:36px;
}
#midsection{
    flex:1;
    position: relative;
    display:flex;
    align-content: center;
    justify-content:center;
    width: 100vw;
    height:92vh;

    background-color: #E8E9F3;
}
#change-grid{
    background-color:#272635;
    color:#CECECE;
    font-weight:bold;
    border-radius:5px;
    border: 1px solid black;
    margin-top: 2vh;
    width:10vw;
    height:5vh;
}
#toggleP {
    margin-left:3vw;
    font-weight:550;
    font-size:18px;
}
#box{
    margin-left:1vw;
}
#change-grid:hover {
    cursor:pointer;
}
#container{
    position:absolute;
    width: 800px;
    height: 800px;
    margin-top: 10vh;
    align-content: center;
    justify-content:center;
    display:flex;
    flex-wrap:wrap;
    border: 2px solid black; 
    border-radius: 2px;

    flex:1;
}
.square{
    box-sizing: border-box;
    border: 1px solid rgb(172, 172, 172);
    background-color: #fff;
}
.square:hover {
    transition: background-color .4s, opacity .5s;
}
footer {
    height: 5vh;
    width: 100vw;
    display: flex;

    background-color: #272635;

    justify-content: center;
    align-items: center;
}

footer img {
    margin-left:10px;
    width:20px;
    height:20px;
    z-index: 1;
}
footer a {
    display:flex;
    color: #E8E9F3;

}

#gh{
    margin-left:1vh;
    margin-bottom:5px;
    width:2vh;
    height:2vh;
    z-index:1;
}