@font-face {
  font-weight: 700;
  src: url('../fonts/ArchivoNarrow-VariableFont_wght.ttf');
  font-family: 'Display';
}

@font-face {
  font-weight: 400;
  src: url('../fonts/ArchivoNarrow-VariableFont_wght.ttf');
  font-family: 'Text';
}

:root {
  --bannerHue: 329;
  --bodyBackground: 0, 0%, 0%;
  --appForegroundWeakest: 0, 0%, 46%;
  --appForegroundWeaker: 0, 0%, 25%;
  --appForeground: 0, 0%, 7%;
  --appForegroundStronger: 0, 0%, 4%;
  --appForegroundStrongest: 0, 0%, 0%;
  --appBackgroundWeakest: 0, 0%, 98%;
  --appBackgroundWeaker: 0, 0%, 85%;
  --appBackground: 0, 0%, 70%;
  --appBackgroundStronger: 0, 0%, 57%;
  --appBackgroundStrongest: 0, 0%, 55%;
  --bannerHS: var(--bannerHue), 74%;
  --dangerHSL: 358, 76%, 60%;
  --navHeight: 150px;
  --maxWidth: 1024px;
  --footerHeight: 60px;
  --defaultGap: 1em;
  --borderRadius: 18px;
  --targetX: 50%;
  --pieceSize: 110px;
  --gridSize: 110;
}

html,
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: hsl(var(--appForeground));
  line-height: 150%;
  font-family: 'Text', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0px auto;
  overflow: auto;
  overflow-x: hidden;
}

[v-cloak] {
  opacity: 0;
  transition: 250ms ease-out opacity;
}

.disabled,
:disabled {
  opacity: 0.2;
  pointer-events: none;
}

h1,
h2,
h3,
h4,
h5 {
  margin-top: calc(var(--defaultGap) / 2);
  margin-bottom: 0;
  font-weight: 400;
  line-height: 100%;
  font-family: 'Text';
}

h1 {
  font-size: normal;
  font-family: 'Display';
}

h2 {
  margin-bottom: var(--defaultGap);
}

p {
  margin: var(--defaultGap) 0;
  padding: 0;
}

.text-danger {
  color: hsl(var(--dangerHSL));
}

buildquality {
  display: block;
  margin-bottom: calc(.5 * var(--defaultGap));
  color: hsla(var(--appForeground), .7);
  letter-spacing: 1px;
  text-transform: uppercase;
}

a,
a:visited,
a:focus,
a:active {
  border-bottom: 1px solid hsl(var(--bannerHS), 70%);
  color: hsl(var(--appForeground));
  text-decoration: none;
}

ul {
  padding-left: 14px;
  list-style-type: '- ';
}

li {
  padding-left: 4px;
}

button,
a.button {
  cursor: pointer;
  box-sizing: border-box;
  border: none;
  background: none;
  line-height: 100%;
  font-family: 'Display';
  user-select: none;
  -webkit-user-select: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: none;
  -webkit-transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(.5 * var(--defaultGap));
  margin: 6px 0px 0px;
  border-radius: 17px;
  background-color: hsl(var(--bannerHS), 50%);
  padding: 4px 20px;
  height: 34px;
  color: hsl(var(--appBackgroundWeakest));
}

button.secondary,
a.secondary.button {
  background-color: hsl(var(--appBackgroundStronger));
}

button.tertiary,
a.tertiary.button {
  background: none;
  color: hsla(var(--appBackgroundStrongest), 1);
}

button.danger,
section intro button.danger,
section button.action.danger {
  background-color: black;
  color: hsl(var(--dangerHSL));
}

button.danger:hover:not(:disabled) {
  background-color: hsl(var(--appBackground));
}

button.danger:disabled {
  cursor: not-allowed;
  background-color: #6c757d;
}

button.inline {
  display: inline-flex;
  column-gap: 8px;
  flex-direction: row;
  align-content: baseline;
  justify-content: center;
  align-items: center;
  justify-items: baseline;
  white-space: nowrap;
}

fieldset {
  display: flex;
  flex-direction: column;
  gap: calc(var(--defaultGap) / 1.5);
  margin: 0;
  border: none;
  padding: 0;
}

