:root {
  --text:white;
  --font:"Ari-W9500", sans-serif;
  --bg:black;
  --accent:#a0522d;
  --accent1:#a0522d;
  --accent2:#a0522d;
  --header-height:120px;
  --header:url("/images/spencerspace.png");
  --cursor:url("/images/cursors/pom.png");
  --pointer:url("/images/pointers/pom.png");
  --outlink:url("/images/outlinks/brown.png");
  --outlinkhover:url("/images/outlinks/black.png");
  --bcoutlink:url("/images/outlinks/black.png");
  --bcoutlinkhover:url("/images/outlinks/brown.png");
  --icon:url("/images/jermaburger.gif");
  --icon-border:2px;
  --online:url("/images/online-now-brown.png");
  --quote:'"yum yum burger!"';
  --quote-size:16px;
  --crossword:hue-rotate(120deg) saturate(60%);
  --credit-opacity:0;
  --credit-height:0;
  --credit-margin:-15px;
  --border-header:5px 5px 0 0;
  --border-table:2px 2px 0 0;
  --border-titletop:4px 0 0 0;
  --border-rowtop:0 0 0 4px;
  --border-rowbottom:0 4px 0 0;
  --border-infobottom:0 0 4px 0;
  --border-footer:0 0 5px 5px;
  --border-themebox:0 0 5px 0;
  --border-theme:50%;
  --border-5:5px;
  --border-10:10px;
}

html {
  color:var(--text);
  font-family:var(--font);
  background-color:var(--bg);
  cursor:var(--cursor), default;
}

@font-face {
  font-family:"Ari-W9500";
  src:url("https://foggybear42.net/fonts/ari-w9500.woff") format("woff");
}

@font-face {
  font-weight:bold;
  font-family:"Ari-W9500";
  src:url("https://foggybear42.net/fonts/ari-w9500-bold.woff") format("woff");
}

@font-face {
  font-family:"Pixel Operator";
  src: url("https://foggybear42.net/fonts/PixelOperator.ttf");
}

@font-face {
  font-family:"Remingtoned Type";
  src: url("https://foggybear42.net/fonts/RemingtonedType.ttf");
}

@font-face {
  font-family:"LoveHouse";
  src: url("https://foggybear42.net/fonts/LoveHouse.otf");
}

@keyframes cursor {
  0% {
    cursor:var(--frame1), auto;
  }
  
  100% {
    cursor:var(--frame2), auto;
  }
}

body {
  cursor:var(--cursor), default;
}

#header {
  width:800px;
  margin-bottom:6px;
  background-size:100%;
  background-position:center;
  height:var(--header-height);
  background-image:var(--header);
  border:2px solid var(--accent1);
  border-radius:var(--border-header);
}

#main {
  width:790px;
  margin:auto;
  padding:5px;
  border:2px solid var(--accent1);
}

#icon {
  width:170px;
  height:170px;
  margin-left:5px;
  background-size:100% 100%;
  background-image:var(--icon);
  border-radius:var(--border-5);
  border:var(--icon-border) solid var(--accent2);
}

#info {
  width:180px;
  padding:15px 0 0 0;
  vertical-align:top;
}

#name {
  font-size:21px;
  color:var(--accent2);
}

#online {
  width:90px;
  height:20px;
  margin-top:15px;
  background-size:100% 100%;
  background-image:var(--online);
}

#quote::after {
  font-weight:bold;
  font-style:italic;
  color:var(--accent1);
  content:var(--quote);
  font-size:var(--quote-size);
}

#statusbox {
  width:359px;
  margin:5px 0 5px 6px;
  padding:6px 8px 5px 10px;
  border-radius:var(--border-5);
  border:2px solid var(--accent1);
}

#status {
  color:var(--accent2);
}

#track {
  margin:0;
  white-space:nowrap;
  color:var(--accent2);
}

.table {
  width:381px;
  margin:12px 0 5px 6px;
  border-radius:var(--border-5);
  border:2px solid var(--accent1);
}

