* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

body {
  background: #000;
  color: #f0f494;
  font-family: system-ui, sans-serif;
  overflow: hidden;
}

/* BACKGROUND */
#c {
  position: fixed;
  inset: 0;
  z-index: 0;
}

/* HERO */
.hero {
  position: relative;
  z-index: 1;
  height: 100vh;
  padding: 80px;
  pointer-events: none;
  min-height: 100vh;
  /* full screen */
  display: flex;
  align-items: center;
  /* vertical center */
  justify-content: center;
  /* horizontal center */
  position: relative;
  z-index: 1;

  pointer-events: none;
}

.hero {
  perspective: 1000px;
}


/* PROFILE */
.profile {
  display: flex;
  align-items: center;
  gap: 24px;
}

.avatar {
  width: 160px;
  height: 160px;
  padding: 4px;
  border-radius: 18px;
  object-fit: cover;
}

.text-border-2x {
  text-shadow: 2px 2px #000, -2px -2px #000, 2px -2px #000, -2px 2px #000;
}



.text h1 {
  font-size: 72px;
  font-weight: bold;
  text-shadow: -2px #000;

}

.text h2 {
  font-size: 22px;
  margin: 6px 0;
}

.text p {
  font-size: 14px;
  opacity: 0.6;
}



/* BUTTONS */
.buttons {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 240px);
  gap: 25px;
}

.btn {
  color: white;
  font-size: 24px;
  font-weight: bold;
 
  padding-top: 13px;
  padding-bottom: 13px;
  padding-left: 15px;
  
  border-radius: 9px;
  border: 0.01rem solid white;
  pointer-events: auto;
}


.btn div{
  display: inline-block;
  padding-right: 4px;
  margin-right: 4px;
  border-right: 1px solid grey;
}



.banner {
  width: 100%;
  height: 100vh;
  text-align: center;
  overflow: hidden;
  /* position: relative; */
}

.banner .slider {
  position: absolute;
  width: 200px;
  height: 250px;
  top: 10%;
  left: calc(50% - 100px);
  transform-style: preserve-3d;
  transform: perspective(1000px);
  animation: autoRun 20s linear infinite;
  z-index: 2;
}

@keyframes autoRun {
  from {
    transform: perspective(1000px) rotateX(-10deg) rotateY(0deg);
  }

  to {
    transform: perspective(1000px) rotateX(-10deg) rotateY(360deg);
  }
}

.banner .slider .item {
  position: absolute;
  inset: 0 0 0 0;
  transform:
    rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(550px);
}

.banner .slider .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 1023px) {
  .banner .slider {
    width: 160px;
    height: 200px;
    left: calc(50% - 80px);
  }

  .banner .slider .item {
    transform:
      rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(300px);
  }

}

@media screen and (max-width: 767px) {
  .banner .slider {
    width: 100px;
    height: 150px;
    left: calc(50% - 50px);
  }

  .banner .slider .item {
    transform:
      rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(180px);
  }

  .banner .content h1 {
    font-size: 5em;
  }
}


html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #0b0b0b;
  overflow: hidden;
}

#bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
}

/* orbitrt */
/* .orbit-wrapper {
  
  width: 720px;
  height: 720px;
}




.orbit {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;

  transform: rotateY(165deg);
}


.tile {
  --count: 10;
  --angle: calc(360deg / var(--count) * var(--i));

  position: absolute;
  top: 50%;
  left: 50%;

  width: 56px;
  height: 56px;

  background: rgba(255,255,255,0.08);
  border-radius: 14px;
  backdrop-filter: blur(6px);

  display: grid;
  place-items: center;

  transform:
    rotateY(var(--angle))
    translateZ(660px);

  
  opacity: 0.9;
}

@keyframes spin {
  from {
    transform: rotateY(0deg) rotateX(16deg);
  }
  to {
    transform: rotateY(360deg) rotateX(16deg);
  }
}

.tile img {
  z-index: 0;
  position: absolute;
  width: 120px;
  height: 120px;
  padding: 12px;
  will-change: transform, opacity, filter;
  background-color: aliceblue;


  display: grid;
  place-items: center;

  will-change: transform, opacity;
  object-fit: contain;
}

.tile {
  transform:
    rotateY(var(--angle))
    translateZ(660px)
    scale(0.95);
}

.orbit {
  animation: spin 22s linear infinite;
} */