body
{font-family:piqad;}

p
{font-size:2.5vmin;
padding:1vmin;}


.corner{height:50%;}

.maintext
{position:absolute;
top:0;left:0;right:0;bottom:60vh;
text-align:center;
vertical-align:center;
font-size:3vmin;
overflow:scroll;
border-bottom:4px solid var(--red);
background-color:#000;
z-index:1;}

.imagearea
{position:absolute;
top:10vh;left:0;right:0;bottom:0;}
  video
  {position:absolute;display:inline-block;
  margin-left:auto;margin-right:auto;
  height:100%;width:100%;}
  img
  {position:absolute;display:inline-block;
  width:100%;
  object-fit:contain;}
.cadet
{position:absolute;
background-repeat:no-repeat;
background-size:contain;}


.small.corner
{position:absolute;
height:10vmin;
aspect-ratio:1;
background-image:url("i/small-crt.png");
background-size:800% 800%;}
  .small.gamma{top:-3vmin;left:-3vmin;}
  .small.delta{top:-3vmin;right:-3vmin;background-position: 100% 0;}
  .small.alpha{bottom:-3vmin;left:-3vmin;background-position: 0 100%;}
  .small.beta{bottom:-3vmin;right:-3vmin;background-position: 100% 100%;}
  .small.midv
  {position:absolute;
  width:10vmin;height:calc(100% - 10vmin);top:5vmin;
  background-image:url("i/small-crt.png");background-size:800% 300%;}
    .midv.left{left:-3vmin;right:auto;background-position:0 50%;}
    .midv.right{left:auto;right:-3vmin;background-position:100% 50%;}
  .small.midh
  {position:absolute;
  height:10vmin;width:calc(100% - 10vmin);left:5vmin;
  background-image:url("i/small-crt.png");background-size:125% 800%;}
    .midh.top{top:-3vmin;bottom:auto;background-position:50% 0;}
    .midh.bottom{top:auto;bottom:-3vmin;background-position:50% 100%;}
.handle
{position:absolute;
background-image:url('i/handle-alert.gif');}
  .handle.flip{background-image:url('i/handle-neutral-180.png');}
  .handle.center{height:100%;width:80%;top:0;bottom:0;left:10%;background-size:150% 100%;background-position:50% 50%;}
  .handle.left{height:100%;aspect-ratio:1;left:0;background-size:600% 100%;}
  .handle.right{height:100%;aspect-ratio:1;right:0;background-size:600% 100%;background-position:100% 0;}
.handle90
{position:absolute;
background-image:url('i/handle-alert-90.gif');background-repeat:no-repeat;}
  .handle90.center{height:100%;width:100%;top:0;bottom:0;left:0;background-size:100% 100%;background-position:0 40%;}
  .handle90.top{width:100%;aspect-ratio:1;top:0;background-size:100% 600%;}
  .handle90.bottom{width:100%;aspect-ratio:1;bottom:0;background-size:100% 600%;background-position:0 100%;}
  
.screen
{position:absolute;
background:radial-gradient(rgba(0,0,0,0),rgba(0,0,0,1)),url('i/screen.png');
overflow:visible;}
  .screen .shipicon
  {position:absolute;
  height:15%;aspect-ratio:1;
  left:45%;top:50%;
  background-image:url('i/ship-icon.png');
  background-size: 100% 100%;}
  .screen .satellite
  {display:none;
  height:20%;aspect-ratio:1;
  background-size:100% 100%;
  image-rendering:smooth;}
  .content{z-index:1;}
  
  .syscontain
  {position:absolute;
  top:0;bottom:0;left:0;right:0;
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(8,auto);
  grid-template-columns:repeat(14,auto);}
    .sysbox
    {grid-row: span 2;
    grid-column: span 2;
    background-image:url("i/unknown.png");
    background-size:50% 50%;background-position:50% 50%;
    background-repeat:no-repeat;
    image-rendering:smooth;}
    .syscontain.space{grid-row:span 1;grid-column:span 2;}
  .pathcontain
  {position:absolute;
  top:12.5%;bottom:12.5%;left:7.14%;right:7.14%;
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(6,auto);
  grid-template-columns:repeat(6,auto);}
    .path
    {background-size:100% 100%;}
      .path.u{background-image:url("i/path-chanev.svg");}
      .path.us{background-image:url("i/path-chanev-s.svg");}
      .path.d{background-image:url("i/path-chanting.svg");}
      .path.ds{background-image:url("i/path-chanting-s.svg");}
      
.cadetstatus
{margin-top:2%;
margin-left:14.5%;
display:inline-block;
width:8%;
aspect-ratio:43/81;
background-size:contain;}
.cadetdesc
{height:36%;
width:21%;
margin-left:1.6%;
text-align:center;
vertical-align:center;
font-size:2.5vmin;
overflow:visible;}
.rations
{width:5%;
background-image:url('i/ration.png');
background-size:100% 100%;
opacity:0.4;
aspect-ratio:1;
margin-right:1%;
margin-top:2%;}

.box
{height:30%;
aspect-ratio:1;
display:none;
background-size:100% 100%;}
.cadeticon
{height:25%;
aspect-ratio:43/81;
background-size:contain;}

.warp
{display:none;
width:4.5%;
aspect-ratio:1;
background-color:rgba(225,217,44,0.3);
border:0.5vmin solid var(--yellow);}
      
.fade
{position:absolute;
top:0;bottom:0;left:0;right:0;
background-color:#000;}
  .fade p
  {position:absolute;
  top:calc(50% - 3.5vmin);
  height:7vmin;width:100%;
  text-align:center;
  font-size:7vmin;
  color:#fff;}
  
.rotatescreen
{position:absolute;
display:none;
z-index:3;
top:0;bottom:0;left:0;right:0;
background-color:#000;}
@media (min-height:100vw){.rotatescreen{display:block;}}