html {
    font-size: 18px;
    font-family: 'Lato', sans-serif;
    background-color: rgb(140, 194, 161);
    background-image: url("../media/portfolio/background.png");
    background-repeat: repeat;
    background-size: 128px;
    margin: 1rem 8rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Dosis', sans-serif;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2.25rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.3rem;
}

h6 {
    font-size: 1.15rem;
}

#bg-wrapper {
    background-color: rgba(100, 115, 100, 0.75);
}

header, main, footer {
    padding: 1rem;
}

header {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.title {
    text-align: center;
    line-height: 25px;
}

#copyright {
    font-size: 0.85rem;
    font-family: 'Chivo Mono', monospace;
    text-align: center;
    color: rgba(100, 115, 100, 0.9)
}

#nav {
    display: flex;
    background-color: rgba(100, 115, 100, 0.90);
    justify-content: center;
}

ul#nav li {
    list-style: none;
}

ul#nav li button {
    padding: 1rem;
    margin: 1.5rem 0.5rem;
    background-color: rgb(180, 180, 180);
}

#home-wrapper {
    display: grid;
    grid-template-columns: 2fr 8fr;
    grid-template-rows: auto auto;
    grid-template-areas: "home-portrait bio"
                         "projects projects";
}

#home-portrait {
    grid-area: home-portrait;
}

#bio, .description {
    grid-area: bio;
    line-height: 35px;
    padding-left: 2rem;
    padding-right: 2rem;
}

#projects {
    grid-area: projects;
}

#projects h3 {
    text-align: center;
}

#projects-display {
    display: flex;
    background-color: rgba(100, 115, 100, 0.90);
    padding-top: 1.5rem;
    margin-left: -1rem;
    margin-right: -1rem;
}

.project {
    width: 50%;
    margin: auto;
    text-align: center;
}

#downpour-wrapper {
    display: none;
}

#trivia-wrapper {
    display: none;
}

#quikkstep-wrapper {
    display: none;
}

#contact {
    display: none;
}

.thumbnail {
    width: 200px;
    height: 200px;
}

#trivia-screenshot, #quikkstep-screenshot {
    width: 650px;
    height: 400px;
}