html{
  filter: invert(var(--invert-all));
  transition: all 3s ease;
}

/*tiny guy*/
.base-for-tiny-boat{
  bottom: 49%;
  position:fixed;
  z-index: 1;
  animation: sail 150s linear infinite;
}
/*fancy highlighting for the little critter*/
.tiny-boat .base-for-tiny-boat {
  display: block;
    margin: 0;
  padding: 0;
}
.tiny-boat .highlight-for-tiny-boat {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  width: 20px;
  height: 20px;
  position: -700px 0px;

  background-image: url("assets/textures/dithertileyellow.gif");
  background-repeat: repeat;
  background-size: auto;

  -webkit-mask-image: url("assets/textures/tinyassboat.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;

  mask-image: url("assets/textures/tinyassboat.png");
  mask-repeat: repeat;
  mask-size: 20px auto;
  mask-position:;
  animation: sail 200s linear infinite;
  z-index: 20;
  transition: opacity 1s ease;
}
.tiny-boat:hover .highlight-for-tiny-boat {
  opacity: 1;
}


/*big boat*/
.boat {
  position: fixed;
  bottom: -2%;
  z-index: 1;
  animation: bob 15s ease-in-out infinite;
  filter: invert(var(--invert-all));
}
/*fancy highlight stuff for the bigggg boat*/
.boat .base-for-boat {
  display: block;
  width: 100%;
}

.boat .highlight-for-boat {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  

  background-image: url("assets/textures/dithertileyellow.gif");
  background-repeat: repeat;
  background-size: auto;

  -webkit-mask-image: url("assets/textures/boat-long-brightANDitsalsopointyomg.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;

  mask-image: url("assets/textures/boat-long-brightANDitsalsopointyomg.png");
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: left 0% bottom 0%;

  transition: opacity 1s ease;
}

.boat:hover .highlight-for-boat {
  opacity: 1;
}
/*fancy highlight stuffs end here*/











body{
  background-image: url('assets/textures/blackstaticSTILL.gif');
  overflow: hidden;
  font-family: 'CMD';
}
@media (min-width: 600px){
  .left-box{
      margin-top: -3.56em;
      background-repeat:repeat-x;
  }
}

.bottom-flex{
  bottom: 2%;
  margin-bottom: 1rem;
  display: flex;
  z-index: 2;
  position: fixed;
  justify-content: center;
  width: 100%;
  height: 20%;
  overflow: scroll;
  pointer-events: none;
  filter: invert(var(--invert-all));
}
@media (max-width: 600px) {
    .bottom-flex {
        flex-direction: column; 
        height: 37vh;
    }
}
.bottom-text-box p:hover {
  transform: scale(1.1);
  
}
.bottom-text-box p {
  border: 2px dashed black;
  padding: 1em;
  margin: .5em;
  transition: transform .5s ease-in-out;
  background:
  linear-gradient(#000, #000) padding-box,
  repeating-linear-gradient(to right, red, orange, yellow, green, blue, indigo, purple, red) border-box;
  background-size: auto, 200% 100%;
  animation: rainbow 9s linear infinite;
  pointer-events: all;
}
@media (max-width: 600px){
  .bottom-text-box p {
    margin-top:7vh; 
  }
}
@keyframes rainbow {
  from { background-position: 0 0, -100vh 0; }
  to   { background-position: 0 0, 100vh 0; }
}
.top-right-corner {
  transition: transform 1s ease-in-out;
  translate: 40vw -50vh;
  overflow-x: clip;
}
@keyframes bob {
  0% {transform: translateY(-2%)}
  25% {transform: translateY(2%)}
  50% {transform: translateY(-2%)}
  75% {transform: translateY(1%)}
  100% {transform: translateY(-2%)}
}

@keyframes sail{
  from{transform: translatex(4vw)}
  to{transform: translatex(10vw)}
}
@media (max-width: 600px){
  .top-right-corner{
    translate: 0vw 30vh;
  }
}
.top-right-corner:hover { 
  transform: scale(.98);
}
.spin {
  animation: spin 400s cubic-bezier( 0.00, 0.43, 1.00, 0.57 ) infinite;
  overflow: clip;
  scroll-behavior: revert-layer;
  position: fixed;
  transition: all 2s cubic-bezier( 0.83, 0.23, 0.32, 0.77 );
}
.spin:hover{
    filter: drop-shadow(0px -50px 0 rgba(255,0,0,1)) drop-shadow(50px -50px 0 rgba(0,255,0,1)) drop-shadow(-50px 50px 0 rgba(0,0,255,1));
    transform: scale(1.1)
}
@media (max-width: 600px){
  .spin {
    animation-duration: 90s;
  }
}
@media (min-width: 600px){
  .top-right-corner {
  }
}
@keyframes spin {
  0% { transform: rotate(170deg); }
  50% { transform: rotate(120deg); }
   100% { transform: rotate(170deg); }
}
.bottom-halfL{
    position: fixed;
    top: 50%;
    left:0;
    position: fixed;
    overflow: clip;
     filter: invert(var(--invert-all-2));
}
.bottom-halfR{
    position: fixed;
    top: 50%;
    right:0;
    position: fixed;
    overflow: clip;
     filter: invert(var(--invert-all-2));
}
.black-box{
  width:120vw;
  height:50vh;
  background-color: black;
  top: 50%;
  left:0;
  position: fixed;
  z-index: 0;
   filter: invert(var(--invert-all-2));
}

@media (min-width: 600px){
  .black-box{
    bottom: -5%;
  }
}
@media (min-width: 600px){
  .left-box{
      margin-top: -3.56em;
  }
}
@media (max-width: 600px){
  .left-box{
      transform: translateY(39vh);
  }
}
.left-box{
  background-image: url('assets/textures/badstatic.gif');
  border: double white;
  margin-left: -1rem;
  padding-left: 10%;
  z-index: 5;
}
@media (max-width: 600px){
.left-box{
          margin-top: -30%;
          width: 100vw;
         }
}
@media (min-width: 600px){
  .spacer{
    height:0;
    margin:0;
    padding:0;
  }
}
@media (max-width: 600px){
  .spacer{
    height:30vh;
  }
}
@media (min-width: 600px){ 
.left-box-anim{
    background-color: transparent;
    border: dashed grey;
    margin-top:10%;
    width: 110vw;
    margin-left:-40%;
    color: transparent;
    height: 4rem;
    animation: rolling 3s linear infinite;
  }}
@media (max-width: 600px){
  .left-box-anim{
    width:0;
    height:0;
    margin:0;
    padding:0;
    border-color: transparent;
  }
}
@keyframes rolling {
  from { transform: translateX(-10vw); }
  to { transform: translateX(10vw); }
}
p, pre {
  color: white;
  font-size: 2rem;
  font-family: 'CMD', monospace;
  animation: textShadow 10s ease-in-out infinite;
  text-align: left;
  padding: 0;
  margin: .1em;
}
/*--*/
@font-face {
    font-family: 'CMD';
    src: url('fonts/CMD.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'spacemono';
    src: url('fonts/SpaceMono-Regular.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
.hidden {
    opacity: 0;
    pointer-events: none;
}
@keyframes textShadow {
  filter: invert(var(--invert-all));
  0% {
    text-shadow:
      0rem 0 1px rgba(0,30,255,0.5),
      0rem 0 1px rgba(255,0,80,0.3),
      0 0 3px;
  }

  25% {
    text-shadow:
      0.3rem 0 1px rgba(0,30,255,0.5),
      -0.3rem 0 1px rgba(255,0,80,0.3),
      0 0 3px;
  }

  50% {
    text-shadow:
      0rem 0 1px rgba(0,30,255,0.5),
      0rem 0 1px rgba(255,0,80,0.3),
      0 0 3px;
  }

  75% {
    text-shadow:
      -0.3rem 0 1px rgba(0,30,255,0.5),
      0.3rem 0 1px rgba(255,0,80,0.3),
      0 0 3px;
  }

  100% {
    text-shadow:
      0rem 0 1px rgba(0,30,255,0.5),
      0rem 0 1px rgba(255,0,80,0.3),
      0 0 3px;
  }
}