fieldset leftright button {
  width: 90px;
}

form p {
  display: flex;
  flex-direction: column;
  gap: calc(var(--defaultGap) / 3);
  margin: 0;
}

form label {
  color: hsl(var(--appForeground));
  font-weight: 600;
  font-size: 0.9em;
}

form input {
  transition: border-color 0.2s ease;
  border: 1px solid hsl(var(--bannerHS), 39%);
  border-radius: calc(var(--borderRadius) / 2);
  background: hsl(var(--appBackgroundWeakest));
  padding: calc(var(--defaultGap) / 1.5) var(--defaultGap);
  color: hsl(var(--appForeground));
  font-size: 1em;
  font-family: inherit;
}

form input:read-only {
  border: 1px solid hsl(var(--bannerHS), 89%);
}

form input:focus {
  outline: none;
  border-color: hsl(var(--bannerHS), 70%);
}

form input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* input {
  max-width: 400px;
} */
section {
  width: 100%;
}

section button.inert,
section button.inline.inert {
  box-shadow: none;
  background-color: hsla(var(--bannerHS), 39%, 1);
  pointer-events: none;
}

icon {
  display: block;
  mask-size: 20px 20px;
  background-color: white;
  width: 15px;
  height: 20px;
  -webkit-mask-size: 20px 20px;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  pointer-events: none;
}

icon.bmc {
  mask-image: url(../images/icon_bmc.svg);
  -webkit-mask-image: url(../images/icon_bmc.svg);
}

icon.anon {
  mask-image: url(../images/icon-anon.svg);
  -webkit-mask-image: url(../images/icon-anon.svg);
}

icon.profile {
  mask-image: url(../images/icon-profile.svg);
  width: 100%;
  height: 100%;
  -webkit-mask-image: url(../images/icon-profile.svg);
}

icon.hamburger {
  mask-image: url(../images/icon-hamburger.svg);
  width: 100%;
  height: 100%;
  -webkit-mask-image: url(../images/icon-hamburger.svg);
}

icon.play {
  mask-image: url(../images/icon_play.svg);
  margin-left: 4px;
  width: 20px;
  height: 20px;
  -webkit-mask-image: url(../images/icon_play.svg);
}

icon.apple {
  mask-size: 17px 19px;
  width: 17px;
  -webkit-mask-size: 17px 19px;
  mask-image: url(../images/icon_apple.svg);
  -webkit-mask-image: url(../images/icon_apple.svg);
  margin-bottom: 1px;
}

icon.googleplay {
  mask-size: 17px 19px;
  width: 17px;
  -webkit-mask-size: 17px 19px;
  mask-image: url(../images/icon_google_play.svg);
  -webkit-mask-image: url(../images/icon_google_play.svg);
  margin-bottom: 1px;
}

icon.chevron-right {
  mask-image: url(../images/icon-chevron-right.svg);
  -webkit-mask-image: url(../images/icon-chevron-right.svg);
  mask-size: 14px 14px;
  -webkit-mask-size: 14px 14px;
  margin-top: 1px;
  width: 7px;
  height: 14px;
}

app {
  display: flex;
  justify-content: center;
  align-items: top;
  transition: 250ms ease-in-out all;
  background-image: repeating-linear-gradient(45deg, hsla(var(--bodyBackground), 0) 0px, hsla(var(--bodyBackground), 0) 40px, hsla(var(--bodyBackground), 0.08) 40px, hsla(var(--bodyBackground), 0.08) 80px);
  background-repeat: no-repeat, repeat;
  background-attachment: scroll;
  width: 100%;
  height: 100%;
}

onionskin {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  opacity: 0;
  z-index: 200;
  backdrop-filter: blur(5px);
  transition: 250ms ease-out all;
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  overflow: scroll;
  pointer-events: none;
  -webkit-backdrop-filter: blur(5px);
}

onionskin.show {
  opacity: 1;
  pointer-events: all;
}

onionskin img,
onionskin video {
  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid white;
  border-radius: var(--borderRadius);
  height: 90%;
  max-height: 700px;
}

