/* 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." */
/*---------------FONTS---------------------*/
@font-face { 
	font-family: "pikmintitle"; 
	src: url("/fonts/pikmintitle.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}
@font-face { 
	font-family: "pikminbody"; 
	src: url("/fonts/pikminbody.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}
@font-face { 
	font-family: "BalsamiqSans"; 
	src: url("/fonts/BalsamiqSans-Regular.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}
@font-face { 
	font-family: "dynapuff"; 
	src: url("/fonts/dynapuff.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}
/*---------------GENERAL HTML SECTIONS---------------------*/
body {
  font-size: 1.15vw;
  color: #001F1E;
  font-family: "BalsamiqSans", helvetica, arial, verdana;
  text-align: center;
  background-size: 6vw;
  background-image: url("/imagenes/backgrounds/floresverdes.png")
}
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
} /*Hace todo un poco más grande y conserva el tamaño cuando aumenta el zoom*/

p {
  line-height: 1.6em; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
  margin:1vw;
}
h1, h2, h3, h4, h5 {
  font-family: "pikminbody", helvetica; /*Solo para el h1 de los blogs, que es la fecha*/
  color:#001F1E;
}
/*---------------GENERAL WEB SECTIONS---------------------*/
#headerimg {
  display:flex;
  justify-content: flex-end; 
  margin: 0.4vw 12vw 0.4vw 12vw;
  background-color: #7DDCDD;
  border: 0.4vw #00B9B3 groove;
}
#whole {
  display: flex;
  margin: 0 12vw 0 12vw;
}
#centerpiece {
  width: 80%;
}
#bottom{
  display:flex;
  justify-content: center;
  color: #001F1E;
  background-color: #7DDCDD;
  text-align: center;
  padding: 0;
  border: 0.4vw #00B9B3 groove;
  margin: 0.4vw 0 0.4vw 0;
}
#bottomtext {
  margin: 1vw;
  text-align:center;
  font-size: 100%;
}
#linagif{
  height:5vw;
  margin-right:2vw;
}
#spacer {
  display: block;
  margin: auto;
  width: 40%;
}
#leftpiece{
  position: sticky;
  top:0; /*Necesario para que sea sticky*/
  height: 40%;
  width: 20%; /*Necesario para que sea sticky*/
}
#nav {
  color: #001F1E;
  background-color: #7DDCDD;
  text-align: left;
  border: 0.4vw #00B9B3 groove;
  margin: 0 0 0.4vw 0.4vw;
  list-style-position: inside;
  padding-inline-start: 4%;
  list-style-image: url(/imagenes/iconos/flecha.png);
}
#buttoncontainer {
  display:flex;
  flex-wrap: wrap;
  justify-content:space-evenly;
  padding:1% 1% 1% 1%;
  color: #001F1E;
  background-color: #7DDCDD;
  border: 0.4vw #00B9B3 groove;
  margin: 0 0 0 0.4vw;
}
.button {
  width: 32%;
  margin-top:.5%;
  padding:0;
}
.imgbutton {
  width:100%;
}
.middletitlecontainer {
  display:flex;
  justify-content:center;
  margin:auto;
  margin-top:1vw;
}
.middletitle {
  font-family: "pikmintitle", helvetica;
  color:#001F1E;
  font-size:3vw;
  margin:auto;
  margin-bottom:0;
}
/*---------------NAV ICONS---------------------*/
.nav{
  list-style-image: url(/imagenes/iconos/flecha.png);
}
.nav2{
  padding-inline-start: 9%;   /*Sí existe*/
}
.icono{
  background-size:11%;
  background-repeat: no-repeat;
  padding-left:13%;
  font-size:1.3vw;
  font-family:"dynapuff";
  font-weight:bold;
  margin: 2% 0 2% -2%;
  list-style:none;
}
@keyframes wiggle {
    0% { transform: rotate(0deg); }
   80% { transform: rotate(0deg); }
   85% { transform: rotate(5deg); }
   95% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
.icono:hover {
  animation: wiggle 0.1s;
}
.inicio{
  background-image: url(/imagenes/iconos/inicio.png);
}
.blog{
  background-image: url(/imagenes/iconos/blog.png);
}
.galeria{
  background-image: url(/imagenes/iconos/gallery.png);
}
.dibujos{
  background-image: url(/imagenes/iconos/dibujos.png);
}
.manualidades{
  background-image: url(/imagenes/iconos/manualidades.png);
}
.costura{
  background-image: url(/imagenes/iconos/costura.png);
}
.fotodiario{
  background-image: url(/imagenes/iconos/fotodiario.png);
}
.pokemon{
  background-image: url(/imagenes/iconos/pokemon.png);
}
.shinyhunting{
  background-image: url(/imagenes/iconos/shinyhunting.png);
}
.frentebatalla{
  background-image: url(/imagenes/iconos/frentebatalla.png);
}
.otros{
  background-image: url(/imagenes/iconos/otros.png);
}
.colecciones{
  background-image: url(/imagenes/iconos/colecciones.png);
}
.archivo{
  background-image: url(/imagenes/iconos/archivo.png);
}
.visitas{
  background-image: url(/imagenes/iconos/visitas.png);
}

/*----------------LINKS--------------------*/
a:link{
  color: #015C59;
  text-decoration: none;
}
a:hover{
  color: #015C59;
  text-decoration: underline;
  background-color:transparent;
}
a:visited{
  color: #029692;
  text-decoration: none;
  opacity:0.9;
}
a.dos:link{
  color: #015C59;
  text-decoration: none;
}
a.dos:hover{
  color: #015C59;
  text-decoration: underline;
  background-color:transparent;
}
a.dos:visited{
  color: #029692;
  text-decoration: none;
  opacity:0.9;
}
/*---------------ZONELETS BLOG---------------------*/
#postbody {
  color: #001F1E;
  background-color: #7DDCDD;
  text-align: justify;
  border-style: groove;
  border-color: #00B9B3;
  border-width: 0.4vw;
}
.img_blog {
  max-width:95.5%;
  height: auto;
  margin:.3vw 1vw 0 1vw;
  display:block;
  border:0.3vw ridge #00B9B3;
}
.right {
  float: right;
  margin-left: 1em;
}
.left {
  float: left;
  margin-right: 1em;
}
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
.multiple_images {
  display: flex;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
@media only screen and (min-width: 600px) {f,
  .small {
    max-width: 60%;
    height: auto;
  }
}
.caption {
  margin-top: 0;
  font-size: 0.9em;
  font-style: italic;
}
#titleimage {
  max-width:95.5%;
  border:0.3vw ridge #00B9B3;
  border-radius:1%;
  display:block;
  margin:auto;
}
#titleimagecaption{
  font-size:1vw;
  opacity:.80;
  margin:.3vw 1vw 0 1vw;
  display:block;
  max-width:95.5%;
}
.img_blogcaption{
  font-size:1vw;
  opacity:.80;
  margin:.3vw 1vw 0 1vw;
}
#spacer {
  display: block;
  margin: auto;
  margin-top:1vw;
  width: 40%;
}
.blogtitle{
  font-family: "pikmintitle", helvetica;
  color:#001E26;
  margin-left: 1vw;
  margin-right: 1vw;
  }
