@font-face {
    font-family: 'VT323';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/vt323/v17/pxiKyp0ihIEF2isfFJA.ttf) format('truetype');
}
#screen {
    margin-bottom: 30px !important;
}
.screen  {
    font-family: 'VT323';
    background: #000;
    font-size: 30px;
    -webkit-font-smoothing: none;
    color: var(--principal_color);
    line-height: 1.2;
}
.inner>h1,
.inner>h2,
.inner>h3,
.inner>h4,
.inner>h5,
.inner>h6 {
    text-transform: uppercase;
    background: var(--black_base);
}
.inner>h1:before,
.inner>h2:before,
.inner>h3:before,
.inner>h4:before,
.inner>h5:before,
.inner>h6:before {
    content: '$>>';
}
.output {
    left: 40px;
    top: 50px;
    right: 40px;
    bottom: 30px;
    border-radius: 20px;
    padding: 100px;
    pointer-events: auto;
    text-shadow: 10px 3px 1px var(--principal_color_3);
    z-index: -1;
    box-shadow: inset 0 0 10px var(--principal_color_2), 0 0 10px var(--principal_color_1), 0 0 30px var(--principal_color);
}
.output:after {
    background: radial-gradient(circle at center, var(--white) 0%, var(--principal_color_1) 58%, var(--principal_color_2) 80%, var(--black_base) 93%);
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    pointer-events: none;
    position: fixed;
    z-index: -1;
}
.output:before {
    content: '';
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0)), color-stop(70%, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.6)));
    background-size: 100% 0.3rem;
    position: fixed;
    pointer-events: none;
    left: 0;
    top: 0;
    width: 100%;
    bottom: 0;
    z-index: -1;
}
.btn-about {
    font: inherit;
    border: none;
    background: var(--principal_color);
    color: var(--black_base);
    cursor: pointer;
    text-shadow: 0rem 1px 5px var(--principal_color_2);
    box-shadow: 0 1px 5px var(--principal_color);
}
.btn-about:before {
    content: '>> ';
    font-weight: 700;
}
.btn-about:after {
    content: ' <<';
    font-weight: 700;
}
.btn-about:hover {
    background: #000;
    color: var(--principal_color);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
.btn-about:active {
    color: #fff;
}
input {
    outline: none;
    font: inherit;
    border: none;
    color: var(--principal_color);
    background: #000;
    text-indent: 10px;
    text-shadow: 0rem 1px 5px var(--principal_color_2);
}
.img {
    position: relative;
    /*float: right;*/
    background:  var(--principal_color_1);
    z-index: -10;
    max-width: 200px;
    width: 100%;
    box-shadow: 50px 10px 805px var(--principal_color_2);
    /*&:after {
      background-color: #23278a;
      content: 'hello';
      mix-blend-mode: lighten;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }*/
}
.img img {
    width: 100%;
    filter: grayscale(100%) contrast(1);
    mix-blend-mode: multiply;
}


@media (min-width: 200px) {
    .output {
        padding: 20px;
    }
}