body { 
    background-image: url('bg-stripeblues-horz.png');
   background-repeat: repeat;
   background-size: 10px 10px ;
   background-position: left;
    cursor: url(3DArrow.png), auto;
    height: fit-content;
    width: 99.9%;
    overflow-x: hidden;
    margin: 0;
  }
    a:hover {
     cursor: url('3DArrow-hover.png') 32 0, auto;
   }
   
 smallfont {
   font-size: 10pt; 
   margin-left: 10px;
 }
 underline {
   text-decoration: underline;
   color: #000000;
 }
 
 work-prog {
  font-weight: bold;
  font-size: 14pt;
  color: #ffcc99;
  background-color: #000000;
}
 
 
/* --------HEADER----------HEADER-------HEADER----------- */
 #header {
    display: flex;
    width: 99%;
	  height: fit-content;
	  background-image: url('bg-wavyblues-horz.png');
	  background-repeat: repeat;
    background-size: 100px 10px ;
    background-position: left;
	  margin: 10px auto 0 auto;
	  border: 6px inset #000000; 
   }
  .title-image {
    content: url('full-title-color.png');
   width: 580px;
   height: auto;
   margin-left: auto;
   margin-right: auto;
   padding: 5px 25px 5px 25px;
   background-color: rgba(102, 179, 255, 0.65);
  }
  
#banjo-butt {
  position: absolute;
  top: 75px;
  right: 15px;
  width: 225px;
  height: auto;
  content: url('banjo-close.png');
  object-fit: contain;
}
  #banjo-butt:hover {
    content: url('banjo-open.png');  
  }
  
/* ----------------HEAD FOOTER------------------HEAD FOOTER---------------HEAD FOOTER------------------- */
#head-footer {
   display: grid;
   grid-template-columns: 10% 20% 20% 35% 10%;
   gap: 10px;
   margin: 0;
   padding: 0 0;
   width: 100%;
   height: auto;
   background-image: url('bg-red-ylw-diamond.png');
   background-repeat: repeat;
   background-size: 10px 10px ;
   background-position: left;
   align-items: center;
   justify-content: center;
   place-items: center;
 }

.rinmen-side {
  display: flex;
  height: 250px;
  width: 100%;
  padding: 10px 0;
  background-image: url('bg-paper.png');
	   background-repeat: repeat;
     background-size: 80px auto ;
     background-position: left;
  border: 4pt double #2873ff;
  justify-content: center;
} 
  .rinmen-side img {
    width: auto;
    height: 100%;
    animation: rinanimation 3s ease-in-out infinite alternate;
    filter: drop-shadow(4px 6px 4px rgba(0, 0, 0, 1));
  }
    @keyframes rinanimation {
	        0% {transform: rotate3d(0, 1, 0, -25deg) scale(1.0); }
	        100% {transform: rotate3d(0, 1, 0, 25deg) scale(1.0);}
        }
  .email-list {
    position: relative;
   border: 2px dashed #000000;
   background: rgba(171, 204, 237, 0.90);
   width: 95%;
   height: 60%;
   margin: 0;
   padding: 0;
   text-align: center;
   align-content: center;
   font-size: 1rem;
   font-family: 'Courier New';
   }
 .myartdraw-boxes {
   display: flex;
   position: relative;
   width: 80%;
   height: auto;
   padding: 2px 2px 2px 2px;
   align-content: center;
 }
   .myartdraw-red {
     position: relative;
     z-index: 1;
     content: url('draw-titleredlayer.png');
     width: 100%;
     height: auto;
     animation: red-grow .7s linear infinite alternate;
   }
     @keyframes red-grow {
        0% { transform: scale(1.0) rotate(-.5deg); }
        100% { transform: scale(1.04) rotate(1deg); } 
       }

   .myart-txt {
     position: absolute;
     z-index: 2;
     content: url('draw-titlemyart.png');
     width: 100%;
     height: auto;
   }
    .myart-txt:hover {
      transform: scale(1.2); 
    }
   .mydraw-txt {
     position: absolute;
     z-index: 2;
     content: url('draw-titlemydrawings.png');
     width: 100%;
     height: auto;
   }
    .mydraw-txt:hover {
      transform: scale(1.2); 
    }
  
  
  .myani-boxes {
   display: flex;
   position: relative;
   width: 80%;
   height: auto;
   padding: 2px 2px 2px 2px;
   align-content: center;
 }
 .shelly {
  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%; }
  }
  
 .myani-txt {
   position: absolute;
   z-index: 2;
   width: 100%;
   height: auto;
   animation: shellwords 2.5s ease-in-out infinite;
 }
    @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-box {
  position: absolute;
  width: 17%;
  height: auto;
  aspect-ratio: 600 / 438;
  top: 8%;
  left: 2%;
}
.strata-box2 {
  position: absolute;
  width: 17%;
  height: auto;
  aspect-ratio: 600 / 438;
  top: 8%;
  right: 2%;
}
.strata-one {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 438;
  background: url('strata-one-sprite.png');
  background-position: 0 0;
  background-size: 3300%;
  animation: stratacut 3.5s steps(33) infinite alternate; 
}
 .strata-one:active {
  
 }
 @keyframes stratacut {
   to { background-position: -3300%; }
 }
 


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

