.brand-title{
  color: var(--ticolor);
  text-decoration: underline;
  text-decoration-color: var(--tecolor);

  font-size: 7rem;
  font-weight: bold;

  font-family: 'Bebas Neue', sans-serif;

  padding-left: 3rem;

  transform: translateX(-100%);
  animation: header1 650ms ease-in;
  animation-fill-mode: forwards;
}

.navbar-links ul{
  margin: 0;
  padding: 0;
  display: flex;
  padding-right: 1rem;
}
.navbar-links li{
  list-style: none;
  transition: all 550ms; /* this is for the reverse animation of the li:hover*/
}
.navbar-links li a{
  text-decoration: none;
 
  padding: 1rem;
  display: block;

  font-size: 3rem;

  color: var(--tecolor);
  

  font-family: 'Bebas Neue', sans-serif;
  transform: translateX(100%);
  animation: header2 650ms ease-in;
  animation-fill-mode: forwards;
}

.navbar-links li a:hover{
  color: var(--bgcolor);
}


.navbar-links li:hover{
  background-color: var(--tecolor);

  transition: all 350ms;
  transform: translateY(-10px) translateX(10px);

}

.toggle-button{
  position: absolute;
  TOP: .75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;

  font-family: 'Bebas Neue', sans-serif;
  transform: translateX(200%);
  animation: header2 650ms ease-in;
  animation-fill-mode: forwards;
}