body {
    background-color: #000000;
    color: #424242;
    margin: 0;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:14px;
    min-height: 100vh;
    height: 25000px;
    overflow: hidden;
  }
  /* ^^ set height to determine how much to scroll per pic */


  canvas {
      padding: 0px;
      min-height: 100%;
      width: 100%;
      height: 100%;
      /* position:fixed; */
      /*position:  absolute;*/
      /*overflow:  hidden;*/
      top:0;
      left:0;
      opacity: 1;
  }

   /* The animation code */
  @keyframes slideFadeAnimation_default {
    0%   {
        /* transform: scale(0.5); */
        -webkit-filter: blur(16px);
      filter: blur(16px);
    }
    25%	{

    }
    50%  {
      -webkit-filter: blur(0px);
      filter: blur(0px);
    }
    75%	{

    }
    100% {
      -webkit-filter: blur(16px);
      filter: blur(16px);
    }
  }

  @keyframes buttonFadeAnimation_default {
    0%   {
        /* transform: scale(0.5); */
        -webkit-filter: blur(8px);
      filter: blur(8px);
      filter: invert(100%);
    }
    25%	{
      filter: invert(0%);
    }
    50%  {
      -webkit-filter: blur(0px);
      filter: blur(0px);

    }
    75%	{
      filter: invert(0%);
    }
    100% {
      -webkit-filter: blur(8px);
      filter: blur(8px);
      filter: invert(100%);
    }
  }

  @keyframes buttonFadeAnimation_path {
    0%   {
      fill: rgb(67, 67, 67);
      stroke:rgb(67, 67, 67);
    }
    25%	{

    }
    50%  {
      fill: rgb(255, 0, 0);
      stroke:rgb(255, 0, 0);
    }
    75%	{

    }
    100% {
      fill: rgb(67, 67, 67);
      stroke:rgb(67, 67, 67);
    }
  }

  .fade {
    /*margin: 50px;
    padding: 50px;*/
    opacity: 0;
    position: fixed;
    width:100%;
    height: 100%;
    /* max-width:100%; */
    /* max-height:100%; */
    object-fit: cover;
    top:0; left:0;
    /* right:0; bottom:0; */
    margin:auto;
    animation-name: slideFadeAnimation_default;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-delay: -0.01;
    animation-play-state: paused;
  }

  @keyframes buttonbgAnimation {
      0% {
          opacity: 0.33;
      }
      50% {
          opacity: 1;
      }
      100% {
          opacity: 0.33;
      }
      
  }

  .dcbuttonbgcontainer {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 400px;
      height: 400px;
      margin-top: -200px;
      margin-left: -200px;
      z-index: 2;
      animation: buttonbgAnimation 2s infinite;
      mix-blend-mode: difference;
  }

  .dcbuttonbg {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 400px;
      height: 400px;
      margin-top: -200px;
      margin-left: -200px;
      z-index: 2;
      background-color: #800000;
      opacity: 0.0;
      -webkit-filter: blur(32px);
      filter: blur(64px);
      mix-blend-mode: difference;
  }

  @keyframes rectAnimation {
  0% {
      opacity: 0;
      -webkit-filter: blur(32px);
      filter: blur(32px);
      border: 3px solid rgb(106, 17, 75);
  }
  10% {
      border: 3px solid rgb(106, 17, 75);
      -webkit-filter: blur(8px);
      filter: blur(8px);
  }
  30% {
      border: 3px solid rgb(106, 17, 75);
  }
  35% {
      -webkit-filter: blur(0px);
      filter: blur(0px);
      opacity: 1;
      border: 3px solid rgb(255, 0, 0);
  }
  40% {
      border: 3px solid rgb(128, 24, 137);
      opacity: 1;
      -webkit-filter: blur(2px);
      filter: blur(2px);
  }
  65% {
      border: 3px solid rgb(14, 13, 132);
      opacity: 1;
  }
  80% {
      /* opacity: 0.5;
      -webkit-filter: blur(2px);
      filter: blur(2px); */
  }
  100% {
      -webkit-filter: blur(8px);
      filter: blur(8px);
      opacity: 0;
      border: 3px solid rgb(106, 17, 75);
  }
}
  .dcbuttonbordercontainerstart {
      opacity: 1;
  }
  .dcbuttonbordercontainer {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 280px;
      height: 280px;
      margin-top: -140px; /* Half the height minus 2px border */
      margin-left: -140px; /* Half the width minus 2px border */
      z-index: 2;
      opacity: 1.0;
  }

  .dcbuttonborder {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 280px;
      height: 280px;
      margin-top: -143px; /* Half the height minus 2px border */
      margin-left: -143px; /* Half the width minus 2px border */
      z-index: 2;
      -webkit-filter: blur(32px);
      filter: blur(64px);
      /* mix-blend-mode: difference; */
      animation: rectAnimation 0.5s infinite;
  }

  .dcbutton {
      position: fixed;
      top: 50%;
      left: 50%;
      width: auto;
      height: 280px;
      margin-top: -140px; /* Half the height */
      margin-left: -140px; /* Half the width */
      width: auto;
      z-index: 3;
      mix-blend-mode: difference;
       }

  .fadeButton {
      position: fixed;
      top: 50%;
      left: 50%;
      width: auto;
      height: 280px;
      margin-top: -140px; /* Half the height */
      margin-left: -140px; /* Half the width */
      width: auto;
      z-index: 3;
      /* mix-blend-mode: difference; */
      animation-name: buttonFadeAnimation_default;
        animation-duration: 10s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-delay: -0.01;
        animation-play-state: paused;
      /* filter: invert(100%); */
      /* filter: drop-shadow(30px 20px 22px #ff0000); */
  }

  .fadeButton path {
      /* animation-name: buttonFadeAnimation_path;
        animation-duration: 10s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-delay: -0.01;
        animation-play-state: paused; */
      fill: white;
      stroke-width:0;
      opacity:1;
  }

  .fadeButton:hover {
      -webkit-filter: blur(8px);
      filter: blur(8px);
      mix-blend-mode: difference;
  }
  .fadeButton:active {
      -webkit-filter: blur(8px);
      filter: blur(8px);
      mix-blend-mode: difference;
  }

  .fadeButton:hover path {
      /* fill: rgb(144, 0, 255); */
      fill: red;
      stroke-width:0;
      opacity:1;
  }
  .fadeButton:active path {
      fill: rgb(50, 0, 119);
      stroke-width:0;
      opacity:1;
  }

  .dcbutton path {
      fill: rgb(67, 67, 67);
      stroke:rgb(67, 67, 67);
      stroke-width:0;
      opacity:1;
       }
  .dcbutton:hover path {
      fill: white;
      stroke-width:0;
      opacity:1; }
  .dcbutton:active path {
      fill: white;
      stroke-width:0;
      opacity:1; }
  #coloverlay {
      position:fixed;
      background:#000;
      opacity:1;
      left:0;
      right:0;
      top:0;
      bottom:0;
      z-index:2;
  }
  #dcbutton_start { opacity:1; }
  #dcbutton_play { opacity:1; }
  #dcbutton_dolphin { opacity:0; visibility: hidden; }
  #dcbutton_flora { opacity:0; visibility: hidden; }
  #dcbutton_mail { opacity:0; visibility: hidden; }
  #dcbutton_moire { opacity:0; visibility: hidden; }
  #dcbutton_petro { opacity:0; visibility: hidden; }
  #dcbutton_reveries { opacity:0; visibility: hidden; }

  #fullscreencanvas {
      padding: 0px;
      min-height: 100%;
      width: 100%;
      height: 100%;
      position:fixed;
      /*position:  absolute;*/
      /*overflow:  hidden;*/
      top:0;
      left:0;
      /* z-index: -10; */
      /*  webkit-filter: blur(11px);  Chrome, Safari, Opera
      filter: blur(11px);*/
  }