leftright {
  display: flex;
  flex-direction: row;
  gap: calc(2 * var(--defaultGap));
}

stage {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  margin: 0px var(--defaultGap);
  width: calc(100% - 2 * var(--defaultGap));
  max-width: var(--maxWidth);
  height: 100%;
}

nav {
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  width: 100%;
}

login {
  display: flex;
  justify-content: end;
  align-items: center;
  width: 100%;
  color: hsl(var(--appBackgroundWeakest));
}

profile {
  display: flex;
  justify-content: end;
  align-items: start;
  transition: 250ms ease-out all;
  cursor: pointer;
  border: 1px solid hsla(var(--appBackgroundWeakest));
  border-radius: 50%;
  background-image: linear-gradient(hsla(var(--appForeground), 0.2), hsla(var(--appForeground), .2));
  width: calc(2 * var(--defaultGap));
  height: calc(2 * var(--defaultGap));
}

profile icon {
  background-color: hsl(var(--appBackgroundWeakest));
}

login button {
  margin: 0px;
  background-color: transparent;
  padding: 0px calc(.5 * var(--defaultGap));
  height: 100%;
  color: hsl(var(--appBackgroundWeakest));
  font-family: "Text", Arial, Helvetica, sans-serif;
}

dropdown {
  display: flex;
  position: absolute;
  flex-direction: column;
  z-index: 300;
  cursor: default;
  margin-top: calc(1.75 * var(--defaultGap));
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
  border-radius: calc(.5 * var(--borderRadius));
  background-color: hsl(var(--appForegroundStronger));
  padding: 0px;
  min-width: 200px;
}

dropdown button {
  justify-content: start;
  align-items: center;
  margin: 0px;
  background: none;
  background-size: cover;
  padding: calc(2 * var(--defaultGap));
  width: 100%;
  height: 34px;
  color: hsl(var(--appBackgroundWeakest));
  text-transform: capitalize;
}

dropdown button:hover {
  color: hsla(var(--bannerHue), 100%, 70%, 1);
}

dropdown button:first-of-type {
  padding-top: calc(2 * var(--defaultGap));
}

dropdown button:last-of-type {
  padding-bottom: calc(3 * var(--defaultGap));
}

selectors,
subnav,
footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--defaultGap);
  padding: 0 var(--defaultGap);
  width: calc(100% - 2 * var(--defaultGap));
  height: var(--navHeight);
}

selector {
  display: block;
  margin: 0;
  padding: 0;
  height: auto;
}

selectors selector {
  scale: 0.8;
  transition: 200ms ease-in-out all;
  cursor: pointer;
  border: 1px solid hlsa(0, 100%, 100%, 0.2);
  border-radius: var(--borderRadius);
  background-color: transparent;
  padding: 0;
  width: 80px;
  height: 80px;
  overflow: hidden;
  color: hsl(var(--appForeground));
}

selectors selector:first-of-type {
  border-color: rgba(255, 255, 255, .0)
}

selector button {
  display: block;
  justify-content: start;
  align-items: start;
  transition: 200ms ease-in-out all;
  margin: 0;
  border-radius: var(--borderRadius);
  background: transparent;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
}

selector:first-of-type button {
  box-shadow: initial;
}

selector.on {
  scale: 1;
}

selector.on button {
  opacity: 1;
}

selector button img {
  opacity: 0;
  width: 100%;
}

selectors selector button {
  display: flex;
  opacity: 1;
  mix-blend-mode: luminosity;
  box-shadow: inset 1px 1px 4px white;
  border-radius: calc(var(--borderRadius) - 1px);
  /* filter: grayscale(); */
  background-size: contain;
  background-blend-mode: luminosity;
  color: hsl(var(--appForeground));
  /* -webkit-filter: grayscale(); */
  /* transform: translateY(30%); */
}

selector button banner {
  display: none;
  position: absolute;
  transform: translate(-23px, -8px);
  rotate: -38deg;
  scale: 1.2;
  z-index: 1;
  transition: 200ms ease-in-out all;
  box-shadow: 0 2px 2px hsla(var(--appForeground), 0.2);
  border-radius: calc(var(--borderRadius) / 4);
  background: black;
  padding: 3px 40px;
  color: white;
  font-size: 11px;
  font-family: 'Display';
  text-transform: capitalize;
}

