/*
Theme Name: 	HTML5 Blank
Theme URI: 	http://html5blank.com
Description: 	HTML5 Blank WordPress Theme
Version: 	1.2.6
Author: 	Todd Motto (@toddmotto)
Author URI: 	http://www.toddmotto.com
Tags: 		Blank, HTML5, CSS3
License:	MIT
License URI:	http://opensource.org/licenses/mit-license.php
*/

 * {
margin: 0;
padding: 0;
}

:root {
--black: #0d181d;
--blue: #0068a5;
--yellow: #ffb511;
--white: #fff;
--orange: #ff7477;
	--grey:#ECEFF1;
}



html {
height: 101%;
color: var(--black);
}

body {
font: 400 17px/2 "Murecho", sans-serif;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
word-wrap: break-word;
margin: 0;
position: relative;
padding: 0;
min-height: 100%;
}

li {
list-style: none;
}
a {
color: var(--blue);
text-decoration: none;
border-bottom: 1px solid #0068a51a;
}

a:hover {
opacity: 0.7;
}

button {
font: inherit;
background: none;
border: 0;
color: currentColor;
cursor: pointer;
}
strong,
b {
font-weight: 600;
}




figcaption {
font-size: 0.8em;
margin: 5px 0;
}

nav {
float: right;
    font: 600 1.2em / 1.8 "Murecho", sans-serif;
    width: 30px;
    margin: 20px 0 0 0;
    padding: 10px;
    border-radius: 20px;
    position: fixed;
    left: 40px;
    top: calc(40vh - 123px);
    background: var(--grey);
	box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}

nav ul{margin:0;}

nav li{float:left; width:100%;}

nav li a {
text-decoration: none;
border: none;
    padding: 0 0 20px;
    height: 30px;
float: left;
text-align: left;
width: 100%;
margin:0;
color:var(--black);
}

lord-icon{padding:5px 0px 0 0;
  width:30px;height:30px;
}

nav a span{padding: 0 0 0 10px;
    position: relative;
    top: -5px;
display:none;
  position: relative;
  float: left;
  white-space: nowrap;
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  -ms-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
  top: -43px;
  left: 40px;
}

nav a:hover{opacity:1;}

nav a:hover span{ display: block;
 }

.active{opacity:.6;}

nav a,
h1 a {
text-decoration: none;
border: none;
}

h1, #logo {
font: 500 .1em/1 "Murecho", sans-serif;
height:90px;
width:90px; 
	border-radius:50%;

float: left;

margin: 0px 0 20px;
text-align: left;
}

h1 a {
text-decoration: none;
}

h2 {
font: 500 4em / 1 "Murecho", sans-serif;
text-align: left;
float: left;
width: 100%;
margin: 0 0 30px;
}

h3 {
width: 100%;
font: 500 1.5em/1 "Murecho", sans-serif;
text-align: left;
margin: 0 0 10px;
float: left;
}

h4 {
float: left;
width: 100%;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}

h5 {
width: 100%;
font: 700 1.5em/1 "Piazzolla", sans-serif;
text-align: left;
margin: 0 -20px;
float: left;

padding: 5px 20px 0;
line-height: 2.11;
}

h6 {
width: 100%;
font: 600 0.7em / 1 "Murecho", sans-serif;
text-align: center;
margin: 0 0 15px;
float: left;
text-transform: uppercase;
color: #A59000;
padding: 5px 0 0 0;
}

figure {
float: left;
width: 100%;
}

main {
    padding: 100px 30%;
    width:40%;
    float: left;
    z-index: 10;
    margin: 0;
	background:#FFF;
	min-height:calc(100vh - 500px);
}

article {
float: left;
width: 100%;
margin: 0 0 40px 0;
}

.bookmarks{background: #ECEFF1;
    padding: 40px 80px;
    width: calc(100%);
    margin: 0 -80px;
    border-radius: 20px;
    float: left;}
    .bookmarks ul li{width:100%; float:left;  padding:12px 0; line-height:1;}

.col-2 {
width: 100%;
float: left;
}



.col-2 li {
width: 50%;
float: left;
}

.article-list li {
padding: 5px 0;
border-bottom: 1px solid #ff74772b;
float: left;
width: 100%;
}

.notes-list{width:100%;}

.notes-list li {
float: left;

margin: 0 60px 60px 0;
width: 100%;
}
.posts{float:left; margin:0; width:100%;}

.posts li{width:100%; float:left;padding:20px 0; margin:0 0px 20px 0;
}




.posts a{color:var(--black);}
.posts a:hover{opacity:1;}

.notes-list li img {
max-width: 100%;
}



ul,
ol {
float: left;
width: 100%;
}
ul p,
ol p {
margin-bottom: 0;
}
ul > li {
list-style: none;
}
ol > li {
list-style: decimal;
margin-left: 20px;
width: calc(100% - 20px);
}
ul ol,
ul ul,
ol ul,
ol ol {
margin-bottom: 0;
}

.tags li {
text-decoration: none;
border: none;
margin: 0 20px 0 0;
float: left;
}

.intro {
font-size: 2em;
margin:40px 0;
line-height: 1.5em;
float:left;
}

.intro p {
margin-bottom: 40px;
}

.codeblock {
display: grid;
}
code {
font-family: var(--font-family-mono);
font-size: 1em;
background: var(--color-light);
padding: 0 0.5rem;
display: inline-block;
color: var(--color-black);
}
pre {
margin: 3rem 0;
background: var(--color-black);
color: var(--color-white);
padding: 1.5rem;
overflow-x: scroll;
overflow-y: hidden;
line-height: 1.5rem;
}
pre code {
padding: 0;
background: none;
color: inherit;
}

blockquote {
float:left;
margin: 20px 0;
}

figcaption {
padding-top: 0.75rem;
color: var(--color-text-grey);
}

hr {
margin: 1rem 0;
width: 100%;
float: left;
border: none;
height: 1px;
background:#EEE;
}

.img-caption,
.video-caption {
padding-top: 0.75rem;
line-height: 1.5em;
}

footer {
float: left;
width:50%;
    margin: 30px 25%;
    padding:20px 0;
    font-size: 0.9em;
	opacity:.7;
border-top:1px solid var(--grey);
   
	background:#FFF;
}

footer a {
text-decoration: none;
	border:none;
}

footer ul li {

margin: 0 20px 0 0;
}

.searchbox{border:0; padding:10px; background:#f9f9f9; float:left; width:100%; margin:20px 0; font:inherit;}

@media screen and (max-width: 480px) {
body {
--padding: 3rem;
}

main, header, footer{width:90%; float:left; margin:0 5%;padding:0;}

header{
  margin:20px 5% 0;
   height:auto;}


.bookmarks p{line-height:2;}

nav{width:100%;float:left;}

.logo{margin:0px calc(50% - 45px);}
lord-icon{text-align:center; width:100%;}

nav a span {
padding:0; 
top:0;
    font-size: .8em;
    width: 100%;
    float: left;
    text-align:center;
}

.posts{float: left;
    margin: 0px;
    width:100%;
}

.posts li{float:left; margin:0 calc(50% - 160px) 20px;}

.pagination {
display: flex;
padding-top: 6rem;
}
.pagination > span {
color: var(--color-text-grey);
}
.pagination > * {
padding: 0.5rem;
width: 3rem;
text-align: center;
border: 2px solid currentColor;
margin-right: 1.5rem;
}
.pagination > a:hover {
background: var(--color-black);
color: var(--color-white);
border-color: var(--color-black);
}

summary {
font-weight: bold;
}

.sq {
font-size: 0.9em;
float: left;
border-radius: 4px;
border: 1px solid #b0bec5;
color: var(--blue);
margin: 2px 2px 0 0;
padding: 5px;
min-width: 2px;
height: 17px;
text-align: center;
line-height: 1;
}

.alive {
background: #1e88e514;
}

.familia,
.mar,
.trabajo,
.viaje,
.casa {
background: #A59000;
color:#fff;
}

.tya {
border: 1px solid #f48359;
}
}