@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap");
* {
  font-family: "Poppins", sans-serif;
}

::-webkit-scrollbar {
  width: 6px;
  background-color: var(--whitef3f3f3);
}

::-webkit-scrollbar-thumb {
  background-color: var(--yellowf0c82a);
}

/* Loading */
#loader {
  position: fixed;
  inset: 0;
  background: #f3f3f3;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  perspective: 800px;
}
.cube {
  width: 120px;
  height: 120px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotateCube 8s linear infinite;
}
.face {
  position: absolute;
  width: 120px;
  height: 120px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid #202020;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}
.face img {
  width: 60px;
  height: 60px;
}
.face1 { transform: translateZ(60px); }
.face2 { transform: translateZ(-60px) rotateY(180deg); }
.face3 { transform: translateX(60px) rotateY(90deg); }
.face4 { transform: translateX(-60px) rotateY(-90deg); }
.face5 { transform: translateY(-60px) rotateX(90deg); }
.face6 { transform: translateY(60px) rotateX(-90deg); }

@keyframes rotateCube {
  0%   { transform: rotateX(0) rotateY(0); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}
.loading-text {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.5rem;
  color: #f0c82a;
  animation: flicker 2s infinite;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 20px;
}
@keyframes flicker {
  0%, 100% { opacity: 0.8; color: #f0c82a; }
  50% { opacity: 1; color: #202020; }
}
/* End Loading */

header #showMenu {
  display: none;
}
header.shadow {
  box-shadow: 0 4px 8px var(--rgba02);
}

.container_cube {
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: -100;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  perspective: 1200px;
}
.cubehome {
  width: 150px; height: 150px;
  transform-style: preserve-3d;
  animation: rotateCubeHome 10s linear infinite;
}
.cubehome .facehome {
  width: 150px; height: 150px;
  background-color: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(4px);
  line-height: 150px;
  border: 1px solid #202020;
}
.cubehome .facehome img {
  width: 75px;
  height: 75px;
}
.cubehome .facehome1 { transform: translateZ(75px); }
.cubehome .facehome2 { transform: translateZ(-75px) rotateY(180deg); }
.cubehome .facehome3 { transform: translateX(75px) rotateY(90deg); }
.cubehome .facehome4 { transform: translateX(-75px) rotateY(-90deg); }
.cubehome .facehome5 { transform: translateY(-75px) rotateX(90deg); }
.cubehome .facehome6 { transform: translateY(75px) rotateX(-90deg); }
@keyframes rotateCubeHome {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}
.big_contain {
  z-index: 100;
  backdrop-filter: blur(5px);
}
#home #presentation {
  font-size: 3rem;
}
@media (max-width: 1124px) {
  #home #presentation {
    font-size: 1.5rem;
  }
}
#home .links {
  background-color: rgba(240, 200, 42, .2);
  backdrop-filter: blur(10px);
}

#team .wrapper .buttons_left_right #left,
#team .wrapper .buttons_left_right #right {
  transform: translateY(-50%);
  transition: transform 0.1s linear;
}
#team .wrapper .buttons_left_right #left:active,
#team .wrapper .buttons_left_right #right:active {
  transform: translateY(-50%) scale(0.85);
}
#team .wrapper .carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(33.3333333333% - 12px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  border-radius: 8px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
#team .wrapper .carousel::-webkit-scrollbar {
  display: none;
}
#team .wrapper .carousel.no-transition {
  scroll-behavior: auto;
}
#team .wrapper .carousel.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
#team .wrapper .carousel.dragging .card {
  cursor: grab;
  user-select: none;
}
#team .wrapper .carousel :where(.card, .img) {
  display: flex;
  justify-content: center;
  align-items: center;
}
#team .wrapper .carousel .card {
  scroll-snap-align: start;
}
#team .wrapper .card .img img {
  object-fit: cover;
}

@media all and (max-width: 1100px) {
  #team .wrapper .carousel {
    grid-auto-columns: calc(50% - 9px);
  }
}
@media all and (max-width: 915px) {
  header .logo, header #showMenu {
    margin: 12.5px 25px;
  }
  header #showMenu {
    display: flex;
  }
  header .menu {
    position: fixed;
    inset: 0;
    margin: 0;
    padding: 20px;
    backdrop-filter: blur(5px);
    display: none;
    flex-direction: row;
    gap: 15px;
    align-items: center;
    justify-content: center;
    animation: slideMenu 0.3s ease-in-out;
  }
  @keyframes slideMenu {
    0% { opacity: 0; transform: scale(0); }
    100% { opacity: 1; transform: scale(1); }
  }
  header .menu.closeMenu {
    animation: slideCloseMenu 0.3s ease-in-out;
  }
  @keyframes slideCloseMenu {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0); }
  }
  header .menu a {
    background-color: var(--black202020);
    color: var(--whitef3f3f3);
  }
}
@media all and (max-width: 775px) {
  header .menu {
    display: none;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    justify-content: center;
  }
  header .menu a {
    width: 100%;
    max-width: 200px;
    text-align: center;
    box-shadow: 0 0 4px 0 var(--whitef3f3f3);
  }
}
@media all and (max-width: 426px) {
  #home h2 {
    font-size: 40px;
  }
}
@media all and (max-width: 675px) {
  #team .wrapper .carousel {
    grid-auto-columns: 100%;
  }
}