<style>
$color-secondary: #274851;
$color-highlight: #d3e9e6;
$color-faded: #3d7f7d;
$color-glow: #3bcb86;
$screen-background:#121010;
@mixin primary-glow($spread) {
  box-shadow: 0 0 2px 0px #fff,
  0 0 #{$spread}px 0px $color-glow;
}

@mixin primary-text-glow($spread) {
  text-shadow: 0 0 2px #fff,
  0 0 #{$spread}px $color-glow;
}

@mixin secondary-glow {
  box-shadow: 0 0 10px 0px $color-secondary, 0 0 10px 0px $color-secondary inset;
}

@mixin center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
}

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
  width: 100vw;
  height: 100vh;
 background-color: #000;
  margin: 0;
}
body::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  -webkit-animation: flicker 0.15s infinite;
          animation: flicker 0.15s infinite;

}
body::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

.codec {
  position: absolute;
  left: calc((100vw - 1200px) / 2);
  top: 15%;
  width: 1200px;
  height: 400px;
  border: 4px solid #274851;
  box-shadow: 0 0 10px 0px #274851, 0 0 10px 0px #274851 inset;
}
.codec > .left, .codec > .center, .codec > .right {
  float: left;
  width: 33.33%;
  height: 100%;
}

.screen {
  background-color: #274851;
  box-shadow: 0 0 10px 1px #fff inset, 0 0 10px 1px #fff, 0 0 30px 10px #3bcb86;
  position: absolute;
  width: 250px;
  height: calc(100% + 8px);
  background-size: 100% auto;
  top: -4px;
  -webkit-animation: turn-on 250ms linear;
          animation: turn-on 250ms linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  transform: scale(1, 0);
  overflow: hidden;
}
.screen::before {
  background-color: #d3e9e6;
  box-shadow: 0 0 10px #3bcb86;
  content: "";
  height: 50px;
  left: 0;
  opacity: 0.1;
  position: absolute;
  top: 0;
  width: 100%;
}
.screen::after {
  background-color: #d3e9e6;
  box-shadow: 0 0 10px #3bcb86;
  content: "";
  height: 3px;
  left: 0;
  opacity: 0.2;
  position: absolute;
  top: 0;
  width: 100%;
}

.left > .screen {
  left: 25px;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/meryl.jpg);
}
.left > .screen::before {
  -webkit-animation: scan 7500ms linear 822ms forwards infinite;
          animation: scan 7500ms linear 822ms forwards infinite;
}
.left > .screen::after {
  -webkit-animation: scan 4000ms linear 516ms forwards infinite;
          animation: scan 4000ms linear 516ms forwards infinite;
}

.right > .screen {
  right: 25px;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/snake.jpg);
}
.right > .screen::before {
  -webkit-animation: scan 7500ms linear 796ms forwards infinite;
          animation: scan 7500ms linear 796ms forwards infinite;
}
.right > .screen::after {
  -webkit-animation: scan 4000ms linear 729ms forwards infinite;
          animation: scan 4000ms linear 729ms forwards infinite;
}

@-webkit-keyframes scan {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, 400px, 0);
  }
}

@keyframes scan {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, 400px, 0);
  }
}
/* center */
.ptt,
.memory,
.frequency {
  position: absolute;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  background-color: #274851;
}

.ptt,
.memory {
  width: 200px;
  height: 40px;
  background-color: #274851;
  text-align: center;
  font-family: pixel;
  font-size: 40px;
  color: #3d7f7d;
  box-shadow: -6px 0 0 0 #000, 6px 0 0 0 #000;
}

.ptt {
  letter-spacing: 12px;
  top: -10px;
}

.memory {
  bottom: -10px;
}

.ptt::before,
.ptt::after,
.memory::before,
.memory::after {
  background-color: #274851;
  content: "";
  height: 4px;
  position: absolute;
  width: 180px;
  box-shadow: 0 0 10px 0px #274851, 0 0 10px 0px #274851 inset;
}

.ptt::before,
.ptt::after {
  bottom: 4px;
}

.memory::before,
.memory::after {
  top: 4px;
}

.ptt::before,
.memory::before {
  left: -186px;
}

.ptt::after,
.memory::after {
  right: -186px;
}

