/* Main Page Styling */
.pixelated, .pix, #parallax img {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}


.clouds,
.cloudslayer {
    height: 1000px;
    width: 100%;
    position: absolute;  /* Set to absolute positioning */
}

.clouds {
    position: relative;
    position: absolute;  /* Set to absolute positioning */
    margin-bottom: 0px;
    border: .1px solid transparent;
}

/* parallax */
#parallax {
    height: 1000px;
    position: absolute;  /* Set to absolute positioning */
	background: #0069cd;
}

#nonparallax.clouds {
    height: 900px;
 
    position: absolute;  /* Set to absolute positioning */
    background: url(.png) no-repeat fixed center center / cover;
}

#nonparallax {
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
}

#turtle {
	
    
	height: auto;
    margin-top: 125px;
	image-rendering: pixelated;
    opacity: 1;
}

.pixelated {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast; 
    image-rendering: pixelated;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

.parallax__layer {
    background-position: bottom center;
    background-size: auto 1000px;
    background-repeat: repeat-x;
    width: 100%;
    position: absolute;
}
.parallax__layer.parallax {
    position: fixed;
}

#transition {
    background-image: url('transition.png');
    background-color: #000000;
    animation: transitionCycle 120s infinite;
    position: absolute;
}
#stars {
    background-image: url('stars.gif');
    background-position-y: 40px;
    position: absolute;
    animation: starsCycle 120s infinite;
    width:100%;
    image-rendering: pixelated;
}

#title {
    background-image: url('TheLumenites.gif');
    position: absolute;
    background-position-x: center;
    background-repeat: no-repeat;
    opacity: 0.8;
    image-rendering: pixelated;
}

#cloud-1 {
    --start-pos: 000px; /* Replace with the starting background-position-x */
    background-position-x: var(--start-pos);
    background-image: url('cloud1.png');
    background-repeat: repeat-x;
    animation: fadeClouds 120s infinite, floatAnimation 220s linear infinite reverse;
}
#cloud-2 {    
    --start-pos: 100px; /* Replace with the starting background-position-x */
    background-position-x: var(--start-pos);
    background-image: url('cloud2.png');
    background-repeat: repeat-x;
    animation: fadeClouds 120s infinite, floatAnimation 150s linear infinite reverse;
    z-index: 6;
}
#cloud-3 {    
    --start-pos: 200px; /* Replace with the starting background-position-x */
    background-position-x: var(--start-pos);
    background-image: url('cloud3.png');
    background-repeat: repeat-x ;
    animation: fadeClouds 120s infinite, floatAnimation 100s linear infinite reverse;
    z-index: 7;
}
#cloud-4 {    
    --start-pos: 300px; /* Replace with the starting background-position-x */
    background-position-x: var(--start-pos);
    background-image: url('cloud4.png');
	  background-repeat: repeat-x;
    animation: fadeClouds 120s infinite, floatAnimation 80s linear infinite reverse;
    z-index: 8;
}
#cloud-5 {    
    --start-pos: 400px; /* Replace with the starting background-position-x */
    background-position-x: var(--start-pos);
    background-image: url('cloud5.png');
    background-repeat: repeat-x;
    animation: fadeClouds 120s infinite, floatAnimation 60s linear infinite reverse;
    z-index: 9;
}

#buildexploreharmonize {
    margin-top: 12rem;
    background-image: url('build_explore_harmonize.png');
    background-repeat: no-repeat;
    background-position: center;
	image-rendering: pixelated;
    z-index: 10;
}

/* Cloud top Animation */
#cloud-top1 {
    background-image: url('cloud-top1.gif');
    animation: linearAnimation 280s linear infinite;
    background-repeat: repeat;
    opacity: 0.2;
    z-index: 1;
}

@keyframes linearAnimation {
    0%    {background-position-x: 1000px;  background-position-y: 0px;}
    100%  {background-position-x: 0px; background-position-y: 0px;}
}

#ship {
    width: 100%;
    height: 100%;
    background: url(ship.gif) no-repeat;
    animation: shipAnimation 30s linear infinite;
    margin-top: -50px;
    opacity: 1; /* Initially fully visible */
	image-rendering: pixelated;
}

#floatingIsland {
    width: 100%;
    height: 100%;
    background: url(floating_island.gif) no-repeat;
    animation: straightAnimation 150s linear infinite;
    animation-direction: reverse;
    margin-top: 235px;
    opacity: 1	; /* Initially fully visible */
	image-rendering: pixelated;
}

