@font-face {
  font-family: "Changa One";
  src: url("/static/font/Changa One/ChangaOne-Regular.ttf");
}

@font-face {
  font-family: "Droid Sans";
  src: url("/static/font/Droid Sans/DroidSans.ttf");
  font-weight: normal;
}

@font-face {
  font-family: "Droid Sans";
  src: url("/static/font/Droid Sans/DroidSans-Bold.ttf");
  font-weight: bold;
}

@keyframes l16 {
  0%   {background-position:-150% 0,-150% 0}
  66%  {background-position: 250% 0,-150% 0}
  100% {background-position: 250% 0, 250% 0}
}

@keyframes blink {
  0% {
    opacity: 5;
    filter: none;
  }
  16% {
    opacity: 1;
    filter: brightness(2);
    box-shadow: 0 0 1rem var(--energy);
    color: var(--energy);
  }
  100% {
    opacity: 1;
  }
}

:root {
  --shadow: #08080e50;
  --shade: #08080e80;
  --night: #08080e;
  --dark: #1e1d2c;
  --slate: #29263a;
  --metal: #423d5a;
  --pewter: #827e93;
  --cloud: #aaa5c4;
  --moon: #efecfc;
  --clearcoat: #d2b4f450;
  --mist: #aaa5c450;
  --vapor: #aaa5c425;
  --energy: #09dfef;
  --ice: #99f5fd;
  --force: #09dfef50;
  --magic: #8222f7;
  --puff: #8222f715;
  --blue: #337dff;
  --fuschia: #f722f7;
  --alarm: #ef3f09;
  --caution: #efe009;
  --fire: #fb7f19;
  --success: #0bd712;
}

* {
  box-sizing: border-box;
}

*[role="form"]:not(.overlay) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 2rem auto;
  padding: 1rem;
  background: linear-gradient(45deg, transparent 50%, var(--puff));
  border: 1px solid var(--slate);
  border-radius: 1rem;
  max-width: 24rem;
}

*[role="form"] + p {
  text-align: center;
  text-transform: uppercase;
}

*[role="link"] {
  display: inline-block;
  width: auto;
  text-decoration: underline;
  color: var(--moon);
  cursor: pointer;
}

*[role="link"]:hover {
  color: var(--energy);
}

html,
body {
  position: fixed;
  overflow: hidden;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0;
  font: normal normal 16px/23px "Droid Sans", sans-serif;
  background: var(--slate);
  color: var(--cloud);
  -webkit-text-size-adjust: 100%;
  --webkit-font-smoothing: antialiased;
  --moz-osx-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-size: 1.16em;
  font-weight: 300;
  color: var(--cloud);
}

h4 {
  font-size: .86em;
}

h4,
h5,
.article.post h2,
.article.post h3 {
  color: #aaa5c475;
  margin: 0;
  font: normal normal .86em/1.2em "Droid Sans", sans-serif;
}

h6 {
  font-size: .75em;
}

a {
  color: var(--moon);
  text-decoration: none;
}

a:hover:not(.button) {
  color: var(--energy);
}

.article.post h2,
.article.post h3 {
  text-transform: none;
}

label,
.label,
input,
textarea,
button,
.button {
  display: block;
  appearance: none;
  border: none;
  width: 100%;
}

input[type="checkbox"] {
  position: relative;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  accent-color: var(--cloud);
}

input[type="checkbox"]:checked::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  line-height: 2rem;
}


label,
.label {
  font-size: .9em;
  margin: .5rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

input,
textarea,
button,
.button,
label.file {
  appearance: none;
  border: none;
  color: var(--night);
  padding: 1rem 2rem;
  border-radius: .5rem;
  outline: none;
  cursor: pointer;
  user-select: none;
  font-size: 1em;
}

input[disabled],
button[disabled],
.button[disabled],
label.file[disabled] {
  opacity: .5;
  pointer-events: none;
}

input[disabled] {
  font-style: italic;
}

input[type="file"] {
  display: none;
}

button,
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  gap: .5rem;
  padding: 1rem;
  font: 800 normal 1em "Changa One", sans-serif;
  color: var(--moon);
  background: linear-gradient(to bottom, var(--magic) 20%, var(--energy));
  box-shadow: 0 2px 2rem var(--magic);
  text-shadow: 0 1px 0 var(--night);
  transition: all .5s ease;
}

button:hover,
.button:hover {
  box-shadow: 0 2px 2rem var(--fuschia);
  filter: saturate(2);
}

input,
textarea,
label.file {
  background: var(--slate);
  box-shadow: 0 1px 0 var(--metal);
  color: var(--moon);
  cursor: text;
  padding: 1rem;
}

input::placeholder,
textarea::placeholder {
  color: var(--mist);
}

textarea {
  resize: none;
  font: inherit;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--metal) inset !important;
  -webkit-text-fill-color: var(--moon) !important;
  border: 1px solid var(--magic) !important;
}

select {
  appearance: none;
  background: var(--dark);
  border: none;
  display: block;
  width: 100%;
  font-size: 1em;
  color: var(--moon);
  padding: 1rem;
  border-radius: .5rem;
  outline: none;
}

option {
  margin: .5rem 0;
  padding: 1rem;
  cursor: pointer;
}

option:active,
option:checked {
  background: var(--success);
  color: var(--dark);
  border-radius: .25rem;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header > h6 {
  font: normal normal .75em/1em "Droid Sans", sans-serif;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: .5px;
  margin: 0 1rem 0 0;
  color: var(--mist);
}

h3,
.heading {
  font-size: .86em;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--cloud);
}

.description {
  display: block;
  margin: 1rem 0 0;
  font-size: .86em;
  color: var(--mist);
}

.logo {
  display: block;
  position: relative;
  height: 2.4rem;
  width: 2.4rem;
  background: url('/bennyschmidt.png') center center / contain no-repeat;
  border-radius: .5rem;
  margin: 1rem;
  padding: 0;
}

