body {
    background-color: black;

    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

/*---------Fondo1-----------*/

#bg1 {

  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;

  overflow: hidden;

}
#bg1 h1{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-80%);
  color: white;
  z-index: 1;
  font-family: Inter;
  font-weight: Bold;
}
#bg1 p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  color: white;
  z-index: 1;
  font-family: Inter;
  font-weight: lighter; 
}
#bgVideo {
  filter: brightness(0.4);
  object-fit: cover;
}

/*---------Barra de navegación-----------*/

.navBar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  width: 50%;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: space-evenly;
  overflow: visible;
}
.navBar a {
  text-decoration: none;
  color: white;
  font-family: Inter;
  font-weight: lighter
}
.nav-group {
    position: relative;
    padding: 10px 0;
}
.subMenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    
    display: flex;
    flex-direction: column;
    min-width: 150px;
    padding: 10px 0;
    
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
}
.nav-group:hover .subMenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.subMenu a {
    padding: 8px 20px;
    font-size: 0.8rem;
    white-space: nowrap;
    transition: background 0.2s;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    transition: 0.2s ease;
}
.subMenu a:hover {
    background: rgba(255, 255, 255, 0.05);
    font-weight: normal;
    transition: 0.2s ease;
}

/*---------Logo liquido-----------*/

#logoEgg {

  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;

  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%)

}
.loader {

  --color-one: #ffbf48;
  --color-two: #be4a1d;
  --color-three: #ffbf4780;
  --color-four: #bf4a1d80;
  --color-five: #ffbf4740;
  --time-animation: 5s;
  --size: 50%;
  position: relative;
  border-radius: 50%;
  transform: scale(var(--size));
  box-shadow:
    0 0 25px 0 var(--color-three),
    0 20px 50px 0 var(--color-four);
  animation: colorize calc(var(--time-animation) * 3) ease-in-out infinite;

}
.loader::before {

  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border-top: solid 1px var(--color-one);
  border-bottom: solid 1px var(--color-two);
  background: linear-gradient(180deg, var(--color-five), var(--color-four));
  box-shadow:
    inset 0 10px 10px 0 var(--color-three),
    inset 0 -10px 10px 0 var(--color-four);

}
.loader .box {
  width: 100px;
  height: 100px;
  background: linear-gradient(
    180deg,
    var(--color-one) 30%,
    var(--color-two) 70%
  );
  mask: url(#clipping);
  -webkit-mask: url(#clipping);
}
.loader svg {
  position: absolute;
}
.loader svg #clipping {
  filter: contrast(15);
  animation: roundness calc(var(--time-animation) / 2) linear infinite;
}
.loader svg #clipping polygon {
  filter: blur(7px);
}
.loader svg #clipping polygon:nth-child(1) {
  transform-origin: 75% 25%;
  transform: rotate(90deg);
}
.loader svg #clipping polygon:nth-child(2) {
  transform-origin: 50% 50%;
  animation: rotation var(--time-animation) linear infinite reverse;
}
.loader svg #clipping polygon:nth-child(3) {
  transform-origin: 50% 60%;
  animation: rotation var(--time-animation) linear infinite;
  animation-delay: calc(var(--time-animation) / -3);
}
.loader svg #clipping polygon:nth-child(4) {
  transform-origin: 40% 40%;
  animation: rotation var(--time-animation) linear infinite reverse;
}
.loader svg #clipping polygon:nth-child(5) {
  transform-origin: 40% 40%;
  animation: rotation var(--time-animation) linear infinite reverse;
  animation-delay: calc(var(--time-animation) / -2);
}
.loader svg #clipping polygon:nth-child(6) {
  transform-origin: 60% 40%;
  animation: rotation var(--time-animation) linear infinite;
}
.loader svg #clipping polygon:nth-child(7) {
  transform-origin: 60% 40%;
  animation: rotation var(--time-animation) linear infinite;
  animation-delay: calc(var(--time-animation) / -1.5);
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes roundness {
  0% {
    filter: contrast(15);
  }
  20% {
    filter: contrast(3);
  }
  40% {
    filter: contrast(3);
  }
  60% {
    filter: contrast(15);
  }
  100% {
    filter: contrast(15);
  }
}
@keyframes colorize {
  0% {
    filter: hue-rotate(0deg);
  }
  20% {
    filter: hue-rotate(-30deg);
  }
  40% {
    filter: hue-rotate(-60deg);
  }
  60% {
    filter: hue-rotate(-90deg);
  }
  80% {
    filter: hue-rotate(-45deg);
  }
  100% {
    filter: hue-rotate(0deg);
  }
}
img {

    width: 40%;
    position: absolute;

}

/*---------Hamburger Button-----------*/

.hamburger {
    display: none;
    position: fixed;
    top: 14px;
    right: 20px;
    z-index: 1000;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    width: 40px;
    height: 40px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    padding: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.2s;
}
.hamburger span {
    display: block;
    width: 20px;
    height: 1.5px;
    background: white;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}
