@import url("/styles/header.css");

body {
  background-color: #404040;
  background-image: url("https://www.nxtstage.org/assets/images/nse-web-background_dark.jpg");
  background-position: center;
}

.content {
  margin: 25px auto;
}

#header-container {
  position: sticky; /* Make the header sticky */
  top: 0; /* Stick it to the top of the viewport */
  z-index: 100; /* Ensure it's above other elements */
}

/* From Uiverse.io by vinodjangid07 */
.Btn {
  width: 50px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(15, 15, 15);
  border: none;
  color: white;
  font-weight: 600;
  gap: 8px;
  cursor: pointer;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.103);
}

#counter {
  font-family: "Inter", sans-serif;
}
#counter {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0 auto;
  margin-bottom: 15px;
  width: 375px;
}
#counter h2 {
  color: #fff;
}
#counter p {
  color: #fff;
}

@media screen and (max-width: 720px) {
  .Btn {
    width: 50px;
  }
}

.teamLink {
  color: #324849;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
  font-size: 30px;
}

/* From Uiverse.io by JaydipPrajapati1910 */
.discord-button {
  max-width: 270px;
  display: flex;
  overflow: hidden;
  position: relative;
  padding: 0.875rem 72px 0.875rem 1.75rem;
  background-color: rgba(88, 101, 242, 1);
  background-image: linear-gradient(
    to top right,
    rgb(46, 56, 175),
    rgb(82, 93, 218)
  );
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  align-items: center;
  border-radius: 0.5rem;
  gap: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: none;
  transition: all 0.6s ease;
  text-decoration: none;
  margin-bottom: 20px;
}

.twitter-button {
  background-color: rgb(1, 2, 22);
}

.discord-button span {
  background-color: rgb(82, 93, 218);
  display: grid;
  position: absolute;
  right: 0;
  place-items: center;
  width: 3rem;
  height: 100%;
}

.discord-button span svg {
  width: 1.5rem;
  height: 1.5rem;
}

.discord-button:hover {
  box-shadow: 0 4px 30px rgba(4, 175, 255, 0.1),
    0 2px 30px rgba(11, 158, 255, 0.06);
}

#whatsapp-button {
  background-color: #25d366; /* WhatsApp Green */
  background-image: linear-gradient(
    to top right,
    #128c7e,
    #25d366
  ); /* WhatsApp Green gradient */
}

#whatsapp-button span {
  background-color: #128c7e; /* Darker WhatsApp Green */
}

#whatsapp-button:hover {
  box-shadow: 0 4px 30px rgba(37, 211, 102, 0.3),
    0 2px 30px rgba(37, 211, 102, 0.2); /* Greenish shadow */
}

#header-container body {
  font-family: sans-serif;
}
/* nav styles */

body {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
}
/* Basic Styling */
footer {
  background-color: #333; /* Dark background color */
  color: #fff; /* White text color */
  padding: 20px 0;
  text-align: center; /* Center align text */
}

/* Styling for the container */
.footer-container {
  max-width: 960px; /* Adjust as needed */
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  justify-content: space-around;
}

/* Styling for footer columns */
.footer-column {
  width: 30%; /* Adjust as needed */
  margin-bottom: 20px;
}

/* Styling for links */
.footer-column a {
  color: #fff;
  text-decoration: none;
  display: block; /* Make the whole link clickable */
  margin-bottom: 10px;
}

.footer-column a:hover {
  text-decoration: underline;
}

/* Styling for social media icons (if needed) */
.social-icons a {
  display: inline-block;
  margin: 0 10px;
}

/* Responsive Design - Adjust as needed */
@media (max-width: 768px) {
  .footer-column {
    width: 48%; /* Two columns per row on smaller screens */
  }
}

@media (max-width: 480px) {
  .footer-column {
    width: 100%; /* One column per row on very small screens */
  }
}

/* Sticky Footer Styles */
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.content {
  /* Apply this class to the main content area of your page */
  flex: 1;
}

.placement {
  color: #632222 !important;
  font-weight: bold;
}

.placement[data-placement="1"] {
  background-color: #ffd739;
}

