/*navbar*/

:root{

  font-size:  16px;
  --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; 
}


hr{
  background-color: purple;
  color:pink;
  font-size: 1rem;
  border:none;
  height:4px;
}

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;

}

/*------------------------------------------------------------*/

.card {
   box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
   display: grid;
   font-family: 'Trebuchet MS', sans-serif;
   height: 400px;
   margin: 20px auto;
   width: 600px;
}
 .front {
   grid-template-columns: repeat(12,1fr);
   grid-template-rows: repeat(4,1fr);
}
 .front .blue {
   background-color: #9d26de;
   grid-column: 8 / span 5;
   grid-row: 1 / span 4;
}
 .front .yellow {
   background-color: #3f0d54;
   grid-column: 1 / span 7;
   grid-row: 1 / span 4;
}
 .front .pink {
   background-color: #4a0f85;
   clip-path: polygon(0% 0%,100% 0%,0% 100%);
   grid-row: 1 / span 3;
   grid-column: 1 / span 11;
   position: relative;
   z-index: 2;
}
 .front .dots {
   background: radial-gradient(#fa001a 20%,transparent 19%), radial-gradient(#fa001a 20%,transparent 19%), transparent;
   background-size: 6px 6px;
   background-position: 0 0, 3px 3px;
   grid-column: 1 / span 12;
   grid-row: 3 / span 2;
   margin: 0 0 15px 20px;
   z-index: 1;
}
 .front .personal-intro {
   background: black;
   color: white;
   display: flex;
   flex-direction: column;
   grid-column: 4 / span 6;
   grid-row: 2 / span 2;
   justify-content: center;
   text-align: center;
   z-index: 3;
}
 .front .personal-intro p {
   letter-spacing: 1px;
   text-transform: uppercase;
}
 .front .personal-intro p:first-of-type {
   font-size: 26px;
}
 .front .personal-intro p:last-of-type {
   font-size: 24px;
   color:purple;
   margin-top: 5px;