body {
    font-family: "Cormorant Garamond", serif;
    background-color: black;
    color: white;
    margin: 0;
}


header,
footer {
    display: block;
    background-color: #800000;
}

header p {
    font-size: 2em;
    margin: 0;
    padding: 0.50em;
}

footer p {
    font-size: 1.25em;
    text-align: center;
}

img {
    margin: 1em;
}

hr {
    width: auto;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.75em;
    color: #ffa69e;
}

p,
li {
    font-size: 1.25em;
}

#inner-header,
#inner-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

#inner-footer {
    grid-template-columns: 3fr 1fr 3fr;
}

#footer-logo {
    text-align: center;
}

header a {
    color: white;
    font-size: 1.25em;
    border: 1px solid white;
}

footer a {
    color: white;
    font-size: 1.125em;

}

.plain-link {
    text-decoration: none;
    color: unset;
}

#header nav {
    display: flex;
    justify-content: space-evenly;
}

#footer nav {
    padding-top: 1em;
}

nav a {
    padding: 0em 1.5em;
    text-decoration: none;
}

#header nav a:hover,
#header nav a:focus {
    background-color: white;
    color: #800000;
}

#footer nav a:hover,
#footer nav a:focus {
    text-decoration: underline;
}

.content-section {
    max-width: 90%;
    margin: 1em auto;
}

.content-section-small {
    max-width: 50%;
    margin: 1em auto;
}

.grid {
    display: grid;
}

p a {
    color: white;
}

.two-columns {
    grid-template-columns: 1fr 1fr;
}

.two-columns-left {
    grid-template-columns: 4fr 6fr;
}

.two-columns-right {
    grid-template-columns: 6fr 4fr;
}

#handshake:hover {
    content: url("/assets/handshake_blue.png");
}

#linkedin:hover {
    content: url("/assets/linkedin_white.png");
}

#links {
    text-align: center;
}

.img-text-container {
    margin: 2em auto;
}

.resume-container * {
    margin: unset;
}

.resume-container h1 {
    margin: 0.5em auto;
}

.portfolio-container img {
    width: 30em;
}

.portfolio-container {
    width: 75%;
}

#arcade-game-project div {
    text-align: right;
}

.img-text-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    /*https://www.w3schools.com/cssref/pr_grid-template-columns.php*/

}

.portfolio-container img:hover {
    opacity: 75%;
}

#download-resume {
    position: fixed;
    bottom: 4vh;
    right: 3vw;
    margin: 0;
    background-color: #800000;
    border: solid 2px white;
    border-radius: 25%;
    text-align: center;
}

#download-resume:hover {
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding: 0 1em;
    border-radius: 25px;
}

#download-resume p {
    display: none;
    margin: 0;
}

#download-resume:hover p {
    display:block;
}

#download-resume img {
    margin: 0;
}  

/*https://www.w3schools.com/howto/howto_css_modal_images.asp*/
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    padding-top: 5em;
    width: 100%;
    height: 100%;
    background-color: black;
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
}

.text-block {
    padding: 0em 1.5em;
}