test hexagon by SillyMarson

/* ==UserStyle==
@name           Popular Games Slider
@namespace      https://yourwebsite.com
@version        1.0
@description    Styles the popular games slider on the homepage, including images, titles, and slider functionality.
@license        none
==/UserStyle== */

/* Apply the style to your website's domain */
@-moz-document domain("yourwebsite.com") {
  /* Popular Games Slider Styles */
  .popular-games-slider {
    position: relative;
    overflow: hidden; /* Hides overflowing slides */
    padding: 20px 0; /* Adjust as needed */
    background-color: #282c34; /* Adjust background color to match your design */
  }

  /* The inner container is a flexbox */
  .slider-container {
    display: flex;
    transition: transform 0.5s ease;
  }

  /* Each game slide */
  .game-slide {
    flex: 0 0 auto;
    width: 150px;  /* Adjust width as needed */
    margin-right: 15px;
    text-align: center;
  }

  .game-slide img {
    width: 100%;
    border-radius: 5px; /* Optional aesthetic */
    box-shadow: 0 4px 8px rgba(0, 0, 0, .2); /* Add shadow for a lifted effect */
  }

  /* Game title/info styling */
  .game-info {
    margin-top: 8px;
    font-size: 0.9em;
    color: #fff;  /* Adjust color to match site design */
    font-weight: bold;
  }

  /* Slider arrow buttons */
  .slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    z-index: 10;
    user-select: none; /* Prevent text selection */
  }

  .left-arrow {
    left: 10px;
  }

  .right-arrow {
    right: 10px;
  }

  /* Add hover effects for the arrows */
  .slider-arrow:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }
}