@font-face {
    font-family: 'MiamiVice';
    src: url('/font/Guanine.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

*{
    margin: 0 auto;
    padding: 0;
    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -ms-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    transition: all 0.15s ease;
    font-family: 'MiamiVice', sans-serif;
}
body{
    background-color: #E13CA2;
    background: linear-gradient(to bottom, #E1319B, #a2206e);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    overflow-x:hidden;
    position:relative;
}
body::before {
    content: "";
    background-size: cover;
    background-position:center;
    background-attachment: fixed;
    opacity: 0.05; /* Ajusta la opacidad seg迆n tus preferencias, 0.0 para transparente y 1.0 para opaco */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    
    z-index: -1;
}

label{
    position:relative;
}

i{
    font-family: sans-serif;
}

h2{
    color:#FEFF00;
    font-size:30px;
    text-shadow: 5px 5px 0px rgba(0,0,0,1);
}

.close-points{
    color:#FEFF00;
    cursor:pointer;
}
.close-points:hover{
    transform:scale(1.01);
}

.negative-points > #box-player{
    background:rgb(255,0,0,0.8);
}

.negative-points > #box-player p:nth-of-type(2){
    color:red;
}

.best-player-points > #box-player{
    background:rgb(88, 201, 76, 0.6);
}

.best-player-points > #box-player p:nth-of-type(2){
    color:rgb(88, 201, 76);
}
.point-crown{
    width:100px;
    position:absolute;
    opacity:0.9;
    transform:rotate(15deg);
    z-index:200;
    top:-15px;
    right:-15px;
}
.point-loser{
    width:70px;
    position:absolute;
    opacity:0.9;
    transform:rotate(-10deg);
    z-index:200;
    top:-30px;
    left:-10px;
}

@media (max-width: 600px) {
    .point-crown{
        width:80px;
        position:absolute;
        opacity:0.9;
        transform:rotate(15deg);
        z-index:200;
        top:-20px;
        right:-15px;
    }
    .point-loser{
        width:60px;
        position:absolute;
        opacity:0.9;
        transform:rotate(-10deg);
        z-index:200;
        top:-50px;
        left:-15px;
    }
}

@keyframes neon1 {
  from {
    box-shadow: 0 0 0 0px #fff, 0 0 5px #fff, 0 0 20px #fff, 0 0 40px #FF1212,
      0 0 0px #FF1212, 0 0 20px #FF1212, 0 0 0px #FF1212, 0 0 10px #FF1212;

  }
  to {
    box-shadow: 0 0 0px #fff, 0 0 0px #fff, 0 0 15px #fff, 0 0 20px #FF1212,
      0 0 15px #FF1212, 0 0 10px #FF1212, 0 0 0px #FF1212, 0 0 0px #FF1212;
  }
}

.separate{
    width:100%;
    display:flex;
    align-items:center;
    margin:10px 0 10px 0;
    text-align:center;
}
.separate hr{
    width:40%;
    height:0.5px;
    background:#00E1FF;
}
.separate p{
    color:#00E1FF;
    font-size:12px;
    margin:5px;
}

h1{
    margin: 10px;
    padding: 20px;
    text-align:center;
    font-size:20px;
    font-weight:400;
}
input[type="radio"]{
    display:none;
}

input{
    appearance: none; /* Esto oculta el icono desplegable en algunos navegadores */
  -webkit-appearance: none; /* Para navegadores basados en WebKit (como Safari) */
  -moz-appearance: none;
}
select{
    appearance: none; /* Esto oculta el icono desplegable en algunos navegadores */
  -webkit-appearance: none; /* Para navegadores basados en WebKit (como Safari) */
  -moz-appearance: none;
  border: 3px solid;
  border-radius:0px;
  min-width:100px;
  padding:10px;
  color:#FEFD32;
}

main{
    width:100%;
    display: grid;
    place-items: center;
    min-height: 100vh;
    margin:0 auto;
    overflow-x:hidden;
}

#main-index .logo-gif{
    width: 50%;

}

@media (max-width: 600px) {
    #main-index .logo-gif{
     width: 100%;
    }
}

@keyframes freeze-frame {
    0% { background-position: 0 0; }
    100% { background-position: -200px 0; /* Ajusta el desplazamiento seg迆n tu GIF */ }
}

