@font-face {
  font-family: 'ubMono';
  src: url('../fonts/UbuntuMono-R.ttf') format('truetype'),
       url('../fonts/ubuntumono-r-webfont.woff2') format('woff2'),
       url('../fonts/ubuntumono-r-webfont.woff') format('woff');
}

:root{
--green:    #b8bb26;
--red:      #fb4934;
--blue:     #83a598;
--purple:   #d3869b;
--yellow:   #fabd2f;
--aqua:     #8ec07c;

--foreground-1: #ebdbb2; 
--foreground-2: #bdae93; 
--background-1: #282828; 
--background-2: #3c3836; 
--background-3: #1d2021;
--selection-1: #b8bb2633;
--selection-2: #b8bb2633;


--yellow-050: hsl(47,87%,94%);
--yellow-100: hsl(47,83%,91%);
--yellow-200: hsl(47,65%,84%);
--postit-fg:  #1d2021;
--postit-strong:  #b57614;
}

/* Colors: */
#green   {color: #b8bb26}
#red     {color: #fb4934}
#blue    {color: #83a598}
#purple  {color: #d3869b}
#yellow  {color: #fabd2f}
#aqua    {color: #8ec07c}


/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

[class*="col-"] {
  float: left;
  padding: 15px 15px 15px 0px;
}

main {
  margin: auto;
  padding: 2rem;
  max-width: 1150px;
  line-height: 1.5;
}

.center {text-align:center;}

.right {text-align:right;}

#main-nav ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#main-nav li a{
  display: block;
  text-align: center;
  padding: 14px 16px;
}

#main-nav li{float: left;}
#main-nav li.right{float: right;}

#main-nav .icon {
   vertical-align: middle;
   padding-right: 4px;
   width: 2em;
   height: 2em;
}

.icon {
   vertical-align: middle;
   height: 1.5em;
   width: auto;
}

.bulletless{
   list-style-type: none;
}

::selection {
  background: var(--selection-1);
}

body {
  background: var(--background-1);
  color:      var(--foreground-1);
  font-family: "ubMono";
}

p, .row li{line-height: 1.5;}

pre {
  background-color: var(--background-2) !important;
  color:      var(--foreground-1) !important;
  padding: 1em;
  border: 0;
  overflow: auto;
}

code{
  background-color: var(--background-2);
  border: 0;
  font-size: 10pt;
  margin-bottom:2em;
  margin-top:2em;
}

a, a:active, a:visited {
  color: var(--purple);
  background-color: var(--background-3);
  transition: background-color 0.2s;
}

a:hover {
  color: var(--background-3);
  background-color: var(--foreground-1);
}

h1, h2, h3, h4, h5 {
  margin-bottom: .1rem;
}
h1 {
   text-align: center;
}
h2{
   color: var(--green);
}
h3{
   color: var(--aqua);
}
strong {
   color: var(--yellow);
}

blockquote {
  border-left: 1px solid var(--foreground-2);
  margin: 0.5em 10px;
  padding: 0.5em 10px;
}

footer {
  display: block;
  margin:auto;
  text-align: center;
  max-width: 500px ;
}

footer p {
   line-height: 1;
}

footer a{
  display: block;
  text-align: center;
  padding: 2px 16px;
  width: min-content;
  margin: auto;
}

.round_image{
   border-radius: 5px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.width100{
   max-width: 100%;
   height: auto;
}

.width90{
   max-width: 90%;
   height: auto;
}

.width80{
   max-width: 80%;
   height: auto;
}

.width70{
   max-width: 70%;
   height: auto;
}

.width60{
   max-width: 60%;
   height: auto;
}

.width50{
   max-width: 50%;
   height: auto;
}

.width40{
   max-width: 40%;
   height: auto;
}

.width30{
   max-width: 30%;
   height: auto;
}

.width20{
   max-width: 20%;
   height: auto;
}

#side2side {
   padding: 25%;
   max-width: 100%;
   height: auto;
}

img{vertical-align:middle}

#tagcloud{
   max-width: 400px ;
	margin: auto ;
	text-align: center ;
	display: block ;
   list-style-type: none;
   padding: 0px;
}
#tagcloud ul{
   padding: 0px;
}
#tagcloud li{
   display: inline-block;
   margin-right: 1em;
}

#taglist li{
   display: inline-block;
}

#taglist{
   max-width: 300px ;
	margin: auto ;
	text-align: center ;
	display: block ;
   padding: 0px;
   list-style-type: none;
}

#taglist::before { 
   content: "Esta entrada está etiquetada en:" ; 
   display: block; 
   font-size: small;
   margin-bottom: 1em;
}

#taglist::after { 
   content: "Haz click en las etiquetas para ver entradas relacionadas."; 
   display: block;
   font-size: small;
   margin-top: 1em;
   margin-bottom: 1em;
}

#showSmall {
   display:none;
}

#tag {
   background-color: var(--blue);
   text-decoration: none;
   color: var(--background-3); 
   border-radius:2px;
   font-size: 12px;
   padding:0.2em;
}

#number-badge {
	border-radius: 50%;
   color: var(--blue);
   background-color: var(--background-3); 
	padding-left: 3px;
	padding-right: 3px;
}

#tag:hover {
  background-color: var(--foreground-1);
}

#blog_p {
   text-align: justify;
   text-justify: inter-word;
}

#blog_tip {
   padding-left: 12px;
   padding-right: 12px;
   margin: 24px;
   border-color: var(--green);
   border-width: thin;
   border-style: solid;
}

#postit {
   margin: 24px;
   color: var(--postit-fg);
	background-color: var(--yellow-050);
	border: 1px solid var(--yellow-200);
	border-radius: 3px;
	box-shadow: 0 1px 2px var(--background-3), 0 1px 4px var(--background-3), 0 2px 8px var(--background-3);
   max-width: 400px;
   float: right;
}

#postit-header {
	background-color: var(--yellow-100);
   padding: 12px;
	border-bottom: 1px solid var(--yellow-200);
}
#postit-header > h3 {
   margin: 0;
   color: var(--postit-fg);
}

#postit-body {
   padding-left: 18px;
   padding-right: 18px;
}

#postit-body strong {
   color: var(--postit-strong);
}

.metadata {
   color: var(--blue);
}

@media only screen and (max-width: 800px) and (min-width: 478px) {
   #padLeft {
      padding-left: 25%;
   }

   #postit {
      float: none;
      margin: auto;
   }
}

@media only screen and (max-width: 800px) {
  /* For mobile phones: */
  [class*="col-"] {width: 100%;}
  
  #hideSmall {
     display:none;
  }

  #showSmall {
     display:inline;
  }

  #blog_p {
        text-align:left;
  }

  #side2side {
   padding: 0%;
   max-width: 30%;
  }

  #profile {
     max-width: 40%;
  }

   #padLeft {
      padding-left: 5%;
   }

  .toc {
     margin:0;
     padding:0;
  }

  .toc ul {
     padding-left:0;
  }

   #blog_tip {
      padding-left: 1rem;
      padding-right: 1rem;
      margin: 0px;
   }

}

@media only screen and (max-width: 1367px) {
  .main {width: 100%;}
}

@media (prefers-color-scheme: light) {

:root{
--green: #79740e;
--red:   #9d0006;
--blue:  #076678;
--purple:#8f3f71;
--yellow:#b57614;
--aqua:  #427b58;

--foreground-1: #3c3836; 
--foreground-2: #282828; 
--background-1: #fbf1c7; 
--background-2: #ebdbb2; 
--background-3: #e6d5ae;
--selection: #79740e55;
}
    #green   {color: #79740e}
    #red     {color: #9d0006}
    #blue    {color: #076678}
    #purple  {color: #8f3f71}
    #yellow  {color: #b57614}
    #aqua    {color: #427b58}

   #black_bg{
      background-color: var(--foreground-2);
      border-radius: 5px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   }

   .icon#black_bg{
      box-shadow: none;
   }

}