.logo > a {
  color: transparent;
  text-decoration: none;
  outline: none;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.logo > a > span,
.action-button > span {
  display: none;
}

.branding {
  width: 4rem;
  height: 4rem;
  margin: 1rem auto;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.content-row,
.overlay-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

.overlay-row {
  gap: .25rem;
}

.overlay-row > div,
.content-row > div {
  flex: 1;
  width: 100%;
}

.overlay-row > label {
  text-align: right;
}

.modal {
  position: fixed;
  z-index: 9100;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.modal > .overlay {
  width: 60%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1rem;
  border-radius: 1rem;
  background: linear-gradient(45deg, var(--slate) 50%, var(--metal));
  box-shadow: 0 0 2rem var(--magic);
}

.modal > .overlay button {
  margin: 2rem auto 1rem;
  width: 12rem;
}

.modal > .overlay input,
.modal > .overlay textarea {
  background: var(--dark);
}

.modal > .overlay textarea {
  height: 14rem;
}

.modal > .overlay .heading {
  margin: 1rem auto;
}

.modal > .overlay label,
.modal > .overlay #headline {
  display: none;
}

.modal > .overlay h4 {
  margin: 2rem 0;
}

.dashboard {
  display: grid;
  grid-template-columns: 20% 60% 20%;
  grid-template-rows: 1fr;
  height: 100%;
}

.column {
  flex: 1;
  height: 100%;
  padding: 1rem;
  overflow-y: auto;
}

nav.column {
  padding: 0;
}

section.column {
  background: var(--dark);
  padding: 1rem 1rem 3rem;
}

section.column .heading {
  display: block;
  width: 100%;
  text-align: center;
  color: var(--mist);
}

aside.column {
  display: flex;
  flex-direction: column-reverse;
  background: var(--dark);
  border-left: 1px solid var(--vapor);
  height: calc(100% - 3rem);
}

aside.column .heading {
  position: absolute;
  top: 1rem;
  color: var(--mist);
}

.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 100vw;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 1rem;
  padding: 0;
  background: var(--cloud);
  color: var(--slate);
  font-size: .86em;
  font-weight: bold;
  text-align: center;
}

.badge.wide {
  width: auto;
  padding: 0 .66rem;
}

.badge.urgent {
  background: var(--alarm);
  color: var(--moon);
}

.badge.caution {
  background: var(--caution);
}

.nav-items {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 1rem 0 0;
  gap: 1rem;
  border-top: 1px solid var(--mist);
  padding: 1rem 0 0 1rem;
}

.nav-item {
  flex: 1;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.nav-item a {
  flex: 1;
  color: var(--cloud);
}

.nav-item.active a {
  color: var(--energy);
}

.nav-item.active .badge:not(.urgent):not(.caution) {
  background: var(--energy);
}

.nav-item:hover,
.nav-item a:hover,
.nav-item a.active {
  color: var(--energy);
}

.nav-item > a:first-of-type,
.heading {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.nav-item > a:first-of-type > i {
  font-size: 1.25em;
}

.game-list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.game-list-item > a > h5 {
  font-size: .75em;
  font-style: italic;
}

.app-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 3rem;
  height: 3rem;
  font-size: 3em;
  background: var(--night);
  border-radius: .5rem;
}

.app-icon > img {
  width: 100%;
  height: 100%;
  background-size: contain;
  border-radius: inherit;
}

.activity-item,
.achievement-list-item {
  padding: 1rem;
  background: var(--slate);
  border-radius: 1rem;
  border: 1px solid transparent;
  margin: 1rem 0 0;
  font-size: .86em;
  user-select: none;
  word-wrap: break-word;
  cursor: pointer;
  opacity: .25;
}

.achievement-list-item {
  opacity: .5;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--vapor);
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.achievement-list-item:hover {
  opacity: 1;
}

.achievement-list-item.complete {
  opacity: 1;
  border-color: var(--energy);
  box-shadow: 0 0 1rem var(--magic), 0 0 3rem var(--force);
  border-bottom-width: 3px;
  border-bottom-color: var(--magic);
  border-top-color: var(--blue);
  background: linear-gradient(45deg, var(--night) 50%, var(--puff));
}

.achievement-list-item.complete:hover {
  animation: blink .5s forwards;
}

.achievement-list-item .row {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.achievement-list-item .row span:last-of-type {
  display: flex;
  flex-direction: column;
}

.achievement-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 4rem;
  max-width: 4rem;
  min-height: 4rem;
  max-height: 4rem;
}

.achievement-icon .badge {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 0 .5rem;
  bottom: -.5rem;
  border: 1px solid var(--energy);
  background: var(--energy);
  color: var(--night);
  font-size: .86em;
  z-index: 100;
}

.achievement-icon img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
}

.achievement-list-item .title {
  color: var(--moon);
}

.activity-item:nth-of-type(1),
.activity-item:nth-of-type(2),
.activity-item:nth-of-type(3) {
  opacity: 1;
}

.activity-item:nth-of-type(4),
.activity-item:nth-of-type(5),
.activity-item:nth-of-type(6) {
  opacity: .5;
}

.activity-item:hover {
  opacity: 1;
}

.activity-item.new {
  animation: blink .5s forwards;
}

.activity-item.message a {
  color: var(--cloud);
}

.activity-item.message {
  background: transparent;
  border: 1px solid var(--slate);
}

.activity-item.message .name {
  color: var(--energy);
}

.activity-item:hover {
  background: var(--vapor);
  border: 1px solid transparent;
}

.activity-item:hover a {
  color: var(--moon);
}

.article {
  display: block;
  background: linear-gradient(45deg, transparent 50%, var(--puff));
  color: var(--cloud);
  padding: 4rem;
  border: 1px solid var(--slate);
  border-radius: 1rem;
}

.article .list {
  margin: 0;
}

.article-text {
  line-height: 2em;
}

.article-text p {
  margin: 2rem 0;
}

.article-text video[poster] {
  background-color: var(--night);
  object-fit: contain;
}

footer.article {
  padding: 1rem;
  font-size: .86em;
}

.hero {
  position: relative;
  width: 100%;
  height: 16rem;
  border-radius: 1rem;
  box-shadow: inset 0 -3rem 5rem var(--magic);
}

.hero .app-icon {
  position: absolute;
  bottom: -3rem;
  left: 1rem;
  width: 6rem;
  height: 6rem;
  border-radius: 1rem;
}

.hero .app-icon.avatar {
  border-radius: 100vw;
  border: 2px solid var(--moon);
  box-shadow: 0 0 2rem var(--dark);
}

.hero h1,
.page .hero h1,
.hero h2,
.page .hero h2 {
  position: absolute;
  left: 8rem;
  bottom: 1rem;
  color: var(--moon);
  text-shadow: 0 1px 0 var(--night), 0 0 1rem var(--shadow), 0 0 2rem var(--night);
  overflow-wrap: anywhere;
  font: normal normal 1.86em "Changa One", sans-serif;
  margin: 0;
}

.page .hero h1 > a {
  color: var(--moon);
}

.feature {
  cursor: pointer;
}

.files {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.files > div {
  flex: 1;
  width: 100%;
}

.files > div:first-of-type {
  max-width: 10rem;
}

label.file {
  background: var(--dark);
  border-radius: 0;
  box-shadow: none;
  border: 1px dashed var(--magic);
  width: 10rem;
  height: 10rem;
  line-height: 8rem;
  font-size: .75em;
  text-align: center;
  color: var(--cloud);
  cursor: pointer;
}

label.file.wide {
  width: 100%;
}

label.file > i {
  font-size: 1.6em;
}

#footer {
  position: fixed;
  z-index: 9000;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--slate);
  border-top: 1px solid var(--vapor);
  color: var(--pewter);
  height: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  font-size: .75em;
}

