/* GQLite.com Logo Retro Style */

/* Importing Google Fonts for vintage typography */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Poppins:wght@800&family=Bebas+Neue&family=Playfair+Display:wght@700&family=Special+Elite&display=swap');

/* Retro style for GQLite.com - creating a vintage, nostalgic look */
.gqlite-logo-retro {
  font-family: 'Special Elite', 'Playfair Display', 'Bebas Neue', cursive, serif;
  position: relative;
  transform: skew(-2deg);
  letter-spacing: 2px;
  animation: retro-fade 1s ease-in-out;
}

/* Adding paper texture overlay */
.gqlite-logo-retro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  z-index: 1;
  pointer-events: none;
}

.gqlite-logo-retro span {
  display: inline-block;
  color: #8b4513;
  text-shadow: 
    1px 1px 0px #d2b48c,
    2px 2px 0px rgba(0, 0, 0, 0.2);
  transform: skew(1deg);
  position: relative;
  z-index: 2;
}

/* Color for each character - using retro, sepia-inspired colors */
.gqlite-logo-retro span:nth-child(1) { /* G */
  color: #8b4513;
  text-shadow: 
    1px 1px 0px #d2b48c,
    2px 2px 0px rgba(0, 0, 0, 0.2);
}

.gqlite-logo-retro span:nth-child(2) { /* Q */
  color: #654321;
  text-shadow: 
    1px 1px 0px #deb887,
    2px 2px 0px rgba(0, 0, 0, 0.2);
}

.gqlite-logo-retro span:nth-child(3) { /* L */
  color: #800000;
  text-shadow: 
    1px 1px 0px #f4a460,
    2px 2px 0px rgba(0, 0, 0, 0.2);
}

.gqlite-logo-retro span:nth-child(4) { /* I */
  color: #8b4513;
  text-shadow: 
    1px 1px 0px #d2b48c,
    2px 2px 0px rgba(0, 0, 0, 0.2);
}

.gqlite-logo-retro span:nth-child(5) { /* T */
  color: #654321;
  text-shadow: 
    1px 1px 0px #deb887,
    2px 2px 0px rgba(0, 0, 0, 0.2);
}

.gqlite-logo-retro span:nth-child(6) { /* E */
  color: #800000;
  text-shadow: 
    1px 1px 0px #f4a460,
    2px 2px 0px rgba(0, 0, 0, 0.2);
}

.gqlite-logo-retro span:nth-child(7) { /* . */
  color: #8b4513;
  text-shadow: 
    1px 1px 0px #d2b48c,
    2px 2px 0px rgba(0, 0, 0, 0.2);
}

.gqlite-logo-retro span:nth-child(8) { /* C */
  color: #654321;
  text-shadow: 
    1px 1px 0px #deb887,
    2px 2px 0px rgba(0, 0, 0, 0.2);
}

.gqlite-logo-retro span:nth-child(9) { /* O */
  color: #800000;
  text-shadow: 
    1px 1px 0px #f4a460,
    2px 2px 0px rgba(0, 0, 0, 0.2);
}

.gqlite-logo-retro span:nth-child(10) { /* M */
  color: #8b4513;
  text-shadow: 
    1px 1px 0px #d2b48c,
    2px 2px 0px rgba(0, 0, 0, 0.2);
}

/* Vintage photo effect - sepia tone overlay */
.gqlite-logo-retro::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 248, 225, 0.3);
  mix-blend-mode: overlay;
  z-index: 3;
  pointer-events: none;
}

/* Hover effect for retro logo */
.gqlite-logo-retro:hover {
  transform: skew(-2deg) scale(1.02);
}

.gqlite-logo-retro:hover span {
  text-shadow: 
    1px 1px 0px #d2b48c,
    2px 2px 0px rgba(0, 0, 0, 0.3),
    0 0 8px rgba(210, 180, 140, 0.5);
}

.gqlite-logo-retro:hover span:nth-child(1) { transform: skew(1deg) rotate(-1deg); }
.gqlite-logo-retro:hover span:nth-child(2) { transform: skew(1deg) rotate(1deg); }
.gqlite-logo-retro:hover span:nth-child(3) { transform: skew(1deg) rotate(-1deg); }
.gqlite-logo-retro:hover span:nth-child(4) { transform: skew(1deg) rotate(1deg); }
.gqlite-logo-retro:hover span:nth-child(5) { transform: skew(1deg) rotate(-1deg); }
.gqlite-logo-retro:hover span:nth-child(6) { transform: skew(1deg) rotate(1deg); }
.gqlite-logo-retro:hover span:nth-child(7) { transform: skew(1deg) rotate(-1deg); }
.gqlite-logo-retro:hover span:nth-child(8) { transform: skew(1deg) rotate(1deg); }
.gqlite-logo-retro:hover span:nth-child(9) { transform: skew(1deg) rotate(-1deg); }
.gqlite-logo-retro:hover span:nth-child(10) { transform: skew(1deg) rotate(1deg); }

/* Animation keyframes for retro effects */
@keyframes retro-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Responsive adjustments for retro style */
@media (max-width: 1024px) {
  .gqlite-logo-retro {
    letter-spacing: 1px;
  }
  
  .gqlite-logo-retro span {
    text-shadow: 
      1px 1px 0px #d2b48c,
      1.5px 1.5px 0px rgba(0, 0, 0, 0.2);
  }
}

@media (max-width: 768px) {
  .gqlite-logo-retro {
    letter-spacing: 1px;
  }
  
  .gqlite-logo-retro span {
    text-shadow: 
      1px 1px 0px #d2b48c,
      1px 1px 0px rgba(0, 0, 0, 0.2);
  }
}

@media (max-width: 480px) {
  .gqlite-logo-retro {
    letter-spacing: 0;
  }
}