/* LOGO CENTRADO */
.center-logo-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo-link {
  display: block;
  text-decoration: none;
}

.logo-circle {
  background: #fff;
  border-radius: 60%;
  width: 25vh;
  height: 25vh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 0 rgba(255,255,255,0);
  transition: box-shadow 0.3s, transform 0.3s;
  overflow: hidden;
}

.logo-link:hover .logo-circle {
  box-shadow: 0 0 4px 4px #fff;
  transition: 2s;
  
  transform: scale(1.25);
  transform: rotateY(720deg);
}

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
* {
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
}
body {
  position: relative;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  background-color: #000000;
  overflow: hidden;
  scrollbar-width: none; 
}

body::-webkit-scrollbar {
  display: none; 
}



section {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}


#particles {
  background: #000000;
}


#hexagonGrid {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  
  .row {
    display: inline-flex;
    margin-top: -32px;
    margin-left: -50px;
    
    &:nth-child(even) {
      margin-left: 2px;
    }
    
    .hexagon {
      position: relative;
      width: 100px; height: 110px;
      margin: 4px 2px;
      clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 
      
      &::before {
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: #000000;
        opacity: 0.95;
        transition: 3s;
      }
      
      &::after {
        content: '';
        position: absolute;
        top: 4px; right: 4px; bottom: 4px; left: 4px;
        background: #141414;
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      }
      
      &:hover {
        &::before {
          background: #ffff00;
          opacity: 1;
          transition: 0s;
        }
        
        &::after {
          background:#dfdf3f;
        }
      }
    }
  }
}