@charset "UTF-8";
/* CSS Document */

:root{
    --tghq-green: #373b22;
    --tghq-cream: #f8f6bd;

}

 @font-face {
        font-family: 'gunplay';
        src: url('/assets/gunplay_rg.otf');
        font-weight: normal;
        font-style: normal;
    }
    body{
        color:var(--tghq-cream);
        margin:0;
        background-color:#000;
        font-family: sans-serif;
    }
    .nav{

        background-color:var(--tghq-green);
        padding:1em;
        font-size:1em;
        width:100%;
        display: flex;
        flex-direction: row;
        flex-wrap:nowrap;
        font-weight:bold;
        justify-content:space-evenly;

    }
    .navItem{
        width:10%;
    }
    .navLink{
        padding:.3em;
        text-align:center;
        border: var(--tghq-green) 1px solid;
    }
    .navLink:hover {
    border-color: var(--tghq-cream); /* show border on hover */
    cursor:pointer;
}
    .header{
        width:100%;
        height:70vh;
        background:url(https://www.topgeneralhq.com/images/tghq_bg.jpg) no-repeat center center;
        background-size:cover;
        text-align:center;
        font-size:10em;
        font-family: 'gunplay';
        text-shadow:
        0 0 5px #000,
        0 0 10px #000,
        0 0 20px #000;
        
    }
    .ratingbar{
        border-top:1px solid #DDD;
        border-bottom: 1px solid #DDD;
        width:80%;
        padding:1em;
        min-height:2em;
        margin-top:1em;
        margin-bottom:1em;
        color:#DDD;
        display: flex;
        flex-direction: row;
        justify-content:space-evenly;
    }
    .ratingItem{
        width:14.2%;
        text-align:center;
        border-left:1px solid #DDD;
        /* added for vertical centering */
    display: flex;
    flex-direction: column;
    justify-content: center;
    }
    .rating{
        font-size:1.7em;
    }
    .mobiNav{
        display:none;
        background-color:var(--tghq-green);
        padding:1em;
        width:100%;
    }
    .login-dropdown {
        min-width: 20em; /* adjust as needed */
    }
    .messageboard{
        width:100%;
        background-color:var(--tghq-green);
        padding:1em;
    }
    a{
        text-decoration:none;    
    }
    .tgfooter{
        width:100%;
        background-color:var(--tghq-green);
        padding:1em;
        margin-top:1em;
    }

    @media screen and (max-width: 1200px) {
        .nav, .ratingbar{
            flex-wrap:wrap!important;
        }
        .navItem{
            width:20%;
        }
        .ratingItem{
            width:30%;
        }
        #kickstarter{
            border-left:0;
        }
    }

    @media screen and (max-width: 800px) {
        .nav{
            display:none;
        }
        .mobiNav{
            display:block;
        }
        .navItem{
            width:20%;
        }
        .header{
            font-size:8em;
        }
        .ratingItem{
            width:50%;
        }
        #blog{
            border:0;
        }
        #kickstarter{
            border-left:1px solid #DDD;
        }
        #ratings, #subscribers{
            border-left:0;
        }
    }