.table th {
  color:var(--bg);
  text-align:left;
  padding:2px 0 2px 8px;
  background-color:var(--accent1);
  border-radius:var(--border-table);
}

.rowtitletop {
  width:115px;
  color:var(--bg);
  padding:0 0 2px 5px;
  background-color:var(--accent2);
  border-radius:var(--border-titletop);
}

.rowtitle {
  width:115px;
  color:var(--bg);
  padding:0 0 2px 5px;
  background-color:var(--accent2);
}

.rowtitlebottom {
  width:115px;
  color:var(--bg);
  padding:0 0 2px 5px;
  background-color:var(--accent2);
  border-radius:var(--border-titlebottom);
}

.rowinfotop {
  padding:5px;
  background-color:var(--bg);
  border:2px solid var(--accent1);
  border-radius:var(--border-infotop);
}

.rowinfo {
  padding:5px;
  background-color:var(--bg);
  border:2px solid var(--accent1);
}

.rowinfobottom {
  padding:5px;
  background-color:var(--bg);
  border:2px solid var(--accent1);
  border-radius:var(--border-infobottom);
}

#piclog {
  width:176.5px;
  margin:6px 0 5px 2px;
  border-radius:var(--border-5);
  border:2px solid var(--accent2);
}

#datetime-display {
  font-size:22px;
  color:var(--accent2);
  padding:0 0 0 7px;
}

#musicplayerbox {
  width:367px;
  margin:5px 0 5px 6px;
  padding:0 5px 5px 5px;
  border-radius:var(--border-5);
  border:2px solid var(--accent1);
}

.img {
  width:137px;
  margin:1px 0 0 3px;
  border-radius:var(--border-5);
  border:2px solid var(--accent2);
}

#crossword {
  filter:var(--crossword);
}

#footer {
  margin-top:6px;
  text-align:center;
  border-radius:var(--border-footer);
}

hr {
  border:1px solid var(--accent2);
}

button {
  width:0;
  height:0;
  border:solid var(--bg);
  background-color:var(--bg);
}

#musicbox {
  width:100%;
  overflow:auto;
}

#musicPlayer {
  margin:2px;
  width:100%;
  padding:0;
}

#cov {
  height:60px;
  margin:14px 3px 0 8px;
}

#currently {
  font-size:25px;
  font-variant:small-caps;
}

#text {
  width:345px;
  padding:2px;
  margin-top:0;
  margin-left:-5px;
  border-radius:var(--border-5);
  cursor:var(--pointer), pointer;
  border:2px solid var(--accent2);
    animation:cursor .8s linear infinite;
}

#text:hover{
  background:var(--accent2);
  cursor:var(--pointer), pointer;
  border:2px solid var(--accent2);
    animation:cursor .8s linear infinite;
}

#randomFact {
  padding:3px 5px;
  color:var(--accent1);
  background:var(--bg);
  cursor:var(--pointer), pointer;
  border:1px solid var(--accent1);
}

#randomFact:hover {
  color:var(--bg);
  background:var(--accent2);
  cursor:var(--pointer), pointer;
  border:1px solid var(--accent2);
}

#blinkiebox {
  padding:5px;
  width:150px;
  margin:5px 12px 5px 3px;
  border-radius:var(--border-5);
  border:2px solid var(--accent2);
}

.blinkie {
  width:100%;
  image-rendering:pixelated;
}

#slideContainer {
  width:194px;
  height:194px;
  margin:5px 5px 0 0;
  border-radius:var(--border-5);
  border:2px solid var(--accent1);
}

.slide {
  width:194px;
  height:194px;
  border-radius:var(--border-5);
}

#riz-credit {
  height:var(--credit-height);
  opacity:var(--credit-opacity);
  margin-top:var(--credit-margin);
}

.bc-container {
  width:800px;
  padding:0px;
  text-align:left;
  margin:2px 0 6px 0;
  border:2px solid var(--accent2);
  background-color:var(--accent2);
}

.bc-content {
  padding:4px;
  font-size:18px;
  color:var(--bg);
  font-weight:bold;
}

.bc-content a {
  color:var(--bg);
  background-color:var(--accent2);
}

