@charset utf-8;

section h1 {
    font-size: 40pt;
    text-align: left;
    margin-left: 5vw;
}

section h2 {
    font-size: 30pt;
}

section h3 {
    font-size: 20pt;
}

section p {
    font-size: 15pt;
    width: 90%;
    margin-bottom: 2vw;
}

section img {
    width: 90%;
    border: 5px solid black;
}

section a {
    font-size: 20pt;
    background-color: #990000;
    padding: 1vw 20vw 1vw 20vw;
}

section a:hover {
    background-color: #5e0000;
}

#gameWorkSection {
    background-image: url(images/homeBumper1ImageTint.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

#webWorkSection {
    background-image: url(images/homeBumper2ImageTint.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

#gameWorkSection ul, #webWorkSection ul {
    list-style-type: none;
    overflow: hidden;
}

.projectListing {
    margin: 2vw 0 2vw 0;
}

.projectListing ul li {
    float: left;
}

.listingImage {
    width: 35vw;
}

.listingText {
    width: 50%;
}

.notReleased {
    font-size: 20pt;
    background-color: #333333;
    padding: 1vw 0 1vw 0;
    text-align: center;
}

@media screen and (max-width: 800px) {
    .projectListing {
        margin: 10vw 0 10vw 0;
    }
    
    .projectListing ul li {
        width: 80vw;
    }
    
    section p {
        margin-bottom: 10vw;
    }
    
    section a {
        font-size: 20pt;
        background-color: #990000;
        padding: 5vw 0 5vw 0;
        text-align: center;
        display: block;
    }

    section a:hover {
        background-color: #5e0000;
    }
    
    .notReleased {
    font-size: 20pt;
    background-color: #333333;
    padding: 5vw 4vw 5vw 4vw;
    text-align: center;
}
}