*{
    font-family: 'Inconsolata', monospace;
    margin: 0;
    padding: 0;
  
}
body{
    overflow:scroll;
    background-repeat: no-repeat;
    background-size: 100%;
    background-color:  rgb(47, 11, 105);

}
.contenidoej{
    z-index: 99;
    text-align: center;
    box-shadow: 0px 10px 100px 25px rgba(5, 5, 5, 0.411);
    background-color: rgba(255, 255, 255, 0.836);
    height: 800px;
    width: 60%;
    border-radius: 2px;
    margin: auto;
 
}


.contenido1{
    background-color: rgba(253, 253, 253, 0.911);
    color: #000;
    width: 500px;
    height: 400px;
    position: relative;
    left: 700px;
    top: 70px;
    border: 2px solid transparent;
    border-image: linear-gradient(45deg,#ff0, rgb(156, 46, 156), #f00, #00f, #0f0);
    border-image-slice: 1;
    box-shadow: 0 15px 25px rgba(0,0,0,.2);
    padding: 10px 10px;
    overflow: scroll;
    display: inline-block;
    
}
#particles-js{
    width: 100%;
    z-index: -1;
    position: fixed;
    background-color: rgb(47, 11, 105);
  }
.contenido2 {
    z-index: 99;
    box-shadow: 0px 10px 100px 25px rgba(5, 5, 5, 0.411);
    background-color: rgba(255, 255, 255, 0.89);
    text-justify: inter-cluster;
    width: 60%;
    margin: auto;
    height: 700px;
    border-radius: 2px;
    padding:40px 20px;
    top: 2px;
   position: relative;
    
}
.contenido22 {
    z-index: 99;
    box-shadow: 0px 10px 100px 25px rgba(5, 5, 5, 0.411);
    background-color: rgba(255, 255, 255, 0.89);
    text-justify: inter-cluster;
    width: 60%;
    margin: auto;
    height: 500px;
    border-radius: 2px;
    padding:40px 20px;
    top: 2px;
   position: relative;
    
}
.contenidomenu{
    background-color: rgba(15, 13, 19, 0.582);
    position:absolute;
    color: white;
    padding: 5px;
    margin: 30px 20px;
    width: 120px;

    border-radius: 3px;
}
.contenidomenu a{
    text-decoration: none;
    color: white;
}
.contenido3{
    z-index: 99;
    height: 570px;
    width: 90%;
    margin: auto;
}
    
.ejemplos{
    padding: 10px;
    height: 150px;
    width: 250px;
    display: inline-block;
    background-color: rgb(255, 255, 255);
    position: relative;
    margin: 20px;
    left: 5px;
    border-radius: 10px;
    border: 2px solid transparent;
    border-image: linear-gradient(45deg,#ff0, rgb(156, 46, 156), #f00, #00f, #0f0);
    border-image-slice: 1;
    
}
.contenido4{
    z-index: 99;
    background-color:rgba(255, 255, 255, 0.952);
    color: #000;
    width: 500px;
    height: 400px;
    position: relative;
    left: 150px;
    top: 10px;
    border: 2px solid transparent;
    border-image: linear-gradient(45deg,#ff0, rgb(156, 46, 156), #f00, #00f, #0f0);
    border-image-slice: 1;
    box-shadow: 0 15px 25px rgba(0,0,0,.2);
    padding: 10px 10px;
    overflow: scroll;
    display: inline-block;
    
}

.libros{
    z-index: 99;
    padding: 30px;
    height: 390px;
    width: 250px;
    display: inline-block;
    background-color: #ffffff;
    position: relative;
    margin: 20px;
    left: 70px;
    border-radius: 10px;
    border: 2px solid transparent;
    border-image-slice: 1;
    
}


.pie{
    width: 100%;
    background-color: rgba(15, 13, 19, 0.582);
    color: rgb(252, 247, 247);
    margin: 0;
    padding: 0;
    
}
.pie .grupo1{
    width: 100%;
    
   
   
}
.box{
    padding: 20px;
    display: inline-block;
    text-align: initial;
}

.pie  .grupo1 .box figure img{
    width: 200px;
}
.red-social a{
    display: inline-block;
    text-decoration: none;
    width: 45px;
    height: 45px;
    line-height: 45px;
    color: white;
    margin-right: 10px;
}
.soporte a{

    color: white
}
/*imagenes*/
/*inicio*/
.inicio{
    left: 1000px;
    top: 780px;
    position: absolute;
  }
  /*libro*/
  .libroA3{
    left: 1105px;
    top: 540px;  
    position: absolute;
  }
  .libroA2{
    left: 200px;
    top: 540px;    
    position: absolute;
  }
/*eleccion*/
.contenido7 a{
    color: white;
}
.contenido7 {
    box-shadow: 0px 10px 100px 25px rgba(5, 5, 5, 0.411);
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(254,254,254,0.2861519607843137) 0%, rgba(234,243,255,0.3841911764705882) 0%, rgba(228,240,255,0.3785889355742297) 0%, rgba(87,165,253,0.2777485994397759) 100%);    border-radius: 2px;
    width: 60%;
    border-radius: 2px;
    border: #ffffff;
    margin: auto;
    height: 670px;
    padding:40px 20px;
    top: 2px;
    color: white;
    text-align: center;
    
}
.eleccion{
    left: 1010px;
    top: 740px;
    position: absolute;
}
/*explicacion*/
.exA4 {
    position: absolute;
    left: 1070px;
    top: 535px;
    
  }
  .exA5 {
    position: absolute;
    left: 700px;
    top: 535px;
  }
  .exA3{
    position: absolute;
    left: 1140px;
    top: 533px;
  }
  /*ejemplos*/
  .ejemA2 {
    left: 170px;
    top: 5px;    
  }
.ejemA4 {
    left: 1000px;
    top: 5px;    
  }
  .ejemA3{
    left: 100px;
    top: -68px;
  }
/*LOS REALES*/

.imgA4 {
    left:1050px;
    top: 470px;
    position: absolute;

  }
  .imgA5 {
    left: 150px;
    top: 470px;
    position: absolute;
  }
  .imgA3{
    left: 1140px;
    top: 468px;
    position: absolute;
  }
  .imgA6{
    left: 950px;
    top: 463px;
    position: absolute;
  }