.action-button {
  position: fixed;
  z-index: 9200;
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  border-radius: 100vw;
  background: var(--moon);
  color: var(--night);
  box-shadow: 0 0 2rem var(--magic), 0 2px 0 var(--night);
  text-shadow: none;
  right: .5rem;
  bottom: .5rem;
  margin: 0;
  padding: 0;
  appearance: none;
  border: none;
  display: none;
}

.action-button:first-of-type {
  bottom: 4.5rem;
}

.article h2 {
  color: var(--moon);
  font: 400 normal 2.5em/1.25em "Changa One";
}

.article h2 + h3,
.article h2 + .heading {
  margin-top: 2rem;
}

.article img,
.article video,
.article iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 24rem;
  margin: 1rem auto;
  border-radius: .5rem;
  object-fit: contain;
  box-shadow: 0 0 2rem var(--night);
  background: var(--shadow);
}

.article img.emoji {
  display: inline;
  width: auto;
  margin: 0;
  vertical-align: middle;
}

.caption {
  display: block;
  background: var(--shadow);
  padding: .5rem;
  border-radius: .5rem;
  font-size: .75em;
}

.info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1rem 0;
}

.article-info {
  margin: 1rem 0;
}

.article-info h6 {
  font-size: 1em;
  line-height: 1.25em;
  color: var(--mist);
}

.image-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  overflow: auto hidden;
  border-radius: 1.5rem;
  border: 1px solid var(--vapor);
  padding: 1rem;
}

.image-row > img {
  width: 90%;
}

.progress-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .75em;
  margin: 1rem 0;
}

.progress-bar > div:first-of-type,
.progress-bar > div:last-of-type {
  width: 4rem;
  text-align: center;
  color: var(--mist);
}

.progress {
  width: 100%;
  height: .66rem;
  background: var(--force);
  border: 1px solid var(--slate);
  border-radius: 100vw;
}

.progress > div {
  width: 0%;
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--moon);
  color: var(--moon);
  box-shadow: 0 0 1rem var(--energy);
  text-align: right;
  padding-top: .33rem;
  font-size: 0;
  cursor: pointer;
  transition: width 1s ease;
}

.progress > div:hover {
  font-size: 1em;
}

.apps,
.achievements {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
  margin: 2rem auto;
}

.achievements {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
  padding: 2rem 0 0;
}

section.column .list-heading {
  text-align: left;
  margin: 2rem 0 1rem;
}

.apps .game-list-item {
  position: relative;
  background: var(--energy);
  color: var(--cloud);
  text-align: center;
  border-radius: .5rem;
  width: 100%;
  height: 7rem;
  overflow: hidden;
}

.apps .game-list-item.empty {
  background: var(--shadow);
  cursor: default;
}

