/* Global */

.MainBody
{
    margin: 0;
    font-family: 'Raleway', sans-serif;
    font-size: 19px;
    line-height: 1.6rem;
    color: rgb(225, 225, 225);
}

a
{
    color: rgb(40, 190, 180);
}

a:hover 
{
    text-decoration: underline;
}

h1, h2, h3, h4, h5 
{
    font-family: 'Montserrat', sans-serif;
    margin: 0.4em 0 0.4em 0; 
}

/* Nav */

.LeftContainer
{
    display: flex; 
    min-height: 100vh;
    flex-direction: column;
    width: 350px;
    height: 100%;
    position: fixed;
    z-index: 3;
    background-color: rgb(22, 26, 45);
    border-right: 1px solid rgb(37, 45, 59);
    transition: margin-left 300ms;
}

.LeftContent 
{
    flex: 1;
}

.LeftLogo
{
    margin: 40px;
}

.LeftNavLink 
{
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    color: rgb(240, 240, 240);
    text-decoration: none;
    display: block;
    padding: 20px 0px 20px 40px;
}

.LeftNavLink:hover
{
    text-decoration: none;
    background-color: rgb(45, 45, 65);
}

.LeftNavIcon 
{
    margin-right: 10px;
    font-size: 1.2rem;
    color: rgb(36, 233, 180);
}

.MenuToggle 
{
    position: fixed;
    left: 20px;
    bottom: 20px;
    visibility: hidden;
    background-color: rgb(75, 75, 75);
    background-image: url("hamburger.png");
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    font-size: 30px;
    z-index: 4;
    transition: left 300ms;
}

.MenuCheck
{
    position: fixed;
    left: 20px;
    bottom: 20px;
    width: 75px;
    height: 75px;
    opacity: 0;
    z-index: 5;
}

.LeftFooter 
{
    margin-bottom: 10px;
}

.Message
{
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    text-align: center;
    border: 1px solid rgb(36, 233, 180);
    border-radius: 10px;
    margin: 0px 25px 30px 25px;
    padding: 10px 0px;
}

.bmc-btn-container
{
    text-align: center;
    margin-bottom: 20px;
}

.bmc-btn
{
    min-width: 150px;
    font-size: 17px !important;
}

.TwitterFollow
{
    font-family: 'Montserrat', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
    font-weight: bold;
}

.TwitterLink
{
    text-decoration: none;
    color: white;
}

.TwitterLink:hover
{
    text-decoration: none;
}

.TwitterLogo 
{
    width: 40px;
}

.FooterText 
{
    font-size: 0.7rem;
    text-align: center;
}

/* Content */

.RightContainer
{
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    height: 100%;
    margin-left: 350px;
    background-color: rgb(22, 26, 45);
}

.RightContent
{
    flex: 1 0 auto; /* Prevent the footer ending half way up the page in IE11 */
    width: 75%;
    max-width: 1024px;
    z-index: 1;
    padding: 30px 50px 0 50px;
    margin: 0px auto 0px auto;
}

.HeroContainer 
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 45px;
    flex-wrap: nowrap;
    width: 100%;
    margin-bottom: 50px;
}

.HeroFace 
{
    flex: 0 0 125px;
}

.HeroText 
{
    flex-grow: 1;

}

.IndexHeroTitle 
{
    font-size: 3em;
    line-height: 1.2em;
}

.IndexHeroDescription 
{
    margin-bottom: 40px;
}

.IndexHeroDescription a
{
    color: rgb(225, 225, 225);
}

/* Featured content */

#FeaturedContent {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 50px;
}

.FeaturedItem {
    display: flex;
    position: relative;
    height: 100%;
}

.FeaturedItem img {
    border-radius: 10px;
    max-width: 100%;
}

.FeaturedTitle {
    width: 100%;
    padding: 12px 0px;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0, 0.75);
    position: absolute;
    bottom: 0;
    border-radius: 0px 0px 9px 9px;
}

/* Index blog posts */

.LatestPosts 
{
    text-align: center;
    margin: 0px 0px 25px 0px;
    font-size: 1.8rem;
}

.BlogPosts 
{
    flex-grow: 1;
}

.BlogPostIndex
{
    margin: 0px 0px 50px 0px;
}

.BlogPostIndex a
{
    text-decoration: none;
}

.BlogIndexTitle
{
    font-size: 1.4em;
}

.BlogIndexTitle a 
{
    color: rgb(225, 225, 225);
}

.BlogPostMeta
{
    font-size: 0.85rem;
}

.BlogPostMeta a 
{
    text-decoration: none;
}

.PostsContainer 
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 25px;
    flex-wrap: nowrap;
    width: 100%;
    margin-bottom: 50px;
}

.TwitterPosts
{
    flex: 0 0 300px;
}