.animate-gif {
    animation: freeze-frame 1s steps(10) forwards; /* Ajusta la duraci車n y los pasos seg迆n tu GIF */
}


.phantom-text{
    width: 90%;
    font-size:15px;
    text-align: center;
    color:#FEFD32;
    opacity:0.6;
    font-weight: 600;
    margin: 10px auto;
}


#box-question > #sub-box-question{
    display:grid;
    place-items:center;
}

/*text retro*/
.text-retro {
  position: relative;
  font-size:20px;
  box-sizing:border-box;
  padding:10px;
  text-align: center;
  color: #f2e36e;
  background:transparent;
  transition: transform 0.1s ease-in-out;
  border-top:none;
  border-left:none;
  border-right:none;
  border-bottom:2px solid;
  margin-top:10px;
  text-transform:uppercase;
}

.text-retro::placeholder {
  color: #f2e36e;
  opacity:0.4;
}


/*button retro*/
.button-retro {
    background:#00E1FF;
    border:none;
    cursor:pointer;
    position:relative;
    display: inline-block;
    margin:10px auto;
}

.button-retro span {
    font-size:30px;
    position: relative;
    margin:0;
    padding: 5px 10px; /* Movido aqu赤 desde el bot車n */
    bottom: -9px;
    color:#FEFF00;
    text-shadow: 5px 5px 0px rgba(0,0,0,1);
}

.up-button{
    position:relative;
    color:#00E1FF;
    text-transform:uppercase;
    font-size:30px;
    top:13px;
}

.button-retro:hover span {
    text-shadow: 2px 2px 0px rgba(0,0,0,1);
}


.close-pop-up {
    position:absolute;
    top:0px;
    right:0px;
    background:#00E1FF;
    padding:5px 15px;
    font-size:40px;
    box-sizing:border-box;
    color:#E1319B;
    cursor:pointer;
}

.pop-up{
    top:0;
    left:0;
    position: fixed;
    width: 100%;
    height: 100vh;
    background: rgb(0,0,0,0.6);
    display: grid;
    place-items: center;
    z-index: 100000000;
    display: none;
}

.pop-up-choose{
    position: fixed;
    z-index:1000000000000000000000;
}

.pop-up .content{
    width:100%;
    position:relative;
}

.pop-up .sub-pop-up{
    position: relative;
    background:#E1319B;
    max-height: 85vh;
    max-width: 90%;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    overflow-y:scroll;
    color:#FEFD32;
    font-size:25px;
    box-shadow: 5px 5px 0px #00E1FF;
}

hr{
    border: 1px solid rgb(0,0,0,0.1);
}

.go-back{
    background: red;
}

#appear-x-time #social-row i{
    font-size:80px;
    text-shadow: 5px 5px 0px rgba(0,0,0,1);
    color:#FEFF00;
    cursor:pointer;
    margin:5px;
}
#appear-x-time #social-row i:hover{
    text-shadow: 2px 2px 0px rgba(0,0,0,1);
}

/*LOBBY*/


#top-room-div {
      position: relative;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
      position: relative;
      top: 0px;
    }
    #top-room-bg {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-image: url("https://e1.pxfuel.com/desktop-wallpaper/19/378/desktop-wallpaper-miami-vice-retro-retro.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      filter: blur(3px);
      z-index: -1;
      min-height: 100vh;
    }
    
    .fixed-top-info-bar {
        position: fixed;
        width: 100%;
        top: 0px;
        z-index: 4;
        color: #FEFF00;
        background: rgba(234, 31, 223, 0.5);
        backdrop-filter: blur(10px); 
        -webkit-backdrop-filter: blur(10px);
        text-transform:uppercase;
    }
    .fixed-top-info-bar:hover h1{
        text-shadow: 1px 1px 0px rgba(0,0,0,1);
    }
    .fixed-top-info-bar h1{
        font-size:35px;
        position: relative;
        margin:0;
        padding: 5px 10px; /* Movido aqu赤 desde el bot車n */
        bottom: -13px;
        color:#FEFF00;
        text-shadow: 5px 5px 0px rgba(0,0,0,1);
    }
    .fixed-top-info-bar-contdown{
        position: sticky;
        width:100%;
        top:0px;
        padding:20px;
        box-sizing:border-box;
        text-transform:uppercase;
        color: #FEFF00;
        text-align:center;
        z-index:6;
        background:transparent;
    }

