*{
    margin:0px;
    padding:0px;
}
body{
    color: #FAFAFA;
    font-family: serif;
    background-color: #111111;
}
/*These are for configuring the header background with text on top*/
header{
    position: relative;
    background-color: black;
    width: 100%;

}
#logo{
    width: 100%;
    opacity: 0.08;
}
.header_p{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 2em;

}
h1{
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4em;
}
/*Start of the body*/
h2{
    font-size: 3em;
    text-align: center;
}
#gallery{
    display: grid;
    grid-template-columns: 30% 30% 30%; 
    grid-template-rows: auto;
    grid-gap: 0; gap: 5%;
    padding: 1em;

}
.pic{
    width: 100%;
    height: 100%;
    border: white solid .5px;

}
.pic:hover{
    box-shadow: 2px 2px 5px white;
}

/*footer styling*/
footer{
    background-color: black;
    height: 50px;
    opacity: .5;
    width: 100%;
}
footer p{
    text-align: center;
    padding-top: 15px;
}
#email:link{
    text-decoration: none;
    color: white;


}

/*Start of Show table*/
#show_head{
    margin-top: 3em;

}
table{
    width: 100%;
}
th{
    font-size: 1.5em;
    text-decoration: underline;
}
tr{
    text-align: center;
}
td{
    font-size: 1.5em;
    padding: 5px;
    padding-right: 10px;
}
/*For making the table look nicer on a smaller window*/
@media(max-width: 800px){
    .t_desc{
        text-align: left;
    }
    td{
        font-size: 1em;
    }
}
/*This is to ensure the header text doesn't overlap*/
@media(max-width: 700px){
    h1{
        font-size: 2em;
    }
    .header_p{
        font-size: 1em;    
    }
    th{
        font-size: 1em;
    }
    td{
        font-size: .8em;
    }

}