selectors selector button banner {
  transform: translate(-29px, -58px);
  opacity: 0;
}

selector.on button banner {
  transform: translate(-29px, -18px);
  scale: 1;
  opacity: 1;
}

selector button banner.free,
selector button banner.paid {
  background-color: hsl(var(--bannerHS), 39%);
  color: rgb(255, 255, 255);
}

selector button banner.beta {
  background: hsl(var(--bannerHS), 58%);
}

selector button banner.alpha {
  background: hsl(var(--bannerHS), 91%);
  color: hsl(var(--bannerHS), 39%);
}

selector.banner button banner {
  display: block;
}

selectors selector.on,
selectors selector:hover.on {
  scale: 1;
  cursor: default;
}

selectors selector.on button,
selectors selector:hover.on button {
  transform: translateY(0%);
  scale: 1;
  opacity: 1;
  filter: none;
  cursor: default;
}

selectors selector:hover {
  scale: 0.9;
  opacity: 1;
}

content {
  display: block;
  box-shadow: 0px 10px 20px hsla(var(--appForeground), 0.6);
  border-radius: calc(var(--borderRadius) - 1px);
  background-position: 0px -100px;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: hsla(var(--appBackgroundWeakest), 1);
  padding: calc(2 * var(--defaultGap));
  width: calc(100% - 4 * var(--defaultGap));
  height: 100%;
  max-height: calc(100% - var(--navHeight) - var(--footerHeight) - 4 * var(--defaultGap));
  overflow: auto;
  /* max-width: var(--maxWidth);
  margin-top: var(--navHeight);
  position: absolute; */
}

content::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  scrollbar-width: none;
  touch-action: auto;
}

section.collapsed {
  margin-bottom: calc(2 * var(--defaultGap));
  max-height: 318px;
  overflow: hidden;
}

sectionToggle {
  display: block;
  transform: translateY(-50px);
  cursor: pointer;
  padding-top: 30px;
  color: hsl(var(--bannerHS), 21%);
  -webkit-backdrop-filter: blur(4px);
}

section.expanded {
  max-height: 112000px;
  overflow: hidden;
}

section h2 {
  margin-top: var(--defaultGap);
  margin-bottom: calc(.5 * var(--defaultGap));
  border-top: 1px solid hsla(var(--appForeground), 0.1);
  padding-top: var(--defaultGap);
}

section intro {
  display: flex;
  flex-direction: row;
  justify-content: start;
  gap: calc(1.25 * var(--defaultGap));
  margin-bottom: var(--defaultGap);
  width: 100%;
}

section intro img {
  --imgsize: 80px;
  display: block;
  margin-top: var(--defaultGap);
  box-shadow: 0px 4px 8px hsla(var(--appForeground), 0.2);
  border-radius: calc(var(--borderRadius) - 1px);
  background-size: contain;
  background-repeat: no-repeat;
  width: var(--imgsize);
  max-width: var(--imgsize);
  height: var(--imgsize);
  max-height: var(--imgsize);
  overflow: hidden;
}

section intro h1 span {
  color: hsl(var(--appForegroundWeakest));
  font-weight: 400;
  font-size: 0.5em;
  font-family: 'Text';
}

section intro h2,
section h3 {
  margin-top: calc(var(--defaultGap) / 3);
  border: none;
  padding-top: 0;
  color: hsl(var(--appForegroundWeakest));
  font-weight: 400;
  font-size: 1em;
  font-family: 'Text';
  letter-spacing: 1px;
  text-transform: uppercase;
}

section h3 {
  margin-top: calc(var(--defaultGap));
  color: hsl(var(--appForeground));
}

section intro p {
  margin: 10px 0 0 0;
}

content games selector button {
  justify-content: start;
  align-items: start;
  margin: 0px;
  background: none;
  background-size: cover;
  padding: 0px;
  width: 100%;
  height: calc(100% + 20px);
  color: hsl(var(--appBackgroundWeakest));
  text-transform: capitalize;
}

