/* Mobile first CSS */

/* Include files */
@import url('reset.css');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,600;1,600;1,700&family=Roboto:wght@400;700&display=swap');
@import url('variables.css');
@import url('main.css');
@import url('index.css');
@import url('visit-us.css');

@media (min-width: 750px){

    .intro{
        flex-direction: row;
        background-color: var(--purple);
        padding: 15px;
        align-items: center;
        margin-bottom: 35px;
    }

    .intro:nth-of-type(4n){
        flex-direction: row-reverse;
        background-color: var(--purple);
        padding: 15px;
        align-items: center;
        margin-bottom: 35px;
    }

    .intro .intro-container{
        padding-left: 20px;
    }

    .intro-container{
        margin-bottom: 0px;
    }

}

@media (min-width: 860px){    
    :root{
        font-size: 20px;
    }
}

@media (min-width: 960px){
    #hamb-icon{
        display: none;
    }

    header{
        flex-direction: row;
        position: relative;
        height: 100px;
        margin: 0 auto 65px auto;
    }

    #logo {
        width: 78px;
        height: 78px;
        background: url(/images/logo.jpg);
        background-size: 78px 78px;
    }

    #logo:hover {
        width: 78px;
        height: 78px;
        background: url(/images/logo-hovered.jpg);
        background-size: 78px 78px;
    }

    nav{
        display: block;
        position: absolute;
        top: 100px;
        left: 0%;
        width: 100%;
        background-color: var(--purple-dark);
        border: 0;
    }

    #hamb-chk:checked ~ nav{
        display: block;
        position: absolute;
        top: 100px;
        left: 0%;
        width: 100%;
        background-color: var(--purple);
        border: 0;
    }

    nav ul{
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
    }

    nav li{
        flex-basis: auto;
    }

    nav a{        
        padding: 15px 10px 15px 30px;
    }

    main {
        width: 90%;
        margin: 0 auto;
    }

    .intro
    {
        width: 95%;
        margin: 15px auto 35px auto;
    }

    .intro img{
        max-width: 400px;
        width: auto;
        height: auto;
    }

    footer ul li{
        float: left;
    }
}

@media (min-width: 1500px){
    header{
        width: 90%;
        max-width: 1370px;
    }
    
    main {
        width: 90%;
        margin: 0 auto;
        max-width: 1170px;
    }

    footer{
        width: 90%;
        margin: 0 auto;
        max-width: 1370px;
    }
}