:root {
    --main-bg-color: #02111B; 
    --second-bg-color: #5f5f5f;
    --green1: #58db00;
    --green2: #008607;
    --accent-1: #0a5800;
}

*{
    margin:0;
    padding:0;
}

body{
    
    font-family: 'Bebas Neue', cursive;
    background: #02111B;
}

.bg{
    background-color: var(--main-bg-color);
    margin:0;
    padding:0;
    height:100vh;
    margin-bottom:5%;
}

.webgl{
    width:100%;
    height: 100%;
}

.fill{
    min-height: 80%;
    height: 80%;
    width:80%;
    margin: 0 auto;
    margin-top:5%;
    background-color: black;
    border-radius: 15px;

    box-shadow: 1px 1px 5px green;
}
#about{
    height:50%;
    width:80%;
    margin-top: -45%;
    margin-left: 10%;
}

.face, .about-cont{
    display:inline-block;
}

.face{
    margin-top:15%;
}

.about-cont{
    font-family: courier, monospace;
    font-size:0.9em;
    color:green;
    margin: 0 auto;
    margin-top:5%;
} 

#aboutText2{
    color:rgb(211, 210, 210);
}

.space{
    margin-top:50px;
}

.bottom-margin{
    margin-bottom: 20x;
}

.white{
    color:rgb(211, 210, 210);
}

.sidebar{
    background: var(--main-bg-color);
    width:50px;
    position:fixed;
    right:0;
    top:37%;
    border-top-left-radius:15px;
    border-bottom-left-radius:15px;

    box-shadow: 1px 1px 5px #888888;
}

.sidebar li{
    list-style-type: none;
    margin-bottom:10px;
}

.sidebar a{
    text-decoration:none;
    color: var(--green2);
}

.sidebar a:hover{
    color: var(--accent-1);
    transition: color 0.5s ease;
}

.sidebar ul{
    padding: 0;
    margin-top: 10px;
    margin-left: 12px;
}

 #projLink{
    font-size:0.8em;
    color: var(--accent-1);
    text-transform: uppercase;
	text-decoration: none;
    border: 2px solid var(--accent-1);
    border-radius:10px;
	text-align: center;
	width:35%;
    padding-left: 10px;
    padding-right: 10px;
    margin-left:40%;
}

#projLink:hover{
    color: var(--green2);
    border-color: var(--green2);
    transition: color 0.5s ease;
}

/*projects styles*/

.projects{
    height:100vh;
}

.project{
    width:50%;
    margin: 0 auto;
    margin-top:5%;
    text-align:center;
}

.project a{
    text-decoration: none;
}

.project .row a{
    width:20%;
    margin:0 auto;
    text-align:center;
    font-size:0.8em;
    color: var(--accent-1);
    text-transform: uppercase;
	text-decoration: none;
    border: 2px solid var(--accent-1);
    border-radius:10px;
}

.project h2{
    margin-top: 20px;
    margin-bottom:0;
}

.project img{
    width: 100%;
    height: 50%;
    border-radius: 15px;
}

.serif{
    font-family: 'Roboto Condensed', sans-serif;
}

.date{
    margin-top:0;
}

footer{
    background-color:black;
    color: white;
    font-weight: 200;
    font-size: 0.8em;
}

#projects{
    margin-top:5px;
}

#projectsTitle{
    text-align:center;
    margin-top: 5%;
    color:white;
}

.view-button{
    text-align:center;
}

a{
    color: var(--green1);
}

a:hover{
    color: var(--green2);
}

.one{
    background-color:var(--main-bg-color);
    color: white;
}

.one .project .row a, .two .project .row a{
    background-color: var(--green1);
    color:white;
    border: 2px solid var(--green1);
    border-radius:10px;
    padding:5px 10px;
    margin-top:5px;
}

.one .project .row a:hover , .two .project .row :hover{
    background-color: var(--green2);
    color:lightgrey;
    border: 2px solid var(--green2);
}

.two{
    background-color: var(--main-bg-color);
    color:white;
}

.content{
    width:50%;
    margin: 0 auto;
}

@media only screen and (max-width: 1440px) {

    #about{
        height:70%;
        width:80%;
        margin-top: -55%;
        margin-left: 10%;
        font-size: 0.9em;
    }
}


@media only screen and (max-width: 1100px) {

    .about-cont h2{
        font-size: 1.4em; 
    }

    .about-cont p{
        font-size: 0.8em;
    }

    #about{
        height:60%;
        width:80%;
        margin-top: -73%;
        margin-left: 10%;
        font-size: 0.8em;
    }


    .content{
        width:90%;
        margin: 0 auto;
    }

}

@media only screen and (max-width: 800px) {
    #projLink{
        width:15%;
        font-size:0.6em;
        margin-left:30%;
    }

    .project{
        width:80%;
    }

    .project p{
        font-size: 0.9em;
    }

    .about-cont h2{
        font-size: 1.0em; 
    }

    .about-cont h2{
        font-size: 1.0em; 
    }

    .project img{
        height: 40%;
    }

    #about{
        width:80%;
        margin-top: -105%;
        margin-left: 10%;
        font-size: 0.75em;
    }
    
    .face, .about-cont{
        display:inline-block;
    }
    
    .face{
        margin-top:10%;
    }
    
    .about-cont{
        margin-top:15%;
    } 
}

@media only screen and (max-width: 600px) {
    .project p{
        font-size: 0.8em;
    }

    .about-cont h2{
        font-size: 0.9em; 
    }

    .about-cont h2{
        font-size: 0.9em; 
    }
    .about-cont{
        margin-top:15%;
    } 

    #about{
        font-size: 0.70em;
        height:60%;
        width:80%;
        margin-top: -160%;
    }
}