.showmore {
  cursor: pointer;
  color: hsla(var(--appForegroundWeakest), 100%);
}

section h4 {
  margin-top: var(--defaultGap);
  margin-bottom: 0;
  padding-bottom: 0;
  font-weight: 600;
}

screenshots,
features ul,
quotes {
  display: flex;
  flex: 1;
  gap: calc(var(--defaultGap));
  padding: var(--defaultGap) 0 0;
  width: calc(100%);
  overflow-x: auto;
  overflow-y: hidden;
}

screenshots {
  margin-left: calc(-2 * var(--defaultGap));
  padding: var(--defaultGap) calc(2 * var(--defaultGap)) 0;
}

quotes {
  column-gap: calc(var(--defaultGap));
  row-gap: calc(var(--defaultGap));
  flex-wrap: wrap;
  margin: var(--defaultGap) 0;
  padding: 0;
}

quotes quote {
  display: block;
  cursor: pointer;
  margin: 0;
  padding: 0;
  width: calc(100% - var(--defaultGap) * 3);
  max-width: calc(50% - var(--defaultGap) * 3);
  color: hsl(var(--appForegroundWeaker));
  line-height: 150%;
}

quote rating {
  display: block;
  padding: 4px 0px;
}

quote statement {
  display: inline;
  font-style: italic;
}

quote attribution {
  display: inline;
  color: hsla(var(--appForeground), 0.6);
  text-align: left;
  white-space: nowrap;
}

quote attribution::before {
  padding-left: 4px;
  content: ' – ';
}

features ul {
  flex-wrap: wrap;
  gap: calc(var(--defaultGap) / 2);
  margin-top: 0;
}

features ul li {
  margin: 0;
  border-radius: var(--borderRadius);
  background: hsla(var(--bannerHS), 100%, 1);
  padding: calc(var(--defaultGap) / 3) var(--defaultGap);
  color: hsl(var(--bannerHS), 50%);
  list-style-type: none;
}

installers {
  display: flex;
  flex: 1;
  gap: calc(var(--defaultGap) / 2);
  width: calc(100%);
}

installers button.inline {
  gap: 0.25em;
  text-wrap: nowrap;
}

installers button.inline icon {
  margin-right: 0.25em;
}

installers button getit {
  display: inline;
  margin: 0px;
  padding: 0px;
}

screenshots::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  scrollbar-width: none;
  touch-action: auto;
}

screenshots container {
  display: block;
  margin-bottom: var(--defaultGap);
  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid white;
  border-radius: calc(var(--borderRadius) / 2);
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 194px;
  height: 420px;
  overflow: hidden;
}

screenshots screenshot,
screenshots video {
  cursor: pointer;
  height: 440px;
}

screenshots container screenshot {
  display: flex;
  justify-content: center;
  align-items: center;
}

screenshots container.video screenshot {
  background: hsla(0, 0%, 0%, 0.2);
}

screenshots container screenshot button {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 200ms ease-out all;
  border: 2px solid white;
  border-radius: 50%;
  background: hsla(0, 0%, 0%, 0.4);
  padding: 0;
  width: 50px;
  height: 50px;
}

screenshots container:hover screenshot button {
  background: hsla(0, 0%, 0%, 0.7);
}

