@font-face {
   font-family: "Xolonium";
   font-weight: normal;
   src: url("Xolonium-Regular.woff2") format("woff2"),
        url("Xolonium-Regular.woff") format("woff"),
        url("Xolonium-Regular.otf") format("opentype");
}
@font-face {
   font-family: "Xolonium";
   font-weight: bold;
   src: url("Xolonium-Bold.woff2") format("woff2"),
        url("Xolonium-Bold.woff") format("woff"),
        url("Xolonium-Bold.otf") format("opentype");
}
@font-face {
  font-family: "Video Glau";
  font-weight: normal;
  src: url("VideoGlau.ttf") format("truetype");
}

* {
   margin: 0rem;
   padding: 0rem;
}

html {
   height: 100%;
}
body {
   min-height: 100%;
   display: flex;
   flex-direction: column;
   color: #CCC;
   background-color: #222;
   background-image: url("background.png");
   background-repeat: repeat;
   background-size: 256px 256px;
   font-family: "Xolonium", sans-serif;
   text-shadow: 0rem -0.075rem 0rem #111;
}

header {
   position: relative;
   left: 0%; right: 0%;
   padding: 0.5rem 2.5%;
   background-color: #333;
   background-image: linear-gradient(to bottom, #444, #222);
   border-bottom: 0.15rem solid #000;
}
@media (min-width: 30rem) { header {
   display: flex;
   flex-direction: row;
} }

h1 {
   font-size: 3rem;
   font-style: italic;
   font-variant: small-caps;
   text-transform: capitalize;
   margin: 0rem 0rem;
}

nav {
   margin-left: auto;
}
.navbar {
   display: block;
   text-align: right;
   margin: 0rem 0rem;
}
.navbar li {
   display: inline;
   display: inline-block;
}
.navbar a {
   display: inline-block;
   position: relative;
   text-align: center;
   margin: 0rem 0.5rem;
   padding-bottom: 1.75rem;
   min-width: 3rem;
}
.navbar a::after {
   content: " ";
   display: block;
   position: absolute;
   bottom: 0%;
   right: 0%;
   right: calc(50% - 1.5rem);
   width: 3rem;
   width: min(100%, 3rem);
   height: 1.5rem;
   box-sizing: border-box;
   border-radius: 0.25rem;
}
.navbar a[href]::after {
   background-color: #555;
   background-image: linear-gradient(to bottom, #666, #444);
   border-top: 0.1rem #888 solid;
   border-bottom: 0.2rem #111 solid;
   border-left: 0.1rem #888 solid;
   border-right: 0.1rem #111 solid;
}
.navbar a::after, .navbar a:active::after {
   background-image: linear-gradient(to bottom, #333, #111);
   border-top: 0.2rem #000 solid;
   border-bottom: 0.1rem #777 solid;
   border-left: 0.1rem #000 solid;
   border-right: 0.1rem #777 solid;
}

section {
   position: relative;
   margin: 0.75rem auto;
   max-width: 95%;
   max-width: min(60rem, 95%);
   padding: 1px 1rem;
   background-color: #333;
   background-image: linear-gradient(to bottom, #444, #222);
   border-radius: 1rem;
   border-top: 0.15rem solid #666;
   border-bottom: 0.15rem solid #000;
   border-left: 0.1rem solid #666;
   border-right: 0.1rem solid #000;
}

h2 {
   font-variant: small-caps;
   text-transform: capitalize;
   margin: 0.75rem 0rem;
}

h3 {
   padding: 0rem 0.5rem;
   background-color: #333;
   background-image: linear-gradient(to bottom, #282828, #383838);
   border-top: 0.1rem solid #000;
   border-bottom: 0.1rem solid #666;
   border-left: 0.1rem solid #000;
   border-right: 0.1rem solid #666;
   border-radius: 0.25rem;
}

p {
   margin: 0.75rem auto;
}

ul, ol {
   margin: 0.75rem 0rem 0.75rem 1.5rem;
}
ul li, ol li {
   margin: 0.375rem 0rem;
}

hr, hr::before, hr::after {
   display: block;
   height: 0.75rem;
   background-color: #222;
   border-top: 0.1rem #000 solid;
   border-bottom: 0.1rem #444 solid;
   border-left: 0.1rem #000 solid;
   border-right: 0.1rem #444 solid;
}
hr {
   overflow: visible;
   position: relative;
   width: 40%;
   margin: 0.75rem auto;
}
hr::before, hr::after {
   content: " ";
   position: absolute;
   width: 25%;
   top: -0.05rem;
}
hr::before {
   left: -30%;
   left: calc(-25% - 1.2rem);
}
hr::after {
   left: 105%;
   left: calc(100% + 1.2rem);
}

pre {
   font-family: "Video Glau", monospace, monospace;
   font-size: 0.9rem;
   font-weight: bold;
   margin: 0.75rem 0rem;
}
code {
   font-family: "Video Glau", monospace, monospace;
   font-size: 1em;
   font-weight: bold;
}

a {
   display: inline-block;
   color: #5E0;
}
a:visited {
   color: #2B0;
}
a[href]:focus, a[href]:hover,
a[href]:focus figcaption,
a[href]:hover figcaption {
   color: #111;
   background-color: #5E0;
   text-shadow: 0rem -0.075rem 0rem #3C0;
   outline: 0.2rem #1A0 solid;
   outline-offset: 0.1rem;
}

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

.slogan, .slogan-2 {
   font-style: italic;
   font-weight: bold;
   text-align: center;
   text-shadow: 0.1em 0.1em #000;
}
.slogan {
   font-size: 2rem;
   font-variant: small-caps;
   text-transform: capitalize;
}
.slogan-2 {
   font-size: 1.25rem;
}

.download {
   text-align: center;
}
.download a {
   display: inline-block;
   font-size: 1.5rem;
   background-color: #555;
   background-image: linear-gradient(to bottom, #666, #444);
   padding: 0.5rem 1rem;
   border-top: 0.1rem #888 solid;
   border-bottom: 0.2rem #111 solid;
   border-left: 0.1rem #888 solid;
   border-right: 0.1rem #111 solid;
   border-radius: 0.5rem;
}
.download a:focus, .download a:hover {
   background-color: #5E0;
   background-image: linear-gradient(to bottom, #6F1, #4D0);
   border-top-color: #8F3;
   border-bottom-color: #1A0;
   border-left-color: #8F3;
   border-right-color: #1A0;
}
.download a:active {
   background-color: #2B0;
   background-image: linear-gradient(to bottom, #3C0, #1A0);
   border-top: 0.2rem #070 solid;
   border-bottom: 0.1rem #5E0 solid;
   border-left: 0.1rem #070 solid;
   border-right: 0.1rem #5E0 solid;
}

@media (min-width: 40rem) { .bicolumn {
   display: grid;
   grid-template: 1fr / 1fr 1fr;
   grid-auto-flow: row;
} }

.gamelist {
   display: block;
   text-align: center;
   margin: 0.75rem auto;
}
.gamelist li {
   display: inline;
   display: inline-block;
   margin: 0.25rem 0.5rem;
}
.gamelist img {
   border-radius: 0.5rem;
   box-shadow: 0rem -0.075rem #111;
}
.gamelist figcaption {
   text-align: center;
   font-weight: bold;
}

.filelist {
   display: block;
   margin: 0.75rem 0rem;
}
.filelist li {
   display: inline-block;
   margin: 0.5rem 0.25rem;
   vertical-align: top;
}
.fileicon-folder,
.fileicon-text {
   display: inline-block;
   position: relative;
   width: 5rem;
   padding-top: 3rem;
   text-align: center;
   overflow-wrap: break-word;
}
.fileicon-folder::before,
.fileicon-folder::after {
   content: " ";
   display: block;
   position: absolute;
   background-color: #777;
   background-image: linear-gradient(to bottom, #888, #666);
   border-top: 0.1rem solid #AAA;
   border-bottom: 0.15rem solid #444;
   border-left: 0.1rem solid #AAA;
   border-right: 0.1rem solid #444;
   border-radius: 0.1rem;
}
.fileicon-folder::before {
   top: 0.1rem;
   left: calc(50% - 1.5rem);
   width: 1.5rem;
   height: 0.6rem;
}
.fileicon-folder::after {
   top: 0.6rem;
   left: calc(50% - 1.6rem);
   width: 3rem;
   height: 1.8rem;
}
.fileicon-text::before,
.fileicon-text::after {
   content: " ";
   display: block;
   position: absolute;
}
.fileicon-text::before {
   top: 0rem;
   left: calc(50% - 1.2rem);
   width: 2.2rem;
   height: 2.7rem;
   background-color: #CCC;
   background-image: linear-gradient(to bottom, #BBB, #DDD);
   border-top: 0.1rem solid #FFF;
   border-bottom: 0.1rem solid #999;
   border-left: 0.1rem solid #FFF;
   border-right: 0.1rem solid #999;
}
.fileicon-text::after {
   top: 0.5rem;
   left: calc(50% - 0.75rem);
   width: 1.5rem;
   height: 0.19rem;
   border-top: 0.57rem double #444;
   border-bottom: 0.57rem double #444;
   clip-path: polygon(0% 0%, 90% 0%, 90% 21%, 75% 21%, 75% 50%,
      100% 50%, 100% 79%, 85% 79%, 85% 100%, 0% 100%);
}

footer {
   display: block;
   position: relative;
   left: 0%; right: 0%;
   margin-top: auto;
   padding: 1px 2rem;
   background-color: #333;
   background-image: linear-gradient(to bottom, #444, #222);
   border-top: 0.15rem solid #666;
}
footer p {
   max-width: 95%;
   max-width: min(60rem, 95%);
   text-align: center;
}