.hamburger.open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.hamburger.open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

@media (orientation: portrait), (max-width: 768px) {

  html, body {

    margin: 0;
    height: 100%;
    overflow: hidden;
    touch-action: none;
    position: fixed;
    width: 100%;

  }

  .hamburger {

    display: flex;

  }

  .navBar {

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    transform: none;

    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 0;
    overflow-y: auto;
    padding-top: 30%;

    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
      
  }

  .navBar.open {

    opacity: 1;
    visibility: visible;
    pointer-events: all;

  }

  .nav-group {

    width: 80%;
    max-width: 300px;
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);

  }

  .nav-group > a {

    display: block;
    padding: 16px 0;
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    text-align: center;
    position: relative;

  }

  .nav-group > a::after {
    
    content: '›';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-size: 1.2rem;
    opacity: 0.4;
    transition: transform 0.3s ease;

  }

  .nav-group.active > a::after {

    transform: translateY(-50%) rotate(-90deg);
    opacity: 0.8;

  }

  .subMenu {

    position: static;
    transform: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    min-width: unset;
    width: 100%;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.35s ease, padding 0.3s ease;

  }

  .nav-group.active .subMenu {

    max-height: 300px;
    padding: 6px 0 12px;
      
  }

  .nav-group:hover .subMenu {

    opacity: 1;
    visibility: visible;
    transform: none;

  }

  .subMenu a {

    font-size: 0.82rem;
    padding: 9px 20px;
    color: rgba(255,255,255,0.65);
    text-align: center;

  }

  .subMenu a:hover {

    color: white;
    background: rgba(255,255,255,0.05);

  }

  #bgVideo {

    position: absolute;
    top: 0%;
    left: -100%;

  }

  #bg1 h1 {

    font-size: 2rem;
    transform: translateX(-50%) translateY(-330%);
    text-align: center;
    width: 90%;

  }

  #bg1 p {

    font-size: 1rem;
    transform: translateX(-50%) translateY(-420%);
    text-align: center;
    width: 90%;

  }

  #logoEgg {

    top: 30%;

  }

  .loader {

    --color-one: #ffbf48;
    --color-two: #be4a1d;
    --color-three: #ffbf4780;
    --color-four: #bf4a1d80;
    --color-five: #ffbf4740;
    --time-animation: 4s;
    --size: 80%;
    position: relative;
    border-radius: 50%;
    transform: scale(var(--size));
    box-shadow:
      0 0 25px 0 var(--color-three),
      0 20px 50px 0 var(--color-four);
    animation: colorize calc(var(--time-animation) * 3) ease-in-out infinite;

  }

  .loader::before {

    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border-top: solid 1px var(--color-one);
    border-bottom: solid 1px var(--color-two);
    background: linear-gradient(180deg, var(--color-five), var(--color-four));
    box-shadow: inset 0 10px 10px 0 var(--color-three), inset 0 -10px 10px 0 var(--color-four);

  }

  .loader .box {

    width: 100px;
    height: 100px;
    background: linear-gradient(
      180deg,
      var(--color-one) 30%,
      var(--color-two) 70%
    );
    mask: url(#clipping);
    -webkit-mask: url(#clipping);

  }

  .loader svg {

    position: absolute;

  }

  .loader svg #clipping {

    filter: contrast(15);
    animation: roundness calc(var(--time-animation) / 2) linear infinite;

  }

  .loader svg #clipping polygon {

    filter: blur(7px);

  }

  .loader svg #clipping polygon:nth-child(1) {

    transform-origin: 100% 100%;
    transform: rotate(90deg);

  }

  .loader svg #clipping polygon:nth-child(2),polygon:nth-child(3),polygon:nth-child(4),polygon:nth-child(5),polygon:nth-child(6),polygon:nth-child(7) {

    display: none;

  }

  @keyframes rotation {

    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }

  }

  @keyframes roundness {

    0% {
      filter: contrast(15);
    }
    20% {
      filter: contrast(3);
    }
    40% {
      filter: contrast(3);
    }
    60% {
      filter: contrast(15);
    }
    100% {
      filter: contrast(15);
    }

  }

  @keyframes colorize {

    0% {
      filter: hue-rotate(0deg);
    }
    20% {
      filter: hue-rotate(-30deg);
    }
    40% {
      filter: hue-rotate(-60deg);
    }
    60% {
      filter: hue-rotate(-90deg);
    }
    80% {
      filter: hue-rotate(-45deg);
    }
    100% {
      filter: hue-rotate(0deg);
    }

  }

  img {

    width: 70%;
    position: absolute;

  }

}

@media screen and (orientation: portrait) and (max-height: 850px) {

  #logoEgg {

    top: 27%;

  }

}

@media screen and (orientation: portrait) and (max-height: 799px) {

  #logoEgg {

    top: 23%;

  }

}