@import url("https://fonts.googleapis.com/css2?family=Azeret+Mono&display=swap");
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: #fff;
}

::-webkit-scrollbar-thumb {
  background: #000;
}

::-webkit-scrollbar-thumb:hover {
  background: #000;
}

*::-moz-selection {
  background: #af742a;
}

*::selection {
  background: #af742a;
}

*::-moz-selection {
  background: #af742a;
}

*::-webkit-selection {
  background: #af742a;
}

* {
  margin: 0;
  padding: 0;
  -webkit-font-variant-ligatures: none;
          font-variant-ligatures: none;
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  scroll-behavior: smooth;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

body {
  background: #e8e8e8;
  font-family: "Azeret Mono", monospace;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  font-optical-sizing: auto;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100svh;
  visibility: hidden;
  overflow-x: hidden;
}

.sc-preloader {
  background: #e8e8e8;
  position: fixed;
  inset: 0;
  z-index: 100;
}
.sc-preloader-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  width: 100%;
}
.sc-preloader .dvd {
  position: absolute;
  height: 78px;
  width: 100px;
  background: url(../img/rings.gif) center center no-repeat;
  background-size: cover;
  z-index: 1;
}
.sc-video-layer {
  position: fixed;
  inset: 0;
  z-index: 10;
}
.sc-video-layer > div {
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  opacity: 0;
  -webkit-transition: 333ms ease-in-out;
  transition: 333ms ease-in-out;
}
.sc-video-layer > div.show {
  opacity: 1;
}
.sc-video-layer video {
  height: auto;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0.38;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: pixelated;
}
.sc-video-layer.seven:before {
  background: url(../img/7.gif) center center no-repeat;
  background-size: contain;
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 40vmin;
  width: 40vmin;
  opacity: 0.38;
}
.sc-video-layer.rings:before {
  background: url(../img/rings.gif) center center no-repeat;
  background-size: contain;
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 40vmin;
  width: 40vmin;
  opacity: 0.38;
}

.sc-static-layer {
  background-image: url(../img/static.gif);
  background-position: center center;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  height: 100svh;
  width: 100%;
  z-index: 15;
  pointer-events: none;
  opacity: 0.1;
  mix-blend-mode: multiply;
}

.sc-mobile-layer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  height: 100svh;
  width: 100%;
  z-index: 20;
  /*
  &:before {
      background: $highlight;
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      height: 100%;
      width: 1px;
  }
  &:after {
      background: $highlight;
      content: '';
      position: absolute;
      top: 50%;
      left: 0%;
      height: 1px;
      width: 100%;        
  }
  */
}