.apps .game-list-item > a {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.apps .game-list-item > a > p {
  display: flex;
  align-items: center;
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3rem;
  line-height: 3rem;
  background: var(--shade);
  color: var(--moon);
  margin: 0;
  padding: .5rem;
  line-height: 1.25em;
  font-size: .75em;
  text-align: left;
  text-shadow: 0 1px 0 var(--night);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.apps .game-list-item > a:hover > p {
  background: var(--night);
}

.game-list-item > img {
  background-color: var(--night);
  background-position: center center;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.game-list-item[data-name="Mac"] {
  background: var(--blue);
}

.game-list-item[data-name="Linux"] {
  background: var(--fire);
}

.message-list {
  margin: 1rem 0 0;
  gap: 0;
}

.forum-list-item,
.message-list-item {
  background: var(--night);
  border-radius: .5rem;
  margin: 1rem 0;
  padding: 0;
}

.forum-list-item {
  background: none;
  border-radius: 0;
}

.forum-list-item.forum {
  margin: .5rem 0;
  padding-left: 1rem;
}

.forum-list-item:last-of-type {
  border-bottom: none;
}

.forum-list-item > a,
.message-list-item > a {
  display: block;
  width: 100%;
  height: 100%;
}

.forum-list-item a {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.forum-list-item > p {
  margin: 0;
}

.forum-list-item a.quotelink,
.forum-list-item .quote-controls,
.forum-list-item .quote-controls + img,
.contains-task-list {
  display: none;
}

.forum-list-item .badge {
  margin: 0;
}

.forum-list-item:hover .badge {
  background: var(--energy);
  text-align: center;
}

.forum-list-title {
  word-break: break-word;
}

.posts {
  margin: 1rem 0;
}

.message-list-item {
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--mist);
}

.message-list-item:last-of-type {
  border-bottom: none;
}

.message-list-item > a {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .9em;
  color: var(--cloud);
}

.message-list-item > a > img {
  display: block;
  width: 3rem;
  height: 3rem;
  margin: .5rem;
  border-radius: 100vw;
  background: var(--night);
}

.message-list-item:hover a {
  color: var(--moon);
}

.downloader {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.downloader > div > p {
  font-size: .86em;
  line-height: .56em;
  font-style: italic;
  text-align: right;
  color: var(--mist);
}

.player {
  background: var(--night);
  border-radius: 1rem;
  box-shadow: 0 0 2rem var(--shadow);
  width: 100%;
  height: 34rem;
}

.play-button {
  min-width: 6rem;
}

.play-button > span {
  background: var(--magic);
  color: var(--moon);
  font-size: .5em;
  padding: .25rem 1rem;
  border-radius: 100vw;
  box-shadow: 0 1px 0 var(--metal);
}

.play-button .icon-lock {
  font-size: .9em;
}

.dropdown-button {
  position: relative;
  background: var(--metal);
  box-shadow: none;
}

.dropdown-button:hover {
  box-shadow: 0 0 1rem var(--dark);
}

.dropdown-button.expanded {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.dropdown.list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--night);
  border-bottom-left-radius: .5rem;
  border-bottom-right-radius: .5rem;
  box-shadow: 0 0 2rem var(--puff);
  z-index: 100;
  gap: 0;
}

.dropdown.list > li > a {
  display: block;
  padding: 1rem;
}

.dropdown.list > li:last-of-type {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.dropdown.list > li:hover {
  background: var(--vapor);
}

.dropdown.list > li:hover > a {
  color: var(--energy);
}

.auth-forms {
  margin: 2rem auto;
}

.auth-forms,
.auth-forms > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

.auth-forms > div {
  flex-direction: row;
  justify-content: center;
}

.auth-forms > div > *[role="form"] {
  width: 100%;
}

.auth-forms > div > img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  max-width: calc(50% - 4rem);
  margin: 0 auto;
}

.segmented-control {
  display: flex;
  align-items: center;
  justify-items: center;
  width: 18rem;
  margin: 1rem auto 0;
  background: var(--vapor);
  box-shadow: 0 1px 0 var(--mist);
  border-radius: 1rem;
  overflow: hidden;
}

.segmented-control.wide {
  width: 100%;
  margin: 1rem auto;
  border-radius: .5rem;
  gap: 0;
}

.segmented-control > button {
  width: 100%;
  border-radius: 0;
  margin: 0;
  padding: .75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.segmented-control.wide > button {
  background: linear-gradient(to bottom, var(--slate) 20%, var(--clearcoat));
  box-shadow: none;
  font: normal normal .86em/1em "Droid Sans", sans-serif;
}

.segmented-control.wide > button:hover {
  background: linear-gradient(to bottom, var(--night) 20%, var(--clearcoat));
}

.segmented-control > button.active {
  background: var(--dark);
  box-shadow: inset 0 0 2rem var(--night);
  pointer-events: none;
}

.loading {
  width: 8rem;
  margin: 5rem auto 0;
  text-align: center;
  text-transform: uppercase;
  font-size: .75em;
}

.loader {
  height: 4px;
  width: 130px;
  --c:no-repeat linear-gradient(var(--energy) 0 0);
  background: var(--c),var(--c),var(--slate);
  background-size: 60% 100%;
  animation: l16 3s infinite;
}

.result-title {
  display: flex;
  gap: .5rem;
}

.result-title > i {
  font-size: 1.25em;
}

.result-title > a {
  font-size: 1.25em;
  color: var(--energy);
  text-transform: capitalize;
}

.result-title > span {
  background: var(--metal);
  color: var(--dark);
  padding: .1rem .5rem;
  border-radius: 100vw;
  font-size: .56em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.result-text {
  margin: .5rem 0;
}

.timestamp {
  display: flex;
  font-style: italic;
  font-size: .86em;
  gap: .25rem;
  margin: 0;
}

.contributor {
  display: flex;
  align-items: center;
  gap: .25em;
  color: var(--blue);
  margin: .25rem 0;
  font-size: .86em;
}

.contributor > a,
.contributor > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contributor a:hover {
  color: var(--energy);
}

.panels {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.panels h3 {
  margin: .5rem 0;
  color: var(--mist);
}

.panels .article {
  flex: 1;
  padding: 1rem;
}

.page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 0 1rem;
}

.page h1 {
  font-size: 1.5em;
  font-weight: 400;
  color: var(--moon);
  margin: 1rem 0;
}

.table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  border-radius: .5rem;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-size: .9em;
}

.table > li {
  margin: 0;
  padding: .5rem;
  border: 1px solid var(--dark);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.table > li:nth-child(even) {
  background: var(--slate);
}

.table > li:nth-child(odd) {
  background: var(--night);
}

.endnote {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.endnote > span {
  text-align: right;
  font-size: .86em;
}

pre.syntax {
  background: var(--dark);
  padding: 1rem;
  border-radius: .5rem;
  overflow-x: auto;
  font: normal normal .86em/1.2em monospace;
}

pre.syntax code {
  background: var(--dark);
}

#back-button {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
}

#back-button p {
  margin: 0;
  font-size: .86em;
}

#upload {
  padding: .86rem;
  font-size: .86em;
}

#signin-button,
#signup-button {
  margin: 2rem auto 1rem;
}

#banner,
#platform-support {
  padding: 3rem 2rem 2rem;
  background: linear-gradient(45deg, var(--fire) 50%, var(--fuschia));
  color: var(--moon);
}

#platform-support {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem;
  font-size: .86em;
}

