/*Base settings*/
body {
    background-color: #dbd9d5;
    padding: 0;
    margin:0;
    overflow-x: hidden;
    height: 100%;
}
    #wrapper {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
    }
    p {
        font-family: DejaVu Sans, Arial, Helvetica, sans-serif;
        padding-left:24px;
    }

    ul{
        list-style-type:none;
    }

    img{
        width: 100%;
    }

    article{
        grid-column: span 12;
        display:grid;
        grid-template-columns: repeat(12, 1fr);
        text-align: left;
    }

   section{
        grid-column: span 12;
        display:grid;
        grid-template-columns: repeat(12, 1fr);
        text-align: left;
    }

    h2 {
        font-family: Noto Sans, Arial, Helvetica, sans-serif;
        padding-left:24px;
        font-size:3.5vw;
        }h3 {
            font-family: Noto Sans, Arial, Helvetica, sans-serif;
            font-size: 3.3vw;
            padding-left:24px;
            }h4 {
                font-family: Noto Sans, Arial, Helvetica, sans-serif;
                padding-left:24px;
                }h5 {
                    font-family: Noto Sans, Arial, Helvetica, sans-serif;
                    padding-left:24px;
                    }
                

    li {
        font-family: Noto Naskh Arabic UI, Noto Sans, Arial, Helvetica, sans-serif;
    } 


/*Page header*/
header{
    display: grid;
    grid-column: span 12;
    grid-template-columns: repeat(12, 1fr);
    padding-left: 24px;
}
    h1 {
        font-family: Noto Sans, Arial, Helvetica, sans-serif;
        grid-column: span 6;
        width: 100%;
        font-size:7.6vw;
        margin-top:36.43px;
    }
    h1 a{
        text-decoration:none;
        color:#000000;
    }
    nav{ /*aligning nav to right edge*/
        grid-column: span 6;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        text-align: right;
        margin-top:45px;
    }
        nav ul{
            grid-column: 4/span 4;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            margin-top:0;
            height: 35%;
        }
        nav li{
            grid-column: span 3;
            display: grid;
            width: 100%;
            grid-template-columns: repeat(3, 1fr);
            text-align: left;
            height:60%;
            
        }
        nav li a{
            grid-column: 2/span 2;

            width: 100%;
            padding-left: 5px;
            text-align: left;
            display: block;
            font-size: 3vw;
            background-color: #FFFFFF;
            color: #585858;
            border: solid .25px #EFEEEE;
            text-decoration:none;
            border-radius:30px;
        }
        nav li a:hover{
            background-color:#e3e2e2;
            border: solid .25px #e3e2e2;
            grid-column: 1/span 3;
        }
        #current{
            grid-column: 1/span 3;
        }
        @media only screen and (max-width: 800px){
            nav ul{
                grid-column:3/span 5;
            }
            nav li a{
                font-size: 3.5vw;
            }
        }
        @media only screen and (max-width: 500px){
            nav ul{
                grid-column:2/span 6;
            }
            nav li a{
                font-size: 3.8vw;
            }
        }

/*Intro*/
#intro h2{
    grid-column: span 12;
    color:#585858;
}
    #intro p{
        font-size:3.5vw;
        margin-top:0;
        grid-column: span 9;
        color:#585858;
        padding-bottom: 10px;
    }

.transpBlock{
    background-color:rgba(73,75,88,.79);
    grid-column: span 12;
}
    .transpBlock h3{
        font-size:3.5vw;
        color:#C2C2C2;
        margin:0;
        margin-top: 6px;
    }
    #scrollBox{
        width: 100%;
        overflow-x: scroll;
    }
    .transpBlock ul{
        padding-left: 24px;
        width: 342.4vw;
        height: 5.0vw;
    }
    .transpBlock li{
        color:#C2C2C2;
        font-size: 3.3vw;
        display: inline;
        padding-right: 40px;
    }


