body { 
  height: 100%;
  width: 100%;
  background-image: url('bg-stripeblues-horz.png');
   background-repeat: repeat;
   background-size: 10px 10px ;
   background-position: left;
  cursor: url(3DArrow.png), auto;
  overflow-x: hidden;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  place-items: center;
}
    a:hover {
     cursor: url('3DArrow-hover.png') 32 0, auto;
   }
   
span { display: inline-block; margin: 0; }

br{ display: block; }

p { margin: 0; }

#header {
  display: flex;
  width: 45%;
	height: fit-content;
	margin: 10px auto 0 auto;
	border: 6px groove rgba(255, 51, 0, 0.70);    
	animation: border-pulse 0.8s steps(3) infinite;
}

.logo-icon {
 width: 100%;
 height: auto;
 aspect-ratio: 1044 / 185;
 display: block;
 background: url('icon-spritesheet.png');
  background-position: 0 0;
  background-size: 100%;
  animation: iconhead 3.5s steps(16) infinite;
}
 @keyframes iconhead {
    to { background-position: 0 -1600%; }
  }
  @keyframes border-pulse {
  0% { border-color: rgba(255, 51, 0, 0.70); }
  50% { border-color: rgba(255, 111, 0, 0.70); }
  100% { border-color: rgba(255, 189, 0, 0.70); }
}
  
  
  
#message {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 50%;
  height: auto;
  padding: 5px 0;
  font-family: 'cairo';
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.2;
  text-align: center;
  border: 4pt double #000323;
  background: rgba(255, 51, 0, 0.70);
}
  @font-face {
    font-family: 'cairo';
    src: url('/fonts/cairo-regular.TTF') format('truetype');
  }


.animations-box {
   display: flex;
   position: relative;
   width: 30%;
   height: auto;
   padding: 2px 2px 2px 2px;
   align-items: center;
   justify-content: center;
   place-self: center;
 }
  .shell {
    position: relative;
    display: block;
    z-index: 1;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background: url('ani-rollinspite.png');
    background-position: 0 0;
    background-size: 1500%;
    animation: spriteshell 2.4s steps(15) infinite;
  }
   @keyframes spriteshell {
     to { background-position: -1500%; }
   }

 .ani-txt {
   position: absolute;
   z-index: 2;
   width: 85%;
   height: auto;
   animation: shellwords 2s ease-in-out infinite;
   animation-direction: reverse;
 }
  .ani-txt:hover {
    animation-direction: normal;
  }
    @keyframes shellwords {
      0% { content: url('ani-rollinword04.png') ; }
      10% { content: url('ani-rollinword03.png') ; }
      20% { content: url('ani-rollinword02.png') ; }
      30% { content: url('ani-rollinword01.png') ; }
      40% { content: url('ani-rollinword05.png') ; }
      100% { content: url('ani-rollinword05.png') ; }
     }
  
  
.strata-boxed {
  position: absolute;
  width: 30%;
  height: auto;
  aspect-ratio: 600 / 438;
  top: 25%;
  left: 1%;
}
   .strata-onee {
     display: block;
     width: 100%;
     height: auto;
     aspect-ratio: 600 / 438;
     background: url('strata-one-sprite.png');
     background-position: 0 0;
     background-size: 3300%;
     animation: stratacut1 3.5s steps(33) infinite alternate; 
   }
    @keyframes stratacut1 {
      to { background-position: -3300%; }
    }  
 
.strata-boxed2 {
  position: absolute;
  width: 23%;
  height: auto;
  aspect-ratio: 592 / 600;
  top: 25%;
  right: 3%;
}
   .strata-twoo {
     display: block;
     width: 100%;
     height: auto;
     aspect-ratio: 592 / 600;
     background: url('strata-two-sprite.png');
     background-position: 0 0;
     background-size: 2200%;
     animation: stratacuttwoanimation 2.5s steps(22) infinite alternate; 
   }
     @keyframes stratacuttwoanimation {
       to { background-position: -2200%; }
     }  
  
.strata-boxedtemper {
  position: relative;
  width: 300px;
  height: auto;
  aspect-ratio: 400 / 300;
  background-color: rgba(255, 51, 0, 0.70);
  border: 5px double #000000;
  padding: 10px;
  margin-bottom: 20px;
}
   .strata-temper {
     filter: brightness(2);
     display: block;
     width: 100%;
     height: auto;
     aspect-ratio: 400 / 300;
     background: url('stratatemper-sprite.png');
     background-position: 0 0;
     background-size: 5400%;
     animation: stratacuttemper 5s steps(54) infinite alternate; 
   }
     @keyframes stratacuttemper {
       to { background-position: -5400%; }
     } 
     
     
.frame-animation01 {
  display: flex;
 position: relative;
 width: 40%;
 height: auto;
 aspect-ratio: 800 / 614;
 overflow: hidden;
 justify-content: center;
 align-items: center;
}
  .ani-frame01 {
    position: absolute;
    display: block;
    z-index: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 800 / 614;
    background: url('brdr-sprite.png');
    background-position: 0 0;
    background-size: 300%;
    animation: framed01 .5s steps(3) infinite alternate; 
  }
  @keyframes framed01 {
   to { background-position: -300%; }
 } 
 
 .framed-photo01 {
   display: flex;
  position: absolute;
  z-index: 1;
  width: 67.5%;
  height: auto;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  cursor: pointer;
 }
  .framed-photo01 img {
    width: 100%;
    height: auto;
    scroll-snap-align: start;
  }
  
  
.frame-animation02 {
  display: flex;
 position: relative;
 width: 40%;
 height: auto;
 aspect-ratio: 870 / 700;
 overflow: hidden;
 justify-content: center;
 align-items: center;
}
  .ani-frame02 {
    position: absolute;
    display: block;
    z-index: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 870 / 700;
    background: url('frame-swigle-sprite.png');
    background-position: 0 0;
    background-size: 1400%;
    animation: framed02 2s steps(14) infinite alternate; 
  }
  @keyframes framed02 {
   to { background-position: -1400%; }
 } 
 
 .framed-photo02 {
   display: flex;
  position: absolute;
  z-index: 1;
  width: 68%;
  height: auto;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  cursor: pointer;
 }
  .framed-photo02 img {
    width: 100%;
    height: auto;
    scroll-snap-align: start;
  }
  

/* ---------------------MEDIA CHANGE-----------MEDIA CHANGE------------------MEDIA CHANGE----------------------MEDIA CHANGE-----------------MEDIA CHANGE----------- */

@media (max-width: 600px) { 

span { display: block; margin: 0; }

br{ display: none; }

#header {
  width: 75%;
	height: fit-content;
	border: 3px ridge rgba(255, 51, 0, 0.70);    
}

#message {
  width: 80%;
  height: auto;
  font-weight: 550;
  font-size: 0.7rem;
  line-height: 1.2;
}

.strata-boxed {
  position: absolute;
  width: 30%;
  height: auto;
  aspect-ratio: 600 / 438;
  top: 32%;
  left: 2%;
}
.strata-boxed2 {
  position: absolute;
  width: 23%;
  height: auto;
  aspect-ratio: 592 / 600;
  top: 32%;
  right: 5%;
}
.strata-boxedtemper {
  position: relative;
  width: 70%;
  height: auto;
  aspect-ratio: 400 / 300;
  background-color: rgba(255, 51, 0, 0.70);
  border: 5px double #000000;
  padding: 10px;
  margin-bottom: 20px;
}

.frame-animation01 {
  width: 80%;
  height: auto;
} 
.frame-animation02 {
  width: 80%;
  height: auto;
} 
  
}