﻿
body {
    background-color: #113;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
}

h1, h2, h3 {
    font-family: 'Orbitron', sans-serif;
}

h2 {
    font-size: 3em;
}

a.social-media-link {
    color: white;
    text-decoration: none;
}

    a.social-media-link:hover {
        text-decoration: underline;
    }

    a.social-media-link:active {
        color: white;
    }

    a.social-media-link:visited {
        color: white; 
    }


.twitter {
    color: #69f
}

.insta {
    color: #AA34B3;
}

.h-divide {
    margin: 0 1em;
}

.head-container {
    width: 100%;
    background-color: #000;
}

    .head-container .head-image {
        background-image: url('Images/banner-back.png');        
        text-align: center;
        background-repeat: no-repeat;
        background-position: center;
        padding-bottom: 10px;
    }

        .head-container .head-image .head-image-nav-container {
            height: 1em;
        }

            .head-container .head-image .head-image-nav-container .social-media {
                float: right;
                height: 1.8em;
                margin-right: 10px;
                background-color: #000000;
                border-bottom-left-radius: 1em;
                border-bottom-right-radius: 1em;
                padding: 0 1em 1em;
                color: #fff;
            }

    .head-container .head-image-logo {
        background-image: url('Images/header-logo.png');
        width: 202px;
        height: 164px;
        margin: 0 auto;
    }

    .head-container .head-image-name {
        background-image: url('Images/pug-fugly-games.png');
        width: 578px;
        height: 46px;
        margin: 20px auto 0;        
    }


.page-content {
    padding: 0 40px;
}

    .page-content h1, h2, h3 {
        text-align: center;
        padding: 1em 0 0;
    }

    .page-content p {
        padding: 1em 0;
    }

.game-image-row {

}

.game-img {
    width: 100%;
    border: solid 5px #337;
    border-radius: 10px;
}

.row.game-image-row > div {
    padding-bottom: 20px;
}

.row.game-image-row > div span {
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    display: block;
    width: 100%;
    background-color: #337;
    text-align: center;
}

.social-media-link {
    white-space: nowrap;
}

.download-button {
    background-color: #337;
    border-radius: 10px;
    padding: 10px;
    display: inline-block;
    width: 200px;
    text-align: center;
    margin: 0 10px;
}

.download-container
{
    width: 720px;
    margin: 0 auto 30px;

}

.youtube-back {
    background-position: right;
    background-image: url('Images/Destructivator2/dest-video-back.jpg');
    width: 100%;
    height: 500px;
    background-repeat: no-repeat;
    background-color: #000;
    height: 365px;
    padding-top: 25px;
    margin-bottom: 20px;
    border-radius: 10px;
}

.youtube-embed {
    width:560px;
    height:315px;
    margin-left: 25px;
}

@media screen and (max-width: 992px) {
    body {
        font-size: 2.7em;
    }
    h2 {
        font-size: 1.5em;
    }
    .head-container .head-image .head-image-nav-container {
        height: 4em;
        font-size: 1.5em;
    }
    .head-container .head-image .head-image-nav-container .social-media {
        float: none;
        height: 2em;
    }

}

@media screen and (max-width: 880px) {
    h2 {
        font-size: 1.3em;
    }
}

@media screen and (max-width: 700px) {
    h2 {
        font-size: 1em;
    }
}

