:root{
  background-image: url('data:image/svg+xml,%3Csvg width="128" height="128" viewBox="0 -0.5 32 32" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath stroke="%23242324" d="M0 0h1M3 0h1M7 0h3M14 0h3M22 0h1M24 0h1M27 0h1M29 0h1M1 1h1M3 1h1M10 1h1M13 1h1M21 1h1M24 1h1M27 1h1M30 1h1M1 2h1M4 2h3M10 2h1M12 2h1M16 2h5M23 2h1M28 2h1M31 2h1M1 3h1M7 3h1M10 3h1M12 3h1M15 3h1M23 3h1M28 3h1M31 3h1M2 4h4M8 4h2M12 4h1M14 4h1M17 4h3M23 4h1M27 4h1M30 4h1M6 5h1M12 5h1M14 5h1M16 5h1M20 5h1M24 5h3M29 5h1M0 6h5M7 6h2M11 6h1M14 6h1M16 6h1M21 6h1M28 6h1M31 6h1M5 7h1M9 7h2M13 7h1M16 7h1M21 7h1M27 7h1M30 7h1M0 8h4M6 8h2M12 8h1M15 8h1M20 8h1M23 8h4M29 8h1M4 9h1M8 9h1M12 9h1M14 9h1M19 9h1M22 9h1M28 9h1M31 9h1M1 10h2M5 10h2M9 10h1M12 10h1M14 10h1M18 10h1M21 10h1M24 10h4M30 10h1M0 11h1M3 11h1M7 11h1M10 11h1M12 11h1M15 11h3M20 11h1M23 11h1M29 11h1M4 12h2M8 12h1M10 12h1M13 12h1M19 12h1M22 12h1M25 12h4M31 12h1M6 13h1M8 13h1M11 13h1M14 13h5M21 13h1M24 13h1M31 13h1M0 14h1M6 14h1M8 14h1M11 14h1M20 14h1M23 14h1M26 14h4M1 15h1M5 15h1M8 15h1M11 15h1M14 15h2M19 15h1M22 15h1M25 15h1M30 15h1M2 16h3M7 16h1M10 16h1M13 16h1M16 16h1M18 16h1M21 16h1M24 16h1M27 16h2M31 16h1M0 17h1M6 17h1M9 17h1M12 17h1M16 17h1M18 17h1M20 17h1M24 17h1M26 17h1M29 17h1M1 18h1M4 18h2M8 18h1M11 18h1M16 18h1M18 18h1M20 18h1M23 18h1M26 18h1M30 18h1M1 19h1M3 19h1M7 19h1M10 19h1M14 19h2M18 19h1M20 19h1M22 19h1M25 19h1M31 19h1M1 20h1M3 20h1M6 20h1M9 20h1M13 20h1M17 20h1M20 20h1M22 20h1M24 20h1M31 20h1M1 21h1M4 21h1M6 21h1M8 21h1M12 21h1M16 21h1M19 21h1M22 21h1M24 21h1M31 21h1M2 22h1M4 22h1M6 22h1M8 22h1M12 22h1M15 22h1M18 22h1M21 22h1M25 22h3M31 22h1M0 23h1M2 23h1M4 23h1M6 23h1M8 23h1M12 23h1M15 23h1M17 23h1M20 23h1M28 23h1M0 24h1M2 24h1M4 24h1M6 24h1M8 24h1M13 24h1M15 24h1M17 24h1M20 24h1M23 24h4M29 24h1M2 25h1M4 25h1M6 25h1M9 25h1M13 25h1M15 25h1M17 25h1M19 25h1M22 25h1M27 25h1M30 25h2M1 26h1M4 26h1M7 26h1M10 26h3M15 26h1M17 26h1M19 26h1M21 26h1M24 26h2M28 26h1M0 27h1M5 27h1M8 27h1M14 27h1M17 27h1M19 27h1M21 27h1M23 27h1M26 27h1M29 27h1M2 28h2M6 28h1M9 28h5M17 28h1M19 28h1M21 28h1M23 28h1M27 28h1M29 28h1M31 28h1M1 29h1M4 29h1M7 29h1M16 29h1M19 29h1M21 29h1M23 29h1M27 29h1M29 29h1M31 29h1M1 30h1M5 30h1M8 30h3M13 30h3M18 30h1M21 30h1M24 30h1M27 30h1M29 30h1M31 30h1M2 31h1M6 31h1M11 31h2M17 31h1M22 31h1M24 31h1M27 31h1M29 31h1M31 31h1"/%3E%3C/svg%3E');
  --text-color: #f0efd4;
  --text-shade-1: #8f9597;
  --text-shade-2: #5b677d;
  --text-shade-3: #43445b;
  --text-shade-4: #363643;
  --text-shade-5: #303038;
  --text-shade-6: #2f2d2e;
  --link-color: #73d4af;
  --link-shade-1: #62c19d;
  --link-shade-2: #45867d;
  --link-shade-3: #395856;
  --link-shade-4: #2e3630;
  --link-shade-5: #2e3630;
  --bg-color: #272627;
  background-color: var(--bg-color); 
  font-family: 'Trebuchet MS', sans-serif;
}

