@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Bitter-Bold"), url("../fonts/bitter-700.woff2") format("woff2");
}
@font-face {
  font-family: "Gudea";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Gudea"), url("../fonts/gudea-400.woff2") format("woff2");
}
@font-face {
  font-family: "Gudea";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Gudea-Bold"), url("../fonts/gudea-700.woff2") format("woff2");
}
@font-face {
  font-family: "Gudea";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local("Gudea-Italic"), url("../fonts/gudea-400-italic.woff2") format("woff2");
}

.site-footer, .site-header::after {
  background-color: #202020;
  background-image:
    linear-gradient(to right, #000, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, #000),
    linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000),
    linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000),
    linear-gradient(to bottom, #080808, #202020);
  background-size: 100% 100%, 10px 10px, 10px 10px, 10px 5px;
  background-position: 0 0, 0 0, 5px 5px, 0 0;
}

* { box-sizing: border-box; }

html { font-size: 62.5%; }

body {
  margin: 0;
  padding: 20px;
  background: #333;
  color: #404040;
  font-family: "Gudea", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  clear: both;
  font-family: "Bitter", Georgia, serif;
  font-weight: bold;
}

a { color: #333; text-decoration: none; }
a:visited { color: #3d3d3d; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

#page {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0;
  border-radius: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0.4) 0 0 1rem 0;
}

.site-header {
  position: sticky;
  top: 20px;
  z-index: 100;
  margin: 0;
  padding: 0;
  text-align: left;
}

.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
}

.site-header::before {
  z-index: -2;
  inset: -20px -1rem 0;
  background: #333;
}

.site-header::after {
  z-index: -1;
  border-radius: 0.5rem 0.5rem 0 0;
}

.site-branding { padding: 1rem; }

.site-qr {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1rem;
  z-index: 10; 
  background: #fff;
  padding: 5px;
  border-radius: 0.3rem;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0 0.5rem;
}

@media screen and (min-width: 41em) {
  .site-branding { padding: 2rem; }
  .site-qr { right: 2rem; }
}

.site-title {
  margin: 0;
  font-size: 2.4rem;
  text-transform: uppercase;
}

.site-title a,
.site-title a:visited {
  color: #d0d0d0;
  text-shadow: rgba(0, 0, 0, 0.5) 0 0 0.3rem;
}

.site-title a:hover { color: #fff; text-decoration: none; }

.site-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0 1rem 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.6rem;
}

.site-navigation a,
.site-navigation a:visited {
  display: block;
  padding: 0.3rem 1rem;
  border: 1px solid #353535;
  border-radius: 0.3rem;
  font-size: 1.3rem;
  font-weight: bold;
  text-transform: uppercase;
  background: #414141;
  color: #eee;
}

.site-navigation a:hover {
  background: #353535;
  color: #fff;
  text-decoration: none;
}

.has-submenu { position: relative; }

.site-navigation ul.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 20rem;
  margin: 0;
  padding: 0.4rem;
  flex-direction: column;
  gap: 0.3rem;
  background: #2a2a2a;
  border: 1px solid #353535;
  border-radius: 0 0.3rem 0.3rem 0.3rem;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0.4rem 1rem;
}

.site-navigation .has-submenu:hover ul.submenu,
.site-navigation .has-submenu:focus-within ul.submenu {
  display: flex;
}

.submenu a { text-transform: none; border: none; }

.site-navigation a.nav-icon { padding: 0.5rem 0.8rem; }
.site-navigation a.nav-icon svg { display: block; }

#main {
  background: #fefefe;
}

#primary { padding: 2rem; }

.hentry { margin-bottom: 3rem; overflow: hidden; }

.entry-thumb {
  float: left;
  width: 200px;
  margin: 0 2rem 0.5rem 1rem;
  border-radius: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0.2) 0 0 0.3rem 0.1rem;
}

