:root {
  --bg: #00131A;
  --fg: #93a1a1;
  --sel: #38D66A;
  --alt: #000;
  --err: #A90008;

}

@font-face {
font-family: "waterlemon";
src: url("./waterlemon.otf") format("opentype");
}
@font-face {
font-family: "matejournal";
src: url("./matejournal.otf") format("opentype");
}

* {
background:transparent;
color:var(--fg);
font-family:waterlemon, sans;
scrollbar-color:var(--sel) var(--bg);
}
*::-webkit-scrollbar { width:6px;height:6px; }
*::-webkit-scrollbar-track { background:#000; }
*::-webkit-scrollbar-thumb { background-color:#1f9b92;border-radius:0;border:none; }
*::-webkit-scrollbar-corner { background:#000; }
*::selection { background-color:var(--sel);color:var(--fg);text-decoration:none;text-shadow:none; }
html { scroll-behavior:smooth; }

body { 
image-rendering:pixelated;
margin:0;
color:var(--fg);
font-family:sans-serif, sans;
font-size:16px;
text-align:left;
overflow-x:hidden;
background:url('/img/bg2.png');
background-attachment:scroll;
background-size:cover;
background-position:bottom center;
min-height:100vh;
padding-bottom: 2em;
}
a { 
color:var(--sel);
text-decoration:none;
font-weight:normal;
}
a:hover, a:focus { 
text-decoration:underline;
}

nav {
  display:none;
  font-size: 150%;
  margin: 0;
  padding: 1em;
  marign-left:0px;
  margin-right:0px;
  background: transparent;
  width:fit-content;
  text-align: center;
  width: 100vw;
  box-sizing: border-box;
}
nav ul {
margin:0;
padding:0.5em;
text-align:center;
}
nav ul li { 
display:inline;
line-height:2em;
padding:1em;margin:0;
}

nav a {
  color: var(--sel);
  text-shadow: 0.15ch 0.15ch var(--alt);
}
#about, section {
font-size: 120%;
width:62ch;
max-width: 80vw;
padding:0;
border:none;
box-sizing:border-box;
margin: 0;
margin-left: auto;
margin-right: auto;
background:var(--bg);
box-shadow: 0 0 2em black;
}

footer {
background:transparent;
position:fixed;
bottom: 1em;
right: 1em;
font-size:0;
}

footer * {
  font-size: 1rem;
  padding: 1em;
  
text-shadow: 0.2ch 0.2ch 0 var(--alt);
}

figure {
background:var(--alt);
border:none;
max-width:100vw;
padding: 0.5em;
box-sizing:border-box;
margin:0;
margin-left: auto;
margin-right: auto;
box-shadow: 0 0 2em black;
  width: 70ch;
  margin-top: 1em;
  margin-bottom: 1em;
}

#about {
  background-color:transparent;
  box-shadow:none;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 60% 1fr;
}

#about h2 {
  grid-row: 1;
  grid-column: 1/3;
}

#aboutportrait {
  grid-row: 2;
  grid-column: 1/3;
  transform:rotate(-2deg) translateX(-20px);
}


#abouttxt {
  grid-row: 2;
  grid-column:2;
  background: var(--bg);
  transform:rotate(5deg);
  height: fit-content;
  box-shadow: 0 0 2em black;
}


main img, #about img { width:100%; }
time.publish-date { text-align:right;display:block;font-size:90%;font-style:italic;margin-bottom:4em; }
main p, main ul, main ol { line-height:150%;margin-top:1em;margin-bottom:1em; }
main li { margin-top:0.5em;margin-bottom:0.5em;width:100%;text-align:left; }
main table, main pre { width:100%; }
code, pre, input { background:var(--alt);border:solid 1px var(--fg);color:var(--fg);padding:0.25em; }
pre { white-space:pre;overflow-x:auto; }
blockquote {padding-left:4ch;line-height:150%;font-size:120%; }
blockquote::before {
  font-size:300%;
  content: "\"";
}
main video, main audio, main img { text-align:center;outline:none;display:block;width:100%; }
main table { border:solid 2px var(--fg);border-collapse:collapse;border-radius:1px;}

h1 {
  text-align: center !important;
  font-family:matejournal !important;
  font-size: 300%;
  font-weight:normal;
  text-decoration: none;
  color: var(--sel);
  text-shadow: 0.15ch 0.15ch var(--alt);
}

h2 {
  color:var(--sel);
 // font-family:matejournal !important;
  text-shadow: 0.15ch 0.15ch var(--alt);
  text-align: center;
  background: var(--bg);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 0.5em 2ch;
  text-transform: capitalize;
}

#aboutsubnav {
  grid-row: 3;
  grid-column:1/3;
  grid-gap: 2ch;
  background: var(--bg);
  box-shadow: 0 0 2em black;
  padding: 1em;
  display: flex;
  vertical-align: baseline;
  flex-flow: row wrap;
  justify-content: space-evenly;
}

#aboutsubnav a {
  padding: 0.5em;
  text-transform: uppercase;
  border: solid 2px var(--sel);
  background: var(--alt);
  font-size: min(125%, 2vw);
  font-family:sans !important;
  text-decoration: none;
  color: var(--sel);
  flex-basis: content;
}

#aboutsubnav span {
  line-height: 150%;
  padding: 0.5em;
  flex-grow: 1;
}

#aboutsubnav a:hover {
  border: solid 2px var(--fg);
  background: var(--fg);
  color: var(--alt);
}


h2 {

}

h2 {
  box-shadow: 0 0 2em black;
}

main section {
  padding: 2em;
  transform: rotate(2deg);
  margin-bottom: 1em;
}

#about figure {
  width: 62ch;
}

@media screen and (max-width: 800px) {
#about {
  grid-template-rows: auto auto auto auto;
  grid-template-columns: 1fr;
}
#about h2 {
  grid-column: 1;
  grid-row: 1;
}

#aboutportrait {
  grid-column: 1;
  grid-row: 2;
  transform:none;
}

#abouttxt {
  grid-column: 1;
  grid-row: 3;
  transform:none;
  margin-top: 1em;
  margin-bottom: 1em;
}

#aboutsubnav {
  grid-column: 1;
  grid-row: 4;
}

main, #about {
  width: 90vw;
  margin-left: 5vw;
  margin-right: 5vw;
}

section, figure, #about figure {
  width: 100%;
}

main section {
  transform: none;
}

}