.bc-content a:hover {
  color:var(--accent2);
  background-color:var(--bg);
}

.help {
  cursor:help;
  text-decoration:dotted underline;
}

.outlink:after {
  content:"↗";
}

a {
  color:var(--accent1);
  text-decoration:underline;
  background-color:var(--bg);
  cursor:var(--pointer), pointer;
    animation:cursor .8s linear infinite;
}

a:hover {
  color:var(--bg);
  cursor:var(--pointer);
  text-decoration:underline;
  background-color:var(--accent2);
    animation:cursor .8s linear infinite;
}

::selection {
  color:var(--bg);
  background-color:var(--accent1);
}

::-webkit-scrollbar {
  width:auto;
  color:var(--accent1);
}

::-webkit-scrollbar {
  width:16px;
}

::-webkit-scrollbar-track {
  background:var(--bg);
}

::-webkit-scrollbar-thumb {
  background:var(--bg);
  border-radius:var(--border-10);
  border:2px solid var(--accent1);
}

::-webkit-scrollbar-thumb:hover {
  background:var(--accent2);
  border-radius:var(--border-10);
  border:2px solid var(--accent2);
}

::-webkit-resizer {
  background:var(--bg);
}

.visually-hidden {
  width:1px;
  height:1px;
  overflow:hidden;
  position:absolute;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  clip-path:inset(50%);
}

.colour-picker > fieldset {
  top:0;
  left:0;
  gap:5px;
  display:flex;
  width:fit-content;
  position:absolute;
  margin-inline:auto;
  background-color:var(--bg);
  cursor:var(--cursor), pointer;
  border:2px solid var(--accent1);
  border-radius:var(--border-themebox);
}

.colour-picker input[type="radio"] {
  width:25px;
  height:25px;
  appearance:none;
  cursor:var(--pointer), pointer;
  border-radius:var(--border-theme);
  border:2px solid var(--radio-colour, currentColor);
}

.colour-picker input[type="radio"]:checked {
  cursor:var(--pointer), pointer;
  background-color:var(--radio-colour);
}

.colour-picker input[type="radio"]#jerma {
  --radio-colour:#a0522d;
}

.colour-picker input[type="radio"]#r {
  --radio-colour:#06819e;
}

.colour-picker input[type="radio"]#rizgukgak {
  --radio-colour:olivedrab;
}

.colour-picker input[type="radio"]#lisafrank {
  --radio-colour:#ff0099;
}

.colour-picker input[type="radio"]#kris {
  --radio-colour:#ff0000;
}

:root:has(#r:checked) {
  --text:white;
  --font:Tahoma, sans-serif;
  --bg:black;
  --accent:#d80800;
  --accent1:#d80800;
  --accent2:#06819e;
  --header-height:160px;
  --header:url("/images/r-header.png");
  --cursor:url("/images/cursors/zombie-hand.png");
  --pointer:url("/images/cursors/zombie-hand.png");
  --outlink:url("/images/outlinks/darkred.png");
  --outlinkhover:url("/images/outlinks/black.png");
  --bcoutlink:url("/images/outlinks/black.png");
  --bcoutlinkhover:url("/images/outlinks/blue.png");
  --icon:url("/images/r.gif");
  --icon-border:2px;
  --online:url("/images/i-am-alive.gif");
  --quote:'"love never dies"';
  --quote-size:16px;
  --crossword:hue-rotate(110deg) saturate(250%);
  --credit-opacity:0;
  --credit-height:0;
  --credit-margin:-15px;
  --border-header:5px 5px 0 0;
  --border-table:2px 2px 0 0;
  --border-titletop:4px 0 0 0;
  --border-rowtop:0 0 0 4px;
  --border-rowbottom:0 4px 0 0;
  --border-infobottom:0 0 4px 0;
  --border-footer:0 0 5px 5px;
  --border-themebox:0 0 5px 0;
  --border-theme:50%;
  --border-5:5px;
  --border-10:10px;
}