@keyframes transitionCycle {
    0% {
      filter: brightness(100%);
    }
    50% {
      filter: brightness(30%);
    }
    100% {
      filter: brightness(100%);
    }
  }
  @keyframes starsCycle {
    0% {
      filter: brightness(100%);
    }
    50% {
      filter: brightness(150%);
    }
    100% {
      filter: brightness(100%);
    }
  }
  
  .daynightcycle {
    animation: brightnessCycle 120s infinite;
  }

  @keyframes fadeSun {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @keyframes fadeMoon {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  
  .image-wrapper.sun {
    animation: fadeSun 120s infinite;
  }
  
  .image-wrapper.moon {
    animation: fadeMoon 120s infinite;
  }


  

  @keyframes fadeClouds {
    0% {
      filter: brightness(100%);
    }
    50% {
      filter: brightness(20%);
    }
    100% {
      filter: brightness(100%);
    }
  }
  

  @keyframes fadeTurtle {
    0% {
      filter: brightness(0%);
    }
    50% {
      filter: brightness(100%);
    }
    100% {
      filter: brightness(0%);
    }
  }
  
  #turtle {
    animation: fadeTurtle 120s infinite;
  }

@keyframes straightAnimation {
    0%    {background-position-x:   0px;  background-position-y: 0px; opacity: 1}
    50%   {background-position-x: 500px;  background-position-y: 0x;; opacity: 1}
    100%  {background-position-x: 1000px; background-position-y: 0px;; opacity: 1}
}


@keyframes shipAnimation {
    0%      {background-position-x:   1000px;  background-position-y: 475px; opacity: 0.0}
    49%     {background-position-x:   1000px;  background-position-y: 475px; opacity: 0.0}
    50%     {background-position-x:   1000px;  background-position-y: 475px; opacity: 0.5}
    /*75%  	{background-position-x:   500px; background-position-y: 25px;; opacity: 1.0}
    100%    {background-position-x:   0px;  background-position-y: 225px;; opacity: 0.75}*/
    100%    {background-position-x:   330px;  background-position-y: -25px;; opacity: 1}
}



@keyframes floatAnimation {
    0%    {background-position-x: calc(var(--start-pos) + 0px);    background-position-y: 0px;}
    10%   {background-position-x: calc(var(--start-pos) + 100px);  background-position-y: 20px;}
    20%   {background-position-x: calc(var(--start-pos) + 200px);  background-position-y: 0px;}
    30%   {background-position-x: calc(var(--start-pos) + 300px);  background-position-y: 20px;}
    40%   {background-position-x: calc(var(--start-pos) + 400px);  background-position-y: 0px;}
    50%   {background-position-x: calc(var(--start-pos) + 500px);  background-position-y: 20px;}
    60%   {background-position-x: calc(var(--start-pos) + 600px);  background-position-y: 0px;}
    70%   {background-position-x: calc(var(--start-pos) + 700px);  background-position-y: 20px;}
    80%   {background-position-x: calc(var(--start-pos) + 800px);  background-position-y: 0px;}
    90%   {background-position-x: calc(var(--start-pos) + 900px);  background-position-y: 20px;}
    100%  {background-position-x: calc(var(--start-pos) + 1000px); background-position-y: 0px;}
}

@keyframes floatAnimation_ {
    0%   {transform: translateZ(0) translateX(0px) translateY(0px);}
    10%  {transform: translateZ(0) translateX(100px) translateY(20px);}
    20%  {transform: translateZ(0) translateX(200px) translateY(0px);}
    30%  {transform: translateZ(0) translateX(300px) translateY(20px);}
    40%  {transform: translateZ(0) translateX(400px) translateY(0px);}
    50%  {transform: translateZ(0) translateX(500px) translateY(20px);}
    60%  {transform: translateZ(0) translateX(600px) translateY(0px);}
    70%  {transform: translateZ(0) translateX(700px) translateY(20px);}
    80%  {transform: translateZ(0) translateX(800px) translateY(0px);}
    90%  {transform: translateZ(0) translateX(900px) translateY(20px);}
    100% {transform: translateZ(0) translateX(1000px) translateY(0px);}
}

.ignore-css
{
    all:unset;
}


#parallax {
  display: block;
}
#nonparallax {
  display: none;
}


 /* OVERRITES!!! Disables animation */
@media (max-width: 768px) {
    #cloud-1, #cloud-2, #cloud-3, #cloud-4, #cloud-5 {
        animation: none !important; /* Disables animation */
    }
}