screenshots container {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

screenshots container img {
  opacity: 0;
}

screenshots screenshot img,
screenshots video {
  min-width: 194px;
  height: 420px;
}

communities community {
  display: block;
  margin: var(--defaultGap) 0 0;
  width: auto;
  line-height: 150%;
}

communities community p,
communities community p:last-of-type {
  margin: 0;
  padding: 0;
  line-height: 150%;
}

communities community h3,
communities community ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

communities community li {
  margin-left: 14px;
  color: hsl(var(--appForegroundWeakest));
  line-height: 200%;
  list-style-type: '↳ ';
}

communities community h3 {
  margin-bottom: var(--defaultGap);
}

logo:hover {
  transform: scale(0.9);
  opacity: 0.6;
  transition: 30s ease-out all;
}

logo img {
  opacity: 0;
}

version,
credit {
  display: block;
}

games {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: calc(2 * var(--defaultGap));
  margin-bottom: calc(2 * var(--defaultGap));
  width: 100%;
}

games selector {
  width: calc(50% - 10px);
}

games selector button {
  display: flex;
  cursor: pointer;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
  border-radius: 14px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  overflow: hidden;
}

games selector button img {
  opacity: 0;
  width: 100%;
}

footer {
  position: absolute;
  bottom: 0px;
  align-items: center;
  margin: 0 auto;
  max-width: var(--maxWidth);
  height: var(--footerHeight);
  color: hsla(var(--appBackgroundWeakest), 0.9);
  font-size: 0.8em;
  text-align: left;
}

footer a {
  cursor: pointer;
}

content footer {
  display: none;
  position: relative;
  height: auto;
  color: hsla(var(--appForeground), 0.9);
}

footer a,
footer a:visited,
footer a:active {
  border: none;
  color: hsl(var(--appBackgroundWeakest));
  text-decoration: none;
}

footer a::before {
  display: inline-block;
  padding-right: var(--defaultGap);
  content: ' | ';
}

@media only screen and (max-width: 900px) {
  selectors {
    gap: calc(.5 * var(--defaultGap));
  }

  selectors selector {
    width: 64px;
    height: 64px;
  }
}

@media only screen and (max-width: 678px) {
  selectors selector {
    display: none;
  }

  selectors selector:first-of-type {
    display: block;
    ;
  }
}

@keyframes authSlideIn {
  from {
    transform: translateY(-20px) scale(0.95);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Authentication Styles */
onionskin form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--defaultGap) * 1.5);
  animation: authSlideIn 0.3s ease-out;
  margin: var(--defaultGap);
  box-shadow: 0 25px 50px hsla(var(--appForegroundStrongest), 0.4);
  border: 2px solid hsl(var(--appBackgroundWeak));
  border-radius: calc(var(--borderRadius));
  background: hsl(var(--appBackgroundWeakest));
  padding: calc(var(--defaultGap) * 3);
  width: 90%;
  max-width: 420px;
}

onionskin form header h2 {
  margin: 0 0 calc(var(--defaultGap) / 4) 0;
  color: hsl(var(--appForeground));
  font-weight: 700;
  font-family: 'Display', Arial, sans-serif;
}

onionskin form header p {
  margin: 0 0 var(--defaultGap) 0;
  color: hsl(var(--appForegroundWeaker));
  font-size: 0.9em;
}

/* Authentication Styles */
onionskin form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--defaultGap) * 1.5);
  animation: authSlideIn 0.3s ease-out;
  margin: var(--defaultGap);
  box-shadow: 0 25px 50px hsla(var(--appForegroundStrongest), 0.4);
  border: 2px solid hsl(var(--appBackgroundWeak));
  border-radius: calc(var(--borderRadius));
  background: hsl(var(--appBackgroundWeakest));
  padding: calc(var(--defaultGap) * 3);
  width: 90%;
  max-width: 420px;
}

authmessage {
  border: 1px solid hsla(120, 60%, 50%, 0.3);
  border-radius: calc(var(--borderRadius) / 2);
  background: hsla(120, 60%, 50%, 0.1);
  padding: calc(var(--defaultGap) / 1.5) var(--defaultGap);
  color: hsl(120, 60%, 30%);
  font-size: 0.9em;
  text-align: center;
}

.error {
  border-color: hsla(var(--bannerHS), 50%, 0.3);
  background: hsla(var(--bannerHS), 50%, 0.1);
  color: hsl(var(--bannerHS), 40%);
}

small.error {
  border: none;
  background: none;
}

authbuttons {
  display: flex;
  flex-direction: column;
  gap: calc(var(--defaultGap) / 2);
  margin-top: calc(var(--defaultGap) / 2);
}

/* Account Management Styles */
accountform {
  display: block;
  margin: var(--defaultGap) 0;
  /* padding: calc(var(--defaultGap) * 2); */
}

accountform fieldset {
  display: flex;
  flex-direction: column;
  gap: calc(var(--defaultGap) / 1.5);
  margin: 0;
  border: none;
  padding: 0;
}