.entry-title { font-size: 2.4rem; margin: 0 0 0.5rem; }
.entry-title a, .entry-title a:visited { color: #333; }

.entry-meta {
  clear: both;
  font-size: 1.1rem;
  color: #888;
  margin-bottom: 1.5rem;
}

.entry-meta a, .entry-meta a:visited { color: #666; }

.entry-content, .entry-summary { overflow-wrap: break-word; }

.entry-content a, .entry-summary a { text-decoration: underline; }

.entry-footer {
  font-size: 1.2rem;
  color: #888;
  border-top: 1px solid #f0f0f0;
  padding-top: 0.8rem;
}

.more-link { font-weight: bold; font-size: 1.4rem; }

blockquote {
  margin: 0 0 1.5em;
  padding: 1.6em 1.6em 0.1rem;
  background: #f0f0f0;
  border-left: 2px solid #444;
  border-radius: 0 5px 5px 0;
}

pre {
  background: #f0f0f0;
  border-radius: 0.5rem;
  font-size: 1.2rem;
  line-height: 1.5rem;
  margin-bottom: 1.6em;
  padding: 1.6em;
  overflow: auto;
}

code, kbd, tt, var {
  background: #f0f0f0;
  border-radius: 0.3rem;
  box-shadow: rgba(0, 0, 0, 0.2) 0 0 0.2rem 0.1rem;
  font: 1.2rem/1.5rem Monaco, Consolas, "DejaVu Sans Mono", monospace;
  padding: 0 0.3rem;
}

pre code { box-shadow: none; padding: 0; }

.altura-5  pre { max-height: calc(5 * 1.5rem + 3.84rem); }
.altura-10 pre { max-height: calc(10 * 1.5rem + 3.84rem); }
.altura-15 pre { max-height: calc(15 * 1.5rem + 3.84rem); }
.altura-20 pre { max-height: calc(20 * 1.5rem + 3.84rem); }
.altura-25 pre { max-height: calc(25 * 1.5rem + 3.84rem); }
.altura-30 pre { max-height: calc(30 * 1.5rem + 3.84rem); }

table {
  margin: 0 0 1.5em;
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #444;
  font-size: 1.4rem;
}

th, td { padding: 5px 10px; border: 1px solid #ccc; text-align: left; }
th { font-weight: bold; background: #f0f0f0; }

.paging-navigation, .post-navigation, .page-header {
  background: #f0f0f0;
  margin: 1.5em 0;
  padding: 1rem;
  border: 1px solid #444;
  border-radius: 0.5rem;
  font-size: 1.2rem;
  overflow: hidden;
}

.page-header { margin-top: 0; }
.page-header h1 { margin: 0; font-size: 2rem; }

.nav-previous { float: left; max-width: 48%; }
.nav-next { float: right; max-width: 48%; text-align: right; }

.site-footer {
  clear: both;
  padding: 1rem;
  border-radius: 0 0 0.5rem 0.5rem;
  color: #eee;
  font-size: 1.2rem;
  text-align: center;
}

.site-footer a, .site-footer a:visited { color: #eee; text-decoration: underline; }
.site-footer a:hover { color: #fff; }

.cc-badge { vertical-align: middle; margin-bottom: 0.5rem; }

.entry-content .img-1  { width: 8.3333%; }
.entry-content .img-2  { width: 16.6667%; }
.entry-content .img-3  { width: 25%; }
.entry-content .img-4  { width: 33.3333%; }
.entry-content .img-5  { width: 41.6667%; }
.entry-content .img-6  { width: 50%; }
.entry-content .img-7  { width: 58.3333%; }
.entry-content .img-8  { width: 66.6667%; }
.entry-content .img-9  { width: 75%; }
.entry-content .img-10 { width: 83.3333%; }
.entry-content .img-11 { width: 91.6667%; }
.entry-content .img-12 { width: 100%; }

.entry-content .img-center { display: block; margin-left: auto; margin-right: auto; }
.entry-content .img-left { float: left; margin: 0 2rem 1rem 0; }
.entry-content .img-right { float: right; margin: 0 0 1rem 2rem; }

.entry-content a.yt-video {
  position: relative;
  display: block;
  width: 50%;
  margin: 0 auto 1rem;
  line-height: 0;
}
.entry-content a.yt-video > img { width: 100%; }
.entry-content a.yt-video::after {
  content: "\25B6";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.7rem 1.6rem;
  border-radius: 0.8rem;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  pointer-events: none;
}
.entry-content a.yt-video:hover::after { background: #c00; }

.highlight .c, .highlight .c1, .highlight .cm, .highlight .ch { color: #3d7b7b; font-style: italic; } 
.highlight .cp { color: #9c6500; }                                     
.highlight .k, .highlight .kd, .highlight .kn, .highlight .ow { color: #008000; font-weight: bold; } 
.highlight .kt { color: #b00040; }                                     
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb { color: #ba2121; } 
.highlight .se { color: #aa5d1f; font-weight: bold; }                  
.highlight .si { color: #a45a77; font-weight: bold; }                  
.highlight .m, .highlight .mi, .highlight .mf { color: #666; }         
.highlight .nb { color: #008000; }                                     
.highlight .nf { color: #00f; }                                        
.highlight .nv { color: #19177c; }                                     
.highlight .o { color: #666; }                                         
.highlight .err { border: 1px solid #f00; }                            

@media (max-width: 700px) {
  #primary { padding: 1.5rem 1rem; }
  .site-qr { display: none; }
  .entry-thumb { width: 120px; margin-right: 1rem; }
  .site-navigation ul { flex-wrap: nowrap; }
  .site-navigation a, .site-navigation a:visited { white-space: nowrap; }
}