:root:has(#rizgukgak:checked) {
  --text:white;
  --font:"Remingtoned Type", monospace;
  --bg:black;
  --accent:olivedrab;
  --accent1:olivedrab;
  --accent2:olivedrab;
  --header-height:130px;
  --header:url("/images/riz-header.png");
  --cursor:url("/images/cursors/magnifying-glass.png");
  --pointer:url("/images/cursors/magnifying-glass.png");
  --frame1:url("/images/pointers/frame1.png");
  --frame2:url("/images/pointers/frame2.png");
  --outlink:url("/images/outlinks/green.png");
  --outlinkhover:url("/images/outlinks/black.png");
  --bcoutlink:url("/images/outlinks/black.png");
  --bcoutlinkhover:url("/images/outlinks/green.png");
  --icon:url("/images/kins/riz.jpg");
  --icon-border:2px;
  --online:url("/images/thinking.gif");
  --quote:'"THE ball, bitch!"';
  --quote-size:14px;
  --crossword:hue-rotate(210deg) saturate(120%);
  --credit-opacity:auto;
  --credit-height:auto;
  --credit-margin:auto;
  --border-header:5px 5px 0 0;
  --border-table:2px 2px 0 0;
  --border-titletop:4px 0 0 0;
  --border-rowtop:0 0 0 4px;
  --border-rowbottom:0 4px 0 0;
  --border-infobottom:0 0 4px 0;
  --border-footer:0 0 5px 5px;
  --border-themebox:0 0 5px 0;
  --border-theme:50%;
  --border-5:5px;
  --border-10:10px;
}

:root:has(#lisafrank:checked) {
  --text:white;
  --font:"LoveHouse", sans-serif;
  --bg:black;
  --accent:#ff0099;
  --accent1:#00ffe8;
  --accent2:#ff0099;
  --header-height:200px;
  --header:url("/images/lisa-header.png");
  --cursor:url("/images/cursors/axe.png");
  --pointer:url("/images/pointers/axe.png");
  --outlink:url("/images/outlinks/teal.png");
  --outlinkhover:url("/images/outlinks/black.png");
  --bcoutlink:url("/images/outlinks/black.png");
  --bcoutlinkhover:url("/images/outlinks/hotpink.png");
  --icon:url("/images/lisa.gif");
  --icon-border:2px;
  --online:url("/images/online-now-pink.gif");
  --quote:'"death is temporary"';
  --quote-size:15px;
  --crossword:hue-rotate(290deg) saturate(300%);
  --credit-opacity:0;
  --credit-height:0;
  --credit-margin:-15px;
  --border-header:5px 5px 0 0;
  --border-table:2px 2px 0 0;
  --border-titletop:4px 0 0 0;
  --border-rowtop:0 0 0 4px;
  --border-rowbottom:0 4px 0 0;
  --border-infobottom:0 0 4px 0;
  --border-footer:0 0 5px 5px;
  --border-themebox:0 0 5px 0;
  --border-theme:50%;
  --border-5:5px;
  --border-10:10px;
}

:root:has(#kris:checked) {
  --text:white;
  --font:"Pixel Operator", serif;
  --bg:black;
  --accent:#ff0000;
  --accent1:#ff0000;
  --accent2:#ff0000;
  --header-height:0px;
  --cursor:url("/images/cursors/red-heart.png");
  --pointer:url("/images/pointers/red-heart.png");
  --outlink:url();
  --outlinkhover:url();
  --bcoutlink:url();
  --bcoutlinkhover:url();
  --icon:url("/images/krisjammin.gif");
  --icon-border:0px;
  --online:url("/images/online-kris.gif");
  --quote:'"sick juice"';
  --quote-size:22px;
  --crossword:hue-rotate(110deg) saturate(250%);
  --credit-opacity:0;
  --credit-height:0;
  --credit-margin:-15px;
  --border-header:;
  --border-table:0;
  --border-titletop:0;
  --border-rowtop:0;
  --border-rowbottom:0;
  --border-infobottom:0;
  --border-footer:0;
  --border-themebox:0;
  --border-theme:50%;
  --border-5:0;
  --border-10:0;
}