/*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; 
}
body {
  font-size: 1.15vw;
  color: #001F1E;
  font-family: helvetica, arial, verdana;
  text-align: center;
  background-size: 6vw;
  background-image: url("/imagenes/backgrounds/floresverdes.png")
}

p {
  line-height: 1.6em; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
}

hr {
  border: solid #c7b591;
  border-width: 2px 0 0 0;
}

.img_blog {
  max-width: 100%;
  height: auto;
  margin:auto;
  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;
}

a:hover { 
  background-color: #fff6e6;
}

h1, h2, h3, h4, h5 {
  font-family: "pikminbody", helvetica;
  color:#001E26;
}

/*---------------CUSTOM CSS---------------------*/
#headerimg {
  display:flex;
  justify-content: flex-end;
  position: relative;
  margin-left: 12vw;
  margin-right: 12vw;
  margin-top: 0.4vw;
  margin-bottom: 0.4vw;
  background-color: #7DDCDD;
  font-family: helvetica, arial, verdana;
  border-style: groove;
  border-color: #00B9B3;
  border-width: 0.4vw;
}
#nav {
  font-size: 100%;
  position: sticky;
  top:0;
  flex-grow:2;
  height: 20%;
  color: #001F1E;
  background-color: #7DDCDD;
  font-family: helvetica, arial, verdana;
  text-align: left;
  border-style: groove;
  border-color: #00B9B3;
  border-width: 0.4vw;
  margin: 0 0 0 0.4vw;
}
#whole {
  position:relative;
  display: flex;
  margin: 0 0 0 15%;
  left: 0%;
  margin-left: 12vw;
  margin-right: 12vw;
}
#centerpiece {
  width: 80%;
}
#postbody {
  color: #001F1E;
  background-color: #7DDCDD;
  font-family: helvetica, arial, verdana;
  text-align: justify;
  padding: 0;
  border-style: groove;
  border-color: #00B9B3;
  border-width: 0.4vw;
}
#commentbox {
  color: #001F1E;
  background-color: #7DDCDD;
  font-family: helvetica, arial, verdana;
  text-align: justify;
  padding: 0;
  border-style: groove;
  border-color: #00B9B3;
  border-width: 0.4vw;
  margin-top:0.4vw;
}

#bottom{
  color: #001F1E;
  background-color: #7DDCDD;
  font-family: helvetica, arial, verdana;
  text-align: center;
  padding: 0;
  border-style: groove;
  border-color: #00B9B3;
  border-width: 0.4vw;
  margin-top: 0.4vw;
  display:flex;
  justify-content: center;
}
#bottomtext {
  margin: 1vw;
  vertical-align: middle;
  text-align:center;
  font-size: 90%;
}
#titleimagefigure{
  width:100%;
  display:block;
  margin:auto;
}
#titleimage {
  border:0.3vw ridge #00B9B3;
  border-radius:1%;
  border-style: ridge;
  display:block;
  margin:auto;
}
#titleimagecaption{
  font-size:1vw;
  opacity:.80;
  margin-top:.3vw;
}
.img_blogcaption{
  font-size:1vw;
  opacity:.80;
  margin-top:-.7vw;
}
#spacer {
  display: block;
  margin: auto;
  width: 40%;
}
.blogtitle{
  font-family: "pikmintitle", helvetica;
  color:#001E26;
  }
.blogdate{
  font-family: "pikminbody", helvetica;
  color:#001E26;
  }
/* || LISTAS */
.nav{
  list-style-position: inside;
  padding-inline-start: 4%;
  list-style-image: url(/imagenes/iconos/flecha.png);
}
.nav2{
  padding-inline-start: 9%;
}
/*#CONTAINER is the rectangle that contains everything but the background!*/

#container {
  margin: 3em auto;
  width: 90%;
	max-width: 700px;
	background-color: #f1e3c9;
  color: #151515; 
  outline-color: #a9a9a9;
  outline-style: ridge;
  outline-width: 4px;
  outline-offset: 0;
}

#content {
  padding: .5vw 5% 1vw 5%;
}


/*HEADER STYLE*/
#header {
  background-color: #384879;
  padding: 0 5%;
  border-color: #a9a9a9;
  border-style: ridge;
  border-width: 0 0 4px 0;
}
#header ul {
  list-style-type: none;
  padding: 0.5em 0;
  margin: 0;
}
#header li {
  font-size: 1.2em;
  display: inline-block;
  margin-right: 1.5em;
  margin-bottom: 0.2em;
  margin-top: 0.2em;
}
#header li a {
  color: white;
  text-decoration: none;
  background-color: inherit;
}
#header li a:hover {
  text-decoration: underline;
}

/*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;
}

/*DISQUS STYLE*/
#disqus_thread {
  margin-top: 1.6em;
}

/*FOOTER STYLE*/
#footer {
  font-size: 0.8em;
  padding: 0 5% 10px 5%;
}
/*COMMENT SECTION*/