body {background: blue;overflow-x:hidden;background-position:fixed;overflow-y:hidden;}

@font-face {
  font-family: Checkbook;
  src: url(CHECKBK0.ttf);
}

p {color:white;
font-size: 40px;
margin-top: -20px;
letter-spacing: 2px;
font-family: Checkbook;}

#bg1 {
      position:fixed;
      margin-top:0px;
      margin-left: -30px;
      z-index: -1005;
      width:2880px;

      background-image: url("bgtest.png");
            background-size: 800px;
      opacity: 70%;
}
#bg2 {
      position:fixed;
      margin-top:0px;
      margin-left: -30px;
      z-index: -1005;
      width:2880px;
      mix-blend-mode: color-dodge;
      background-image: url("bgtest.png");
            background-size: 800px;
      opacity: 50%;
}
@keyframes backgroundScroll {
        0% {transform: translateY(-1610px);}
        100% {transform: translateY(0px);}
        }

@keyframes backgroundScroll2 {
        0% {transform: translateY(0px);}
        100% {transform: translateY(-1610px);}
        }


@keyframes brightness {
  from {filter: brightness(100%);}
  to {filter: brightness(50%);}
}
@keyframes opacity {
  from {opacity: 0.5;}
  to {opacity: 1;}
}
#wires {
  position: fixed;
  top: 0;
  right: 0;
  width: 1920px;
  height: 1080px;
  image-rendering: pixelated;
}
#outsidehull {
  position: fixed;
  top: 0;
  right: 0;
  width: 1920px;
  height: 1080px;
  image-rendering: pixelated;
}
#mainblock {
  position: fixed;
  top: 0;
  right: 0;
  width: 1920px;
  height: 1080px;
  image-rendering: pixelated;
}
#smallscreenbodies {
  position: fixed;
  top: 0;
  right: 0;
  width: 1920px;
  height: 1080px;
  image-rendering: pixelated;
}
#bluescreens {
  position: fixed;
  top: 0;
  right: 0;
  width: 1920px;
  height: 1080px;
  image-rendering: pixelated;
}
#abovebluescreens {
  position: fixed;
  top: 0;
  right: 0;
  width: 1920px;
  height: 1080px;
  image-rendering: pixelated;
}
#litsurfaces {
  position: fixed;
  top: 0;
  right: 0;
  width: 1920px;
  height: 1080px;
  image-rendering: pixelated;a
}
#smallscreens {
  position: fixed;
  top: 0;
  right: 0;
  width: 1920px;
  height: 1080px;
  image-rendering: pixelated;
  animation: brightness 2s linear infinite;
  
}
#borderoverlap {
  position: fixed;
  top: 0;
  right: 0;
  width: 1920px;
  height: 1080px;
  image-rendering: pixelated;
}



@keyframes speen {
  from {transform: rotateX(100deg) rotateZ(0deg)}
  to {transform: rotateX(100deg) rotateZ(360deg)}
}


#imgcontainer {
  perspective: 1000px; 
}  
#rotatetest {
  transform: rotateX(100deg) rotateZ(30deg);
  position: fixed;
  top: 0;
  right: 0;
  animation: speen 2s linear infinite;

  z-index: 100;
}



/*TEXT PANELS*/

#mainscreenP {
  perspective: 200px;
  border: 2px solid black;
  /*outline: white solid 5px; DEBUG*/
  position: absolute;
  
  /*screen perspective orientation*/
  left: 50%;
  top: 672px;
}

#mainscreen {
  /*border: 2px solid black; DEBUG */
  /*outline: #4CAF50 solid 10px; DEBUG */
  margin: 10px;  
  padding: 5px;
  text-align: left;
  position: fixed;
  margin-top: -50%;
  overflow-wrap: break-word;
  
  /*screen orientation*/
  top: 78px; transform: rotateZ(0deg) rotateX(31deg) rotateY(0deg); left: -274px; height: 565px; width: 538px;
  
}

#topleftscreenP {
  perspective: 200px;
  border: 2px solid black;
  outline: white solid 5px; 
  position: absolute;
  
  /*screen perspective orientation*/
  left: 50%;
  top: 448px; perspective: 1311px;
  
}

#topleftscreen {
  border: 2px solid black; /* DEBUG */
  /*outline: #4CAF50 solid 10px; DEBUG */
  margin: 10px;  
  padding: 5px;
  text-align: left;
  position: fixed;
  margin-top: -50%;
  overflow-wrap: break-word;
  
  /*screen orientation*/
  transform: rotateZ(26deg) rotateX(-12deg) rotateY(34deg); left: -770px; top: -373px; height: 511px; width: 157px;
  
}