*{
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;

   
}

html{
    scroll-behavior: smooth;
}


.fondo_principio{
    padding: 1px;
    background: linear-gradient(to right, #0099ff00, #2c3e5000), url(https://htmldemo.net/bonx/bonx/assets/img/bg/hero-bg1.webp);;
height: 100%;
background-size: cover;
background-position: center;
background-color: currentColor;
padding-bottom: 250px;
}


.cont_header{
  /*  background-color: brown;*/
    margin: auto;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    padding-top: 20px;
}



.cont_header nav{
    display: flex;
    gap: 20px;
}

.cont_header nav a{
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.sign{
    transition: all 0.05s;
background-color: blueviolet;
border-color: goldenrod;
border-style: solid;
border-radius: 15px;
padding: 7px 50px;
color: white;
text-decoration: none;
font-weight: bold;
font-size: 20px;
text-shadow: 0px 0px 6px #ffffff;
border-width: 5px;
font-weight: normal;


font-family: 'Anton', sans-serif;
font-family: 'Bevan', cursive;
font-family: 'Corinthia', cursive;
font-family: 'Fira Sans', sans-serif;
font-family: 'Inter', sans-serif;
font-family: 'Josefin Sans', sans-serif;
font-family: 'Lora', serif;


font-weight: bold;






}

.sign:hover{
    transition: all 0.05s;
    filter: saturate(0.5);
    
}








.cont_principio{
   /* background-color: brown;*/
    margin: auto;
    margin-top: 80px;
    width: 70%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.img_principio{
    text-align: center;
}



.titulo_principio h1{
  
    color: white;
    font-family: "Metal Mania", cursive;
    text-shadow: 3px 3px 0px #b154f0;
font-size: 70px;
font-size: 100px;
}



.titulo_principio p{
    font-family: 'Inter', sans-serif;
}


.titulo_principio p{
    font-size: 20px;
    color: white;
    font-weight: bold;
    margin-top: -20px;
}





.img_principio img{
    width: 100%;
}



.cont_fondo2{
   /* background-color: brown;*/
margin: auto;
width: 70%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 30px;
}

.card{
 background-image: url(/imagenes/fondo_card.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: white;
text-align: center;
border-radius: 10px;
}


.des_card{
    padding: 10px;
}


#fondo_body{
    background-image: url(/imagenes/img_body.jpeg);
    background-image: url(https://htmldemo.net/bonx/bonx/assets/img/bg/body-bg.webp);
background-position: center;  
background-repeat: no-repeat;
background-size: cover;
  
    padding-top: 100px;
}

.titulo_fondo2{
    margin: auto;
    width: 80%;
    text-align: center;
    color: white;
    font-size: 28px;
    padding-bottom: 80px;
}

.titulo_fondo2 h1{
    text-shadow: 2px 0px 0px #ffffff;
}


::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Fondo de la barra de desplazamiento */
  ::-webkit-scrollbar-track {
    background-color: black;
  }
  
  /* Color de la barra de desplazamiento */
  ::-webkit-scrollbar-thumb { 
    background-color:#b154f0;
    border-radius: 2em;
  }
  
  /* Esquina redondeada de la barra de desplazamiento */
  ::-webkit-scrollbar-corner {
    background-color: black;
  }



.cont_fondo3{
    margin: auto;
    width: 80%;
   display: flex;
   justify-content: space-around;
/*background-color: brown;*/
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}

.numero{
    text-align: center;
    color: white;

}

.numero h1{
    font-size: 75px;
    font-family: "Metal Mania", cursive;   
}

.amarillo{
    color: #ffb300;
}

.celeste{
color: #1de3eb;
}

.naranja{
    color: #df4c21;;
}

.violeta{
    color: #b154f0;
}



/*CONTENEDOR MATCHES*/
#fondo_matches .titulo_fondo2 p{
    font-size: 20px;
}



.cont_match{
    background-color: #060227;
    margin: 30px auto;
    width: 70%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    border-color: #b154f04a;
    border-style: solid;
    border-radius: 2em;
    padding: 20px 30px;
}


.columna1 h2{
    font-size: 35px;
    font-size: 35px;
    color: white;
}

.columna3{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.columna2{
    text-align: center;
}


.youtube img{
    text-align: center;
    width: 150px;
    border-radius: 2em;
}


.columna1{
    color: white;
}

.columna2{
    color: #ffb300;
}

.columna3{
    gap: 30px;
}



.player1 img{
    width: 100%;
}

.versus img{
    width: 100%;
}

.player2 img{
    width: 100%;
}


.boton_match{
    margin: auto;
    width: 80%;
    text-align: center;
    margin-top: 70px;
    margin-bottom: 100px;
}


.titulo_fondo2{
    padding-top: 200px;
    padding-bottom: 10px;
}
/*ESTILOS PARA EL FOOTER*/


footer{
    padding-top: 150px;
    padding-bottom: 150px;
}

.cont_footer{
    margin: auto;
    width: 80%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    color: white;

}



.mini_escudos{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.mini_e{
    border-color: #b154f0;
    border-style: solid;
    text-align: center;
    border-radius: 10px;
    border-width: 1px;
}

.mini_e img{
    width: 40px;
}

.col3{
    text-align: center;
}

.col4{
  /*  background-color: red;*/
    padding: 0 70px;
}


.nav{
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.nav a{
    transition: all 0.40s;
    text-decoration: none;
    color: white;
}


.nav a:hover{
    transition: all 0.40s;
    color: #b154f0;
}

.redes{
    font-size: 40px;
}

.facebook{
    color: #2f55a4;
}

.dribble{
    color: deeppink;
}

.youtube{
    color: #c4302b;
}

.twitter{
    color: #00acee;
}

#fondo_derechos{
    background-color: #140e38;
}


.cont_derechos{
  /*  background-color: brown;*/
    margin: auto;
    width: 80%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    color: grey;
    cursor: pointer;
}


.boton_arriba{
    text-align: center;
}


.boton_arriba img{
    width: 50px;
}

.cont_derechos h5 a{
    color: white;
    text-decoration: none;
}


.sign{
    transition: all 0.90s;    
}

.sign:hover{
    transition: all 0.90s;
    background-color:#140663;
    font-weight: bold;
}

.icono_menu{
    font-size: 30px;
    color: #b154f0;
    display: none;
}






.fondo_menu{
    transition: all 0.50s;
    background-color: #0000009c;
    position: fixed;
    width: 1px;
    height: 100%;
    z-index: 995; 
   right: 0;
}


.cont_menu{
    background-color:#621370;
    float: right;
    height: 100%;
    width: 50%;
}

.trasladar{
    width: 100%;
}


.cerrar{
    cursor: pointer;
}

.icono_menu{
    cursor: pointer;
}




.cont_menu a{
    color: white;
    display: flex;
    flex-direction: column;
    padding: 30px;
   
    font-size: 20px;
    text-decoration: none;
    font-family: 'Metal Mania', cursive;
    
}


/*ESTILOS PARA EL CONTENEDOR DE LOS BLOGS*/

#fondo_blogs .titulo_fondo2{
    margin-bottom: 80px;
}

#fondo_blogs .titulo_fondo2 p{
   /* background-color: brown;*/
    font-size: 25px;
}

.cont_blogs{
   /* background-color: brown;*/
    margin: auto;
    width: 70%;
    display: grid;
    grid-template-columns: 1fr 1fr;
gap: 40px 0;
}

.blog{
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
}

.img_blog{
    text-align: center;
}

.img_blog img{
    width: 70%;
    width: 170px;
}

.des_blog{
    color: white;
}

.des_blog a{
    text-decoration: none;
    color: white;
    font-size: 14px;
    color: #b154f0;
}



.cont_planetas{
 /*   background-color: brown;*/
    margin: auto;
    margin-top: 120px;
    width: 70%;
    display: grid;
   grid-template-columns: 1fr 1fr;
align-items: center;
background-image: url(/imagenes/fondo_planetas.webp);
background-size: cover;
background-position: center;
color: white;
font-size: 20px;
border-radius: 25px;
padding: 50px 70px;
}

.cont_connect{
    text-align: center;
  
}

.cont_header nav a{
    transition: all 0.40s;
}


.cont_header nav a:hover{
    transition: all 0.40s;
    background-color: #b154f0;
    padding: 2px 10px;
    border-radius: 5px 10px 5px 20px;
}


/*
header{
    transition: all 0.40s;
    position: fixed;

    width: 100%;
}


.menu_efecto{
    transition: all 0.40s;
    background-color: #09003d;
  

    z-index: 990;
}*/

#slider{
  /*  background-color: red;*/
    position: relative;
    margin:auto;
    margin-top: 300px;
    margin-bottom: 200px;
    width: 80%;
    border-radius: 10px;

}

#slider ul{
    text-align: center;
    padding: 0;
    margin: 0;

}
#slider ul li{
    list-style: none;
}