.blogdate{
  font-family: "pikminbody", helvetica;
  color:#001E26;
  margin-left: 1vw;
  margin-right: 1vw;
  }
#content {
  padding: .5vw 2% 1vw 2%;
}

/*POST LIST STYLE*/
#postlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
#recentpostlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
.moreposts {
  font-size: 0.8em;
  margin-top: 0.2em;
}

/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
  text-align: center;
  margin-top: 1vw;
}

/*---------------GALLERY---------------------*/
#gallerybody {
  display: flex;
  flex-wrap: wrap;
  align-items:flex-start;
  color: #001F1E;
  background-color: #7DDCDD;
  text-align: justify;
  padding: 0;
  border: 0.4vw #00B9B3 groove;
}
#gallerytitle {
  font-family: "pikmintitle", helvetica;
  color:#001F1E;
  font-size:3vw;
  margin-bottom:0;
}
.gallerypost {
  box-sizing: border-box;
  width: 48%;
  border-radius: 2vw;
  padding: .5%;
  margin: 1%;
  float: left;
  display: grid;
  place-items: center;
  background-color: #00B9B3;
  border: .2vw double #3F9596;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #001F1E;
  max-height:20vw;
  min-height:5vw;
}
.gallerydate{
  font-style:italic;
  font-size:1vw;
}
.galleryimage{
  margin: 4%;
  display: block;
  max-width: 90%;
  min-width: 80%;
  max-height: 100%;
  border-radius: 1vw;
  cursor: pointer;
  transition: transform 0.5s ease;
}
/*---------------LIGHTBOX CSS---------------------*/
/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}

