* {

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

}

body {
  font-family: Arial, sans-serif;
  background: #0a0a0a;
  color: white;
  margin: 0;
  padding: 20px;
}

.home_box {
  /* Shrunk by 25% */
  width: 525px; /* (700 * 0.75) */
  height: 300px; /* (400 * 0.75) */
  margin: 40px auto;
  background-color: var(--_surface);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 14px;
  position: relative;
  z-index: 1;
}

  .home_box::before{
    content: '';
    position: absolute;
    /* Shrunk width by 25% */
    width: 105px; /* (140 * 0.75) */
    height: 200%; /* Keep as percentage to scale with parent height */
    background: linear-gradient(#7334d1, #ac8f0d);
    animation: rotate 4s linear infinite;
  }

@keyframes rotate {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

  .home_box::after{
    content: "";
    position: absolute;
    background: #303366;
    /*background: #1a1c47;*/
    inset: 5px;
    border-radius: 14px;
  }

  /*.home_box h2{   not needed rn since we using an image, put it back if we want text again
    Color: white;
    position: relative;
    text-shadow: 2px 2px rgb(255, 255, 255);
    font-size: 8em;
    z-index: 10;/*moves text infront
  }*/

  /* Style for the image inside home_box */
.home_box .home-logo {
    position: relative; /* Keep it above ::after pseudo-element */
    z-index: 10; /* Ensure it's on top of the background layers */
    max-width: 100%; /* Ensure image doesn't overflow the box */
    max-height: 100%; /* Ensure image doesn't overflow the box */
    width: 253px; /* Set specific width */
    height: 100px; /* Set specific height */
    object-fit: contain; /* Ensures the image fits within the dimensions without cropping, preserving aspect ratio */
}
  
    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: center;
    }

    .card {
      background: #1e1e1e;
      border-radius: 8px;
      width: 140px;
      padding: 10px;
      text-align: center;
      color: white;
      text-decoration: none; /* Optional: removes the underline */
      box-shadow: 0 4px 6px rgba(0,0,0,0.5);
      transition: transform 0.2s;
    }

    .card:hover {
      transform: scale(1.05);
      color: #ccc; /* Optional: slightly different color on hover */
    }

    .card img {
      width: 100%;
      border-radius: 4px;
    }

    .card h3 {
      margin: 10px 0 0;
      font-size: 14px;
    }

/* Home Button on Champion Page */
.home-button-container {
    text-align: center;
    margin: 20px 0;
}

.home-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #1e1e1e;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
    transition: transform 0.2s, background-color 0.2s, border-color 0.2s;
    font-size: 1.2em;
    border: 2px solid #444;
}

.home-button:hover {
    background-color: #2b2b2b;
    border-color: #00ccff;
    transform: scale(1.05);
}

/* Unified Search Box Styling (for champion.html) */
.search-wrapper {
  margin-top: 40px;
  margin-bottom: 40px;
  position: relative;
  z-index: 10;
  /* Changed from text-align: center to flex for robust centering */
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Wrapper for search and toggle button (for index.html) */
.search-and-toggle-wrapper {
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
  justify-content: center; /* This will center the .search-container */
  align-items: center;
  position: relative; /* Essential for absolute positioning of the button */
  z-index: 10;
  width: 100%;
}

.search-container {
  position: relative;
  width: 60%;
  max-width: 600px;
  /* No display: inline-block needed here when parent is flex */
}

#searchInput, #creatorSearchInput {
  font-size: 1.5em;
  padding: 12px 20px;
  border-radius: 8px;
  border: 2px solid #444;
  outline: none;
  width: 100%;
  background: #1e1e1e;
  color: white;
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
  text-align: center;
  transition: background-color 0.3s, box-shadow 0.3s;
  padding-right: 40px; /* Space for clear button */
}

#searchInput:hover, #creatorSearchInput:hover {
  background-color: #2b2b2b;
  border-color: #00ccff;
}

#searchInput::placeholder, #creatorSearchInput::placeholder {
  color: #888;
}

#clearButton, #clearCreatorSearch {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #ccc;
  font-size: 1.5em;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  display: none; /* Hidden by default */
}

#clearButton:hover, #clearCreatorSearch:hover {
  color: #00ccff;
}