/* Resets */
*, *::before, *::after, *:visited {
  color:var(--text-color);
  font-size: inherit;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  vertical-align: baseline;
  border: 0;
  margin: 0;
  padding: 0;
  text-decoration: none;
  line-height: 1em;
  letter-spacing: 0.01em;
}

/* Selection Color */
::selection {
  color: var(--bg-color);
  background: var(--link-shade-1);
}

/* Fonts */
@font-face {
  font-family: 'MicroJournal';
  src: url(/files/fonts/MicroJournal.ttf);
  font-weight: normal;
  font-style: normal;
}

/* Layout */
body { 
  margin:0 auto;
  background-color: var(--bg-color);
  max-width: 40em;
  padding: 1.5em;
}
header {}
footer {}

/* Content */
p, h1, h2, h3, h4, h5, h6, table, ul, ol, details {
  max-width: 30rem;
  text-wrap-style: pretty;
}
h1 {
  font-size: 2em;
  margin: 0.67em auto;
}
h2 {
  font-size: 1.5em;
  margin: 0.83em auto;
}
h3 {
  font-size: 1.17em;
  margin: 1em auto;
}
h4 {
  font-size: 1em;
  margin: 1.33em auto;
}
p {
  margin: 1em auto;
  line-height: 1.4em;
}
a:not([class]) { /* Link that doesn't have anything else inside */
  text-decoration: solid underline var(--link-shade-3) 0.1em;
  color: var(--link-color);
  &:visited {
    color: var(--link-shade-1);
    text-decoration-color: var(--text-shade-3);
  }
  &:hover {
    color: var(--text-color);
  }
}
small {
  font-size: 80%;
}
kbd {
  font-family: monospace;
}
hr {
  border: solid 0.01em var(--text-shade-4);
  margin: 0.5em 0;
}

/* Details */
details {
  margin: 1em auto;
}
summary {
}

/* Quotes */
blockquote {}

/* Lists */
ol, ul {
  margin: 1em auto;
  list-style-position: inside;
}
ul {
  list-style-type: square;
}
li {
  line-height: 1.5em;
}
::marker {
  color: var(--text-shade-2);
}

/* Table */
table {
}
tbody {
}
tr {
}
th {
}
td {
}

/* Media */
img, video, .media {
  display: block;
  max-width: 100%;
  width:100%;
  margin: 1em auto;
	border-radius: 0.125em;
}
code {
  font-family: monospace;
}
.gallery {}
/* ◆◆◆ Justified image gallery ◆◆◆ */
.gallery-justified {
  --space: 4px;
  --min-height: 120px;
  --last-row-background: none;
  display: flex;
  flex-wrap: wrap;
  grid-gap: var(--space);
  list-style: none;
  margin: 0 !important; /* We use !important to avoid gaps in some environments. */
  padding: 0 !important; /* We use !important to avoid gaps in some environments. */
  width: 100%;
  margin: auto 4rem ;
  a {
    overflow: hidden;
    cursor:zoom-in;
    &:hover img {transform: scale(1.03);}
  }
  a img{
    transition: 0.2s;
  }
}
.gallery-justified > * {
  flex-grow: calc(var(--width) * (100000 / var(--height)));
  flex-basis: calc(var(--min-height) * (var(--width) / var(--height)));
  aspect-ratio: var(--width) / var(--height);
  position: relative;
  overflow: hidden;
  margin: 0 !important; /* We use !important to avoid gaps in some environments. */
  padding: 0 !important; /* We use !important to avoid gaps in some environments. */
}
.gallery-justified > * > img {
  position: absolute;
  width: 100%;
  height: 100%;
  margin:0;
  padding: 0;
}
.masonry {
  display: grid; /* Required*/
  overflow: hidden; /* Required*/
  gap: 6px; /* Optional*/
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.frame {
  display: flex;
  aspect-ratio: var(--width) / var(--height);
  img {margin:0; display: inline;}
}

/* Elements */
img.badge {
  image-rendering: pixelated;
  display:inline-block;
  vertical-align: middle;
  height: 31px !important;
  width: 88px !important;
  max-height: 31px !important;
  max-width: 88px !important;
  margin: 0;
  border: 0;
}
a.linkbox, a.linkbox:visited {
  margin: 0.5em auto;
  padding: 0.6em;
  gap: 16px;
  max-width: 25rem;
  display:flex;
  background-color:var(--text-shade-6);
  border: solid 1px var(--text-shade-4);
  border-radius: 0.125em;
  &:hover {
    background-color: var(--link-shade-5);
    border-color: var(--link-color);
  }
}
.description {}
.separator {}