@font-face {
  font-family: 'Xolonium';
    src: url('Xolonium-Regular-Latin.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Sovjet Box';
    src: url('SovjetBoxSC_v0_9.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

html {
  background:  radial-gradient(circle at center, #A002 0, #000F 100%) fixed, url(woodstile_small.png) repeat; 
  color: #fdfcd7;
  padding: 0 5%;
  margin: 0;
  font-size: x-large;
  font-family: "Xolonium", sans-serif;
}

h1, h2, h3 {
  color: #fdfcd7;
  font-size: xxx-large;
  font-family: "Sovjet Box", serif;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 0 min(5%, 2rem);
}

aside {
  max-width: 60%;
  margin: auto;
  font-size: 80%;
  text-align: justify;
}

code {
  display: block;
  overflow-x: scroll;
  text-wrap: nowrap;
  font-size: 80%;
  font-family: mono;
}

section, main {
  margin: 0;
}

body > section {
  padding: 1em 5rem;
  text-shadow: #000 0.1em 0.1em 0.3em;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: stretch;
  align-items: stretch;
}

main > header, main > section {
  background: #000A;
  border: #fdfcd750 solid 0.2rem;
  border-radius: 1rem;
  margin: 1rem;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  min-width: max(15rem, 25%);
}

main > header {
  background: #202A;
  font-size: larger;
  flex-grow: 2;
  padding: 3ch;
  text-align: center;
  flex-basis: max-content;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;

}

main > section {
  padding: 3ch;
  max-width: 50rem;
}

main > header > section {
  flex: auto;
  margin: 1rem;
}

main > header > section.snapshot {
  flex-grow: 0;
}

main > header a {
  display: inline-block;
  margin: 0.5em;
  background: #5c0444;
  border: thick outset;
  border-radius: 0.5em;
  padding: 0.2em 1em;
  text-decoration: none;
  border-radius: 0.5em;
  padding: 0.2em 1em;
  text-decoration: none;
  color: inherit;
  border-color: inherit;
  text-shadow: black 0 0 0.4em;
}

main > header a:hover {
  box-shadow: white 0 0 1em;
}

main > header a:active {
  background: #2b0234;
  border: thick inset;
}

main a {
  text-decoration: none;
  color: inherit;
  border-color: inherit;
  border: thin outset;
  padding: 0.1em 0.5em;
  border-radius: 0.2em;
}

main a:hover {
  text-shadow: #dd220e 0 0 0.2em;
}

main a:active {
  border: thin inset;
}

img[src="/VST.svg"] {
  height: 2em;
  width: auto;
}

section.snapshot > img {
  width: auto;
  height: auto;
  max-width: 80%;
  max-height: 25em;
}

main > header em {
  font-family: "Sovjet Box";
}

iframe {
  margin: auto;
  display: block;
  width: 90%;
  aspect-ratio: 1.77;
}

section.video {
  min-width: 40%;
}

main strong {
  font-size: larger;
  text-shadow: #dd220e 0 0 0.3em;
}

main em {
  font-style: oblique;
  text-shadow: #dd220e 0 0 0.2em;
}

main > header:hover{
  background: #2028;
}

main > section:hover{
  background: #0008;
}

main li {
  margin: 1em;
}

img.logo {
  aspect: 1.765;
}

header.topmatter {
  text-align: center;
  background: black;
  border-bottom: #fdfcd730 solid 0.4rem;
}

header.topmatter .logo {
  width: min(max(25%, 10rem), 15rem);
  height: auto;
}

dl {
  margin: 0.5em 0;
  font-size: smaller;
  text-align: left;
  display: inline-grid;
  grid-template-columns: 0fr 1fr
}

dt {
  display: inline;
  margin: auto 1em;
}

dd {
  display: inline;
  overflow-x: scroll;
  text-wrap: nowrap;
}

footer.bottommatter {
  display: flex;
  justify-content: space-between;
  padding: 1rem 3rem;
  font-size: small;
}

footer.bottommatter > section {
  margin: 0;
}