@font-face {
    font-family: "big_noodle_titling";
    src: url("/files/fonts/big_noodle_titling.ttf");
  }
  
  @font-face {
    font-family: "big_noodle_titling_oblique";
    font-weight: oblique;
    src: url("/files/fonts/big_noodle_titling_oblique.ttf");
  }
  
  html {
    font-family: "big_noodle_titling", Arial, "sans-serif";
    cursor: url("/files/owcursors/Overwatch\ Pointer.cur"), auto;
  }
  
  /* Center the splash screen content vertically and horizontally */
  .splash-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Make the splash screen full viewport height */
    background-color: #000; /* Black background color */
  }
  
  /* Styling for the Overwatch logo */
  .overwatch-logo {
    max-width: 300px; /* Set a maximum width for the logo */
    animation: fadeInOut 3s ease infinite; /* Animation for the fade-in/fade-out effect */
  }
  
  /* Keyframes for the fade-in/fade-out animation */
  @keyframes fadeInOut {
    0%, 100% {
      opacity: 0; /* Start and end with opacity 0 for fade-out effect */
    }
    50% {
      opacity: 1; /* Middle of the animation with opacity 1 for fade-in effect */
    }
  }
  
  /* Styling for the split layout on wide screens */
  @media (min-width: 768px) {
    /* Flexbox to split the layout horizontally on wide screens */
    .split-layout {
      display: flex;
      flex-direction: row;
    }
  }
  
  /* Styling for the split layout on less wide screens */
  @media (max-width: 767px) {
    /* Flexbox to split the layout vertically on less wide screens */
    .split-layout {
      display: flex;
      flex-direction: column;
    }
  }
  

  a:hover {
    cursor: url("/files/owcursors/OWtextselect.cur"), auto;
  }
  h1:hover {
    cursor: url("/files/owcursors/OWtextselect.cur"), auto;
  }
  h2:hover {
    cursor: url("/files/owcursors/OWtextselect.cur"), auto;
  }
  h3:hover {
    cursor: url("/files/owcursors/OWtextselect.cur"), auto;
  }
  p:hover {
    cursor: url("/files/owcursors/OWtextselect.cur"), auto;
  }

  li:hover {
    cursor: url("/files/owcursors/OWlinkselect.cur"), auto;
  }
  li a:hover {
    cursor: url("/files/owcursors/OWlinkselect.cur"), auto;
  }

  
  /* Video gallery Styles Section */
  

  .video-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    background-color: #121212; /* Dark background to match Overwatch theme */
  }

  .video-gallery-title {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    background-color: #121212; /* Dark background to match Overwatch theme */
    color: #FC9D1F;
  }
  
  .video-container {
    flex: 1 1 calc(33% - 40px); /* Three videos per row, adjust as needed */
    margin: 10px;
    max-width: 360px; /* Ensure it scales well on larger screens */
    background-color: #4D4E53;
    border: 2px solid #FC9D1F; /* Optional: add a border to match Tracer's color */
    border-radius: 10px; /* Optional: rounded corners */
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  
  .video-container iframe {
    width: 100%;
    height: 200px;
  }
  
  .video-container:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
  }
  
  @media (max-width: 768px) {
    .video-container {
      flex: 1 1 calc(50% - 40px); /* Two videos per row on tablets */
    }
  }
  
  @media (max-width: 480px) {
    .video-container {
      flex: 1 1 100%; /* One video per row on mobile */
    }
  }

  /* Additional styles and layout adjustments can be added as needed */


  body {
    overflow-x: hidden; /* Prevent horizontal scrolling */
    font-family: "big_noodle_titling", Arial, "sans-serif";
    color: #ffffff; /* Set default text color to white */
    background-color: #1c1c1c; /* Dark background for the entire page */
}

/* Styling for VOD Review Container */
.vod-review-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    background-color: #282828; /* Slightly lighter background for contrast */
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    text-align: center; /* Center text and content */
}

.vod-review-container h2 {
    font-size: 2.5rem;
    color: #fc9d1f; /* Tracer's orange color for the title */
    margin-bottom: 15px;
}

.vod-review-container p {
    font-size: 1.5rem;
    color: #ffffff;
    margin: 10px 0;
}

/* Styling for VOD Scoreboard and Video Containers */
.vod-scoreboard-container,
.vod-video-container {
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden;
}

.vod-scoreboard,
.vod-video {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vod-scoreboard-container:hover .vod-scoreboard,
.vod-video-container:hover .vod-video {
    transform: scale(1.05); /* Slight zoom on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7); /* Add shadow on hover */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .vod-review-container {
        padding: 15px;
    }
    
    .vod-review-container h2 {
        font-size: 2rem;
    }

    .vod-review-container p {
        font-size: 1.2rem;
    }
}

/* Particle System */
canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0; /* This will ensure the canvas is positioned behind your content */
}

/* Wrapper for the entire content except the particles background */
.content-wrapper {
  max-width: 1200px; /* Limit the width of the content */
  margin: 0 auto; /* Center the content */
  position: relative;
  z-index: 1; /* Ensure this content stays above the particles */
  background-color: #1c1c1c; /* Set a background color that matches your design */
  padding: 20px; /* Optional padding */
}