:root
{--red:#f67260;
--yellow:#ffd91c;
--bg:#000;}

body{height:100%;width:100%;}

@font-face
{font-family:piqad;
src:url("a/tripIqaD.woff2")format("woff");
font-weight:normal;
font-style:normal;}
body
{color:var(--yellow);
font-family:"Courier New",monospace;
background:var(--bg);}
  div
  {display:inline-block;
  overflow:hidden;
  image-rendering:crisp-edges;}
  p
  {margin:0;
  text-align:center;}
    pq{font-family:piqad;}
    ok{font-family:"Courier New",monospace}

.crt
{position:absolute;
top:0;bottom:0;
width:min(100%,177.7vh);
left:calc(50% - min(50%,177.7vh/2));}
  .corner
  {position:absolute;
  height:50vmin;
  aspect-ratio:1;
  background-image:url("a/crt.png");
  background-size:200% 200%;}
    .gamma{top:0;left:0;}
    .delta{top:0;right:0;background-position: 100% 0;}
    .alpha{bottom:0;left:0;background-position: 0 100%;}
    .beta{bottom:0;right:0;background-position: 100% 100%;}
    .midv
    {position:absolute;
    height:100%;width:80%;left:10%;
    background-image:url("a/crt.png");background-size:6000% 100%;background-position:3000% 0;}
    .midh
    {position:absolute;
    height:70%;width:100%;top:15%;
    background-image:url("a/crt.png");background-size:100% 6000%;background-position:0 3000%;}
  .lol
  {position:absolute;
  height:4.6%;width:4.8%;aspect-ratio:1;}
  .glyph
  {position:absolute;
  height:7%;width:41%;top:90.7%;left:31.4%;}
    .glyph p
    {height:100%;width:100%;
    margin:0;padding:0;
    font-size:3vmin;}

.screenarea
{position:relative;
margin-top:8vmin;height:calc(100% - 24vmin);
margin-left:8vmin;width:calc(100% - 16vmin);}
  .mdivs
  {position:absolute;
  border:4px solid var(--red);
  overflow:visible;}
    .mdivs.main
    {top:5%;bottom:5%;left:calc(15% - 5vh);right:calc(15% - 5vh);
    overflow:visible;
    border:4px solid var(--red)}
    .mdivs.top
    {top:5%;
    height:15%;
    left:5%;right:5%;}
    .mdivs.left
    {top:25%;bottom:5%;
    left:5%;
    width:15%;}
    .center
    {top:25%;bottom:5%;
    left:25%;right:5%;
    overflow:visible;}
    .mdivs .bevel
    {position:absolute;
    width:3vmin;aspect-ratio:1;
    background-color:var(--bg);}
      .bevel.tl{top:-4px;left:-4px}
      .bevel.tr{top:-4px;right:-4px;}
      .bevel.bl{bottom:-4px;left:-4px}
      .bevel.br{bottom:-4px;right:-4px;}
        .bevel .b
        {position:absolute;
        height:150%;width:150%;
        rotate:45deg;
        background-color:#000;
        border:4px solid var(--red);}
          .tl.b{top:calc(-90% - 4px);left:calc(-90% - 4px);}
          .tr.b{top:calc(-90% - 4px);left:calc(30% - 4px);}
          .bl.b{top:calc(25% - 4px);left:calc(-90% - 4px);}
          .br.b{top:calc(30% - 4px);left:calc(35% - 4px);}
          
.selcontainer
{position:absolute;
top:0;bottom:0;left:0;right:0;}
  .btn
  {position:absolute;
  height:10%;
  display:none;
  overflow:visible;
  pointer-events:auto;}
  .seltext
  {height:100%;
  text-align:center;vertical-align:center;
  font-size:5vh;
  user-select:none;}
  .bevcon
  {position:absolute;
  display:inline-flex;
  top:0;bottom:0;left:0;right:0;
  overflow:visible;}
    .sbevel{flex-grow:0;flex-shrink:0;aspect-ratio:1;}
    .side{flex:1;height:100%;margin-left:-0.5%;}


.side-item
{width:33%;
aspect-ratio:1;
margin-left:10%;
margin-top:10%;
border:2px dotted var(--red);}
.file
{width:calc(25% - 4px);
margin-top:calc(6.25% - 4px);
margin-left:calc(6.25% - 4px);
aspect-ratio:0.8;
border:none;}
.file p
{font-size:calc(min(80vw,100vh)/5/10);
margin-top:5%;}
.file-image
{width:80%;
aspect-ratio:1;
margin-left:10%;
background-size:100% 100%;
border:2px dotted var(--red);;}