@font-face {
  font-family: "beza-boxy";
  src: url(/fonts/beza-boxy.ttf);
  font-display: auto;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: black;
  font-family: "beza-boxy", monospace;
  font-size: 40px;
  line-height: 60px;
  color: #FFF1E8;
  cursor: url("/images/cursor.png") 0 0, auto;
  overflow: hidden;
  /* hide scroll bars */
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;

  /* Firefox */
  &::-webkit-scrollbar {
    display: none;
  }

  /* Chrome, Safari, Opera */
}

.todos {
  color: #FF0044;
  background-color: #00000088;
  padding-top: 16px;

  p {
    margin: 0 auto;
    padding: 0 16px 16px;
  }
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow-x: hidden;
  overflow-y: auto;
  /* hide scroll bars */
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;

  /* Firefox */
  &::-webkit-scrollbar {
    display: none;
  }

  /* Chrome, Safari, Opera */

  &.day {
    color: black;
  }
}

.content {
  text-align: center;
  overflow-y: auto;
  box-sizing: border-box;
  padding-bottom: 40px;
}

.banner {
  font-size: 24px;
  line-height: 48px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px 32px;
  width: fit-content;
  margin: 0 auto 16px;

  background-color: #000000cc;

  img {
    margin-right: 32px;
  }

  a,
  span {
    color: #FFF1E8;
    text-align: left;
  }

  .day & {
    background-color: #FFF1E8cc;

    a,
    span {
      color: black;
    }
  }

  &.twitch {
    background-color: #9146FFcc;

    a,
    span {
      color: #FFF1E8;
    }
  }
}

h1 {
  font-size: 80px;
  font-weight: regular;
  line-height: 80px;
  margin: 16px;
  padding: 0;
  text-align: center;
  font-family: "beza-boxy", monospace;
  text-transform: lowercase;
  cursor: url("/images/hand.png") 0 0, auto;

  .day & {
    color: black;
  }
}

h2 {
  font-size: 60px;
  font-weight: regular;
  line-height: 80px;
  margin: 16px;
  padding: 0;
  text-align: center;
  font-family: "beza-boxy", monospace;
  text-transform: lowercase;
  cursor: url("/images/hand.png") 0 0, auto;

  .day & {
    color: black;
  }
}

hr {
  width: 600px;
  height: 4px;
  background-color: #fff1e8;
  border: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: #FFF1E8;
  font-size: 40px;
  cursor: url("/images/hand.png") 0 0, auto;

  .day & {
    color: black;
  }
}

p {
  &.error {
    color: #FF0044;
  }
}

input,
textarea {
  border: 4px solid #FFF1E8;
  color: #FFF1E8;
  font-size: 40px;
  line-height: 60px;
  padding: 0 20px;
  box-sizing: border-box;
  background: #0008;
  border-radius: 0;
  font-family: 'beza-boxy', monospace;
  cursor: url("/images/caret.png") 0 0, auto;

  .day & {
    color: black;
    border: 4px solid black;
    background: #FFF1E888;
  }

  &:focus {
    border: 4px solid #23CAFA;
    outline: none;
  }

  &.error {
    border: 4px solid #FF0044;
  }
}

form {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 16px;
}

p {
  max-width: 800px;
  margin: 0 auto 32px;
  font-size: 28px;
}

.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;

  label {
    opacity: 0.5;
    margin-bottom: 4px;
    cursor: url("/images/hand.png") 0 0, auto;
  }
}

dialog {
  background: black;
  color: #FFF1E8;
  border: 4px solid #FFF1E8;

  .day & {
    background: #FFF1E8;
    color: black;
    border: 4px solid black;
  }

  &::backdrop {
    background: #000c;
  }
}

button {
  border: 4px solid #FFF1E8;
  color: #FFF1E8;
  font-size: 40px;
  line-height: 60px;
  padding: 0 12px;
  background: transparent;
  border-radius: 0;
  font-family: 'beza-boxy', monospace;
  text-transform: lowercase;
  cursor: url("/images/hand.png") 0 0, auto;

  &:hover {
    background: #FFF1E844;
  }

  &:active {
    border: 4px solid #5F5A56;
    color: #5F5A56;
    background: transparent;
  }

  .day & {
    color: black;
    border: 4px solid black;

    &:hover {
      background: #0004;
    }
  }

  &.cta {
    border: 4px solid #00B580;
    color: #00B580;

    &:hover {
      background: #00B580AA;
    }
  }

  &.secure {
    color: #FFF1E8;
    border: 4px solid #FFF1E8;
    background-color: #29ADFFAA;

    .day & {
      color: black;
      border: 4px solid black;
    }

    &:hover {
      color: white;
      background: #29ADFF;
    }
  }

  &:disabled {
    opacity: 0.1;
    background: transparent;
    cursor: url("/images/cursor.png") 0 0, auto;

    &:hover {
      background: transparent;
    }

    &:active {
      border: 4px solid #FFF1E8;
      color: #FFF1E8;
      background: transparent;

      .day & {
        border: 4px solid black;
        color: black;
      }
    }
  }
}

