/*
    app.css
    dtchris | darktownstudios.com

    1. Hamburger menu is messed up
*/

:root{
    --navbar-offset: 64px;
    --dts-primary: #111;
    --dts-secondary: cornflowerblue;
    --dts-tertiary: #777;
    --dts-bg-dark: #111;
    --dts-bg-light: #ccc;
    --dts-text-dark: #333;
    --dts-text-light: #ccc;

    --dts-background: #000;
    --dts-background-description: rgba(16,16,16, 0.65);
}

html{ font-size: 16px; }    /* 1em = 16px */

body{   
        font-size: 1.0rem;
        font-family: 'Roboto:300', sans-serif; 
        color: var(--dts-text-light);
        background-color: var(--dts-background);
        margin-top: var(--navbar-offset);
    }

    p{ font-size: 1.0rem; }

    h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
        font-family: 'Open Sans', sans-serif;
        font-style: normal;
        font-weight: 700;
        font-stretch: 100%;
        text-transform: uppercase;
        letter-spacing: 0.2rem;
        color: var(--dts-text-light);
    }
        h1{ font-size: 1.25rem; }
        h2{ font-size: 1.125rem;  }    
        h3{ font-size: 1.0625rem; }
        h4{ font-size: 1.0rem; }

    a { text-decoration: none; }
    a:hover{ color: var(--dts-secondary)}

    a.deprecated { 
        text-decoration: line-through; 
        color: var(--dts-text-dark);
    }

    .nobullets{
        list-style: none;
        margin: 0;
        padding: 0;
    }

.navbar{
    border-bottom: 1px solid var(--dts-secondary);
    height: var(--navbar-offset);
}

/* Hide the hamburger menu until we need or use it*/
.navbar-hide{
    display: none !important;
}



.navbar-brand, footer .goals {
    font-family: "Oswald", sans-serif;
    font-size: 1.5rem;
    padding: 0.25rem;
    letter-spacing: 0.25rem;
}

.avatar{
    width: 4rem;
    height: 4rem;
    margin-right: 0.75rem;
}

/* sections */
.section-landing{
    background-size: cover;
    background-position: center right 25%;
    
}
    .section-hero{
        background-image: url('/assets/img/landing/dungeon.jpg');
        height: calc(50vh - 80px);
    }
        .hero-default{
            background-image: url('');   
        }

    .section-description{
        color: var(--dts-text-light);
        border: 1px solid var(--dts-secondary);
        background-color: var(--dts-background-description);
        border-radius: 6px;
        box-shadow: 2px 2px 4px var(--dts-primary);
        padding: 1rem;
        margin-bottom: 1rem;       
    }
        .section-description p{
            border-top: 1px solid var(--dts-tertiary);
            padding-top: 16px;
        }

        .section-description .btn{
            padding: 2px;
            width: 50%;
            background-color: green;
            border-color: red;
        }

    

    .section-default{
        height: 50vh;
    }
    .section-assets{
        background-image: url('/assets/img/oilfield.jpg');     
    }
    .section-worlds{
        background-image: url('/assets/img/landing/virtual-worlds.webp');        
    }
    .section-textures{
        background-image: url('/assets/img/landing/game-textures.jpg');        
    }
    .section-art{
        background-image: url('/assets/img/landing/multimedia-art.jpg');   
    }  
    .section-dev{
        background-image: url('/assets/img/landing/app-dev.jpg');   
    }   
    .section-store{
        background-image: url('/assets/img/landing/store.jpg');   
    }
    .section-contact{
        background-image: url('/assets/img/landing/contact-desk.webp');   
    }
   
    .section-content{
        margin-top: 40px;
        margin-bottom: 40px;
        font-size: 0.9rem;
    }
    .section-error{
        background-image: url('/assets/img/admin/403-forbidden.webp');
        background-size: cover;
        height: 33vh; 
    }
    
footer{
    /* background-color: var(--dts-bg-dark); */
    background-image: url('/assets/img/landing/lions-gate-by-dt-chris.webp');
    background-size: cover;
    
    color: var(--dts-text-light);
    border-top: 1px solid var(--dts-secondary);
    padding: 1rem;
    height: 50vh;
}
    footer .goals{
        text-transform: uppercase;
        letter-spacing: 0.5rem;
        padding: 1rem;
    }
    
/* Avoid overly-specific selectors! */
.grayscale{
    filter: grayscale(55%);
}
    .grayscale:hover{
        filter: grayscale(0%);
        transform-origin: 100% 50%;
        transform: rotate(7deg);
    }
.dev{
    border: 1px solid red;
}



/* Media query overrides */
/* 320px and lower like Galaxy Fold */
@media only screen 
and (min-width : 320px)
and (orientation: portrait) {
    .navbar-brand{
        font-size: 1rem;
        letter-spacing: 0.25rem;
    }
    .section-landing{
        background-position: center right 25%;
        height: calc(100vh - var(--navbar-offset));
    }
    .avatar{
        height: 48px;
        width: 48px;
    }
    .section-description h1{
        font-size: 1.25rem;
        /* NOTE: If the avatar and the h1 were in their own elements
                they could line up under each other on smaller screens
                but really, is it worth worrying about?
                */
    }
}

@media only screen 
and (min-width : 320px)
and (orientation: landscape) {
    .navbar-brand{
        font-size: 1rem;        
    }
    .avatar{
        height: 64px;
        width: 64px;
    }
    .section-landing{
        background-position: center right 25%;
        height: calc(100vh - var(--navbar-offset));
    }
    .section-description p{
        font-size: 0.8rem;
    }
    .section-description h2{
        font-size: 1.0rem;
    }
}

/* -md- */
@media only screen 
and (min-width: 768px)
and (max-width: 990px)
and (orientation: portrait) {
    
    .section-landing{
        background-position: center right 25%;
        height: 50vh;
    }
}
@media only screen 
and (min-width: 768px)
and (max-width: 990px)
and (orientation: landscape) {
    
    .section-landing{
        background-position: center right 25%;
         height: calc(100vh - var(--navbar-offset));
    }
}


/* -lg- */
@media only screen and (min-width: 992px) {

    .section-landing{
        background-position: center right 25%;
        height: calc(100vh - var(--navbar-offset));        
    }
    
}

@media only screen and (min-width: 1200px) {

    /* workaround for larger screens to limit width, yeah it sucks :D */
    body{ 
        max-width: 1440px; margin: 0 auto;     
        border-left: solid 2px;
        border-right: solid 2px;
        border-color: var(--dts-primary);

    }

    .section-landing{
        background-position: center right 25%;
        height: 100vh;        
    }

    .section-description p {
        font-size: 1.25rem;
    }
    
    
    
}