.frequency {
  width: 400px;
  height: 250px;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  box-shadow: 0 0 10px 0px #274851, 0 0 10px 0px #274851 inset;
}

.frequency > .left,
.frequency > .right {
  position: absolute;
  background-color: #274851;
  width: 80px;
  height: 40px;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  box-shadow: 0 0 10px 0px #274851, 0 0 10px 0px #274851 inset;
}

.frequency .left {
  left: -100px;
}

.frequency .right {
  right: -100px;
}

/* lcd */
.lcd {
  bottom: 0;
  color: #3d7f7d;
  font-family: "lcd";
  height: 87px;
  line-height: 88px;
  padding: 10px;
  position: absolute;
  right: 0;
  width: 318px;
  transform: scale(0.9, 1) translate3d(20px, 0, 0);
}
.lcd > span {
  position: absolute;
}
.lcd > span::before {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  color: #d3e9e6;
  text-shadow: 0 0 2px #fff, 0 0 10px #3bcb86;
}
.lcd .small {
  font-size: 75px;
  left: 0px;
  bottom: 0;
}
.lcd .small::before {
  content: "14";
}
.lcd .large {
  font-size: 100px;
}
.lcd .large:nth-child(2) {
  right: 160px;
}
.lcd .large:nth-child(2)::before {
  content: "0";
}
.lcd .large:nth-child(2)::after {
  position: absolute;
  right: -10px;
  bottom: 2px;
  width: 10px;
  height: 10px;
  border-radius: 1px;
  background-color: #d3e9e6;
  box-shadow: 0 0 2px 0px #fff, 0 0 10px 0px #3bcb86;
  content: "";
}
.lcd .large:nth-child(3) {
  right: 10px;
}
.lcd .large:nth-child(3)::before {
  content: "85";
}

/* bars */
.bars {
  width: 400px;
  height: 100%;
  padding: 10px;
}
.bars > div {
  position: relative;
  height: 22px;
  width: 100%;
  background-color: #3d7f7d;
  margin-bottom: 4px;
}
.bars > div:nth-child(1) {
  width: 380px;
}
.bars > div:nth-child(2) {
  width: 190px;
}
.bars > div:nth-child(3) {
  width: 126.6666666667px;
}
.bars > div:nth-child(4) {
  width: 95px;
}
.bars > div:nth-child(5) {
  width: 76px;
}
.bars > div:nth-child(6) {
  width: 63.3333333333px;
}
.bars > div:nth-child(7) {
  width: 54.2857142857px;
}
.bars > div:nth-child(8) {
  width: 47.5px;
}
.bars > div:nth-child(9) {
  width: 42.2222222222px;
}
.bars > div:nth-child(3) {
  -webkit-animation-name: signal;
          animation-name: signal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-delay: 900ms;
          animation-delay: 900ms;
}
.bars > div:nth-child(3)::after {
  border-color: #d3e9e6 transparent transparent transparent;
}
.bars > div:nth-child(4) {
  -webkit-animation-name: signal;
          animation-name: signal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-delay: 800ms;
          animation-delay: 800ms;
}
.bars > div:nth-child(4)::after {
  border-color: #d3e9e6 transparent transparent transparent;
}
.bars > div:nth-child(5) {
  -webkit-animation-name: signal;
          animation-name: signal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-delay: 700ms;
          animation-delay: 700ms;
}
.bars > div:nth-child(5)::after {
  border-color: #d3e9e6 transparent transparent transparent;
}
.bars > div:nth-child(6) {
  -webkit-animation-name: signal;
          animation-name: signal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-delay: 600ms;
          animation-delay: 600ms;
}
.bars > div:nth-child(6)::after {
  border-color: #d3e9e6 transparent transparent transparent;
}
.bars > div:nth-child(7) {
  -webkit-animation-name: signal;
          animation-name: signal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms;
}
.bars > div:nth-child(7)::after {
  border-color: #d3e9e6 transparent transparent transparent;
}
.bars > div:nth-child(8) {
  -webkit-animation-name: signal;
          animation-name: signal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
}
.bars > div:nth-child(8)::after {
  border-color: #d3e9e6 transparent transparent transparent;
}
.bars > div:nth-child(9) {
  -webkit-animation-name: signal;
          animation-name: signal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}