.window-header {
  border-bottom: 4px solid #fff1e8;
  position: relative;

  .day & {
    border-bottom: 4px solid black;
  }

  h1 {
    margin: 0;
    font-size: 40px;
    line-height: 80px;
    text-transform: none;
    color: #fff1e8;

    .day & {
      color: black;
    }
  }

  button {
    position: absolute;
    right: 0;
    top: 0;
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-left: 4px solid #fff1e8;

    .day & {
      border-left: 4px solid black;
    }
  }
}

.play.fragment {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.button-bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 20px;

  button {
    margin-left: 16px;

    &:first-child {
      margin-left: 0;
    }
  }
}

.loading-bar {
  border: 4px solid #FFF1E8;
  background-color: #00000088;
  height: 48px;
  width: 100%;
  padding: 4px;
  box-sizing: border-box;

  .fill {
    background-color: #FFF1E8;
    height: 100%;
  }

  canvas {
    display: block;
  }

  .day & {
    border: 4px solid black;
    background-color: #FFF1E888;

    .fill {
      background-color: black;
    }
  }
}

.logo {
  .day & {
    filter: brightness(0);
  }
}

.nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 16px 0;

  a {
    margin: 0 8px;
  }
}

.hidden {
  display: none;
}

.cursor-pencil {
  cursor: url("/images/pencil.png") 0 0, auto;
}

.cursor-eraser {
  cursor: url("/images/eraser.png") 0 0, auto;
}

.cursor-fill {
  cursor: url("/images/fill.png") 0 32, auto;
}

.cursor-replace {
  cursor: url("/images/replace.png") 0 32, auto;
}

.cursor-hand {
  cursor: url("/images/hand.png") 0 0, auto;
}

.cursor-grab {
  cursor: url("/images/grab.png") 0 0, auto;
}

.cursor-dropper {
  cursor: url("/images/dropper.png") 0 0, auto;
}

.cursor-dropper-squeezed {
  cursor: url("/images/dropper-squeezed.png") 0 0, auto;
}

.cursor-caret {
  cursor: url("/images/caret.png") 0 0, auto;
}

.color-palette {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.color-swatch {
  width: 32px;
  height: 32px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  cursor: url("/images/dropper.png") 0 0, auto;
}

.color-swatch:active {
  cursor: url("/images/dropper-squeezed.png") 0 0, auto;
}

.color-swatch.eraser {
  cursor: url("/images/hand.png") 0 0, auto;
  background: url("/images/eraser.png") no-repeat;
}

.color-swatch.selected {
  border: 4px solid rgba(255, 255, 255, 0.8);
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.content-scroller {}

.content-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  padding: 16px 16px 0 0;

  /* children should have gaps between them */
  &>* {
    margin: 0 0 16px 16px;
  }
}

.line-graph {
  font-size: 16px;
  display: grid;
  grid-template-columns: 128px 1fr;

  .y-axis {
    display: flex;
    flex-direction: row;

    .label {
      writing-mode: vertical-rl;
      text-orientation: upright;
      text-align: center;
    }

    .notches {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      margin-right: 8px;

      .notch {
        text-align: center;
      }
    }
  }

  canvas {
    border-left: 4px solid #FFF1E8;
    border-bottom: 4px solid #FFF1E8;
  }

  .x-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    box-sizing: border-box;


    .label {
      margin: 0 16px;
    }

    .notches {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 100%;

      .notch {
        width: 100%;
      }
    }
  }
}

.debug-pane {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;

  p {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 32px;
    text-align: left;
    text-shadow: 1px 1px 1px #000;
  }
}

.tab-view {
  display: flex;
  flex-direction: column;

  &.bottom-tabs {
    flex-direction: column-reverse;
  }

  .tabs {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

    .tab {
      line-height: 24px;
      padding: 0 20px;
      margin: 20px;

      &.selected {
        border-top: 4px solid #fff1e8;
      }
    }
  }

  .tab-content {
    .tab-content-container {
      display: none;

      &.selected {
        display: block;
      }
    }
  }
}

/** Mobile */
@media screen and (max-width: 600px) {

  body,
  p,
  a {
    font-size: 20px;
    line-height: 32px;
  }

  p {
    margin: 0 16px 16px;
  }

  input,
  textarea,
  button {
    font-size: 20px;
    line-height: 32px;
  }

  h1 {
    font-size: 28px;
    line-height: 40px;
  }

  h2 {
    font-size: 24px;
    line-height: 32px;
  }

  hr {
    width: 90%;
  }

  div {
    /* hide scrollbar */
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;

    /* Firefox */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .nav {
    font-size: 20px;
  }

  .content-scroller {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    width: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;

    /* Firefox */
    &::-webkit-scrollbar {
      display: none;
    }

    /* Chrome, Safari, Opera */

    .content-grid {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-auto-flow: column;
      grid-gap: 8px;
      padding: 0 16px;

      &>* {
        margin: 0 0 0 0;
      }
    }
  }
}

.typing {
  .invisible {
    visibility: hidden;
  }
}

/** Mobile */
@media screen and (max-width: 600px) {}

@keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-o-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-moz-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.animate-flicker {
  -webkit-animation: flickerAnimation 2s infinite;
  -moz-animation: flickerAnimation 2s infinite;
  -o-animation: flickerAnimation 2s infinite;
  animation: flickerAnimation 2s infinite;
}