@media (max-width: 600px) {
 
#yelgren-home {
  top: 12%;
  left: 5%;
  height: auto;
  width: 25%;
}

  body-clayface {
   background-size: 40px auto;
   background-position: left;
   justify-content: center;
   width: 100vw;
   height: 100vh;
  }
  #full-clayface {
   width: 90%;
   height: auto;
   margin: 0 0 0 -30px;
  }
   #full-clayface img {
     width: 90%;
     height: auto;
   }
   
   
 #draw-header {
    display: flex;
    width: 90%;
	  height: fit-content; 
   }   
 .title-image-draw {
   content: url('full-title-color.png');
   width: 60%;
   height: auto;
  }   
 #main-draw {
  flex-direction: column;
  justify-items: center;
 }
 .promo-column {
  width: 90%;
  height: 100%;
 }
 .mydrawings-grid {
  width: 90%;
  height: auto;
  }
  #mydraw-title {
   content: url('drawing-title.png');
   background-color: #9a8e52;
   width: 80%;
   height: auto;
  }
}


/* --------home page media change-----------home page media change--------home page media change----------- */
@media (max-width: 1500px) {
  
  
.eyeonyou {
	left: 4%;
}

.rinmen-side {
  display: flex;
  height: 200px;
  width: 100%;
} 

smallfont {
   font-size: 8pt; 
   margin-left: 10px;
 }
.email-list {
   border: 2px dashed #000000;
   background: rgba(171, 204, 237, 0.90);
   padding: 5px;
   font-size: 1.1rem;
   font-family: 'Courier New';
   }
 .myartdraw-boxes {
   display: flex;
   position: relative;
   width: 90%;
   height: auto;
   padding: 2px 2px 2px 2px;
   align-content: center;
 }
 
 
 
 .clayface-title {
   width: 93%;
	 height: 170px;
	 margin: 10px auto 10px auto;
	 padding: 10px;
	}
    .cf-email {
        bottom: 14%;
        transform: rotate(-9deg);
        width: 23%;
        height: auto;
      }
    .cf-price {
        bottom: 14%;
        transform: rotate(8deg);
        width: 25%;
        height: auto;
      }
  .clayface-grid {
	  grid-template-columns: repeat(2, 1fr);
	  grid-template-rows: repeat(4, 1fr);
	  width: 95%;
	  height: fit-content;
	  row-gap: 5px;
	  column-gap: 5px;
	  padding: 0 25px 0 25px;
	     
   }
  .clayface { 
    height: auto;
    width: 60%;
  }

 
}