#top-room-div > #top-room-content {
      position: relative;
      padding: 5px;
      z-index:1;
      transform: translateY(0);
    }

#top-room-div > #top-room-content #room-avatar {
    display: flex;
    flex-wrap:wrap;
    align-items:center;
    margin-top:80px;
} 

@media (max-width: 600px) {
    #top-room-div > #top-room-content #room-avatar {

        margin-top:40px;
    } 
}

#box-player{
    position:relative;
    width: 150px;
    height: 180px;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    margin:30px 10px 10px 10px;
}

#box-player:hover{
    box-shadow: 2px 2px 0px rgba(0,0,0,0.8);
}

#box-player:hover img{
    width: 185px;
}

#box-player img{
    position: absolute;
    width: 180px;
    bottom: 20px;
    left:50%;
    transform: translate(-50%, -0%);
}

#box-player p:nth-of-type(1) {
    font-size:25px;
    position: absolute;
    margin:0;
    width: 100%;
    bottom: 0px;
    color:#FEFF00;
    text-shadow: 1px 1px 0px rgba(0,0,0,1);
    background: #00E1FF;
    text-align: center;
}
#box-player p:nth-of-type(2) {
    font-size:15px;
    position: absolute;
    margin:0;
    width: 100%;
    bottom: -28px;
    color:#FEFF00;
    text-align: center;
    text-transform:uppercase;
}

.pop-up #avatar-select-div{
    overflow-y:scroll;
    overflow-x:none;
    height:70vh;
    width:100%;
}

.pop-up #avatar-select-div #separate-sections{
    display:flex;
    flex-wrap: wrap;
    gap: 15px;
    margin:0px auto; 
    width:95%;
}

@media (max-width: 600px) {
    
    #box-player{
        margin:20px 5px 5px 5px;
        
    }

    #avatar-select-div #separate-sections{
        gap: 20px;
        width:100%;
    }
    
    #avatar-select-div #separate-sections #box-player{
        position:relative;
        width: 90px;
        height: 110px;
        background: rgba(0, 0, 0, 0.3);
        box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.4);
        cursor: pointer;
        margin:0;
        
    }

    #avatar-select-div #separate-sections #box-player:hover{
        box-shadow: 2px 2px 0px rgba(0,0,0,0.8);
    }
    
    #avatar-select-div #separate-sections #box-player:hover img{
        width: 110px;
    }
    
    #avatar-select-div #separate-sections #box-player img{
        position: absolute;
        width: 110px;
        bottom: 20px;
        left:50%;
        transform: translate(-50%, -0%);
    }
    
    #avatar-select-div #separate-sections #box-player p:nth-of-type(1) {
        font-size:15px;
        position: absolute;
        margin:0;
        width: 100%;
        bottom: 0px;
        color:#FEFF00;
        text-shadow: 1px 1px 0px rgba(0,0,0,1);
        background: #00E1FF;
        text-align: center;
    }
    
    
    /*PLAYER CONAINER FOR MANY PLAYER CONTAINER*/
    
    .many-player-container #box-player{
        position:relative;
        width: 70px;
        height: 100px;
        background: rgba(0, 0, 0, 0.3);
        box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.4);
        cursor: pointer;
        margin:30px 10px 10px 10px;
    }

    .many-player-container #box-player:hover{
        box-shadow: 2px 2px 0px rgba(0,0,0,0.8);
    }
    
    .many-player-container #box-player:hover img{
        width: 100px;
    }
    
    .many-player-container #box-player img{
        position: absolute;
        width: 100px;
        bottom: 20px;
        left:50%;
        transform: translate(-50%, -0%);
    }
    
    .many-player-container #box-player p:nth-of-type(1) {
        font-size:18px;
        position: absolute;
        margin:0;
        width: 100%;
        bottom: 0px;
        color:#FEFF00;
        text-shadow: 1px 1px 0px rgba(0,0,0,1);
        background: #00E1FF;
        text-align: center;
    }
    .many-player-container #box-player p:nth-of-type(2) {
        font-size:12px;
        position: absolute;
        margin:0;
        width: 100%;
        bottom: -28px;
        color:#FEFF00;
        text-align: center;
        text-transform:uppercase;
    }
    .many-player-container .point-crown{
        width:70px;
        position:absolute;
        opacity:0.9;
        transform:rotate(15deg);
        z-index:200;
        top:-10px;
        right:0px;
    }
    .many-player-container .point-loser{
        width:40px;
        position:absolute;
        opacity:0.9;
        transform:rotate(-10deg);
        z-index:200;
        top:-20px;
        left:0px;
    }
}


        .point-selector #box-player{
            background:#3FEF2E;
        }
        .point-selector-red #box-player{
            background:red;
        }
        
