*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

/*

@font-face {
  font-family: PerfectDOS;
  src: url(/fonts/PerfectDOS.ttf);
}
*/

/**
 * Styles meant to be overridden for different "OS" looks.
 */
:root {
  --cs-width: 660px;
  --cs-height: 480px;
  --cs-filter-scale: 2;
  --cs-background: #333;
  --cs-top: 285px;
}

.cs-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  transform: translate(125px,0);
}
.cs-panel.hidden {
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -moz-user-select: none;
}

.cs-distorter {
  width: calc(var(--cs-width) * 1.25);
  height: calc(var(--cs-width) * 1.25);
  position: fixed;
  top: var(--cs-top);
  left: 50%;
  transform: translate(-50%,-50%);
  /* filter: url(#barrel-distort); */
  filter: none;
  
}

.cs-screen {
  width: calc(var(--cs-width) * var(--cs-filter-scale));
  height: calc(var(--cs-height) * var(--cs-filter-scale));
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(calc(1 / var(--cs-filter-scale)));
  background: var(--cs-background);
  background-image: url(../img/cs-screen.png);
  background-size: cover;
  z-index: 100;
  filter: blur(.5);
  image-rendering: pixelated;
  outline: 5px solid #333 !important;
  overflow: hidden;
}
.cs-screen.blurred {
  filter: blur(5px);
}

.cs-mac-floppy {
  position: absolute;
  width: 64px;
  height: 64px;
  left: 56%;
  top: 77%;
  filter: invert(1);
  user-select: none;
}



.cs-overlay {
  background-image: url(../img/cs-overlay-arcade.png);
  width: calc(var(--cs-width) * 1.95);
  height: calc(var(--cs-height) * 1.6);
  position: fixed;
  top: var(--cs-top);
  left: 50vw;
  z-index: 5000;
  background-size: 100% 100%;
  background-position: center center;
  transform: translate(-50%,-50%);
  pointer-events: none;
  opacity: 1;
}
.cs-underlay {
  width: var(--cs-width);
  height: var(--cs-height);
  position: fixed;
  top: var(--cs-top);
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 50;
  image-rendering: pixelated;
  overflow: hidden;
  pointer-events: none;
}