/* Modal content (image) */
.modal-content {
  position: relative;
  width: auto;
  height: auto;
  max-width: 55%;
  max-height: 85%;
  min-width:350px;
  border-radius: 1vw;
  overflow: hidden;
  animation: zoomIn 0.5s;
}
.modal-description {
  font-size:1.6vw;
  width: auto;
  height: auto;
  max-width: 35%;
  max-height: 85%;
  overflow: auto;
  background-color: #00B9B3;
  border-radius: 1vw;
  animation: zoomIn 0.5s;
  margin:2vw;
  padding:1vw;
}

@media only screen and (max-width: 600px) {f, /*Para que en móviles se vea bien*/
  .modal-description {
    max-height:30%;
    max-width:90%;
    font-size:1.5rem;
    padding:3vw;
    margin-bottom: 10%;
  }
  .modal-content {
    max-height:45%;
    max-width:90%;
    margin-top:5%;
  }
}
@keyframes zoomIn {
  from {transform: scale(0.6);}
  to {transform: scale(1);}
}

.modal.show {
  display: flex;
  flex-wrap:wrap;
  opacity: 1;
}

/* Close button */
.close {
  position: absolute;
  top: 2%;
  right: 1%;
  color: #ffffff;
  font-size: 4vw;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.3s;
}

/* Caption of modal image */
.caption {
  position: absolute;
  bottom: 1%;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size: 2vw;
}
/*---------------SHINYHUNTING---------------------*/
.middletitlecontainer {
  font-family: "pikmintitle", helvetica;
  color:#001F1E;
  font-size:3vw;
  margin-bottom:0;
}
.middletitle {
  display:flex;
  justify-content:center;
  margin:auto;
  margin-top:1vw
}
.shinydetails {
  box-sizing: border-box;
  width: 98%;
  border-radius: 2vw;
  padding: .5%;
  margin: 1%;
  float: left;
  display: grid;
  place-items: center;
  background-color: #00B9B3;
  border: .2vw double #3F9596;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #001F1E;
  max-height:35vw;
  min-height:5vw;
} 
.shinysummary {
  font-size:2vw;
  list-style-type: "★ ";
  padding:0.9vw;
  text-align:left;
}
.shinysummary:hover {
  cursor:pointer;
}
.shinysprite {
  width:7%;
  margin-top:-0.9vw;
  margin-bottom:-1.1vw;
}
.shinyimage{
  width:100%;
  height:100%;
  border-radius:1vw;
  display:flex;
  align-items:center;
}
th, td {
  border: .2vw ridge #3F9596;
  border-radius: 1vw;
  text-align:center;
}
.shinyimgcontainer{
  width:40%;
}
.shinytable {
  margin-bottom:1vw;
}
.titulotabla {
  font-weight: 900;
  font-size:1.35vw;
}
.shinycomment {
  text-align:justify;
  padding:1vw;
  width:40%
}