.placement[data-placement="2"] {
  background-color: #bebebe;
}

.placement[data-placement="3"] {
  background-color: #bb8644;
}

.placement[data-placement="4"] {
  background-color: #f8996b;
}

.placement[data-placement="5"],
.placement[data-placement="6"],
.placement[data-placement="7"],
.placement[data-placement="8"] {
  background-color: #007f99;
}

.placement[data-placement="9"],
.placement[data-placement="10"],
.placement[data-placement="11"],
.placement[data-placement="12"],
.placement[data-placement="13"],
.placement[data-placement="14"],
.placement[data-placement="15"],
.placement[data-placement="16"],
.placement[data-placement="17"],
.placement[data-placement="18"],
.placement[data-placement="19"],
.placement[data-placement="20"],
.placement[data-placement="21"],
.placement[data-placement="22"],
.placement[data-placement="23"],
.placement[data-placement="24"],
.placement[data-placement="25"] {
  background-color: #166f82;
}

.social-bar a:hover {
  color: #555; /* Change icon color on hover */
}

/* Specific icon color overrides (optional) */
.fa-facebook {
  color: #3b5998; /* Facebook blue */
}

.fa-twitter {
  color: #1da1f2; /* Twitter blue */
}

.fa-instagram {
  color: #e4405f; /* Instagram pink-red */
}

.fa-discord {
  color: #7289da; /* Discord purple */
}

.fa-telegram {
  color: #24a1de; /* Telegram blue */
}

.fa-whatsapp {
  color: #25d366; /* WhatsApp green */
}

.fa-youtube {
  color: #ff0000; /* YouTube red */
}

.fa-twitch {
  color: #6441a5; /* Twitch purple */
}

.fa-tiktok {
  color: #fe2c55; /* Tiktok red */
}

.search-bar {
  width: 100%; /* Adjust width to account for padding */
  padding: 10px 15px;
  margin-bottom: 20px;
  border: 2px solid #007bff; /* Blue border */
  border-radius: 25px; /* Rounded corners */
  font-size: 1rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Add transitions */
}

.search-bar:focus {
  outline: none; /* Remove default focus outline */
  border-color: #0056b3; /* Darker blue border on focus */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* More pronounced shadow */
}

#editPageButton {
  width: 200px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: #9ba3a3;
  margin: 0 auto;
  font-weight: bold;
  cursor: pointer;
}

#editPageButtonDiv {
  margin: 0 auto;
  display: flex;
}

#profilePic {
  /* max-height: 30px; */
  aspect-ratio: 1;
  border-radius: 15%;
  object-fit: contain;
  background: rgba(237, 232, 208, 0.5);
  border-radius: 50%;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(19.2px);
  -webkit-backdrop-filter: blur(19.2px);
  border: 1px solid rgba(237, 232, 208, 0.55);
  padding: 1px;
  margin-left: 10px;
}

.event-form form {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 20px;
  width: 400px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.event-form label {
  font-weight: bold;
  margin-bottom: 5px;
}

.event-form input,
.event-form textarea,
.event-form select {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
}

.event-form textarea {
  height: 100px;
}

.event-form select {
  appearance: none;
  padding: 10px;
}

.event-form button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 20px;
}

.event-form button:hover {
  background-color: #0056b3;
}

.event-form #tournament-fields,
.event-form #scrim-fields {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.event-form #scrim-fields {
  display: none;
}

.event-form #time-inputs {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.event-form #time-inputs input {
  margin-bottom: 5px;
}

.event-form #add-time {
  margin-left: 5px;
}

/* Dark Mode */
.event-form body.dark-mode form {
  background-color: #333;
  color: #f4f4f4;
}

.event-form body.dark-mode form label {
  color: #f4f4f4;
}

.event-form body.dark-mode form input,
.event-form body.dark-mode form textarea,
.event-form body.dark-mode form select {
  background-color: #444;
  color: #f4f4f4;
  border-color: #666;
}

.event-form body.dark-mode form button {
  background-color: #0056b3;
  color: #f4f4f4;
}

.event-form body.dark-mode form button:hover {
  background-color: #003f7f;
}