.pop-up #avatar-select-div #separate-bar{
    width:100%;
    background:#00E1FF;
    color:#FEFF00;
    margin:0px auto;
    padding:2px;
    box-sizing:border-box;
    position:sticky;
    top:0;
    z-index:1;
}
.pop-up #avatar-select-div #separate-bar p{
    text-shadow: 5px 5px 0px rgba(0,0,0,1);
    position:relative;
    bottom:-8px;
    font-size:30px;
}

#main-lobby-room{
    background-color: #E13CA2;
    background: linear-gradient(to bottom, #E1319B, #a2206e);
    position:relative;
    z-index:5;
}
#main-lobby-room .main-lobby-content{
    width:100%;
    display:flex;
    justify-content: space-between;
    min-height:40vh;
}

#main-lobby-room .main-lobby-content #button-games{
    width:100%;
    display:block;
    float:left;
}

#main-lobby-room .main-lobby-content #button-games .button-game {
    all: unset;
    font-size: 25px;
    width: 100%;
    margin: 0;
    padding: 10px;
    box-sizing:border-box;
    color: #FEFF00;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);
    cursor: pointer;
    transition: none;
    -webkit-transition: all 0.0s ease;
    -moz-transition: all 0.0s ease;
    -ms-transition: all 0.0s ease;
    -o-transition: all 0.0s ease;
    transition: all 0.0s ease;

}

#main-lobby-room .main-lobby-content #button-games .button-game b{
    font-size:0;
    color:#00E1FF;
    -webkit-transition: all 0.05s ease;
    -moz-transition: all 0.05s ease;
    -ms-transition: all 0.05s ease;
    -o-transition: all 0.05s ease;
    transition: all 0.05s ease;
}
#main-lobby-room .main-lobby-content #button-games .button-game:hover b{
    font-size:20px;
}

#main-lobby-room .main-lobby-content #button-games .button-game.odd {
    background: rgb(0, 0, 0, 0.1);
}

#main-lobby-room .main-lobby-content #button-games .button-game.even {
    background: rgb(0, 0, 0, 0.05);
}

#main-lobby-room .main-lobby-content #button-games .button-game:hover{
    background:rgb(0,0,0,0.2);
}

#main-lobby-room .main-lobby-content #button-games .button-game.active {
    background:rgb(0, 225, 255,0.8);
    font-size:26px;
}
#main-lobby-room .main-lobby-content #button-games .button-game.active b {
    font-size:20px;
}

#main-lobby-room .main-lobby-content #button-games .button-game:disabled span{
    opacity:0.5;
}

#main-lobby-room .main-lobby-content .show-div-game {
    width: 100%;
    position:relative; 
    overflow:hidden;
}

#main-lobby-room .main-lobby-content .show-div-game .close-pop-up{
    display:none;
}

#main-lobby-room .main-lobby-content .show-div-game #sub-show-div-game {
    width: 100%;
    position:relative;
    display:grid;
    place-items:center;
    padding:20px;
    box-sizing:border-box;
    z-index:5;
}

#main-lobby-room .main-lobby-content .show-div-game img[class="game-img-lobby"] {
    position:absolute;
    width:110%;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    filter:blur(8px);
    min-width:800px;
    z-index:-1;
}

#main-lobby-room .main-lobby-content .show-div-game #sub-show-div-game img[class="game-img-logo-lobby"] {
    width:200px;
    position:relative;
}

