@font-face {
  font-family: 'C64ProMono';
  src: url('/vendor/C64_Pro_Mono-STYLE.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

:root {
  --font-family: 'C64ProMono', monospace;
  --black: #000000;
  --white: #E0E0E0;
  --cyan: #00A8C8;
  --red: #C62828;
  --green: green;
  --yellow: #C4A000;
  --purple: #7C3AED;
  --blue: #1565C0;
  --magenta: #ff66cc;

  --c64-light-blue: #6C6FF6;
  --c64-dark-blue: #40318D;
  --c64-light-gray: #BEBEBE;
}

.black {
  color: var(--black);
}

.white {
  color: var(--white);
}

.cyan {
  color: var(--cyan);
}

.red {
  color: var(--red);
}

.green {
  color: var(--green);
}

.yellow {
  color: var(--yellow);
}

.purple {
  color: var(--purple);
}

.blue {
  color: var(--blue);
}

.magenta {
  color: var(--magenta);
}

.dark-blue {
  color: var(--c64-dark-blue);
}

:fullscreen::backdrop {
  background: var(--background-color);
}

::selection {
  background-color: #9fa3ff;
  color: var(--c64-dark-blue);
}

a {
  color: var(--cyan);
  display: inline-block;
}

a:visited {
  color: var(--purple);
}

/* hide scrollbars, always */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
}

html,
body {
  font-family: var(--font-family);
  margin: 0;
  height: 100%;

  background: var(--c64-light-blue);
  color: var(--c64-light-blue);

  display: flex;
  justify-content: center;
  align-items: center;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#content {
  width: 960px;
  height: 540px;
  background: var(--c64-dark-blue);
  color: var(--c64-light-blue);

  /* nearest-neighbor scaling */
  image-rendering: pixelated;
  transform-origin: center center;

  overflow-y: hidden;
}

body[data-mode=tall] #content {
  height: 100%;
  overflow-x: hidden;
}

textarea {
  color: var(--c64-light-blue);
  max-width: 97%;
}

form {
  padding: 10px;
  margin: 15px;
  background: var(--c64-light-blue);
}

input[type="file"]::file-selector-button {
  font-family: 'C64ProMono', monospace;
  color: var(--c64-dark-blue);
  background: var(--white);
  border-radius: 2px;
  border: 2px solid #fff;
  padding: 4px 8px;
  cursor: pointer;
}

input[type="file"],
input[type="submit"],
button {
  color: var(--c64-dark-blue);
  padding: 5px;
}