/*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;
  background-image: URL(word_background2.JPG);

}

body{
  color: white;
  margin:  0;
  padding:  0; 
  background-position: center; 
  background-size: 1300px;
}

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;



}

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

}

.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;


}

.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;

}

 h1, h2, h3, h4, h5, h6, p, div{

    margin-left: 13rem;

  }


/*----------------------- Speaker Containers --------------------------- */

@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

:root {
  --card-height: 65vh;
  --card-width: calc(var(--card-height) / 1.5);
}

.card {
  margin-left:20px;
  margin-right:20px;
  background: #191c29;
  width: var(--card-width);
  height: auto;
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
}

.card_no_margin {
  margin-left: 0px;
  margin-right: 20px;
  background: #191c29;
  width: var(--card-width);
  height: auto;
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
}



.flexy{
  display: flex;
}

.margin_40{
  align-items: center;

}

.responsive{

  width: 100%;
  height: auto;

}