@media (max-width: 600px) {
    #main-lobby-room .main-lobby-content .show-div-game {
        top:0;
        left:0;
        position: fixed;
        width: 100%;
        height: 100vh;
        background: rgb(0,0,0,0.6);
        display: grid;
        place-items: center;
        z-index: 100000000;
        display: none;
    }
    
    #main-lobby-room .main-lobby-content .show-div-game .close-pop-up{
        display:block;
    }
    
    #main-lobby-room .main-lobby-content .show-div-game #sub-show-div-game {
        position: relative;
        background:#E1319B;
        max-height: 85vh;
        max-width: 90%;
        padding: 20px;
        box-sizing: border-box;
        text-align: center;
        overflow:hidden;
        color:#FEFD32;
        font-size:25px;
        box-shadow: 5px 5px 0px #00E1FF;
    }
    
    #main-lobby-room .main-lobby-content .show-div-game img[class="game-img-lobby"] {
        position: absolute;
        filter: blur(8px);
        width: 100%;
        height: 105%;
        object-fit: cover; /* Prueba con cover o elimina esta línea */
        z-index: -1;
    }
}

#main-lobby-room .main-lobby-content .show-div-game #sub-show-div-game h3{
    color:#FEFF00;
    font-size:20px;
    text-shadow: 1px 1px 0px rgba(0,0,0,1);
    text-align:center;
    background:rgb(0, 225, 255, 0.8);
    padding:10px;
    box-sizing:border-box;
    backdrop-filter: blur(10px); 
}

/*slideshow*/

.slideshow-container {
  overflow: hidden;
  width:100%;
  height:350px;
  display:flex;
}

.slideshow-container .slideshow {
  display: flex;
  transition: transform 1s ease;
}

.slideshow img {
  width: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

@media (max-width: 600px) {
    .slideshow-container {
      height:200px;
    }
    
    .slideshow img {
      width: 100%;
      object-fit: cover;
    }
}







/*GAMES*/
#main-game-room{
    min-height:100vh;
    display:grid;
    place-items:center;
    overflow-x:hidden;
    position:relative;
}
#main-game-room .content-game{
    width:100%;
}
#main-game-room .content-game #div-logo{
    position:relative;
    z-index:10000;
    top:30px;
   margin:0 auto;
   display:grid;
   place-items:center;
}
#main-game-room .content-game #div-logo > img[id="logo"]{
    width:40%;
    min-width:200px;
    max-width:400px;
}

#main-game-room .content-game #fixed-text{
    font-size:20px;
    margin:8px;
}

#main-game-room .content-game #div-other{
    width:100%;
    display:grid;
    place-items:center;
}

@media (max-width: 600px) {
    
    #main-game-room .content-game #div-logo{
        top:12px;
    }
    #main-game-room .content-game #div-other p{
        font-size:18px;
    }
    #main-game-room .content-game #div-other div span{
        font-size:22px;
    }
}

#main-game-room .content-game .question{
    position: relative;
    background:#E1319B;

    max-width: 90%;
    padding: 50px;
    box-sizing: border-box;
    text-align: center;
    overflow-y:scroll;
    color:#FEFD32;
    font-size:30px;
    display:grid;
    place-items:center;
    box-shadow: 10px 10px 0px #00E1FF;
}

#main-game-room .close-pop-up{
    left:0;
    right:auto;
   
    
}

#gamemode-p{
    text-align:center;
}

.pop-up #mode-game-create > div > button[id="select-mode"]{
    width: 200px;
    height:100px;
}

/*AVATAR*/
#main-game-room{
    width:100%;
}


.player-container {
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
}




.player-card {
  width: 30%;
  margin: 10px;
  text-align: center;
}

#player-above {
  width: 100%;
  text-align: center;
}

.footer{
background:#000;
padding:30px 0px;
text-align:center;
}

.footer .row{
width:100%;
margin:1% 0%;
padding:0.6% 0%;
color:gray;
font-size:0.8em;
}

.footer .row a{
text-decoration:none;
color:gray;
transition:0.5s;
}

.footer .row a:hover{
color:#fff;
}

.footer .row ul{
width:100%;
}

.footer .row ul li{
display:inline-block;
margin:0px 30px;
}

.footer .row a i{
font-size:2em;
margin:0% 1%;
}

@media (max-width:720px){
.footer{
text-align:left;
padding:5%;
}
.footer .row ul li{
display:block;
margin:10px 0px;
text-align:left;
}
.footer .row a i{
margin:0% 3%;
}
}