accountform p {
  display: flex;
  flex-direction: column;
  gap: calc(var(--defaultGap) / 3);
  margin: 0;
}

accountform label {
  color: hsl(var(--appForeground));
  font-weight: 600;
  font-size: 0.9em;
}

accountform input {
  transition: border-color 0.2s ease;
  border: none;
  border-radius: calc(var(--borderRadius) / 2);
  background: hsl(var(--appForegroundWeakest));
  padding: calc(var(--defaultGap) / 1.5) var(--defaultGap);
  color: hsl(var(--appBackground));
  font-size: 1em;
  font-family: inherit;
}

accountform input:focus {
  outline: none;
  border-color: hsl(var(--bannerHS), 70%);
}

accountform input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

accountbuttons {
  display: flex;
  gap: calc(var(--defaultGap) / 2);
  margin-top: calc(var(--defaultGap) / 2);
}

accountmessage {
  display: block;
  margin: var(--defaultGap) 0;
  border: 1px solid hsla(120, 70%, 60%, 1);
  border-radius: calc(var(--borderRadius) / 2);
  background: hsla(120, 60%, 82%, 1);
  padding: calc(var(--defaultGap) / 1.5) var(--defaultGap);
  color: hsl(120, 60%, 30%);
  font-size: 0.9em;
  text-align: center;
}

accountmessage.error {
  border-color: hsla(var(--dangerHSL), 1);
  background: hsla(var(--dangerHSL), 1);
  color: hsl(var(--appBackgroundWeakest));
}

emptystateaccount {
  display: block;
  margin: var(--defaultGap) 0;
  border: 2px solid hsl(var(--appBackgroundWeak));
  border-radius: calc(var(--borderRadius) * 2);
  background: hsl(var(--appBackgroundWeakest));
  padding: 0px;
  text-align: center;
}

emptystateaccount h2 {
  margin: 0 0 var(--defaultGap) 0;
  color: hsl(var(--appForeground));
  font-family: 'Display', Arial, sans-serif;
}

emptystateaccount p {
  margin: 0 0 calc(var(--defaultGap) / 2) 0;
  color: hsl(var(--appForegroundWeaker));
}