.sc-desktop-layer {
  padding: 36px;
  position: fixed;
}
@media (max-width: 900px) {
  .sc-desktop-layer {
    position: absolute;
    padding: 18px;
  }
}
.sc-desktop-layer {
  top: 0;
  left: 0;
  height: 100vh;
  height: 100svh;
  width: 100%;
  z-index: 30;
}
.sc-desktop-layer nav.sc-desktop-nav {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.sc-desktop-layer nav.sc-desktop-nav span {
  display: block;
  white-space: pre;
}
.sc-desktop-layer nav.sc-desktop-nav span.divider {
  color: #af742a;
}
.sc-desktop-layer nav.sc-desktop-nav a {
  color: #000;
  cursor: pointer;
  display: inline;
  text-decoration: none;
  white-space: pre;
  -webkit-transition: color 333ms ease-in-out;
  transition: color 333ms ease-in-out;
}
.sc-desktop-layer nav.sc-desktop-nav a.selected, .sc-desktop-layer nav.sc-desktop-nav a:hover {
  color: #af742a;
}
.sc-desktop-layer a.tetris {
  position: absolute;
  bottom: 36px;
  left: 36px;
}
@media (max-width: 900px) {
  .sc-desktop-layer a.tetris {
    bottom: 18px;
    left: 18px;
  }
}
.sc-desktop-layer a.tetris {
  text-decoration: none;
  color: #000;
  opacity: 0;
  pointer-events: none;
  outline: none;
  -webkit-transition: 333ms ease-in-out;
  transition: 333ms ease-in-out;
}
.sc-desktop-layer a.tetris:hover {
  color: #af742a;
  opacity: 1;
}
.sc-desktop-layer a.tetris.show {
  opacity: 0.62;
  pointer-events: auto;
}
.sc-desktop-layer a.snake {
  position: absolute;
  top: 36px;
  right: 36px;
}
@media (max-width: 900px) {
  .sc-desktop-layer a.snake {
    top: 18px;
    right: 18px;
  }
}
.sc-desktop-layer a.snake {
  text-decoration: none;
  color: #000;
  opacity: 0;
  pointer-events: none;
  outline: none;
  -webkit-transition: 333ms ease-in-out;
  transition: 333ms ease-in-out;
}
.sc-desktop-layer a.snake:hover {
  color: #af742a;
  opacity: 1;
}
.sc-desktop-layer a.snake.show {
  opacity: 0.62;
  pointer-events: auto;
}

.sc-content-layer {
  pointer-events: none;
  padding: 36px;
  padding-top: calc(var(--navh) + 72px);
  position: absolute;
  top: 0;
  left: calc(var(--navw) + 36px);
  height: 100vh;
  height: 100svh;
  width: calc(100% - (var(--navw) + 72px));
  z-index: 40;
}
@media (max-width: 900px) {
  .sc-content-layer {
    padding: 18px;
    padding-top: calc(var(--navh) + 54px);
    left: 0;
    width: 100%;
  }
}
.sc-content-layer .game-outer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.sc-content-layer .game {
  background: cyan;
  width: 22ch;
}

.sc-artists-page {
  min-height: 100%;
  width: 100%;
  padding-bottom: 72px;
}

.sc-artists-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 36px 36px;
  width: 100%;
  pointer-events: auto;
}
.sc-artists-content .sc-artist {
  color: #000;
  text-decoration: none;
  width: var(--cardw);
}
.sc-artists-content .sc-artist .sc-artist-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 26/33;
  margin-bottom: 0.5rem;
  position: relative;
}
.sc-artists-content .sc-artist .sc-artist-image-container {
  position: relative;
  width: 100%;
}
.sc-artists-content .sc-artist .sc-artist-image-container img {
  display: block;
  height: auto;
  width: 100%;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: pixelated;
}
.sc-artists-content .sc-artist .sc-artist-image-container .sc-artist-image-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  -webkit-transition: opacity 333ms ease-in-out;
  transition: opacity 333ms ease-in-out;
  background-image: var(--img);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.sc-artists-content .sc-artist .sc-artist-image-container:before {
  content: "";
  background-image: url(../img/static.gif);
  position: absolute;
  inset: 0;
  opacity: 0.2;
  -webkit-transition: opacity 333ms ease-in-out;
  transition: opacity 333ms ease-in-out;
  z-index: 3;
}
.sc-artists-content .sc-artist:hover .sc-artist-image-container:before {
  opacity: 0.2;
}
.sc-artists-content .sc-artist:hover .sc-artist-image .sc-artist-image-overlay {
  opacity: 1;
}
.sc-artists-content a.sc-artist:hover {
  color: #af742a;
}
@media (max-width: 900px) {
  .sc-artists-content {
    gap: 36px 18px;
  }
}

.sc-ethos-page {
  min-height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 72px;
  padding-right: calc(72px + var(--navw));
}
@media (max-width: 900px) {
  .sc-ethos-page {
    padding-right: 0;
  }
}

.sc-ethos-content {
  max-width: 80ch;
  width: 100%;
  pointer-events: auto;
}

.sc-team-page {
  min-height: 100%;
  width: 100%;
  padding-bottom: 72px;
}

.sc-team-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 36px 36px;
  width: 100%;
  pointer-events: auto;
}
@media (max-width: 900px) {
  .sc-team-content {
    gap: 36px 18px;
  }
}
.sc-team-content .sc-team-member {
  width: var(--cardw);
}
.sc-team-content .sc-team-member .sc-team-member-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 26/33;
  margin-bottom: 0.5rem;
  position: relative;
}
.sc-team-content .sc-team-member .sc-team-member-image-container {
  position: relative;
  width: 100%;
}
.sc-team-content .sc-team-member .sc-team-member-image-container img {
  display: block;
  height: auto;
  width: 100%;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: pixelated;
}
.sc-team-content .sc-team-member .sc-team-member-image-container .sc-team-member-image-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  -webkit-transition: opacity 333ms ease-in-out;
  transition: opacity 333ms ease-in-out;
  background-image: var(--img);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.sc-team-content .sc-team-member .sc-team-member-image-container:before {
  content: "";
  background-image: url(../img/static.gif);
  position: absolute;
  inset: 0;
  opacity: 0.2;
  -webkit-transition: opacity 333ms ease-in-out;
  transition: opacity 333ms ease-in-out;
  z-index: 3;
}
.sc-team-content .sc-team-member:hover .sc-team-member-image-container:before {
  opacity: 0.2;
}
.sc-team-content .sc-team-member:hover .sc-team-member-image .sc-team-member-image-overlay {
  opacity: 1;
}

