/*navbar*/

:root{

  font-size:  16px;
  font-family:  "Open Sans";
  --text-primary:  #b6b6b6;
  --text-secondary:#ececec;
  --bg-primary:  #23232e;
  --bg-secondary:  #141418;
  font-family: 'Staatliches', verdana;

}

body{
  color: white;
  background-color: black;
  background-image: url(word_background2.JPG);

  background-position: ;
  background-position: center; 
  background-size: 1300px;
  margin:  0;
  padding:  0; 
}

a:link {
  color:#462482;
}
a:visited {
  color:#462482;
}
a:hover {
  color:#462482;
}
a:active {
  color:#462482;
}


/*----------------------- Nav Bar --------------------------- */




body::-webkit-scrollbar{
  width:  1rem;


}

body::-webkit-scrollbar-track{
  background: #1e1e24;
  

}

body::-webkit-scrollbar-thumb{
  background:  #6649b8;
  

}

main{

  margin-left: 5rem;
  padding: 1rem;
  font-size:;



}

.navbar{
  z-index: 9999;
  width: 5rem;
  height:  100%;
  position:  fixed;
  background-color: var(--bg-primary);
  transition: width 250ms ease;


}

.navbar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;

}

.nav-item {
  width: 100%;
  margin-top: 0rem;
  font-size: 2.2rem;
  /*text-shadow: 1px 1px 1px pink;*/



}

.nav-item: last-child {

  margin-top: auto;
  margin-bottom: 100px;
  
}

.nav-item: hover{

}

.nav-link{

  display:  flex;
  align-items: center;
  height: 4rem;
  text-decoration: none;


}

.navbar:hover {
  width: 16rem;


}

.navbar:hover .link-text{
  display: block;


}

.link-text{

  display: none;
  margin-left: 20px;

}


/*BOLD TEXT TEMPORARY*/


.temporary{
	color:white;
	font-size: 5rem;
	text-align: center;
	justify-content: center;
	align-items: center;
	margin-left: 5rem;
}

.purple{
	color:#462482;
}