@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");

@font-face {
  font-family: "Data_trash";
  src: url("../assets/fonts/data_trash.otf");
  font-weight: normal;
  font-style: normal;
}

:root {
  /* SCREEN SIZE */
  --screen-sm: 640px;
  --screen-md: 768px;
  --screen-lg: 960px;
  --screen-xl: 1280px;
  --screen-xxl: 1920px;

  /* COLOR */
  --font-color: #d4d4d8;
  --nav-menu-color: #ffffff;
  --policy-color: #6b7280;
  --background-color: #363636;

  /* FONT SIZE */
  --font-size-xxs: 0.625rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.874rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.5rem;

  /* FONT WEIGHT */
  --font-medium: 500;

  /* FONT FAMILY */
  --header-font: "Bebas Neue", "serif";
  --footer-font: "Anonymous Pro", "serif";

  /* LETTER SPACING */
  --tracking-wide: 0.05rem;
  --tracking-wider: 0.1rem;
  --tracking-widest: 0.125rem;

  /* FOOTER */
  --footer-icon-size: 1.5rem;
  --footer-icon-max-size: 2rem;
  /* ANIMATION */
  --icon-scale: 1.1;
  --transform-scale: scale(var(--icon-scale));
  --dropShadow: drop-shadow(0 0 10px rgba(255, 255, 255, 0.7));
  /* COPYRIGHT */
  --footer-font-size-xs: 0.75rem / 1.125rem;
  --footer-font-size-sm: 0.874rem / 1.375rem;
}

* {
  margin: 0;
  padding: 0;
}

body {
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
  color: var(--font-color);
  background: var(--background-color);
  background: -webkit-radial-gradient(top left, #363636, #090909);
  background: -moz-radial-gradient(top left, #363636, #090909);
  background: radial-gradient(to bottom right, #363636, #090909);
  user-select: none;
}

select {
    padding-right: 60px; /* Ajoute un espace pour l'icône */
    cursor: pointer;
}

select option:first-child {
    color: gray;
    font-style: italic;
}

/* CUSTOM STYLE */

/* LAYOUT */

.padding-layout {
  padding: 1em 2em;
}

@media (min-width: 768px) {
  .padding-layout {
    padding: 1em 4em;
  }
}

/*  ====================================== */
/*  =============== HEADER =============== */
/*  ====================================== */

.header-margin {
  margin-bottom: 2.5em;
}

@media (min-width: 768px) {
  .header-margin {
    margin-bottom: 1.5em;
  }
}

@media (min-width: 960px) {
  .header-margin {
    margin-bottom: 0;
  }
}

.header-font {
  font-family: var(--header-font);
}

/* LOGO */

.logo__wrapper {
  font-size: var(--font-size-lg);
  letter-spacing: var(--tracking-widest);
}

/* NAVIGATION */

.nav-menu {
  color: var(--nav-menu-color);
  letter-spacing: var(--tracking-wider);
  font-size: var(--font-size-base);
  font-weight: var(--font-medium);
}

.nav-menu__item {
  position: relative;
}

.nav-menu__item::after {
  content: "";
  position: absolute;
  height: 2px;
  left: 0;
  bottom: -4px;
  width: 0;
  background: var(--nav-menu-color);
  transition: width 0.3s ease-out 0s, opacity 0.3s ease-out 0s;
}

.nav-menu__item:hover::after {
  width: 100%;
}

.nav-menu__item-active::after {
  content: "";
  position: absolute;
  height: 2px;
  left: 0;
  bottom: -4px;
  width: 100%;
  background: var(--nav-menu-color);
}

/*  ====================================== */
/*  ============= MAIN SECTION =========== */
/*  ====================================== */

.game_menu {
  position: relative;
}

.game_menu:hover {
  color: rgb(226, 224, 204);
}

.game_menu::after,
.game_menu::before {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  top: 50%;
  margin-top: -0.5px;
  background: #ffffff;
}

.game_menu:before {
  left: -2.5px;
}

.game_menu::after {
  right: 2.5px;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.game_menu:hover:before {
  width: 100%;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.game_menu:hover:after {
  background: transparent;
  width: 100%;
  transition: 0s;
}

.game_icon {
      transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

/*  ====================================== */
/*  =============== FOOTER =============== */
/*  ====================================== */

.footer-font {
  font-family: var(--footer-font);
}

.social-icon__image {
  width: var(--footer-icon-size);
  height: var(--footer-icon-size);
  transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

@media (min-width: 960px) {
  .social-icon__image {
    width: var(--footer-icon-max-size);
    height: var(--footer-icon-max-size);
  }
}

@media (min-width: 1280px) {
  .social-icon__container:hover .social-icon__image {
    transform: var(--transform-scale);
    filter: var(--dropShadow);
  }
}

.copyright {
  font-size: var(--font-size-xs);
  text-align: center;
  text-transform: uppercase;
}

@media (min-width: 960px) {
  .copyright {
    font-size: var(--font-size-sm);
  }
}

.policy {
  color: var(--policy-color);
}