#main-banner {
  text-align: center; 
  background: linear-gradient(to right, #1ade00, #949494);
  color: white;
  font-family: "Rubik Glitch", system-ui;
  padding: 20px;
  margin: 0px;
  display: flex;
  align-items: center;
  height: 50px;
}
#main-banner h1 {
  margin-right: 20px;
}
#main-banner nav {
  margin-left: auto;
  margin-right: auto;
}
nav.navbar ul {
  list-style:none;
  margin:0px;
  padding:0px;
  overflow:hidden;
}
nav.navbar ul li {
  float:left;
  padding:3px;
  margin:8px;
  position: relative;
  font-size: x-large;
}
nav.navbar ul li::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: white;

  transform: scaleX(0);
  transform-origin: center;
  transition: 0.3s;
}
nav.navbar ul li:hover::after{
  transform: scaleX(1);
}
nav.navbar ul li:active,:visited,:link,:focus {
  color:white;
  text-decoration:none;
}
body {
  margin: 0px;
}
.current ::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: white;
}