@font-face {
	font-family: 'TerminusTTF'; 
	src: url('/TerminusTTF.ttf'); 
}

* {
font-family: "TerminusTTF";
font-size: 24px;
}
*::-webkit-scrollbar { display: none; }
* { 
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body{
background-color: black;
color: white;
background-image:url(media/grav-glowing-eye.jpg); background-attachment: fixed; background-size: cover; background-position: center center;
}

a {
 color: cyan !important; 
}
.scrolldown {
 display: none; 
}

.cut-outer:before {
  content: "";
  position: absolute;
  inset: 0;
  background: cyan;
  clip-path: polygon(0 20px,20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px,2px  calc(20px + 0.83px),2px calc(100% - 2px),calc(100% - 20px - 0.83px) calc(100% - 2px),calc(100% - 2px) calc(100% - 20px - 0.83px),calc(100% - 2px) 2px,calc(20px + 0.83px) 2px,2px calc(20px + 0.83px));
}

.cut {
  clip-path: polygon(0 20px,20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
}
.cut-outer {
  z-index: 300;
  height: 100%;
  width: 100%;
  pointer-events: none
}

.left, .right {
 display: block;
 padding: 5px;
 margin: 5px;
  height: 90% !important;
  max-height: 800px;
  max-width: 600px;
 overflow: scroll;
  position: absolute;
}

.cut-inner {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  background-color: rgba(0, 128, 128, 0.5);
}

.left {
 width: 30%;
 left: 0px;
 top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.right {
 width: 30%;
 right: 0px;
 top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.glitchy {
  animation: glitch 1s linear infinite;
}

@keyframes glitch{
  2%,64%{
    transform: translate(2px,0) skew(0deg);
  }
  4%,60%{
    transform: translate(-2px,0) skew(0deg);
  }
  62%{
    transform: translate(0,0) skew(5deg); 
  }
}

.glitchy:before,
.glitchy:after{
  content: attr(title);
  position: absolute;
  left: 0;
}

.glitchy:before{
  animation: glitchTop 1s linear infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

@keyframes glitchTop{
  2%,64%{
    transform: translate(2px,-2px);
  }
  4%,60%{
    transform: translate(-2px,2px);
  }
  62%{
    transform: translate(13px,-1px) skew(-13deg); 
  }
}

.glitchy:after{
  animation: glitchBotom 1.5s linear infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitchBotom{
  2%,64%{
    transform: translate(-2px,0);
  }
  4%,60%{
    transform: translate(-2px,0);
  }
  62%{
    transform: translate(-22px,5px) skew(21deg); 
  }
}

@media (max-aspect-ratio: 1/1) {
  .left, .right {
   display: block;
   position: relative;
   width: calc(100% - 16px);
   max-width: 100%;
   max-height: fit-content;
   transform: none !important;
   -ms-transform: none !important;
  }
  .cut-outer {
    margin-left: 18px;
    margin-right: 18px;
    width: calc(100% - 16px - 28px);
    }
  .scrolldown {
    display: block;
    margin-top: calc(70vh);
    margin-bottom: calc(30vh - 4em);
  }
}