/*Work showcase*/
main{
    grid-column: span 12;
    display: grid;
}
    main h2{
        color: #D9D7D7;
        margin: 0;
        background-color:#2E303B;
        padding-bottom:6px;
        grid-column: span 12;
    }
    main h3{
        grid-column: span 12;
    }
.work{
    display: inline-block;
    padding-bottom: 10px;
}
article h3{
    font-size:3.5vw;
    margin: 0;
    margin-top:.5vw;
}
    article h4{
        font-size: 3.2vw;
        margin:0;
        margin-bottom: .2vw;
    }
    article p{
        font-size: 3.0vw;
        margin: .2vw 0;
    }
    article img{
        width: 40.0vw;
        float: right;
    }
    article audio{
        width: 50.0vw;
        padding-left:24px;
    }


/*footer*/
footer{
    grid-column: span 12;
    background-color:#6A6C7A;
}
    footer h2{
        color:#D9D7D7;
        font-size:3.5vw;
    }
    footer p{
        color:#D9D7D7;
        font-size:3.5vw;
    }
    footer ul{
        display:grid;
        grid-template-columns: repeat(12, 1fr);
        margin-bottom:10px;
    }
    footer li{
        grid-column: span 4; /*change to 3 if adding form*/
        text-align: center;
    }
    footer a{
        font-size: 5vw;
        color:#D9D7D7;
    }
    footer a:hover{
        color:#BCB5B5;
    }

/*Work pages*/
.group{
background-color:#C4BFBF;
margin: 24px;
grid-column: span 6;
height: 2028px;
overflow-y:scroll;
box-shadow: 20px 20px 20px #777;
}
.full{
    grid-column: span 12;
    height:1000px
}
.full h3{
    margin-bottom:0;
    height: 5vw;
}
.full p{
    margin-top: 1vw;
}
.group p{
    grid-column: span 12;
    font-size:2.5vw;
    padding-right: 5px;
}
.group h5{
    font-size: 2.7vw;
    margin-top:0;
    margin-bottom:0;
    font-weight:normal;
}
.grid-item--width0{
    width:100%;
}
.group a{
    text-decoration:none;
    color: #585858;
}
.group a:hover{
    text-decoration:none;
    color: #2d2d2d;
}
.italic{
    font-style:italic;
}
.grid-item--width1{
    width:78.78%;
}
.grid-item--width2{
    width:21.22%;
}
.grid-item--width3{
    width:25%;
    float:left;
}
.grid-item--width4{
    width:75%;
    float:left;
}
.grid-item--width5{
    width:50%;
    float:left;
}
video{
    width:100%;
}
.images{
    margin-bottom: 3.0vw;
    height: 38vw;
}
.spooky{
    height: 206px;
}
iframe{
    width:100%;
}
.images img{
    float:right;
}
.group audio{
    width: 100%;
    padding-left:0;
    margin-left:0;
}
@media only screen and (max-width: 800px){
    .group{
        grid-column:span 12;
        height: 1685px;
    }
    .group p{
        font-size: 3.0vw;
    }
    .group h3{
        font-size: 4.5vw;
    }
    .group h4{
        font-size: 4.2vw;
    }
    .group h5{
        font-size: 3.0vw;
    }
   .images{
        height: 70vw;
        margin-bottom: 11.0vw;
    }
    .full{
        height: 600px;
    }
    .spooky{
        height: 210px;
    }
}
@media only screen and (max-width: 500px){
    .group{
        grid-column:span 12;
        height: 1325px;
    }
    #intro p{
        font-size:4.0vw;
    }
    #intro h2{
        font-size:4.5vw;
    }
    article p{
        font-size:4vw;
    }
    .group p{
        font-size: 4.0vw;
    }
    .group h3{
        font-size: 4.7vw;
    }
    .group h4{
        font-size: 4.3vw;
    }
    .images{
        margin-bottom: 8.0vw;
    }
    .full{
        height: 600px;
    }
    .transpBlock ul{
        width: 400vw;
        height: 4.0vw;
    }
    .spooky{
        height: 128px;
    }
}