@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400');

body {
    background:#222;
    color:#eee;
    font-family:"Quicksand",'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight:300;
    overflow-x:hidden;
}

#navBar{
    padding:9px;
    padding-top:8px;
    margin-top:-2px;
}
#navBar a{
    font-weight:300;
    font-size:31px;
    cursor:pointer;
}

#sl1{
    background:#d53030 url('Assets/Github Artwork sl1.png') center center no-repeat;
    background-size:56vw;
}
#sl2{
    background:#859d10 url('Assets/Github Artwork sl2.png') center center no-repeat;
    background-size:48vw;
}
#sl3{
    background:#278e8e url('Assets/Github Artwork sl3.png') center center no-repeat;
    background-size:54vw;
}

.sliderBox{
    text-align:center;
}

.sliderBox h1{
    font-weight:300;
    font-size:80px;
}
@media(max-width:1200px){
    .sliderBox h1{
        font-size:64px;
    }
}
@media(max-width:840px) {
    .sliderBox h1 {
        font-size: 48px;
    }
}

.sliderBox h2{
    width:90vw;
    position:absolute;
    left:5vw;
    bottom:6%;
}
.sliderBox a{
    border:2px solid #eee;
    color:#eee;
    padding:8px;
    border-radius:10px;
    text-decoration:none;
    font-size:80%;
}
.sliderBox a:hover{
    background:#eee;
    color:#111;
    cursor:pointer;
}

.sect{
    height:800px;
    padding:10px;
    border-bottom:2px solid #333;
}
.sect h1{
    cursor:pointer;
}
.sect h2{
    text-align:center;
}

#sectionMenu{
    display:none;
    width:100vw;
    height:100%;
    background-color:rgba(0,0,0,0.9);
    position:fixed;
    left:0;
    top:0;
    z-index:1000;
    text-align:center;
    padding:10vh;
}
#sectionMenu h1:hover{
    color:#278e8e;
    cursor:pointer;
}