@font-face {
    font-family: 'play';
    src: url('font/play.ttf');
}

/*@font-face {
    font-family: 'playBold';
    src: url('font/playBold.ttf');
}
    */

body {
    padding: 0px;
    margin: 0px;
    color: #efefef;
}

div {
    padding: 0px;
    margin: 0px;
}

a {
    text-decoration: none;
}

.backgroundImage {
    background-size: auto auto;
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
    width: 100%;
}

.bg1 {
    background-image: url("img/leadBackground.jpg");
    height: 1100px;
}

.side1 {
    background-image: url("img/exploreBackground.jpg");
    height: 875px;
}

.side2 {
    background-image: url("img/craftBackground.jpg");
    height: 875px;
}

.side3 {
    background-image: url("img/buildBackground.jpg");
    height: 875px;
}

.side4 {
    background-image: url("img/defendBackground.jpg");
    height: 875px;
}

.bottomFollow {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 20px;
}


.sideLeftText {
    background-color: transparent;
    text-align: left;
    padding-top: 136px;
    padding-left: 110px;
    padding-right: 545px;
}

.sideRightText {
    background-color: transparent;
    text-align: left;
    padding-top: 136px;
    padding-left: 585px;
}

.background-with-text {
    background-color: transparent;
    padding-top: 864px;
    text-align: center;
}

.navbar-color {
    background-color: #140f03;
    -webkit-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.46);
    -moz-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.46);
    box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.46);
}

.body-color {
    background-color: #0e0c08;
}

.display-4 {
    color: #ffd57a;
    text-shadow: 2px 2px 8px black;
    font-size: 38px;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-family: play;
}

.lead {
    color: #fbfbfb;
    font-size: 22px;
    line-height: 36px;
    margin-top: 28px;
}

.navbar-brand {
    color: #ffdf99;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-family: play;
    font-size: 20px;
}

.trailerDiv {
    margin: auto;
    display: block;
    width: 1280px;
    padding-bottom: 26px;
}

.trailerVid {
    width: 1280px;
    height: 720px;
}


.itchWidget {
    width: 552px;
    height: 167px;
    display: inline-block;
}

.buyButton {
    cursor: pointer;
    color: #efefef !important;
    font-family: play;
    letter-spacing: 3px;
    padding-top: 4px;
    font-size: 18px;
}

    .buyButton img {
        height: 26px;
        float: right;
        padding-left: 20px;
    }

.navContainer {
    max-width: 960px;
}

.nav-item {
    color: #efefef;
    font-size: 15px;
    padding-top: 10px;
}

.navbar-nav {
    padding-left: 20px;
}

.socialMedia {
    padding-bottom: 15px;
    padding-top: 15px;
    color: #efefef;
    font-family: play;
    font-size: 1.4em;
    letter-spacing: 2px;
}

.invalid {
    color: lightpink;
}

.valid {
    color: lightgreen;
}
.list-group-item {
    background-color: #111;
}
@media (max-width: 1199.98px) {
    .trailerDiv {
        width: 640px;
        padding-bottom: 26px;
    }

    .trailerVid {
        width: 640px;
        height: 360px;
    }
}

@media (max-width: 860px) {
    .trailerDiv {
        width: 320px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .trailerVid {
        width: 320px;
        height: 180px;
    }

    .bg1 {
        height: 640px;
    }

    .side1 {
        height: 625px;
    }

    .side2 {
        height: 625px;
    }

    .side3 {
        height: 625px;
    }

    .side4 {
        height: 625px;
    }

    .background-with-text {
        padding-top: 254px;
    }

    .bottomFollow {
        text-align: center;
        padding-top: 30px;
        padding-bottom: 20px;
    }

    .sideLeftText {
        padding-top: 100px;
        padding-left: 30px;
        padding-right: 100px;
    }

    .sideRightText {
        padding-top: 100px;
        padding-left: 100px;
        padding-right: 16px;
    }

    .lead {
        font-size: 17px;
        line-height: 24px;
        margin-top: 26px;
    }

    .backgroundImage {
        background-size: auto 102%;
    }

    .itchWidget {
        width: 100%;
        height: 167px;
    }
}