body { 
    margin: 0px;
    background-color: #1D0D50;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: aliceblue;
}

h1 {
    font-size: 24px;
}

h3 {
    margin-left: 30px;
    margin-bottom: 0px;
}

a {
    text-align: center;
    text-decoration: none;
    color: rgb(221, 218, 218);
}

/*Style header*/
header {
    position: fixed;
    z-index: 98;
    top: 0;
    display: flex; 
    flex-direction: row; 
    align-items: center;
    height: 75px;
    width: 100%;
    border: solid 2px rgb(221, 218, 218);
    background-color: #7c65c8ed;
}
.header-2 {
    background-color: #7C65C8;
    height: 75px;
    border: solid 2px rgb(221, 218, 218);
}

/*Style Logo header*/
.container-logo {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-left: 20px;
}

.img-logo {
    width: 60px;
    height: 60px;
}

.container-title-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*Style social networks header*/
.container-social-networks {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    border-radius: 5px;
}
.container-social-networks:hover {
    background-color: rgba(255, 255, 255, 0.236);
}

.container-social-networks a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-social-networks {
    width: 70px;
}

/*profile*/
.profile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 25px;
    margin-left: 30px;
    margin-right: 30px;
    background-color: #EDC710;
    border: solid 3px beige;
    color: black;
    font-weight: bold;
    font-size: small;
}

.profile .profile-menu {
    display: none;
}

.profile .profile-menu.show-profile {
    display: flex;
    position: fixed;
    top: 8%;
    width: 100px;
    height: 110px;
    flex-direction: column;
    list-style-type: none;
    padding: 0px;
    padding-top: 10px;
    margin: 0px;
    border-left: solid 3px white;
    border-right: solid 3px white;
    border-bottom: solid 3px white;
    background-color: #EDC710;
}

.profile .profile-menu li {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    margin-bottom: 10px;
    margin-left: 20px;
}

.profile .profile-menu li img {
    width: 15px;
    height: 15px;
}
.profile .profile-menu li a {
    margin: 0px;
    font-size: x-small;
    font-weight: none;
    color: black;
}


/*Style Nav*/
nav {
    display: flex;
    justify-content: end;
    align-items: center;
    height: 35px;
    width: 100%;
    border-bottom: solid 1px rgb(74, 73, 73);
    background-color: #B572DB;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

nav ul {
    height: 35px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    margin: 0px;
}

nav ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 115px;
    height: 50px;
    text-align: center;
    list-style: none;
    transition: all .5s;
}
nav ul li:hover {
    font-size: large;
    background-color: rgba(240, 248, 255, 0.264);
}

nav ul li a {
    font-size: small;
    display: flex;
    justify-content: center;
    height: 80%;
    width: 100%;
    align-items: center;
    border-left: solid rgba(240, 248, 255, 0.194) 0.2px;
}

.category-premium {
    color: #EDC710;
}

/*Style Banner Home*/
.container-banner-home {
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    margin-left: auto;
    margin-bottom: 80px;
    height: 550px;
}

.container-banner-home div {
    position: absolute;
    top: 0%;
    height: 550px;
}

.container-banner-home .btn-banner {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 65%;
    left: 90px;
    width: 170px;
    height: 50px;
    border: none;
    border-radius: 50px;
    color: wheat;
    letter-spacing: 4px;
    background-color: #aa6acf;
    font-size: large;
    transition: all 500ms ease;
}
.container-banner-home .btn-banner:hover {
    box-shadow: 0 0 10px #aa6acf, 0 0 20px #aa6acf, 0 0 20px #aa6acf;
}
.btn-banner::after {
    box-sizing: border-box;
  }

.img-banner-home {
    max-width: 100%;
    max-height: 100%;
}


/*Style Carrusels*/

.carousel-container {
    width: 1300px;
    height: 300px;
    margin: 10px 0px 100px 26px;
    position: relative;
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: #1D0D50;
}
  
