#navbar {
  background: linear-gradient(360deg, rgba(255, 255, 255, 0) 27.28%, rgba(0, 0, 0, 0.65) 143%);
  transition: background-color 0.3s ease, opacity 0.3s ease;
  position: absolute;
  top: 0;
}
#navbar.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: black;
  opacity: 1;
}
#navbar.active {
  opacity: 1;
}

.container-items-menu-mobile {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-clip-path: circle(25px at calc(100% - 45px) 45px);
          clip-path: circle(25px at calc(100% - 45px) 45px);
  transition: all 0.3s ease-in-out;
}
#menu-mobile:checked ~ .container-items-menu-mobile {
  -webkit-clip-path: circle(75%);
          clip-path: circle(75%);
  background: #000;
}
.container-items-menu-mobile ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
}
.container-items-menu-mobile ul li {
  margin: 40px 0;
}
.container-items-menu-mobile ul li a {
  color: #fff;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
}
.container-items-menu-mobile ul li a:hover:after {
  transform: scaleY(1);
}
.container-items-menu-mobile ul li a:hover {
  color: #fff;
}

.menu-btn {
  position: absolute;
  z-index: 2;
  right: 20px;
  top: 15px;
  width: 50px;
  height: 50px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.menu-btn .bar {
  display: block;
  width: 30px;
  height: 4px;
  margin-top: 8px;
  margin-bottom: 8px;
  margin-left: auto;
  background-color: #fff;
  transition: all 0.3s ease;
  border-radius: 4px;
}
.menu-btn .bar:nth-child(2) {
  width: 25px;
}
#menu-mobile:checked ~ .menu-btn .bar {
  margin: 6px auto;
}
#menu-mobile:checked ~ .menu-btn .bar:nth-child(1) {
  transform: rotate(45deg) translate(7px, 7px);
}
#menu-mobile:checked ~ .menu-btn .bar:nth-child(2) {
  opacity: 0;
  width: 30px;
}
#menu-mobile:checked ~ .menu-btn .bar:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

.nav-checkbox {
  display: none;
}

@keyframes rotate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}/*# sourceMappingURL=styles.css.map */