@import url('https://fonts.googleapis.com/css?family=Syncopate:700&display=swap');
@font-face {
  font-family: 'C64';
  src:  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49914/C64_Pro-STYLE.woff') format('woff2'),
        url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49914/C64_Pro-STYLE.woff2') format('woff');
}

$fore: #887ecb;
$back: #50459b;
$dbeige: rgb(73, 65, 48);
$beige: rgb(215,200,190);
$gray: rgb(51,50,48);

:root {
  background-color: #111;
  background-image: radial-gradient(
    circle,
    #222,
    #111
  );
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#case {
  position: relative;
  padding: 3vmin 3vmin;
  background-color: $beige;
  border-radius: 1.25vmin;
  border-top: 0.25vmin solid lighten($beige, 10%);
  border-bottom: 0.75vmin solid darken($beige, 20%);
  box-shadow:
    inset 0 1vmin 2vmin darken($beige, 20%);
}

#bezel {
  border-radius: 0.5vmin;
  background-image: 
    linear-gradient(to right, 
      darken($gray, 5%),
      $gray,
      lighten($gray, 2%),
      $gray,
      darken($gray, 5%)
    );
  padding: 8vmin;
  position: relative;
  border-left: 2px solid darken($gray, 15%);
  border-right: 2px solid darken($gray, 15%);
  border-top: 1px solid lighten($gray, 35%);
  border-bottom: 3px solid darken($gray, 15%);
  box-shadow:
    0 -1vmin 0.25vmin 0.5vmin darken($beige, 15%),
    0 1vmin 0 0.5vmin lighten($beige, 10%);
  
  &::before {
    content: '';
    position: absolute;
    top: 3vmin; left: 3vmin; 
    right: 3vmin; bottom: 3vmin;
    border: 1px solid $gray;
    border-left-color: darken($gray, 10%);
    border-right-color: darken($gray, 10%);
    border-radius: 1vmin;
    box-shadow: 
      inset 0 -1.5vmin 2vmin -0.05vmin darken($gray, 10%),
      inset 0 1.5vmin 2vmin -0.05vmin darken($gray, 10%);
  }
}

#tube {
  box-shadow: 
    0 -3px 2px darken($gray, 8%),
    0 2px 0 -1px lighten($gray, 30%),
    0 3px lighten($gray, 10%);
  $margin: 6vmin;
  color: $fore;  
  background-color: $back;
  padding: 2px;
  font-size: 2vmin;
  font-family: C64;
  line-height: 1.11;
  border: $margin solid $fore;
  position: relative;
  border-radius: 2vmin;
  
  &::before, &::after {
    border-radius: 2vmin;
    position: absolute;
    content: '';
    top: $margin * -1;
    left: $margin * -1;
    right: $margin * -1;
    bottom: $margin * -1;
  }
  
  //scanlines
  &::before {
    @keyframes scanlines {
      from { background-position: 0 0px; }
      to { background-position: 0 4px; }
    }
    
    animation: scanlines 16ms infinite steps(4, start);
    mix-blend-mode: overlay;
    background-size:
      1vw 3px;
    background-image: 
      linear-gradient(to bottom,
        transparent 2px,
        rgba(mix(black, $back), 0.6) 2px,
        rgba(mix(black, $back), 0.9) 3px
      )
  }
  
  // glare
  &::after {
      box-shadow: 
        inset 0 0 1vmin 0.25vmin rgba(black, 0.85),
        0 0 10vmin -2vmin $back,
        0 0 10vmin -5vmin darken($back, 20%);
    background-blend-mode: multiply, normal, screen;
    background-image:
      radial-gradient(
        ellipse closest-corner,
        transparent 70%,
        rgba($back, 0.7),
      ),
      linear-gradient(
        85deg, 
        rgba(darken($back, 20%), 0.2) 0%,
        rgba(white, 0) 64.5%,
        rgba(mix(#bbb, $fore, 75%), 0.05) 74.5%,
        rgba(mix(#fff, $fore, 90%), 0.05) 75%, 
        rgba(mix(#eee, $fore, 75%), 0.07) 85%,
        rgba(white, 0) 85.5%,
      )
  }
}

#screen {
  display: block;
  width: 72vmin ;
  height: 53vmin;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  user-select: none;
}

#bottom-panel {
  position: absolute;
  top: 100.9%;
  left: 1vmin; right: 1vmin;
  height: 16vmin;
  background-color: $beige;
  border-radius-bottom-left: 1rem;
  border-left: 0.25vmin solid darken($beige, 5%);
  border-right: 0.25vmin solid darken($beige, 5%);
  background-image:
    linear-gradient(
      to bottom,
      darken($beige, 40%) 0%,
      lighten($beige, 15%) 1.25vmin,
      lighten($beige, 10%) 6.5vmin,
      rgba($beige,0) 7.25vmin
    );
  perspective: 12in;
}

#badge {
  position: absolute;
  z-index: 1;
  top: -1vmin;
  height: 7vmin;
  left: 33vmin;
  right: 33vmin;
  background-image: 
    linear-gradient(-10deg, 
      $dbeige,
      darken($dbeige, 7%)
    );
  border-left: 0.25vmin solid $beige;
  border-right: 0.25vmin solid $beige;
  
  svg {
    width: 18vmin;
    position: absolute;
    top: 51%;
    left: 1vmin;
    transform: translate(0, -50%);
  }
  // rainbow
  &::after {
    content: '';
    position: absolute;
    top: 0.5vmin;
    bottom: 0.5vmin;
    right: 8vmin;
    width: 10vmin;
    opacity: 0.5;
    background-image: linear-gradient(
      to bottom,
      red 0%, 
      red 15%, transparent 15%, 
      transparent 21.25%, orange 21.25%, 
      orange 36.25%, transparent 36.25%, 
      transparent 42.5%, yellow 42.5%, 
      yellow 57.5%, transparent 57.5%,  
      transparent 63.75%, limegreen 63.75%, 
      limegreen 78.75%, transparent 78.75%, 
      transparent 85%, cyan 85%, 
      cyan 100%
    )
  }
  
  #power {
    position: absolute;
    right: 2vmin;
    top: 0;
    bottom: 0;
    width: 5vmin;
    background-color: black;
    color: #666;
    font: normal 0.75vmin system-ui, sans-serif;
    text-align: center;
    line-height: 11vmin;
  }
}

#ident {
  line-height: 1.5;
  position: absolute;
  top: 1vmin;
  right: 13vmin;
  height: 5vmin;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: 'Syncopate', sans-serif;
  font-size: 1.25vmin;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba($gray, 0.85);
  text-shadow: 
    -1px -1px lighten($beige, 30%),
    1px 1px darken($beige, 10%);
  border-radius: 0.333vmin;
  border-top: 1px solid lighten($beige, 5%);
  border-left: 1px solid lighten($beige, 25%);
  box-shadow: 0.25vmin 0.25vmin 0.25vmin darken($beige, 10%);
  padding: 0 3vmin 0 1vmin;
  transform: skewx(3.5deg);
}

