body {
    /* width: 100vw;
    height: 100vh; */
    overflow-x: hidden;
    background: #282627;
    /* font-family: Roboto; */
}
*{
    margin: 0px;
    padding: 0px;
    font-family: 'Century Gothic', sans-serif;
    /* box-sizing: border-box; */
}
.navbar{
    z-index: 10;
    display: flex;
    justify-content: space-between;
    font-weight: 100;
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 30px;
}
.fixed{
    position:fixed;
    top:0;
}
.logo{
    /* margin-right: 40%; */
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 22px;
}
.nav-links{
    list-style: none;
    display:flex;
}
.nav-links a{
    /* margin-left: 100%; */
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 3px;
    font-size: 14px;
    padding-left: 40px;
}

.nav-active{
    transform:translateX(0%);
}
@keyframes navLinkFade{
    from{
        opacity: 0;
        transform: translateX(50px);
    }
    to{
        opacity: 1;
        transform: translateX(0px);

    }
}
.toggle .line1{
    transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2{
    opacity: 0;
}
.toggle .line3{
    transform: rotate(45deg) translate(-5px, -8px);
}






.row {
    display: flex;
}
#projects {
    flex: 50%;
}

.box{
    /* width: 450px; */
    /* background: #282627; */
    /* padding: 40px; */
    text-align: center;
    /* margin: auto; */
    margin-top: 40px;
    padding-bottom: 80px;
    font-family: 'Century Gothic', sans-serif;
}

.section{
    background: #282627;
    /* padding: 40px; */
    text-align: center;
    /* margin: auto; */
    font-family: 'Century Gothic', sans-serif;
    justify-content: center;
    padding-top: 10px;
}
.section.container{
    justify-content: center;
    text-align: center;
    /* margin: 6px; */
}
.section h1{
    font-size: 40px;
    letter-spacing: 4px;
    font-weight: 100;
    color: #ffffff;
}
div.projects-content{
    justify-content: center;
    text-align: center;

}
ul.project-list{
    list-style: none;
    text-align: center;
    justify-content: center;
    margin-top: 2%;
}
.project-list li {
    margin: 3% 0;
}
.project-list a{
    text-decoration: none;
    color: #ffffff;
}
.box-img{
    border-radius: 50%;
    width: 200px;
    height: 200px;
}
.box h1{
    font-size: 40px;
    letter-spacing: 4px;
    font-weight: 100;
    color: #ffffff;
}
.box h5 {
    font-size: 13px;
    letter-spacing: 3px;
    font-weight: 100;
    color: #ffffff;
}
h6{
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 100;
    color: #ffffff;
}
.box h6{
    font-size: 15px;
    letter-spacing: 1px;
    font-weight: 500;
    margin-bottom: 10px;
    /* margin-top: 10px; */
    color: #ffffff;
}
.box li {
    display: inline-block;
    margin: 6px;
    list-style: none;
    transition: .2s;
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-bottom: 0px;
    border-radius: 5px;
}

/* facebook */
.box ul li:nth-child(1):hover {
    color: #00c3ff;
    box-shadow: 0 0 15px #00b7ff;
    text-shadow: 0 0 15px #0acaec;
    transform: scale(1.5);
}
/* instagram */
.box ul li:nth-child(2):hover {
    color: #26a4f2;
    box-shadow: 0 0 15px #C71585;
    text-shadow: 0 0 15px #C71585;
    transform: scale(1.5);
}
/* email */
.box ul li:nth-child(3):hover {
    color: #e23670;
    box-shadow: 0 0 15px #87CEFA;
    text-shadow: 0 0 15px #87CEFA;
    transform: scale(1.5);
}
/* linkedin */
.box ul li:nth-child(4):hover {
    color: #2a6cbb;
    box-shadow: 0 0 15px #FFFFF0;
    text-shadow: 0 0 15px #FFFFF0;
    transform: scale(1.5);
}


#vanta-birds {
    width: 100vw;
    z-index: 1;
}
.zoomIn {
    transition: .2s;
}
.zoomIn:hover {
    transform: scale(1.5);
}
.zoomIn a:hover {
    color: orange !important;
}


@media only screen and (max-width : 768px) {
    .nav-links a {
        font-size: x-small;
    }
    body {
        overflow-x: hidden;
    }
    .box h1, #projects h1, #contact h1, #projects font{
        font-size: medium;
    }
    .box font {
        font-size: smaller;
    }
    .box h6, #projects font.description, #contact li{
        font-size: x-small;
    }
    .project-list li, .box h6 {
        padding-right: 30px;
        padding-left: 30px;
    }
    .nav-links a{
        padding-left: 20px;
        padding-right: 20px;
    }
    .navbar{
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 20px;
        justify-content: center;
    }
    .nav-links {
        position: absolute;
        padding-top: 40px;

    }
    .box {
        padding-bottom: 0;
    }
    .social {
        margin-bottom: 20px;
    }
}