.inner-carousel {
width: 100%;
height: 280px;
overflow: hidden;
}

.track {
display: inline-flex;
height: 100%;
transition: transform 0.2s ease-in-out;
padding: 0px;
margin: 0px;
}

.card-container {
    width: 190px;
    height: 280px;
    flex-shrink: 0;
    margin-right: 25px;
    list-style-type: none;
}

.card {
    position: relative;
    width: 100%;
    height: 100%;
    background-position: center bottom;
    background-size: center;
    background-repeat: no-repeat;
}

.card img {
    width: 100%;
    height: 100%;
}

.ov-btn-grow-skew {
    background: rgb(0, 0, 0); /* color de fondo */
    color: #ffffff; /* color de fuente */
    padding: 9px 55px;
    position: absolute;
    width: 80px;
    z-index: 1;
    left: 0px; bottom:0px;
    overflow: hidden;
    display: inline-block;
    text-decoration: none;
    font-size: medium;
    font-weight: bold;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.ov-btn-grow-skew:hover {
    color: rgb(0, 0, 0);/* color de fuente hover */
    text-decoration: none;
    cursor: pointer; cursor: hand;
}
.ov-btn-grow-skew::after {
    content: "";
    background: #d6a700; /* color de fondo hover */
    position: absolute;
    z-index: -1;
    width: 140px;
    padding: 9px 55px;
    display: block;
    left: -20%;
    right: -20%;
    top: 0;
    bottom: 0;
    transform: skewX(-45deg) scale(0, 1);
    transition: all 0.3s ease;
    text-decoration: none;
    cursor: pointer; cursor: hand;
}
.ov-btn-grow-skew:hover::after {
    transition: all 0.3s ease-out;
    transform: skewX(-45deg) scale(1, 1);
    cursor: pointer; cursor: hand;
 }

.nav-carrusel button {
    position: absolute;
    top: 50%;
    transform: translatey(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    outline: none;
    border: 1px solid rgba(52, 51, 51, 0.665);
    cursor: pointer;
    background-color: rgba(52, 51, 51, 0.665);
}
.nav-carrusel .prev {
    left: -10px;
    display: none;
}
.nav-carrusel .prev.show {
    display: block;
}
.nav-carrusel .prev.show:hover {
    background-color: #B572DB;
}
.nav-carrusel .next {
right: -5px;
}
.nav-carrusel .next:hover {
background-color: #B572DB;
}
.nav-carrusel .next.hide {
display: none;
}

.nav-carrusel button p {
font-size: 50px;
color: beige;
text-align: center;
margin: 0px;
}

/*boton buy*/

.buy:hover,
.buy:focus {
    box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
    -webkit-transform: translateY(-0.25em);
          transform: translateY(-0.25em);
}

.buy {
    --color: #000000;
    --hover: goldenrod;
}

.btn-buy {
    color: var(--color);
    -webkit-transition: 0.25s;
    transition: 0.25s;
    font-size: medium;
    font-weight: bold;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.btn-buy:hover, button:focus {
    border-color: var(--hover);
    background-color: #000000;
    color: goldenrod ;
}
.btn-buy {
    position: absolute;
    z-index: 2;
    bottom: 0%;
    left: 0%;
    width: 150px;
    height: 20px;
    background: goldenrod ;
    line-height: 1;
    padding: 7.5px 20px;
}

.card-premium {
    border: solid 2px goldenrod;
}

.title-premium {
    color: #d6a700;
}

.hide-casilla {
    display: none;
}
.hide-sombra-casilla {
    display: none;
}

.show-casilla {
    display: flex;
    position: fixed;
    z-index: 100;
    top: 5%;
    left: 17%;
    width: 922px;
    height: 600px;
}

.show-sombra-casilla {
    display: flex;
    position: fixed;
    z-index: 99;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #000000d4;
}

.card .img-daimon {
    position: absolute;
    top: 3%;
    left: 3.5%;
    z-index: 2;
    height: 23px;
    width: 23px;
}



/*Style new release*/
.new-release {
    display: flex;
    margin-left: auto;
    position: relative;
}

.new-release div img {
    max-width: 100%;
}

.new-release a {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 41%;
    left: 44%;
    height: 40px;
    width: 150px;
    background-color: #9d1803ed;
    vertical-align: bottom;
    color: #ffffff;
    font-size: large;
    border: solid 1px #9d1803ed;
    transition: all 500ms ease;
}
.new-release a:hover {
    background-color: #ac3c2aed;
    border: solid 1px #ac3c2aed;
    box-shadow: 0 0 10px #ac3c2aed, 0 0 20px #ac3c2aed, 0 0 20px #ac3c2aed;
}





/*Style footer*/
footer {
    display: flex;
    flex-direction: row;
    height: 320px;
    background-color: #B572DB;
    border: solid 15px #874aaa;
}

footer div {
    display: flex;
    flex-direction: row;
    margin-left: 100px;
}

footer section {
    margin-left: 50px;
    margin-top: 50px;
}

footer section h4 {
    margin: 0px;
    font-weight: bold;
}

footer section ul {
    margin-right: 60px;
    padding: 0px;
}

footer section ul li {
    font-size: small;
    margin: 10px 10px 10px 0px;
    list-style-type: none;
}

footer .footer-links {
    margin: 0px; 
    position: relative;
}

footer .footer-links a {
    position: absolute;
    bottom: 10%;
}

footer .img-logo {
    position: absolute;
    bottom: 5%;
}

/*-------------loading--------------------------------*/

#loading-content{
    background-color: rgb(0, 0, 0, 0.7);
    height: 100%;
    width: 100%;
    position: fixed;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    z-index: 10000;
  }
  
   #loading{
    border: 15px solid #ccc;
    border-top-color: yellow;
    border-top-style: groove;
    height: 100px;
    width: 100px;
    border-radius: 100%;
  
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    -webkit-animation:  efecto-load 1.5s linear infinite;
    -o-animation:  efecto-load 1.5s linear infinite;
    animation:  efecto-load 1.5s linear infinite;
   }
  
   #Progress_Status {
    width: 20%;
    background-color: rgb(255, 244, 244);
    position: absolute; left: 530px; bottom:220px;
  }
  
  :root{
    --fill-size:0%;
  }
    
  #barra-progreso{
    position: relative;
    width: 300px;
    height: 20px;
    background-color: #ddd;
    overflow: hidden;
  }
  
  #barra-progreso::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: yellow;
    transform: translate(-100%);
    animation: llenar-barra 4.8s ease forwards;
  }
  
  @keyframes llenar-barra {
      to{
          transform: translateX(var(--fill-size));
      }
  }
  
  
   @keyframes efecto-load{
      from{ transform: rotate(0deg);}
      to { transform: rotate(360deg) ;}
   }


