@font-face {
  font-family: 'w95fa';
  src: url("pixeloperator.ttf") format("truetype");
}

@font-face {
  font-family: 'utonium';
  src: url("pixeloperator.ttf") format("truetype");
}

@font-face {
  font-family: '04B_30';
  src: url("pixeloperator.ttf") format("truetype");
}

@font-face {
  font-family: 'PixelOperator';
  src: url("pixeloperator.ttf") format("truetype");
}

@font-face {
  font-family: 'pixel-bubble';
  src: url("pixeloperator.ttf") format("truetype");
}

:root {
  text-transform: lowercase;
  letter-spacing: -0.5px;
  --lighter: #ffffff;

  --scrollbar-track: hsl(42, 35%, 93%);
  --scrollbar-track-accent: hsl(42, 35%, 89%);
  --scrollbar-thumb: hsl(217, 100%, 88%);
  --scrollbar-thumb-border: hsl(140, 8%, 31%);
  --scrollbar-thumb-active: hsl(146, 6%, 49%);
}

/* theme variables */
body {
  --background: url("https://i.pinimg.com/1200x/85/fd/bc/85fdbc40f42ac7737559bbf6eb140dc5.jpg");
  --contrastbg: hsl(275, 62%, 91%);
  --lightest: hsl(285, 68%, 93%);
  --light: hsl(205, 70%, 90%);
  --mid: hsl(210, 28%, 64%);
  --shadow: hsl(150, 32%, 74%);
  --dark: hsl(200, 30%, 32%);
  --darkest: hsl(255, 30%, 14%);
}

/* global cursor for all pages that load One.css (including Two.css imports) */
html, body, * {
  cursor: url("media/cursor.webp"), auto;
}

a, button, [role="button"], input[type="button"], input[type="submit"], label, select, summary {
  cursor: url("media/cursorinline.png"), pointer;
}

/* selection */
::selection {
  background-color: var(--shadow);
  color: var(--contrastbg);
}

/* scrollbars: CSS-only */
::-webkit-scrollbar { width: 15px; height: 15px; }

::-webkit-scrollbar-track {
  background: linear-gradient(
    180deg,
    var(--scrollbar-track) 0%,
    var(--scrollbar-track) 60%,
    rgba(255,255,255,0.02) 61%,
    var(--scrollbar-track-accent) 62%,
    var(--scrollbar-track-accent) 100%
  );
  border-left: 1px solid rgba(0,0,0,0.04);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--scrollbar-thumb) 0%, var(--scrollbar-thumb) 100%);
  border: 2px solid var(--scrollbar-thumb-border);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, var(--scrollbar-thumb-active) 0%, var(--scrollbar-thumb-active) 100%);
  border: 2px solid var(--scrollbar-thumb-border);
}

* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }

/* subtitle */
.subtitle {
  font-family: '04B_30';
  font-weight: bolder;
  border: 1px solid #c0cdb2;
  border-left: 1px solid var(--dark);
  border-top: 1px solid var(--dark);
  padding: 2px;
  color: var(--lightest);
  text-shadow: -1px -1px 0 var(--darkest), 1px -1px 0 var(--darkest), -1px 1px 0 var(--darkest), 1px 1px 0 var(--darkest);
  text-decoration: underline;
  background-color: var(--shadow);
}

:root {
  --lighter: #ffffff;
  --scrollbar-track: #f3efe6;
  --scrollbar-track-accent: #e3dccb;
  --scrollbar-thumb: #acbcae;
  --scrollbar-thumb-border: #4a564a;
  --scrollbar-thumb-active: #768677;
}

/* scrollbars */
::-webkit-scrollbar { width: 15px; height: 15px; }

::-webkit-scrollbar-track {
  background: linear-gradient(180deg, var(--scrollbar-track) 0%, var(--scrollbar-track) 60%, rgba(255,255,255,0.02) 61%, var(--scrollbar-track-accent) 62%, var(--scrollbar-track-accent) 100%);
  border-left: 1px solid rgba(0,0,0,0.04);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--scrollbar-thumb) 0%, var(--scrollbar-thumb) 100%);
  border: 2px solid var(--scrollbar-thumb-border);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, var(--scrollbar-thumb-active) 0%, var(--scrollbar-thumb-active) 100%);
  border: 2px solid var(--scrollbar-thumb-border);
}

* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }