:root {
  font-size: 16px;
  font-weight: 800;
  font-family: Montserrat;
  --primary: turquoise;
  --blue:turquoise;
  --text-primary: grey;
  --text-secondary: #53edf8;
  --bg-primary: #1b1b1b;
  --bg-secondary: #212121;
}
body {
  margin: 0;
  padding: 0;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
}
main {
  margin-left: 5rem;
  padding: 1rem;
}
.navbar {
  z-index: 99;
  position: fixed;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: width 300ms ease ;
}

.navbar-nav {
  width: inherit;
  list-style: none;
  padding: 0;
  margin: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.nav-item {
  width: 100%;
}
.nav-item:last-child {
  margin-top: auto;
}
.nav-item:first-child {
    margin-bottom: auto;
  }
  .nav-link a,
.nav-link img {
  width: 35px ;
  filter: invert(59%) sepia(0%) saturate(152%) hue-rotate(200deg) brightness(95%) contrast(85%);
}
.nav-link {
  display: flex;
  align-items: center;
  height: 5rem;
  color: var(--text-primary);
  text-decoration: none;
}
.link-text {
  display: none;
  margin-left: .5rem;
}
.nav-link img {
  min-width: 2rem;
  margin: 0 1.5rem;
}
ul{
  margin-block-start: 0em;
    margin-block-end: 0em;
    padding-inline-start: 0px;
}
.nav-link img:hover {
 
    filter: invert(80%) sepia(58%) saturate(2421%) hue-rotate(144deg)
    brightness(90%) contrast(88%);
    color: turquoise;
    
} 
.logo{
    filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(219deg) brightness(105%) contrast(101%);
    margin-bottom: auto;
    width: 100%;
}

/* Small screens */
@media only screen and (max-width: 800px){
    .navbar{
      bottom: 0;
      margin-bottom: 0;
      width: 100%;
      height: 5rem;
      position: fixed;
    }
    .logo{
        display: none;
    }
    .navbar-nav{
        flex-direction: row;
        width: 100%;
    }
    .nav-link{
        justify-content: center;
        margin-right: 0;
    }
    .nav-item{
        margin-left: 0;
    }
    .nav-item:last-child {
        display: none;
      }
    main{
        margin:0 0 5rem 0;
    }
}

/* Large screens */
@media only screen and (min-width: 800px){
    .navbar{
        top:0;
        left: 0;
        width: 5rem;
        height: 100vh;
    }
    /* .navbar:hover {
        width: 12rem;
      }

      .navbar:hover .link-text {
        display: block;
        transition: width 400ms ease ;
      } */
}