/* style game */
.breadcrum ul {
    display: flex;
    padding: 0px;
    margin: 0px 0px 0px 30px;
}

.breadcrum ul li {
    list-style-type: none;
    margin-right: 5px;
}

.breadcrum ul li a{
    font-size: small;
}

.container-game {
    display: flex;
    justify-content: space-between;
    margin: 30px 30px 0px 28px;
    height: 500px;
}


/*Style Game 4 en linea*/

.game {
    width: 900px;
    height: 500px;
    background-color: #000000;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

.hide-canvas {
    display: none;
}

.canvas {
    display: flex;
}

.cont-timer {
    position: absolute;
    top: 21%;
    left: 3%;
}

.turnoPlayer {
    width: 120px;
    position: absolute;
    top: 21%;
    left: 31%;
    margin: 0%;
    padding: 0px;
    background-color: rgb(19, 85, 131);
}

.turnoPlayer .turno-text {
    text-align: center;
    margin: 5px;
    padding: 0%;
}

.cont-menu-game {
    display: none;
}

.cont-menu-game-show {
    display: flex;
    position: absolute;
    top: 19.5%;
    width: 900px;
    height: 500px;
}

.menu-game {
    display: none;
}

.menu-game-show {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 45%;
    left: 16%;
    height: 200px;
    width: 600px;
    background-color: rgba(18, 85, 15);
    margin: 0px;
    padding: 0px;
    text-align: center;
    border-radius: 10px;
    border: solid 3px white;
}

.menu-game-show div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-game-show p {
    margin: 0%;
    font-size: 200%;
}

.img-menu-game {
    width: 100%;
}

.winner {
    display: none;
}

.winner-show {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 200px;
    width: 600px;
    background-color: rgba(33, 99, 164, 0.8);
    margin: 0px;
    padding: 0px;
    top: 38%;
    left: 13%;
    text-align: center;
    border-radius: 10px;
    border: solid 3px white;
}

.winner-show p {
    margin: 0%;
    font-size: 400%;
}

.btn-menu {
    width: 150px;
    height: 30px;
    background-color: rgb(5, 167, 5);
    color: aliceblue;
    border: solid 1px white;
    margin: 10px;
}

.btn-play-again {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 11%;
    left: 66%;
    margin-top: 5%;
    background-color: rgb(5, 167, 5);
    color: aliceblue;
    border-radius: 15px;

}

.img-btn-restart {
    width: 100%;
    height: 100%;
}

.btn-option-game {
    width: 150px;
    height: 30px;
    background-color: rgb(5, 167, 5);
    color: aliceblue;
    border: solid 1px white;
}

.btn-5-linea {
    margin: 10px;

}

.btn-6-linea {
    margin: 10px;

}

.classic {
    text-align: center;
    margin: 20px;

}

.pre-game {
    position: relative;
    width: 900px;
    height: 100%;
}

.hide-pre-game {
    display: none;
}

.pre-game img {
    width: 100%;
    height: 100%;
}

.pre-game button {
    position: absolute;
    top: 45%;
    left: 40%;
    width: 20%;
    height: 10%;
    font-size: larger;
    background-color: #000000;
    color: #d6a700;
    transition: all 500ms ease;
}
.pre-game button:hover {
    top: 43%;
    left: 38%;
    width: 23%;
    height: 13%;
    color: white;
    font-size:30px;
    background-color: #d6a700;
    border: solid 1px #d6a700;
    box-shadow: 0 0 10px #d6a700, 0 0 20px #d6a700, 0 0 20px #d6a700;
}

.help-game {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 360px;
    height: 100%;
    background-color: rgba(87, 72, 137, 0.5);
}

.help-game h4 {
    color: #B572DB;
}
.help-game p {
    font-size: small;
    color: rgb(182, 179, 179);
    margin: 0px 35px 50px 35px;
    text-align: center;
}

.cont-boxes {
    display: grid;
    grid-template-areas:
    "a a a e"
    "b b b e"
    "b b b f"
    "b b b g"
    "c c c c"
    "d d d d"
    ;
}
.box {
    margin-left: 30px;
    margin-top: 30px;
}

.box1{grid-area: a;}
.box2{grid-area: b;}
.box3{grid-area: c;}
.box4{
    grid-area: d;
    margin-bottom: 30px;
}
.box5{
    grid-area: e;
    width: 360px;
    margin-right: 28px;
}
.box5 img {
    width: 100%;
}

.box6{
    grid-area: f;
    margin-right: 28px;
    width: 360px;
}
.box6 img {
    width: 100%;
}
.box7{
    grid-area: g;
    width: 360px;
    margin-right: 28px;
}
.box7 img {
    width: 100%;
}

.carrGame {
    margin-left: 0px;
}


.share-game {
    position: relative;
    height: 70px;
    width: 900px;
    background-color: rgba(87, 72, 137, 0.5);;
}

.share-game .text-share {
    position: absolute;
    top: 20%;
    right: 3%;
    font-size: small;
}

.share-game .button-share {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 25%;
    left: 2%;
    display: flex;
    align-items: center;
    width: 100px;
    height: 35px;
    font-size: small;
    background-color: #9747FF;
}
.button-share:hover {
    background-color: #a86df6;
}

.share-game .button-share div{
    margin-left: 5px;
    width: 20px;
    height: 20px;
}

.share-game .button-share div img{
    width: 100%;
    height: 100%;
}

.share-options {
    display: none;
}

.share-game .share-options.show-share {
    display: flex;
    justify-content: space-around;
    position: absolute;
    top: 30%;
    left: 15%;
    width: 300px;
}

.share-options a div {
    width: 30px;
    height: 30px;
}

.share-options a div img{
    width: 100%;
    height: 100%;
}


.about-game{
    background-color: #574889;
    width: 900px;
}

.e1 h1,.e2 h1,.e3 h1,.e4 h1,.e5 h1,.e6 h1,.e7 h1 {
    color: #B572DB;
    font-size: medium;
}

.e3 a,.e4 a, .e5 a, .e6 a {
    color: #B572DB;
}

.e1,.e2,.e3,.e4,.e5,.e6,.e7 {
    margin: 60px 20px 20px;
    font-size: small;

}

.video{
    position: relative;
    text-align: center;
    bottom: 6%;
}

.cont-img-demonstrative {
    display: flex;
    flex-wrap: wrap;
}

.img-demonstrative {
    width: 120px;
    height: 70px;
    margin: 0px 165px 100px 0px;
}

.hide-img-big1,.hide-img-big2,.hide-img-big3,.hide-img-big4,.hide-img-big5,
.hide-img-big6,.hide-img-big7,.hide-img-big8,.hide-img-big9 {
    display: none;
}
.show-img-big1,.show-img-big2,.show-img-big3,.show-img-big4,.show-img-big5,
.show-img-big6,.show-img-big7,.show-img-big8,.show-img-big9 {
    display: flex;
    position: fixed;
    z-index: 100;
    top: 5%;
    left: 10%;
}

.hide-sombra-img-big {
    display: none;
}
.show-sombra-img-big {
    display: flex;
    position: fixed;
    z-index: 99;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #000000d4;
}

/*----------------------------COMENTARIOS----------------------------------*/

.coments-container{
width: 64%;
padding: 20px;
}

.coment-content{
height: auto;
margin-bottom: 70px;
background-color: rgba(35, 30, 55, 0.6);
padding: 10px;
border: solid 1px rgba(255, 255, 255, 0.2);
}

.coment{
gap: 3px;
display: flex;
align-items: center;
flex-direction:row ;
color:white;
text-align: justify;
padding-bottom: 10px;
border-bottom: solid 1px rgba(255, 255, 255, 0.3);
}

.coment-you{
    color:white;
    height: auto;
    margin-bottom: 90px;
}
.img-user{
width: 40px;
height: 40px;
margin-right: 10px;
}

.coment h5 {
    margin: 0%;
}

.coment-content p{
font-size: small;
padding-left: 5px;
}

.coment-content a{
font-size: xx-small;
padding-left: 10px;
padding-right: 10px;
}
.coment-content a:hover{
    color: yellow;
}

.coment-content .send-comment {
    margin-left: 94%;
}

.coment-content input{
    margin: 10px 10px 10px 5px;
    background-color: rgba(35, 30, 55, 0.2);
    color: white;
    border: 0;
    outline: none;
    width: 80%;
    height: 30px;
}

.response-coment {
    display: flex;
    justify-content: space-between;
}

.last-comment {
    margin-bottom: 40px;
}

.more-comments {
    background-color: #874aaa;
    height: 40px;
    width: 30%;
    outline-style: none;
    border: #874aaa;
    color: white;
    margin-left: 30%;
}
.more-comments:hover {
    background-color: rgb(163, 107, 195)
}