#banner > span {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#banner > span:last-of-type {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
}

#banner > span:last-of-type .button {
  display: block;
  margin: 1rem 0 0;
}

#banner > span i {
  font-size: 2em;
  color: var(--moon);
}

#search > .heading {
  margin: .5rem auto;
}

#search > ol {
  list-style: none;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

#search > ol > li {
  list-style: none;
  margin: 1rem 0 0;
  padding: .5rem;
  background: var(--cloud);
  color: var(--dark);
  border-radius: 1rem;
  font-size: .75em;
  cursor: pointer;
}

#search > ol > li:not(:first-of-type) {
  opacity: .25;
}

#results > ol {
  list-style: none;
  padding: 0;
}

#results > ol > li:not(.game-list-item) {
  border-bottom: 1px solid var(--vapor);
  padding: 1rem 0;
}

#results i.icon-signal-high {
  color: var(--success);
}

#results i.icon-signal-medium {
  color: var(--caution);
}

#results i.icon-signal-low {
  color: var(--alarm);
}

#results i.icon-signal-high,
#results i.icon-signal-medium,
#results i.icon-signal-low {
  display: none;
}

#answer {
  margin: 1rem 0 2rem;
}

#answer em {
  display: block;
  font-size: .86em;
  color: var(--cloud);
  margin: 1rem 0 0;
}