.bars > div:nth-child(9)::after {
  border-color: #d3e9e6 transparent transparent transparent;
}
.chat {
  bottom: -220px;
  color: #fff;
  font-family: pixel;
  font-size: 50px;
  left: 50%;
  position: absolute;
  transform: translate3d(-50%, 0px, 0px);
  width: 800px;
  font-family: Inconsolata;
  text-shadow: 0 0 4px #fff;
  letter-spacing: 3px;
}

@-webkit-keyframes signal {
  0% {
    background-color: #3d7f7d;
  }
  100% {
    background-color: #d3e9e6;
    box-shadow: 0 0 2px 0px #fff, 0 0 10px 0px #3bcb86;
  }
}

@keyframes signal {
  0% {
    background-color: #3d7f7d;
  }
  100% {
    background-color: #d3e9e6;
    box-shadow: 0 0 2px 0px #fff, 0 0 10px 0px #3bcb86;
  }
}
@-webkit-keyframes flicker {
  0% {
    opacity: 0.8457411719;
  }
  2% {
    opacity: 0.9309472769;
  }
  4% {
    opacity: 0.9801474569;
  }
  6% {
    opacity: 0.204571024;
  }
  8% {
    opacity: 0.5484620644;
  }
  10% {
    opacity: 0.4546245096;
  }
  12% {
    opacity: 0.2121771343;
  }
  14% {
    opacity: 0.9123785103;
  }
  16% {
    opacity: 0.1904371898;
  }
  18% {
    opacity: 0.8891220367;
  }
  20% {
    opacity: 0.2175840013;
  }
  22% {
    opacity: 0.3720220975;
  }
  24% {
    opacity: 0.0542396779;
  }
  26% {
    opacity: 0.0374236532;
  }
  28% {
    opacity: 0.1663502673;
  }
  30% {
    opacity: 0.3184214172;
  }
  32% {
    opacity: 0.6269901821;
  }
  34% {
    opacity: 0.4867467348;
  }
  36% {
    opacity: 0.7319666629;
  }
  38% {
    opacity: 0.8184937343;
  }
  40% {
    opacity: 0.0911111225;
  }
  42% {
    opacity: 0.7404229023;
  }
  44% {
    opacity: 0.0488128246;
  }
  46% {
    opacity: 0.4409364169;
  }
  48% {
    opacity: 0.6241457329;
  }
  50% {
    opacity: 0.1218225882;
  }
  52% {
    opacity: 0.3924957386;
  }
  54% {
    opacity: 0.7495428048;
  }
  56% {
    opacity: 0.173876043;
  }
  58% {
    opacity: 0.9605408192;
  }
  60% {
    opacity: 0.1921745429;
  }
  62% {
    opacity: 0.760693133;
  }
  64% {
    opacity: 0.5971976978;
  }
  66% {
    opacity: 0.126669583;
  }
  68% {
    opacity: 0.8847104734;
  }
  70% {
    opacity: 0.1137487735;
  }
  72% {
    opacity: 0.1413522788;
  }
  74% {
    opacity: 0.17232276;
  }
  76% {
    opacity: 0.2743590242;
  }
  78% {
    opacity: 0.7557329737;
  }
  80% {
    opacity: 0.7524508573;
  }
  82% {
    opacity: 0.1571203665;
  }
  84% {
    opacity: 0.6196371867;
  }
  86% {
    opacity: 0.9865526306;
  }
  88% {
    opacity: 0.2160725992;
  }
  90% {
    opacity: 0.4649632856;
  }
  92% {
    opacity: 0.9256661742;
  }
  94% {
    opacity: 0.7040956243;
  }
  96% {
    opacity: 0.7371386161;
  }
  98% {
    opacity: 0.0874853278;
  }
  100% {
    opacity: 0.3231600488;
  }
}
@keyframes flicker {
  0% {
    opacity: 0.8457411719;
  }
  2% {
    opacity: 0.9309472769;
  }
  4% {
    opacity: 0.9801474569;
  }
  6% {
    opacity: 0.204571024;
  }
  8% {
    opacity: 0.5484620644;
  }
  10% {
    opacity: 0.4546245096;
  }
  12% {
    opacity: 0.2121771343;
  }
  14% {
    opacity: 0.9123785103;
  }
  16% {
    opacity: 0.1904371898;
  }
  18% {
    opacity: 0.8891220367;
  }
  20% {
    opacity: 0.2175840013;
  }
  22% {
    opacity: 0.3720220975;
  }
  24% {
    opacity: 0.0542396779;
  }
  26% {
    opacity: 0.0374236532;
  }
  28% {
    opacity: 0.1663502673;
  }
  30% {
    opacity: 0.3184214172;
  }
  32% {
    opacity: 0.6269901821;
  }
  34% {
    opacity: 0.4867467348;
  }
  36% {
    opacity: 0.7319666629;
  }
  38% {
    opacity: 0.8184937343;
  }
  40% {
    opacity: 0.0911111225;
  }
  42% {
    opacity: 0.7404229023;
  }
  44% {
    opacity: 0.0488128246;
  }
  46% {
    opacity: 0.4409364169;
  }
  48% {
    opacity: 0.6241457329;
  }
  50% {
    opacity: 0.1218225882;
  }
  52% {
    opacity: 0.3924957386;
  }
  54% {
    opacity: 0.7495428048;
  }
  56% {
    opacity: 0.173876043;
  }
  58% {
    opacity: 0.9605408192;
  }
  60% {
    opacity: 0.1921745429;
  }
  62% {
    opacity: 0.760693133;
  }
  64% {
    opacity: 0.5971976978;
  }
  66% {
    opacity: 0.126669583;
  }
  68% {
    opacity: 0.8847104734;
  }
  70% {
    opacity: 0.1137487735;
  }
  72% {
    opacity: 0.1413522788;
  }
  74% {
    opacity: 0.17232276;
  }
  76% {
    opacity: 0.2743590242;
  }
  78% {
    opacity: 0.7557329737;
  }
  80% {
    opacity: 0.7524508573;
  }
  82% {
    opacity: 0.1571203665;
  }
  84% {
    opacity: 0.6196371867;
  }
  86% {
    opacity: 0.9865526306;
  }
  88% {
    opacity: 0.2160725992;
  }
  90% {
    opacity: 0.4649632856;
  }
  92% {
    opacity: 0.9256661742;
  }
  94% {
    opacity: 0.7040956243;
  }
  96% {
    opacity: 0.7371386161;
  }
  98% {
    opacity: 0.0874853278;
  }
  100% {
    opacity: 0.3231600488;
  }
}
@-webkit-keyframes turn-on {
  0% {
    transform: scale(1, 0);
    filter: brightness(30);
    opacity: 1;
  }
  20% {
    transform: scale(1, 0.2);
    filter: brightness(60);
    opacity: 1;
  }
  40% {
    transform: scale(1, 0);
    filter: brightness(30);
    opacity: 1;
  }
  60% {
    transform: scale(1, 0.1);
    filter: brightness(60);
    opacity: 1;
  }
  80% {
    transform: scale(1, 0);
    filter: brightness(30);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    filter: contrast(1) brightness(1.1) saturate(1.1);
    opacity: 1;
  }
}
@keyframes turn-on {
  0% {
    transform: scale(1, 0);
    filter: brightness(30);
    opacity: 1;
  }
  20% {
    transform: scale(1, 0.2);
    filter: brightness(60);
    opacity: 1;
  }
  40% {
    transform: scale(1, 0);
    filter: brightness(30);
    opacity: 1;
  }
  60% {
    transform: scale(1, 0.1);
    filter: brightness(60);
    opacity: 1;
  }
  80% {
    transform: scale(1, 0);
    filter: brightness(30);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    filter: contrast(1) brightness(1.1) saturate(1.1);
    opacity: 1;
  }
}
</style>
<style> 

#profile{
width: ;
    height: 100px;
 position: fixed;
 background
 background
 color: white;
 z-index: 100;
 top: 510; 
 left: 395; 
right:

 width: 100vw;
 height: 100vh;
 padding: 50px 100px;
 font-size: 150%;

 opacity: 1;
 transition: .2s;
}
#profile > * {
 width: 100%;
 max-width: 800px!important;
 margin: 200px auto;
 display: block;
}

#profile:target {
 opacity: 0;
 visibility: hidden;
}

#profile > ul {
 padding: 10px 50px;

}

</style>