/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   /* || NAVEGACIÓN BÁSICA */
body {
  font-size: 1.15vw;
  color: purple;
  font-family: "Balsamiq Sans", helvetica, arial, verdana;
  text-align: center;
  background-image: url("/imagenes/backgrounds/gatoazul.png")
}
header {
  display:flex;
  justify-content: flex-end;
  color: #0c0317;
  width: 70%;
  position: relative;
  left: 15%;
  right: 15%;
  margin-top: 0.5%;
  margin-bottom: 0.5%;
  background-color: #a590f5;
  font-family: "Balsamiq Sans", helvetica, arial, verdana;
  text-align: center;
  border-style: groove;
  border-color: #6d0cad;
  border-width: 0.4vw;
}
article {
  color: #0c0317;
  width: 65%;
  background-color: #a590f5;
  font-family: "Balsamiq Sans", helvetica, arial, verdana;
  text-align: justify;
  padding: 0;
  border-style: groove;
  border-color: #6d0cad;
  border-width: 0.4vw;
}
nav {
  font-size: 100%;
  position: sticky;
  top:0;
  width: 16%;
  height: 20%;
  color: #0c0317;
  background-color: #a590f5;
  font-family: helvetica, arial, verdana;
  text-align: left;
  border-style: groove;
  border-color: #6d0cad;
  border-width: 0.4vw;
}
details{  
  margin:1.5vw;
  border-radius: 0.5vw;
  background-color: #cdbbed;
}
summary {
  list-style-type: "★ ";
  cursor: pointer;
  border: 0.2vw solid #8b63d6;
  border-radius: 0.5vw;
  padding: 0.5vw;
  background: #8b63d6;
  color: #efebf7;
} 
.detalles_blog{  
  margin:1.5vw;
  border-radius: 0.5vw;
  background-color: #cdbbed;
}
.summary_blog{
  list-style-type: none;
  cursor: zoom-in;
  border: 0.2vw solid #8b63d6;
  border-radius: 0.5vw;
  padding: 0.5vw;
  background: #8b63d6;
  color: #efebf7;
  text-align: center;
  font-size: 160%;
  font-family: "Indie Flower", helvetica, arial, verdana;
} 
.titulo_blog{
border-image-slice: 6;
border-image-width: 0.3vw;
border-image-outset: 0;
border-image-repeat: repeat repeat;
border-image-source: url("https://mdn.github.io/css-examples/tools/border-image-generator/border-image-5.png");
border-style: solid;
}
.imagenblog{ margin-left: 1%; margin-top: 0; }
.hilo {
  display: flex;
  margin: 0 0 0 15%;
  position:relative;
  left: 0%;
  gap: 0.5%;
}
.final{
  display:flex;
  color: #0c0317;
  width: 70%;
  position: relative;
  left: 15%;
  right: 15%;
  margin-top: 0.5%;
  margin-bottom: 0.5%;
  background-color: #a590f5;
  font-family: helvetica, arial, verdana;
  text-align: center;
  border-style: groove;
  border-color: #6d0cad;
  border-width: 0.4vw;
}
.contador {
  font-size: 90%;
  text-align: center;
}
.lina {
  margin:0vw;
  text-align: center;
}
.parrafo {
  margin: 1.5vw;
}
.parrafofinal {
  margin: 1.5vw;
  vertical-align: middle;
  text-align:center;
  font-size: 110%;
}
.tituloindex {
  width: fit-content;
  color: #8d940a;
  margin: auto;
  padding: 0 1vw 0 1vw;
  background-image: linear-gradient(to right, #e1e851, #ebf531);
  font-family: "Balsamiq Sans", helvetica, arial, verdana;
  font-size: 2vw;
  text-align: center;
  border-style: groove;
  border-color: #d2d952;
  border-width: 0.2vw;
}
.tablaindex {
  margin: 1%;
  margin-right: auto;
  margin-left: auto;
  border: 0.2vw ridge #d9e051;
}
.tdindex {
 border: 0.2vw ridge #d9e051;
}
.spacer {
  display: block;
  margin: auto;
  width: 40%;
}
.dibujo {
  display: block;
  margin: auto;
}
.entrada_titulo {
  font-size: 200%;
  text-align: center;
  border-style: groove;
  border-color: #6d0cad;
  border-width: 0.4vw;
  margin-top: 1vw;
  margin-left: auto;
  margin-right:auto;
  margin-bottom: auto;
  width: fit-content;
  color: #2b1a82;
  padding: 0 1vw 0 1vw;
  background-image: linear-gradient(to right, #2957d6, #6eacdb);
  font-family: "Indie Flower", helvetica, arial, verdana;

}
.entrada_subtitulo {
  font-size: 120%;
  text-align: center;
  margin-top: 1vw;
  margin-left: 13vw;
  margin-right: 13vw;
  width: fit-content;
  color: #2b1a82;
  margin: auto;
  padding: 0 1vw 0 1vw;
  font-family: "Indie Flower", helvetica, arial, verdana;
  
}
.contador {
  text-align: center;
}
.img_numero {
  margin:auto;
  height: 3vw;
  margin-top:-1.5vw;
}
/* || LINKS */
@keyframes wiggle {
    0% { transform: rotate(0deg); }
   80% { transform: rotate(0deg); }
   85% { transform: rotate(5deg); }
   95% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

a:link{
  color: #7e1bcf;
  text-decoration: none;
}
a.wiggle:hover{
  color: #7e1bcf;
  text-decoration: underline;
  animation: wiggle 1s infinite;
}
a:visited{
  color: #521287;
  text-decoration: none;
}
a.dos:link{
  color: #3828eb;
  text-decoration: none;
}
a.dos:hover{
  color: #3828eb;
  text-decoration: underline;
}
a.dos:visited{
  color: #1a108f;
  text-decoration: none;
}
/* || TABLAS */
.tabla {
  margin: 1%;
  margin-right: auto;
  margin-left: auto;
}
td, th {
  border: 0.1px solid black;
  padding: 0.1em 1em;
  text-align: center;
}
.table {
  display:flex
}
.titulotabla {
  color:black;
  font-size: 1.05em;
  font-weight: bold;
}
.comentario {
  text-align: justify;
}
/* || LISTAS */
.nav{
  list-style-position: inside;
  padding-inline-start: 4%;
  list-style-image: url(/imagenes/iconos/flecha.png);
}
.nav2{
  padding-inline-start: 9%;
}
/* || ICONOS NAVEGACIÓN */
.dibujos{
  padding-left: 10%;
  list-style: none;
  background-image: url(/imagenes/iconos/dibujos.png);
  background-size:9%;
  background-repeat: no-repeat;
}
.cocina{
  padding-left: 10%;
  list-style: none;
  background-image: url(/imagenes/iconos/cocina.png);
  background-size:9%;
  background-repeat: no-repeat;
}
.colecciones{
  padding-left: 10%;
  list-style: none;
  background-image: url(/imagenes/iconos/colecciones.png);
  background-size:9%;
  background-repeat: no-repeat;
}
.visitas{
  padding-left: 10%;
  list-style: none;
  background-image: url(/imagenes/iconos/visitas.png);
  background-size:9%;
  background-repeat: no-repeat;
}
.flecha{
  padding-left: 10%;
  list-style: none;
  background-image: url(/imagenes/iconos/flecha.png);
  background-size:9%;
  background-repeat: no-repeat;
}
.frentebatalla{
  padding-left: 10%;
  list-style: none;
  background-image: url(/imagenes/iconos/frentebatalla.png);
  background-size:9%;
  background-repeat: no-repeat;
}
.libros{
  padding-left: 10%;
  list-style: none;
  background-image: url(/imagenes/iconos/libros.png);
  background-size:9%;
  background-repeat: no-repeat;
}
.manualidades{
  padding-left: 10%;
  list-style: none;
 background-image: url(/imagenes/iconos/manualidades.png);
  background-size:9%;
  background-repeat: no-repeat;
}
.musica{
  padding-left: 10%;
  list-style: none;
 background-image: url(/imagenes/iconos/musica.png);
  background-size:9%;
  background-repeat: no-repeat;
}
.otros{
  padding-left: 10%;
  list-style: none;
 background-image: url(/imagenes/iconos/otros.png);
  background-size:9%;
  background-repeat: no-repeat;
}
.outfits{
  padding-left: 10%;
  list-style: none;
background-image: url(/imagenes/iconos/outfits.png);
  background-size:9%;
  background-repeat: no-repeat;
}
.pelis{
  padding-left: 10%;
  list-style: none;
  background-image: url(/imagenes/iconos/pelis.png);
  background-size:9%;
  background-repeat: no-repeat;
}
.pokemon{
  padding-left: 10%;
  list-style: none;
  background-image: url(/imagenes/iconos/pokemon.png);
  background-size:9%;
  background-repeat: no-repeat;
}
.rips{
  padding-left: 10%;
  list-style: none;
 background-image: url(/imagenes/iconos/rips.png);
  background-size:9%;
  background-repeat: no-repeat;
}
.rol{
  padding-left: 10%;
  list-style: none;
  background-image: url(/imagenes/iconos/rol.png);
  background-size:9%;
  background-repeat: no-repeat;
}
.series{
  padding-left: 10%;
  list-style: none;
  background-image: url(/imagenes/iconos/series.png);
  background-size:9%;
  background-repeat: no-repeat;
}
.shinyhunting{
  padding-left: 10%;
  list-style: none;
  background-image: url(/imagenes/iconos/shinyhunting.png);
  background-size:9%;
  background-repeat: no-repeat;
}
.speedruns{
  padding-left: 10%;
  list-style: none;
  background-image: url(/imagenes/iconos/speedruns.png);
  background-size:9%;
  background-repeat: no-repeat;
}
.tierlist{
  padding-left: 10%;
  list-style: none;
  background-image: url(/imagenes/iconos/tierlist.png);
  background-size:9%;
  background-repeat: no-repeat;
}
.videojuegos{
  padding-left: 10%;
  list-style: none;
  background-image: url(/imagenes/iconos/videojuegos.png);
  background-size:9%;
  background-repeat: no-repeat;
}
.cacharreo{
  padding-left: 10%;
  list-style: none;
  background-image: url(/imagenes/iconos/cacharreo.png);
  background-size:9%;
  background-repeat: no-repeat;
}
.conciertos{
  padding-left: 10%;
  list-style: none;
  background-image: url(/imagenes/iconos/conciertos.png);
  background-size:9%;
  background-repeat: no-repeat;
}