@media only screen and (max-width: 500px) {
  :root {
    --navHeight: 120px;
    --footerHeight: 40px;
    --defaultGap: 1em;
    --appBackgroundWeakest: 0, 0%, 0%;
    --appBackgroundWeaker: 0, 0%, 0%;
    --appBackground: 0, 0%, 0%;
    --appBackgroundStronger: 0, 0%, 0%;
    --appBackgroundStrongest: 0, 0%, 0%;
    --appForegroundWeakest: 0, 0%, 100%;
    --appForegroundWeaker: 0, 0%, 100%;
    --appForeground: 0, 0%, 100%;
    --appForegroundStronger: 0, 0%, 100%;
    --appForegroundStrongest: 0, 0%, 100%;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    margin: calc(var(--defaultGap) / 2) 0px 0px 0px;
    font-weight: normal;
  }

  button {
    color: hsl(var(--appForeground));
  }

  button.secondary {
    background-color: hsla(var(--appForegroundStrongest), .2);
  }

  button.tertiary {
    color: hsla(var(--appForegroundStrongest), 0.7);
  }

  leftright {
    flex-direction: column;
    gap: 0px;
  }

  form input {
    background: hsl(var(--appForegroundWeakest));
    color: hsl(var(--appBackground));
  }

  login {
    padding: 0px var(--defaultGap);
  }

  profile {
    display: flex;
    transition: 250ms ease-out all;
    cursor: pointer;
    border: 1px solid hsla(var(--appForegroundWeakest));
    border-radius: 50%;
    background-image: linear-gradient(hsla(var(--appBackground), 0.2), hsla(var(--appBackground), .2));
    width: calc(2 * var(--defaultGap));
    height: calc(2 * var(--defaultGap));
  }

  profile icon {
    background-color: hsl(var(--appForegroundWeakest));
  }

  dropdown {
    background-color: hsl(var(--appBackgroundStrongest));
  }

  dropdown button {
    color: hsl(var(--appBackgroundWeakest));
  }

  subnav,
  footer {
    justify-content: center;
  }

  selectors {
    align-items: center;
  }

  selectors selector {
    display: none;
    opacity: 1;
    width: 80px;
  }

  selectors selector:first-child,
  selectors selector.on:first-child {
    display: block;
    /* scale: 1; */
    margin: 0px;
  }

  selectors selector button,
  selectors selector:hover button {
    transform: translateY(0%);
    opacity: 1;
  }

  stage {
    margin: 0;
    width: 100%;
  }

  content {
    box-shadow: none;
    border-radius: 0;
    max-height: calc(100% - var(--navHeight) - 3 * var(--defaultGap));
  }

  quote rating {
    display: block;
    padding: 2px 0px 6px;
  }

  games {
    column-gap: 0;
    row-gap: 0;
    justify-content: center;
    align-items: center;
    margin-top: var(--defaultGap);
    margin-bottom: var(--defaultGap);
  }

  games selector {
    flex-basis: 100%;
    margin: var(--defaultGap) 0px;
  }

  footer {
    display: none;
  }

  footer a,
  footer a:visited,
  footer a:active {
    color: hsla(var(--appForeground), 0.8);
    text-decoration: none;
  }

  content footer {
    display: flex;
    justify-content: start;
    margin-top: calc(2 * var(--defaultGap));
    border-top: 1px solid hsla(var(--appForeground), 0.1);
    padding: var(--defaultGap) 0 0;
    width: 100%;
    color: hsla(var(--appForeground), 0.7);
  }

  section intro h1 span,
  section intro h2 {
    color: hsla(var(--appForeground), 0.7);
  }

  login button {
    color: hsl(var(--appForegroundStrongest));
  }

  content {
    box-shadow: none;
    background-color: transparent;
    padding-top: 0;
    width: calc(100% - 3 * var(--defaultGap));
    height: 100%;
    max-height: calc(100% - 3 * var(--defaultGap));
  }

  section intro button,
  section button.action {
    box-shadow: 0px 4px 8px hsla(var(--bodyBackground), 0.4);
    color: hsl(var(--appForegroundWeakest));
  }

  section intro button.light {
    display: block;
  }

  section intro button.dark {
    display: none;
  }

  sectionToggle {
    color: hsla(0, 0%, 91%, 0.8);
  }

  selector button banner {
    box-shadow: 0px 2px 2px hsla(var(--bodyBackground), 0.2);
  }

  installers {
    flex: auto;
    flex-wrap: wrap;
    align-items: start;
    /* padding-top: var(--defaultGap); */
    /* gap: 0; */
    /* flex-direction: column; */
  }

  installers button getit {
    display: none;
  }

  section intro installers button,
  section intro installers button.action {
    margin: 8px 0 0;
    ;
  }

  quotes {
    gap: 8px;
  }

  quotes quote {
    border-radius: calc(var(--borderRadius) / 2);
    background: hsla(var(--appBackgroundWeakest), 0.4);
    padding: var(--defaultGap);
    width: calc(100%);
    max-width: unset;
  }

  quotes attribution {
    color: hsla(var(--appForeground), 0.8);
  }

  features ul {
    gap: 4px;
  }

  features ul li {
    background: hsla(var(--bannerHS), 96%, 1);
    padding: calc(var(--defaultGap) / 4) calc(var(--defaultGap));
    font-size: 0.9em;
  }

  accountmessage.error {
    border-color: black;
    background: black;
    color: hsl(var(--dangerHSL));
  }
}

/* Mobile Responsive */
@media (max-width: 500px) {
  emptystateaccount {
    border-radius: 0px;
    background: none;
    padding: 0px;
    text-align: left;
  }

  onionskin {
    background: hsla(var(--appBackground), 0.4);
  }

  onionskin form {
    margin: calc(var(--defaultGap) / 2);
    box-shadow: none;
    padding: calc(var(--defaultGap) * 2);
  }

  authbuttons {
    gap: calc(var(--defaultGap) / 3);
  }
}