.spacer {
  padding: 20px;
}

button {
  background: rgb(30, 36, 36);
  border-radius: 10px;
  view-transition-name: main-button;
  border: none;
  color: white;
  width: 60px;
  height: 60px;
  font-size: 12px;
  position: fixed;
}
button:hover {
  background: rgb(44, 43, 42);
  transition: 0.5s;
}

a {
  text-decoration: none;
  color:white;
}
button:active {
  background: rgb(40, 29, 24);
}

.material-icons.md-60 {
  font-size: 48px;
  top: 25px;
  left: 100px;
}
#nav {
  background: rgba(17, 19, 19, 0.811);
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  width:250px;
  height: 100%; /* Full height */
  position: fixed; /* Make it stick, even on scroll */
  overflow: auto; /* Enable scrolling if the sidenav has too much content */

  ul {
    list-style-type:symbols();
    text-align:left;
    position:sticky;
    top: 250px;
    
    
    li a {
      margin-top: 5%;
      width: 200px;
      border-radius: 10px;
      font-size: 160%;
      display: block;
      opacity: 50%;
      transition: 0.3s;
      text-decoration: solid;
    }
    li a:hover {
      opacity: 100%;
      transition: 0.5s;
    }
    li a:visited {
      color: white;
    }

    li a.active {
      background-color: rgba(250, 250, 250, 0.126);
      padding:10px;
      width:max-content;
      opacity:100%;
    }
  }
}




@view-transition {
  navigation: auto;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(30px);
  }
}

@keyframes slide-to-left {
  to {
    transform: translateX(-30px);
  }
}

::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}