.Button {
    /* Thanks http://www.colorzilla.com/gradient-editor/ ! */
    background: rgb(40,190,180);
    background: -moz-linear-gradient(-45deg, rgb(40,190,180) 0%, rgb(30,108,161) 99%);
    background: -webkit-linear-gradient(-45deg, rgb(40,190,180) 0%,rgb(30,108,161) 99%);
    background: linear-gradient(135deg, rgb(40,190,180) 0%,rgb(30,108,161) 99%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28beb4', endColorstr='#1e6ca1',GradientType=1 );
    padding: 20px;
    margin: 0px auto 40px auto;
    display: block;
    width: 150px;
    text-align: center;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 20px;
}

.Button:hover {
    /* Thanks http://www.colorzilla.com/gradient-editor/ ! */
    background: rgb(110,190,180);
    background: -moz-linear-gradient(-45deg, rgb(110,190,180) 0%, rgb(80,130,160) 99%);
    background: -webkit-linear-gradient(-45deg, rgb(110,190,180) 0%,rgb(80,130,160) 99%);
    background: linear-gradient(135deg, rgb(110,190,180) 0%,rgb(80,130,160) 99%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ebeb4', endColorstr='#5082a0',GradientType=1 );
    text-decoration: none;
}

#PatchNotesLink
{
    text-align: center;
    margin: 0px 0px 25px 0px;
    font-size: 1.2rem;
    font-style: italic;
}

/* Games page */

.GamesPageGame 
{
    margin-top: 50px;
    margin-bottom: -10px;
}

.GamesPageCategory
{
    margin-top: 40px;
    margin-bottom: 25px;
}

.GamesPageItem
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 25px;
    color: rgb(225, 225, 225);
    margin-bottom: 25px;
}

.GamesPageItem h3 
{
    margin-top: 0px;
}

.GamesPageItemLink
{
    text-decoration: none;
}

.GamesPageItemLink:hover
{
    text-decoration: underline;
}

.GamesPageItemImage
{
    width: 300px;
    height: auto;
    flex-grow: 0;
    border-radius: 10px;
}

.GamesPageItemText 
{
    flex-grow: 1;
}

.GamesPageInfographicContainer
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.GamesPageInfographic
{
    display: flex;
    flex-direction: column;
    color: rgb(225, 225, 225);
    margin-bottom: 20px;
}

.GamesPageInfographicImage
{
    width: 230px;
    height: auto;
    border-radius: 10px;
    margin-bottom: 15px;
}

.GamesPageInfographicText
{
    width: 230px;
    font-size: 1.1rem;
    font-weight: bold;
}


/* Pages */ 

.PageTitle
{
    text-align: center;
    font-size: 2rem;
    line-height: 2.3rem;
    margin: 0.4rem 0rem 1.2rem 0rem;
}

.IframeArticle iframe
{
    display: block;
    border: none;
    height: 100vh;
    width: 100%;
}

.BlogPageMeta 
{
    text-align: center;
    margin-bottom: 30px;
}

.Page h1, h2, h3, h4
{
    margin: 1.5rem 0 1.2rem 0;
}

.Page iframe
{
    margin: 20px auto 30px auto;
    display: block;
    max-width: 90%;
}

.large-img
{
    display: block;
    max-width: 90%;
    margin: 20px auto 20px auto;
}

/* Mobile */

@media all and (max-width: 1400px)
{
    .TwitterPosts
    {
        flex: 0 0 200px;
    }
}

@media all and (max-width: 1200px)
{
    .PostsContainer 
    {
        flex-direction: column;
    }
}

@media all and (max-width: 1000px)
{
    input[type=checkbox] ~ .LeftContainer
    {
        margin-left: -350px;
        z-index: 3;
    }

    input[type=checkbox]:checked ~ .LeftContainer
    {
        margin-left: 0px;
    }

    input[type=checkbox]:checked ~ .MenuToggle
    {
        left: 270px;
        background-image: url("cross.png");
    }

    input[type=checkbox]:checked
    {
        left: 270px;
    }

    .RightContainer
    {
        width: 100%;
        margin-left: 0;
    }

    .MenuToggle
    {
        visibility: visible;
    }
}

@media all and (max-width: 600px)
{
    .RightContent
    {
        width: 85%;
        padding: 30px 0px 0 0px;
        margin: 0 auto 0 auto;
    }

    .HeroContainer
    {
        flex-wrap: wrap-reverse;
    }

    .IndexHeroTitle 
    {
        font-size: 3rem;
        width: 85%;
        margin: auto auto 20px auto;
    }

    .IndexHeroDescription
    {
        width: 85%;
        margin: auto auto 20px auto;
    }
}

@media all and (max-height: 550px)
{
    .LeftLogo
    {
        margin: 20px 40px;
    }

    .LeftNavLink 
    {
        padding: 10px 0 10px 40px;
    }

    .TwitterFollow
    {
        margin-bottom: 20px;
    }
}