:root {
    --display-color: #93ffa9;
}
html {
  scrollbar-width: none;
  overflow-x: hidden;
  cursor: url("ClassicCursor/Normal.cur"), default;
  min-height: 100vh;
  overscroll-behavior-y: none;
}
body {
    background-color:#99896e;
    color: var(--display-color);
    padding: 10vh 25vw 27vh;
    font-family: "3270";
    text-align: left;
    text-shadow: 0 0 0.2rem;
}
::selection { background: rgb(147, 255, 169); /* WebKit/Blink Browsers */ }
::-moz-selection { background: rgb(147, 255, 169); /* Gecko Browsers */ }

.background {
    inset: 0;
    position: fixed;
    top: 6vh;
    bottom: 22vh;
    left: 6vw;
    right: 6vw;
    background-color: rgb(0, 39, 0);
    z-index: -1;
    pointer-events: none;
}
.environment {
    position: fixed;
    inset: 0;
    pointer-events: none;
}
.monitor-frame {
    z-index: 1010;
    background-image: url("images/frame.webp");
    background-size: 100% 100%;
    background-position: center;
}
.scanlines {
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    object-fit: fill;
    mix-blend-mode: screen;
    opacity: .2;
}
.otherlines {
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%, 
        rgba(0, 0, 0, 0.28) 50%
    );
    background-size: 100% 4px;
    z-index: 900;
    opacity: .8;
}

.deco {
    position: fixed;
    z-index: 2000;
    filter: blur(.02rem);
}
.sam {
    height: 3vh;
    top: .2vh;
    left: 50%;
    transform: translateX(-50%);
    cursor: url("ClassicCursor/LinkSelect.cur"), pointer;
}
.sam img {
    height: 100%;
}
.light {
    right: 7vw;
    bottom: 14vh;
    width: 2.5rem;
    rotate: -3deg;
    pointer-events: none;
}
.onOffButton {
    right: 9vw;
    bottom: 5vh;
    width: 3rem;
}
.sticky1 {
    width: 24rem;
    left: 1vw;
    top: 75vh;
    rotate: -7deg;
}
.sticky2 {
    width: 24rem;
    top: 78vh;
    right: 20vw;
    rotate: 2deg;
}

.ascii-logo { font-size: max(0.7svw, 0.4rem); }
.disclaimer {
    padding: 0rem 2rem;         /*vertical then horizontal*/
    background-color: transparent;
    border: 0.2rem dotted ;   /*width style colour*/
    cursor: url("ClassicCursor/Unavailable.cur"), not-allowed;
}
.worm {
    position: fixed;
    border: 0.2rem solid var(--display-color);
    opacity: 0;
    animation: appear 0.05s step-start forwards;
}
.box1 {width: 20rem; height: 20rem; left: 24rem; animation-delay: .5s;}
.box2 {width: 7rem; height: 15rem; background-color: var(--display-color); bottom: 5rem; animation-delay: 2s;}
.box3 {width: 30rem; height: 5rem; top: 5rem; animation-delay: 3.5s;}
.box4 {width: 15rem; height: 40rem; bottom: 5rem; right: 20rem; animation-delay: 3.7s;}
.box5 {width: 40rem; height: 10rem; left: 5rem; top: 10rem; animation-delay: 5s; word-wrap: break-word;}
.box6 {width: 30rem; height: 10rem; left: 10rem; top: 30rem; animation-delay: 5.1s; word-wrap: break-word;}
.box7 {width: 10rem; height: 10rem; left: 40%; top: 40%; animation-delay: 5.2s; word-wrap: break-word;}
.box8 {width: 50rem; height: 20rem; background-color: var(--display-color); right: 15%; top: 20%; animation-delay: 6s;}
.box9 {width: 30rem; height: 40rem; background-color: var(--display-color); right: 37%; top: 30%; animation-delay: 6.1s;}
.box10 {width: 15rem; height: 60rem; background-color: var(--display-color); left: 9%; top: 10%; animation-delay: 6.4s;}
.box11 {left: 50%; top: 40%; color: rgb(0, 39, 0); animation-delay: 8s;}
.box12 {left: 50%; top: 50%; color: rgb(0, 39, 0); animation-delay: 10s;}
@keyframes appear { 0% { opacity: 0; } 100% { opacity: 1; } }
.binary {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.terminalButton { 
    border: 0.1rem solid var(--display-color);
    outline: 0.1rem dashed var(--display-color);
    outline-offset: 0.2rem;
    background-color: transparent;
    color: var(--display-color);
    padding: 0.1rem 0.2rem;
    font-family: "3270";
    font-size: 1.3rem;
    background-image: radial-gradient(circle at center, rgba(147, 255, 169, 0.5), 1px, transparent 1px);
    background-size: 4px 4px;
    text-shadow: 0px 0px 0.3rem;
    cursor: url("ClassicCursor/LinkSelect.cur"), pointer;
}
.terminalButton:hover { 
    background-image: radial-gradient(circle at center, rgba(147, 255, 169, 0.2), 1px, transparent 1px);
    scale: 0.98;
}
p, h1, h2, h3, pre, input {
    cursor: url("ClassicCursor/TextSelect.cur"), text;
}
input {
    background-color: transparent;
    border: none;
    border-bottom: 0.2rem dotted var(--display-color);
    outline: none;
    /* outline: 0.1rem solid var(--display-color);
    outline-offset: 0.2rem; */
    color: var(--display-color);
    font-family: "3270";
    font-size: 1.3rem;
}
input::placeholder {
    color: var(--display-color);
    opacity: 0.6;
}
a:link { color: var(--display-color);}
a:visited { color: var(--display-color);}
table {
    border: 0.1rem solid var(--display-color);
    padding: .2rem;
}
th, td { padding: 0rem 1.5rem; }
th { padding-bottom: .3rem; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }

@font-face {
  font-family: "3270";
  src: url("3270-Regular.woff") format("woff");
}
@media (prefers-color-scheme: dark) {
    body {
        background-color: #796c57;
    }
}