#debug {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: #000;
  color: #af742a;
  padding: 0.25rem;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
}

.game-outer {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: 333ms ease-in-out;
  transition: 333ms ease-in-out;
}
.game-outer.show {
  opacity: 1;
}
.game-outer .game-inner {
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: "Azeret Mono", monospace;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  font-optical-sizing: auto;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
}
.game-outer .game-header {
  position: absolute;
  top: 0;
}
.game-outer .game {
  margin: auto;
  height: 39ch;
  width: 25ch;
  position: relative;
}
.game-outer .game #score {
  position: absolute;
  left: 27ch;
  top: 2ch;
  width: 20ch;
  letter-spacing: 0;
}
.game-outer .game #level {
  position: absolute;
  left: 27ch;
  top: 4ch;
  width: 20ch;
  letter-spacing: 0;
}
.game-outer .game #next-piece {
  position: absolute;
  left: 28ch;
  top: 8ch;
}
.game-outer .game #next-piece span {
  letter-spacing: 0;
}
.game-outer .game #game-over {
  display: none;
  position: absolute;
  top: 37ch;
  left: 29ch;
  letter-spacing: 0;
}
.game-outer .flash {
  color: rgba(175, 116, 42, 0.38);
}

.s_game-outer {
  position: fixed;
  inset: 0;
  z-index: 31;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: 333ms ease-in-out;
  transition: 333ms ease-in-out;
}
.s_game-outer.show {
  opacity: 1;
}
.s_game-outer.show #s_start-btn,
.s_game-outer.show #s_restart-btn {
  pointer-events: auto;
}
.s_game-outer .s_game-inner {
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.s_game-outer .s_game-inner .s_game {
  margin: auto;
  height: 41ch;
  width: 48ch;
  position: relative;
}

/* --- ASCII Snake Game Styles --- */
.s_game-header {
  text-align: center;
  text-transform: lowercase;
}

#s_game-board {
  white-space: pre;
  color: #000;
  line-height: 0.9;
  font-size: 14px;
  padding: 0.5rem;
  display: none;
  /* Hidden until game starts */
}

#s_start-screen,
#s_game-over-screen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 1rem;
  text-transformn: lowercase;
}

#s_start-screen p,
#s_game-over-screen p {
  color: #000;
  text-transform: lowercase;
  margin: 0;
}

#s_start-btn,
#s_restart-btn {
  font-family: "Azeret Mono", monospace;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  text-transform: lowercase;
  width: auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background: none;
  cursor: pointer;
}
#s_start-btn:hover,
#s_restart-btn:hover {
  color: #af742a;
}

.sc-footer {
  padding: 0 0 36px;
}
.sc-footer ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
}
.sc-footer ul li {
  padding-right: 18px;
}
.sc-footer ul li a {
  color: #000;
  font-size: 12px;
  pointer-events: auto;
  text-decoration: none;
  text-transform: lowercase;
}

.sc-legal-page {
  min-height: 100%;
  width: 100%;
  padding-bottom: 72px;
}
.sc-legal-page .sc-legal-content {
  max-width: 900px;
  width: 71%;
}
@media (max-width: 900px) {
  .sc-legal-page .sc-legal-content {
    width: 100%;
  }
}
.sc-legal-page .sc-legal-content h1, .sc-legal-page .sc-legal-content h3 {
  padding: 0 0 1rem;
}
.sc-legal-page .sc-legal-content p {
  padding: 0 0 1rem;
}
.sc-legal-page .sc-legal-content ul {
  padding-left: 1rem;
}
.sc-legal-page .sc-legal-content ul li {
  padding: 0 0 0.5rem;
}