/* General Navigation Bar Styling */
body {
    background-color: rgb(9, 9, 9);
    margin: 0;
    padding: 0;
}

nav {
    background-color: rgb(18, 17, 17);
    color: #c2c1c1;
    height: 6vh;
}

.server-introduction {
    height: 22vh;
    background-color: rgb(22, 21, 24);
    display: flex;
    align-items: center;
}

.server-introduction .text {
    margin-left: 6cm;
    letter-spacing: 0.2em;
    font-weight: 100;
    font-size: 3.3rem;
    color: rgb(228, 224, 224);
}

.server-introduction h2 {
    font-size: 1rem;
    letter-spacing: 1px;
    margin-top: 20px;
    color: rgb(160, 154, 154);

}

.server-introduction .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 2rem;
}

nav div a {
    font-size: 1.1rem;
    transition: 0.3s;
    color: #b2aeae;
    letter-spacing: 0.15em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}

/* Hover effect for links */
a:hover {
    color: rgb(228, 224, 224);
}

/* Flex Layout for the Navigation Bar */
.flex {
    display: flex;
}

.flex-1 {
    flex: 1;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.space-x-4 {
    margin-right: 1rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Logo Styling */
img {
    border-radius: 1000px;
    max-width: 100%;
    height: auto;
}

/* Right Side Social Icons Styling */
.bi-discord, 
svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Optional: Adjust hover transition speed */
a {
    transition: color 0.3s ease;
}


/* Main Content Visibility (Initially Hidden) */
.hidden-content {
    visibility: hidden;
    opacity: 0;
}

/* Slide-up effect for the main content when it becomes visible */
@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.content {
    animation: slideUp 1s ease-out forwards;
}

/* Responsive Design */
@media (max-width: 768px) {
    .server-introduction .text {
        margin-left: 2cm;
        font-size: 2.5rem;
    }

    .server-introduction .content {
        flex-direction: column;
        text-align: center;
    }

    nav {
        height: auto;
        padding: 1rem 0;
    }
}

#button1, #button2{
    letter-spacing: 0.2em;
    transition: 0.3s;
    box-shadow: rgb(24, 24, 24) 0px 20px 30px -10px;}

#button1, #button2, #button1 b, #button2 b, #oceanicPopulation, #europePopulation, #button1 h3, #button2 h3 {
    font-weight: 100;
}

#button1 {
    background-image: url("../assets/eu.png");
    background-size: cover;
}

#button2 {
    background-image: url("../assets/oceania.png");
    background-size: cover;
}

.video-container {
    max-width: 280px;
    width: 100%;
}

.video-container video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    overflow: hidden;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;  /* Changed from right: 0 to left: 0 */
    padding: 20px;
    width: 100vw;
    background-color: rgba(30, 29, 29, 0.1);  /* Fixed RGBA syntax */
}

footer a {
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
}

#privacy, #terms {
    font-weight: 100;
    margin-left: 15px;
    letter-spacing: 0.2em;
}

/* Initial Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes slideInFromTop {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  
  @keyframes slideInFromLeft {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
  
  /* Apply Animations */
  nav { animation: slideInFromTop 0.6s ease-out; }
  .wallpaper { animation: fadeIn 1s ease-out; }
  .shop-item { animation: fadeIn 0.8s ease-out backwards; }
  
  /* Stagger shop items animation */
  #shopItems > div:nth-child(1) { animation-delay: 0.2s; }
  #shopItems > div:nth-child(2) { animation-delay: 0.3s; }
  #shopItems > div:nth-child(3) { animation-delay: 0.4s; }
  #shopItems > div:nth-child(4) { animation-delay: 0.5s; }
  
  /* Base Responsive Styles */
  @media (max-width: 1280px) {
    #shopItems {
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    
    .wallpaper {
      height: 50vh;
    }
  }
  
  @media (max-width: 1024px) {
    #shopItems {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .wallpaper {
      height: 45vh;
    }
    
    nav .flex {
      padding: 0.5rem 1rem;
    }
    
    .social-icon span {
      display: none;
    }
  }
  
  @media (max-width: 768px) {
    nav .flex {
      flex-direction: column;
      gap: 1rem;
      padding: 1rem;
    }
    
    nav .flex > div {
      width: 100%;
      justify-content: center;
    }
    
    .wallpaper {
      height: 40vh;
    }
    
    .modal-content {
      width: 95%;
      margin: 5% auto;
    }
    
    #regionSelect {
      width: 100%;
      max-width: 200px;
    }
  }
  
  @media (max-width: 640px) {
    #shopItems {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    
    .wallpaper {
      height: 35vh;
    }
    
    nav a, .nav-item {
      font-size: 0.875rem;
    }
    
    .modal-content {
      padding: 1rem;
    }
    
    .shop-item button {
      width: 100%;
      font-size: 1rem;
    }
  }
  
  /* Hover States for Touch Devices */
  @media (hover: none) {
    .shop-item:hover {
      transform: none;
    }
    
    nav a:hover {
      color: inherit;
    }
    
    .social-icon:hover {
      transform: none;
    }
  }