#slider ul li img{
    transition: all 0.90s;
    width: 90%;
   height: 500px;
    object-fit: cover;
    border-radius: 10px;
}

.prev, .next{
    background-color:#b154f0;
    cursor: pointer;
    padding: 50px 20px;
    padding: 40px 10px;
    border-radius: 2em;
    display: flex;
}





.prev{
    position: absolute;
top: 200px;
}

.prev i{
    cursor: pointer;
}

.n i{
    cursor: pointer;
}

.next{
    position: absolute;
right: 0;
top: 200px;

}








































@media (max-width: 1524px){

.cont_header{
    width: 90%;
}

.cont_principio{
    width: 90%;
}

.cont_principio{
  /*  background-color: red;*/
    margin-top: 27px;

}

.titulo_principio h1{
    font-size: 67px;
}



.cont_fondo2{
    width: 80%;
}

.cont_match{
    width: 80%;
}

.cont_footer{
    width: 70%;
    grid-template-columns: 1fr 1fr;
    text-align: center;
}

.mini_escudos{
    grid-template-columns: 1fr 1fr;
}

.cont_blogs{
    width: 80%;
}


.cont_planetas{
    width: 80%;
}

.cont_principio{
  /*  background-color: red;*/
    margin-top: 0px;
    width: 80%;
}


}









