#door {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 83vmin;
  height: 7.5vmin;
  border-top: 4px groove lighten($beige, 7.5%);
  border-right: 2px groove lighten($beige, 5%);
}

#video, #audio {
  font: normal 1vmin system-ui, sans-serif; 
  color: darken($beige, 50%);
  position: absolute;
  top: 9vmin;
  width: 5vmin; height: 5vmin;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid black;
  border-color: lighten($beige, 5%) darken($beige, 10%) darken($beige, 10%) lighten($beige, 5%);
  background-image:
    radial-gradient(circle, darken($beige, 35%), rgba(black, 0.0));
  box-shadow: 
    inset -0.5vmin -0.5vmin 0.5vmin -0.5vmin white,
    inset -1vmin -1vmin 2vmin -1vmin lighten($beige, 10%),
    
    inset 0.5vmin 0.5vmin 0.5vmin -0.5vmin rgba(0,0,0, 0.5),
    inset 1vmin 1vmin 1vmin darken($beige, 35%);
  
  &::before {
    content: '';
    position: absolute;
    top: 0.75vmin; left: 0.75vmin;
    bottom: 0.75vmin; right: 0.75vmin;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 
      0 0.25vmin 0.1vmin rgba(black, 0.4),
      0 0 0.75vmin darken($beige, 60%);
    background-image:
      radial-gradient(
        circle at 50% 45%,
        rgba(black, 0) 64%, rgba(black, 0.4) 70%,
      ),
      radial-gradient(
        circle 3.75vmin at 50% 85%,
        rgba(white, 0) 64%, rgba(white, 0.4) 70%,
      ),
      radial-gradient(
        circle,
        rgba(black, 0.8), rgba(black, 0.8) 15%, 
        rgba(black, 0.0) 40%,
        rgba(black, 0.0) 45%,
        darken(silver, 10%) 45%,
        silver 50%, black,
      );
  }
  
  &::after {
    position: absolute;
    bottom: -2em;
    left: 0; right: 0;
    text-align: center;
  }
}

#video { 
  right: 15vmin; 
  &::before { background-color: yellow; } 
  &::after { content: 'VIDEO'; }
}
#audio { 
  right: 9vmin; 
  &::before { background-color: white; }
  &::after { content: 'AUDIO'; }
}

#power-btn {
  font: normal 1vmin system-ui, sans-serif; 
  color: darken($beige, 30%);
  position: absolute;
  
  width: 6.8vmin;
  height: 3.8vmin;
  right: 2.6vmin;
  top: 1.5vmin;
  background-color: black;
  border: 1px solid darken($beige, 25%);
  
  &::before {
    content: '';
    position: absolute;
    top: 2px; left: 1px; 
    right: 1px; bottom: 1px;
    border-radius: 2px;
    background-image: 
      linear-gradient(
        to bottom,
        lighten(mix($beige, $gray), 10%),
        mix($beige, $gray) 2px,
        lighten(mix($beige, $gray), 15%)
      );

    box-sizing: border-box;
    border-top: 0.5vmin solid mix($beige, $gray);
    border-bottom: 3px solid darken(mix($beige, $gray), 15%);
    border-right: 1px solid darken(mix($beige, $gray), 10%);
    border-left: 1px solid darken(mix($beige, $gray), 10%);
  }
  
  &::after { 
    content: 'POWER'; 
    position: absolute;
    top: calc(100% + 0.5vmin);
    left: 0; right: 0; text-align: center;
  }
}