/* Styling for the toggle button */
.toggle-button {
    font-size: 1.2em; /* Slightly smaller than search input to fit text */
    padding: 12px 20px; /* Same vertical padding as search input */
    border-radius: 8px;
    border: 2px solid #444;
    outline: none;
    background: #1e1e1e;
    color: white;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
    white-space: nowrap; /* Prevent text wrapping */
    width: auto; /* Allow width to adjust to content */

    /* Absolute positioning to place it relative to the centered search box */
    position: absolute;
    /* Calculate right based on the search container's max-width and half of its own width */
    /* This places it to the right of the center point of the search container */
    left: 50%; /* Start from the center of the wrapper */
    transform: translateX(calc(300px + 15px)); /* Half of max-width of search-container (600px/2) + gap */
    /* Adjust '300px' if max-width of search-container changes. '15px' is your desired gap. */
}

.toggle-button:hover {
    background-color: #2b2b2b;
    border-color: #00ccff;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.7); /* Increased opacity for more visible glow */
}

/* Responsive adjustment for smaller screens if needed for the button */
@media (max-width: 900px) { /* Adjust breakpoint as needed */
    .toggle-button {
        /* Reset absolute positioning for smaller screens to allow stacking */
        position: static;
        margin-top: 15px; /* Add some space if it stacks below */
    }
    .search-and-toggle-wrapper {
        flex-direction: column; /* Stack items vertically */
    }
    .search-container {
        width: 80%; /* Make search box wider on smaller screens */
        max-width: none; /* Remove max-width constraint */
    }
}


/* --- Creator Card Styling --- */
.creator-card {
  background: #1e1e1e;
  border-radius: 8px;
  width: 180px; /* Adjusted width for a card look */
  padding: 10px;
  text-align: center;
  color: white;
  text-decoration: none; /* Remove underline from link */
  box-shadow: 0 4px 6px rgba(0,0,0,0.5);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.creator-card:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 8px 12px rgba(0, 204, 255, 0.3);
}

/* --- Style for the creator's image --- */
.creator-card .creator-image {
  width: 100%;
  border-radius: 4px;
  margin-bottom: 12px; /* Space between image and name */
  object-fit: cover; /* Ensures images look uniform */
  aspect-ratio: 1 / 1; /* Makes the image a square */
}

.creator-card h3 {
  margin: 0 0 15px 0;
  font-size: 1.1em;
}

.creator-card .social-links {
  display: flex;
  justify-content: center;
  gap: 15px;
}

/* Stop social links from triggering the main card hover effect */
.creator-card .social-links a {
  transition: transform 0.2s;
}

.creator-card .social-links a:hover {
  transform: scale(1.1);
}

.creator-card .social-links a img {
  width: 32px;
  height: 32px;
}

/* --- Disclaimer Styling --- */
.disclaimer {
    text-align: center;
    font-size: 0.8em;
    color: #888; /* Softer white/gray color */
    margin-top: 50px; /* Space from content above */
    padding: 20px;
    background-color: #1a1a1a; /* Slightly darker background to blend with body but be distinct */
    border-top: 1px solid #333; /* Subtle border at the top */
    width: 100%;
    box-sizing: border-box; /* Include padding in width */
}

.disclaimer p {
    margin: 0; /* Remove default paragraph margin */
    line-height: 1.5;
}

.contact {
    text-align: center;
    font-size: 0.8em;
    color: #888; /* Softer white/gray color */
    margin-top: 50px; /* Space from content above */
    padding: 20px;
    
    width: 100%;
    box-sizing: border-box; /* Include padding in width */
}

.contact p {
    margin: 0; /* Remove default paragraph margin */
    line-height: 1.5;
}

.notice {
    text-align: center;
    font-size: 0.8em;
    color: #888; /* Softer white/gray color */
    margin-top: 2px; /* Space from content above */
    padding: 2px;
    
    width: 100%;
    box-sizing: border-box; /* Include padding in width */
}

.notice p {
    margin: 0; /* Remove default paragraph margin */
    line-height: 1.5;
}

.clickLink{
  color: inherit; /* Inherit color from parent (e.g., the paragraph text) */
  text-decoration: none; /* Remove underline */
}

/* Optional: Hover effect for the plain-link */
.clickLink:hover {
  color: #007bff; /* Example: subtle blue on hover */
  text-decoration: underline; /* Example: re-add underline on hover */
}