@media (max-width: 1000px){


#slider{
    width: 100%;
}


    .cont_header nav{
        display: none;
    }

.fondo_principio{
    height: 100%;
}


    .cont_principio{
        grid-template-columns: 1fr;
        gap: 80px;
    }

    .cont_fondo2{
        grid-template-columns: 1fr;
    }

    .cont_fondo3{
        
        grid-template-columns: 1fr 1fr;
    }

.cont_match{
    grid-template-columns: 1fr;
    text-align: center;
}

.player1 img{
    width: 100px;
}

.versus img{
    width: 100px;
}

.player2 img{
    width: 100px;
}

.cont_footer{
    width: 70%;
    grid-template-columns: 1fr 1fr;
    text-align: center;
}

.mini_escudos{
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;



}


.cont_derechos{
    width: 95%;
}

.icono_menu{
    display: initial;
    font-size: 35px;
}

.cont_header   .sign{
    display: none;
}
.cont_blogs{
    grid-template-columns: 1fr;
  }

  .cont_planetas{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .connect{
    font-size: 13px;
    padding: 3px 10px;
  }

   
  
  .titulo_principio{
    text-align: center;
  }

  .titulo_principio p{
    margin-bottom: 54px;
  }



}






@media (max-width: 700px){
   .cont_fondo3{
    grid-template-columns: 1fr;
   }

   
.player1 img{
    width: 70px;
}

.versus img{
    width: 70px;
}

.player2 img{
    width: 70px;
}

.cont_footer{
    grid-template-columns: 1fr;
    text-align: start;
}

.col4{
    padding: 0;
}

.cont_derechos{
    grid-template-columns: 1fr;
    text-align: center;
}

.titulo_principio h1{
    text-align: center;
}

.titulo_principio p{
    text-align: center;
    font-size: 15px;
    margin-bottom: 54px;
}

.blog{
    grid-template-columns: 1fr;
}

.des_blog{
    text-align: center;
}

.cont_blogs{
    gap: 100px 0;
}


.titulo_principio h1{
    font-size: 55px;
    margin-bottom: 60px;
}

.titulo_fondo2 h1{
    font-size: 20px;
}

.cont_planetas h1{
    font-size: 20px;
}

.columna1 h2{
    font-size: 24px;
}

/*
.sign{
    font-size: 15px;
}*/

.cont_planetas{
    width: 90%;
    padding: 50px 30px;
}

.titulo_fondo2 h1{
    font-size: 28px;
}

.img_blog img{
    width: 80%;
}

}


@media (max-width: 403px){

.columna3{
    grid-template-columns: 1fr;
}



}