/*main*/
*{
  padding: 0px;
  margin: 0px;
  font-family: 'Audiowide', cursive;
}

html{
}



/*classes*/
.nav-item-left{
  display: inline;
}

.nav-item-right{
  display: inline;
  float: right;
}

.nav-link{
  color: rgb(230,230,230);
  padding: 17px 20px;
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
}

.nav-link:hover{
  transition: 0.4s;
  background-color: rgb(0,0,0);
}

.klass-7-side-nav-link{
  color:rgb(255,255,255);
  font-size: 18px;  
  margin-top:0px;
  padding:10px 65px;  
  text-decoration:none;
  }

.klass-7-side-nav-link:hover{
  transition: 0.4s;
  background-color:rgb(20,20,20);
}

.klass-7-side-nav-item{
  text-align: center;
}



/*id's*/
#main-heading{
  font-size: 40px;
  margin-top: 10px;
  margin-bottom:20px;
}

#main-heading-color{
  display: inline;
  color: rgb(0,0,235);
}

#nav-bar{
  background-color: rgb(30,30,30);
  padding: 17px 0px;
  overflow: hidden;
}

#home-icon{
  height: 20px;
}

#main-heading, #nav-div{
  margin-left: 5%;
  margin-right: 5%;
}

#klass-7-side-nav{
  height:100%;
  width:190px;
  background-color:rgb(60,60,60);
  position:absolute;
  overflow-y: hidden;
  overflow-x: hidden;
  list-style: none;
}

#klass-7-side-nav-title{
  color:rgb(255,255,255);
  font-size:24px;
  margin-top:10px;
  margin-bottom:15px; 
  text-align:center;
}

#active{
  background-color: rgb(0,0,235);
}

#active:hover{
  transition: 0,4s;
  background-color: rgb(0,0,0);
}

#klass-7-side-nav-active{
  background-color:rgb(0,0,220);
}

#klass-7-side-nav-active:hover{
  background-color:rgb(20,20,20);
}