/*hunger games*/
.pop-up-hunger-games {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: grey;
    z-index: 1000;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden; /* Asegura que los elementos internos no se desborden */
}

.background-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(3px); /* Ajusta el valor del desenfoque según tus necesidades */
    z-index: -1; /* Asegura que el fondo esté detrás del contenido */
}

.pop-up-hunger-games .sub-pop-up-hunger-games{
    position: relative;
    top:50px;
    background:rgb(234, 145, 2, 0.8);
    width: 90%;
    max-height: 90vh;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;

}

.pop-up-hunger-games .player-container[id="player1"]{
    position:absolute;
    bottom: 10px;
    left:50%;
    transform: translate(0%, -50%);
}
.pop-up-hunger-games .player-container[id="player2"]{
    position:absolute;
    bottom: 10px;
    right:50%;
    transform: translate(0%, -50%);
}

.pop-up-hunger-games{
    width:100%;
}
.pop-up-hunger-games label #box-player{
    border:2px solid #222222;
    width: 150px;
    height: 180px;
    font-size:15px;
    text-align:center;
    cursor:pointer;
    background:rgb(234, 145, 2, 0.8);
    
    display: inline-block;
  margin: 0 0.5rem;
}

.pop-up-hunger-games label #box-player p:nth-of-type(1) {
    font-size:25px;
    position: absolute;
    margin:0;
    width: 105%;
    left:-5px;
    bottom: 0px;
    color:#FEFF00;
    text-shadow: 1px 1px 0px rgba(0,0,0,1);
    background: brown;
    text-align: center;
    background-image:url("https://www.shutterstock.com/image-vector/cartoon-wooden-surface-600nw-252762637.jpg");
    background-size:100%;
}

.pop-up-hunger-games .player-score{
    font-size:25px;
    color:#000000;
    padding:5px;
    box-sizing:border-box;
    position:relative;
    top:-20px;
}

.pop-up-hunger-games label img{
    width:120px;
    margin-bottom:2px;
}

.pop-up-hunger-games #mostrar-palabra-true{
    font-size:20px;
    color:#FEFF00;
    text-shadow: 2px 2px 0px rgba(0,0,0,1);
}

@media (max-width: 600px) {
    .pop-up-hunger-games .player-container[id="player1"]{
    position:absolute;
    bottom: 10px;
    left:60%;
    transform: translate(0%, -40%);
    margin-right:100px;
}
    .pop-up-hunger-games .player-container[id="player2"]{
    position:absolute;
    bottom: 10px;
    right:60%;
    transform: translate(0%, -40%);
    margin-left:100px;
}
#sub-pop-up-dead{
    width:95%;
    font-size:18px;
}

    .pop-up-hunger-games label #box-player{
        width: 120px;
        height: 140px;
        margin: 0px;
    }
    
    .pop-up-hunger-games label #box-player p:nth-of-type(1) {
        font-size:20px;
    }
    .pop-up-hunger-games label #box-player img{
        width:150px;
        margin-bottom:2px;
    }
}

.red-background {
  background-color: red;
}
.pop-up-hunger-games #next-scene{
    background-image:url("https://www.shutterstock.com/image-vector/cartoon-wooden-surface-600nw-252762637.jpg");
    background-size:100%;
    text-align: center;
    font-size:20px;
    padding:10px;
    box-sizing:border-box;
    bottom:-40px;
    position:relative;
    color:#FEFF00;
    cursor:pointer;
}


/*Qu谷 prefieres*/
#center-game{
    height:100vh;
    width:100%;
    display:flex;
    flex-wrap: wrap;
    place-items:center;
    justify-content:center;
    padding:0;
    margin:0;
}
#center-game .label-question{
    padding:0;
    margin:0;
    width:90%;
    min-width:350px;
    margin:10px auto;
    height:35vh;
    display:grid;
    place-items:center;
    
    position: relative;
    border-top: 5px solid #222222;
    border-left: 5px solid #222222;
    border-right: 5px solid #222222;
    border-bottom: 15px solid #222222;
    border-radius: 10px;  
    box-sizing: border-box;
    text-align: center;
    overflow:hidden;
}

#center-game .label-question h1{
    width:90%;
    margin:0 auto;
}