@font-face { font-family: Gamer; src: url('../assets/Gamer.ttf'); } 

body{
    background-color: black;
    font-family: Gamer;
    height: 100%;
    width: 100%;
}

html{
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}


#header{
    background-color: black;
    position: fixed;
    width:100%;
    height:4.9%;
    margin-top: 0px;
    top:0%;
    z-index: 20;
}
.headerlogo{

    position:fixed;
    width: 6%;
    height: 8%;
    margin-top:0px;
}

#main {
    /*font-size: 40px;*/
    font-size: 200%;
    font-weight: lighter;
    color: white;
    position: fixed;
    top: 1%;
    left: 8%;
    margin-top: 0px;
}

.headerelements{
    font-size: 140%;
    font-weight: lighter;
    color: gray;
    position: fixed;
    top: 1.3%;
    margin-top: 0px;
}

#home{
    left: 45%;
}
#home:hover{
    color:white;
}
#howToGetStarted{
    left: 34%;
}
#howToGetStarted:hover{
    color:white;
}
#contactUs{
    left: 52%;
}
#contactUs:hover{
    color:white;
}
#groupList{
    left: 63.5%;
}
#groupList:hover{
    color:white;
}


.vl{
    position: fixed;
    width: 1px;
    height: 3%;
    background-color: #5f0;
    top: 1%;
}

#header #first{
    left: 32%;
}
#header #second{
    left: 50%;
}
#header #third{
    left: 61.5%;
}

/*note, hr's have borders that you need to get rid of manually*/
.headerline{
    position:fixed;
    width:100%;
    height: 1px;
    top: 4%;
    left: 0%;
    z-index: -1;
    background-color: #5f0;
    border: 0px;
}