body{
  background:#0b0b0b;
  margin:0;
  font-family: Arial;
  color:white;
}

/* NAV BAR */
.navbar{
  position: sticky;
  top: 0;
  padding: 15px 30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  backdrop-filter: blur(6px);
  z-index:1000;
}

/* LEFT FLEX */
.left{
  display:flex;
  align-items:center;
  gap:35px;
}

/* LOGO */
.logo{
  font-size:24px;
  font-weight:bold;
  cursor:pointer;
  position:relative;
}

.logo-line{
  height:3px;
  width:0;
  position:absolute;
  background:#e50914;
  left:0;
  bottom:-7px;
  transition:.4s;
}

.logo:hover .logo-line{
  width:120px;
}

/* MENU */
.menu{
  display:flex;
  list-style:none;
  padding:0;
  gap:22px;
}

.menu a{
  text-decoration:none;
  color:#ddd;
  font-size:15px;
  transition:.3s;
}

.menu a:hover{
  color:rgb(11, 132, 219);
}

/* MOBILE TOGGLE */
.menu-btn{
  display:none;
  font-size:22px;
  cursor:pointer;
}

/* MOBILE MENU */
@media(max-width:768px){
  
.menu{
  position:fixed;
  top:65px;
  right:-100%;
  flex-direction:column;
  background:#111;
  width:210px;
  padding:25px;
  transition:.3s;
}

.menu.active{
  right:20px;
}

.menu-btn{
  display:block;
}

}
h1{
  color:white;
  text-align:center;
  margin: top 5px;;
  font-size:10;
}
h1:hover{
  color:#0970e5;
  transition:.4s;
}