#answer p {
  font-size: 1.25em;
  line-height: 1.5em;
}

#search-input {
  box-shadow: 0 .25rem 2rem var(--shadow);
  padding: .75rem;
}

@media (max-width: 1000px) {
  h3,
  h3.heading,
  h4,
  h5,
  h6,
  header > h6,
  footer.article,
  label,
  label.file,
  .label,
  .table,
  .message-list-item > a,
  .article.post h2,
  .article.post h3,
  .contributor,
  .timestamp,
  .description,
  .achievement-icon .badge,
  .activity-item,
  .achievement-list-item,
  .segmented-control.wide > button,
  .downloader > div > p,
  .game-list-item > a > h5,
  .progress-bar,
  .caption,
  .apps .game-list-item > a > p,
  .play-button .icon-lock,
  .play-button > span,
  .result-title > span,
  #search > ol > li,
  #footer,
  #back-button p,
  #upload,
  #platform-support {
    font-size: 16px;
  }

  .dashboard {
    display: block;
  }

  .dashboard,
  section.column {
    width: 100%
  }

  section.column {
    padding: 1rem 1rem 4rem;
  }

  nav.column,
  aside.column {
    position: fixed;
    z-index: 9100;
    width: 100vw;
    left: 100vw;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-x: hidden;
    background: var(--dark);
    transition: left 300ms ease;
  }

  nav.column.open,
  aside.column.open {
    left: 0;
  }

  nav.column {
    display: flex;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: 4rem;
    border-top: 1px solid var(--magic);
    overflow: visible;
  }

  nav.column > header,
  nav.column .nav-items:not(nav.column .nav-items:first-of-type) {
    display: none;
  }

  nav.column .nav-items {
    flex-direction: row;
    padding: 0;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    width: 100%;
  }

  nav.column .nav-items .nav-item .badge {
    position: absolute;
    top: -.5rem;
    background: var(--alarm);
    color: var(--moon);
    display: none;
  }

  nav.column .nav-items .nav-item > a {
    flex-direction: column;
  }

  nav.column .nav-items .nav-item > a:first-of-type {
    gap: .25rem;
  }

  nav.column .nav-items .nav-item > a span,
  nav.column .nav-items .nav-item > a:first-of-type,
  nav.column .nav-items .nav-item .badge {
    font-size: 12px;
  }

  .modal > .overlay {
    width: 90%;
  }

  .action-button.show {
    display: block;
    display: none;
  }

  .segmented-control.wide {
    overflow-x: auto;
    background: none;
    box-shadow: none;
    gap: 1rem;
  }

  .segmented-control.wide button {
    background: var(--metal);
    box-shadow: none;
    border-radius: 100vw;
    padding: .5rem 1rem;
  }

  .segmented-control.wide button.active {
    background: var(--magic);
    box-shadow: none;
    border-radius: 100vw;
  }

  .article {
    padding: 3rem 2rem 2rem;
    word-break: break-word;
  }

  .apps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .achievements {
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: 1fr;
  }

  .apps .game-list-item {
    min-width: 8rem;
  }

  .auth-forms,
  .auth-forms > div {
    flex-direction: column;
  }

  .auth-forms > div > img {
    display: none;
  }

  .downloader {
    justify-content: center;
    flex-direction: column;
  }

  .downloader > div {
    width: 100%;
  }

  .downloader > div + button {
    margin: 0;
  }

  .downloader button {
    width: 100%;
    margin: 3rem 0 0;
  }

  .panels {
    flex-direction: column;
  }

  .content-row {
    flex-direction: column;
  }

  .files > div,
  .files > div:first-of-type,
  label.file {
    width: auto;
    height: auto;
  }

  .info {
    flex-direction: column;
    align-items: flex-start;
  }

  #submit {
    width: 100%;
  }

  #search.wide {
    padding: 1rem;
  }
}