body { 
    background-color: #abcced; /* light blue */
    cursor: url(3DArrow.png), auto;
    height: fit-content;
    width: 99%;
    overflow-x: hidden;
  }
    a:hover {
     cursor: url('3DArrow-hover.png') 32 0, auto;
   }
   
 smallfont {
   font-size: 9.5pt; 
   margin-left: 10px;
 }
 underline {
   text-decoration: underline;
   color: #000000;
 }
   
#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');  
  }
  
  
  #header {
    display: flex;
    width: 99%;
	  height: fit-content;
	  background-color: #99ccff; /*darker blue */
	  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: #66b3ff;
  }
    

  .header-image-right {
    position: absolute;
	  top: 50px;
	  left: 15%;
	  animation: yellowface 1.45s ease-in-out infinite alternate;            
   }
  
   .rinman-banner {
     height: 220px;
     width: 110%;
     display: flex;
	   flex-wrap: nowrap;
	   column-gap: 10px;
	   margin-left: -10px;
	   background-image: url('white-paper-background.jpg');
	   background-repeat: repeat;
     background-size: 80px auto ;
     background-attachment: fixed;
     background-position: left;
	   align-items: center;
	   border: 5pt double #2873ff;
	   border-left: none;
	   overflow-x: hidden;
   }
     .rinman-banner img {
        height: 200px;
        width: auto;
     }
   
   
   .yumbo-runs {
     margin-bottom: 16px;
     animation: yumbo-animate 10s linear infinite;
  }
   
   
/* ANIMATIONS -------- */
  
  @keyframes yellowface { 
    0%  { transform: scale(1) translateX(-105%) rotate(-15deg); }
    50% { transform: scale(1.2) translateX(-47.5%) rotate(0deg); }
    100% { transform: scale(1) translateX(10%) rotate(15deg); } 
   }
  @keyframes yumbo-animate {
    0%  { transform: translateX(-150%) rotate(11deg); }
	  5%  { transform: translateX(10%) rotate(-10deg); }
	  10% { transform: translateX(60%) rotate(11deg); }
	  20% { transform: translateX(120%) rotate(-10deg); }
	  30% { transform: translateX(200%) rotate(11deg); }
	  40% { transform: translateX(280%) rotate(-10deg); }
	  50% { transform: translateX(360%) rotate(11deg); }
	  60% { transform: translateX(440%) rotate(-10deg); }
	  64% { transform: translateX(400%) rotate(11deg); }
  	66% { transform: translateX(410%) rotate(-5deg); }
  	68% { transform: translateX(420%) rotate(5deg); }
  	70% { transform: translateX(430%) rotate(-5deg); }
	  72% { transform: translateX(440%) rotate(5deg); }
	  74% { transform: translateX(450%) rotate(-5deg); }
	  76% { transform: translateX(460%) rotate(5deg); }
	  78% { transform: translateX(470%) rotate(-5deg); }
	  80% { transform: translateX(480%) rotate(5deg); }
  	82% { transform: translateX(490%) rotate(-5deg); }
	  84% { transform: translateX(500%) rotate(5deg); }
	  87% { transform: translateX(200%) rotate(-360deg); }
	  92% { transform: translateX(-100%) rotate(-720deg); }
	  100% { transform: translateX(-400%) rotate(-1080deg); }
   }
  @keyframes jiggle {
    0% { transform: rotate(-10deg) }
	  100% { transform: rotate(10deg) }
   }
   
  #main {
    height: 40%;
	  width: 100%;
    display: grid;
	  grid-template-columns: 1% 1.3fr .7fr;
	  grid-template-rows: 200px 1fr 1fr;
   }
  #snacklist {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 3;
    height: 100%;
	  width: 100%;
	  background-color: #99ccff;
    border: 2px solid #000000;
    margin-bottom: 5px;	
	  text-indent: 4px;
   }
  #sidebar {
	  grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 4;
	  height: 99.7%;
	  width: 100%;
	  background-color: #ff4d4d; /* light red */
	  border: 2.5px solid #000000;
   } 
   .drumicon {
     position: absolute;
     content: url('drums-icon.png');
     width: 64px;
     height: auto;
     margin: 10px 0 0 10px;
   }
     .lp-list {
      width: 95%;
      height: 200px;
      border-left: 4px double #ff8533;
      margin: 0 0 30px 2%;
      overflow-y: scroll;
      scrollbar-color: #ff8533 #e60000;
      scrollbar-width: thin;
      scrollbar-gutter: stable both-edges;
     }
       .lp-list-title {
         font-size: 15pt;
         font-style: bold;
         border-top: 1px dotted #000000;
         text-align: center;
         padding-top: 20px;
       }
       
  #mymusic {
    font-size: 12pt;
    border-top: 1px dotted #000000;
    text-align: right;
    padding: 20px 15px 0 0;
  }
    .soundcloud-box {
      border-top: 1px dotted #ff8533;
      border-left: 4px double #ff8533;
      padding-left: -10px;
      margin-left: 5px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 98%;
      height: 220px;
      overflow-y: scroll;
      scrollbar-color: #ff8533 #e60000;
      scrollbar-width: thin;
      scrollbar-gutter: stable both-edges;
    }
     
  #magnets-sale {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
	  height: 99%;
  	width: 99%;
	  border: 5px solid #000000;
   }
  #banjopia {
    height: 900px;
	  width: 99%;
	  background-color: #99ccff;
    border: 2px dotted #000000;
	  margin-left: 13px;
	  margin-top: 3px;
   }
  
  h1 {
    color: #b30000; /* maroon */
	  font-family: 'Impact';
	  font-size: 35pt
  }
  .name-font {
    font-family: 'goudy old style';
  }
  .banjopia-font {
    font-family: 'rockwell';
	  text-align: center;
	  font-size: 25pt;
  }  
 

  .clayface-title {
    width: 60%;
	  height: 80px;
	  border: 3px inset #000000;
	  text-align: center;
	  margin-top: 5px;
	  margin-left: 20%;
	  display: inline-block;
	  font-family: 'Showcard Gothic';
	  font-size: 22pt;
   }
  .clayface-info {
    display: grid; 
	  grid-template-columns: .75fr .75fr 1.5fr;
	  font-family: 'Century Schoolbook';
	  font-size: 11pt;
	  text-align: center;
	  margin-top: 10px;
	  padding-bottom: 5px;
	  border-bottom: 1.7px solid #cccccc;
  }
  .clayface-grid {
    display: grid;
	  grid-template-columns: repeat(4, 1fr);
	  grid-template-rows: repeat(2, 1fr);
	  width: 95%;
	  height: 76%;
	  row-gap: 5px;
	  column-gap: 5px;
	  padding: 0 25px 0 25px;
	  justify-content: center;
    place-items: center;
	  object-fit: contain;
  }
    .clayface { 
      height: 150px;
      width: auto;
      justify-content: center; 
      align-items: center;
      object-fit: contain;
    }
      .clayface img {
        height: 150px;
        width: auto;
        animation: jiggle .5s ease-in-out infinite alternate;
        transition: transform 0.3s ease-in-out;
      }
      .clayface:hover {
        transform: scale(1.5) ; 
        transform-origin: left;
        cursor: url('3DArrow-hover.png') 32 0, auto;
      }
    
  .drummer-grid {
    display: grid; 
	  grid-template-columns: 1fr 1fr 1fr;
	  font-size: 10pt;
  	row-gap: 10px;
	  text-align: center;
  }
    yellow-on-blue {
      color: #e6e600;
      background: #000080;
      padding: 2px;
    }
    purp-on-green {
      color: #ff80ff;
      background: #206020;
      padding: 2px;
    }
    .drummer-grid a {
      text-decoration: none;
    }
      .drummer-grid a:hover {
        transform: scale(1.2);
      }
  .snack-grid {
    display: grid; 
	  grid-template-columns: 1fr 1fr 1fr 1fr;
	  font-size: 12pt;
	  row-gap: 20px;
	  text-align: center;
	  align-items: center;
  }
  .banjopia-grid {
    display: grid; 
	  grid-template-columns: 1fr 1fr;
	  justify-items: center;
	  row-gap: 10px;
	  column-gap: -15px;
  }
  
  #footer {
    height: 90px;
	  background-color:; 
	  margin-top: 30px;
  }	
  
/* -----------CLAYFACE FULL IMAGE----------- */

body-clayface {
  display: flex;
  width: 100%;
  height: auto;
  padding: 30px 0 0 30px;
}
#full-clayface {
  border: 3px ridge #000000;
  background-image: url('grass.png');
  background-repeat: repeat;
  background-size: 40px auto;
  background-attachment: fixed;
  background-position: left;
  padding: 20px;
  width: auto;
  height: 550px;
  object-fit: contain;
  justify-content: center; 
  align-items: center;
}
   #full-clayface img {
     width: auto;
     height: 550px;
   }

/* -----------MEDIA COLLECTION PAGE----------- */

body-collection { 
    background-color: #abcced; /* light blue */
    cursor: url(3DArrow.png), auto;
    height: fit-content;
    width: 99%;
    overflow-x: hidden;
  }
work-prog {
  font-weight: bold;
  color: #ffcc99;
  background-color: #000000;
}
last-update {
  color: #abcced;
  background-color: #ff3333;
  font-size: 9pt;
  font-style: italic;
}
date {
  font-family: 'Cascadia Code';
  font-size: 10pt;
  color: #ffff00;
  background-color: #000000;
}
  
#media-body {
  display: grid;
  grid-template-columns: .5fr 2fr .5fr;
  width: 100%;
  height: fit-content;
  justify-content: center;
}
.band-photos {
  background: #66b3ff;
  border: 3px dashed #ffff00;
  display: flex;
  flex-direction: column;
  gap: px;
  margin-top: 30px;
  width: 100%;
  height: auto;
  align-items: center;
  font-size: 9pt;
  font-family: 'Courier New';
  text-align: center;
}
  .band-photos img {
    width: 90%;
    height: auto;
    border: 4px ridge #000000;
  }
  
.lp-container {
   border: 15px double #e60000;
   width: 94%;
   height: 40000px;
   margin: 0 auto 0 auto;
}
 #lp-title {
   width: fit-content;
   height: fit-content;
   margin: 0 auto 0 auto;
   padding: 3px 3px 1px 3px;
   font-family: 'Courier New';  
   font-style: bold;
   font-size: 16pt;
   background-color: #cc0000;
   border: 3px ridge #ff471a;
 }

/* -----------myDRAWIGNS PAGE----------- */

.title-image-draw {
    content: url('full-title-color.png');
   width: 580px;
   height: auto;
   margin-left: 50px;
   padding: 5px 25px 5px 25px;
   background-color: #66b3ff;
  }
#main-draw {
  display: flex;
  flex-direction: column;
  border: 4px double #000598;
  width: 99%;
  height: fit-content;
  flex-wrap: wrap;
}
#mydraw-title {
   content: url('drawing-title.png');
   background-color: #9a8e52;
   width: 420px;
   height: auto;
   margin: 20px auto 25px 80px;  
   padding: 8px 110px 9px 110px;
   border-top: 8px double #b93743;
   border-right: 2.3px dotted #b93743;
   border-bottom: 8px double #b93743;
   border-left: 2.3px dotted #b93743;
}
  
.mydrawings-grid {
  display: flex;
	flex-wrap: wrap;
	gap: 20px;
  width: 100%;
  height: auto;
  margin-left: -2.5px;
  justify-content: center; 
  align-items: center;
}
  .drawing {
    display: flex;
    width: auto;
    height: auto;
    object-fit: scale-down;
    justify-content: center; 
    align-items: center;
  }
    .drawing img {
       max-height: 800px;
       width: auto;
    }
  .drawing-four {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 25%;
    height: auto;
    gap: 10px;
    object-fit: scale-down;
    justify-content: center;
    place-items: center;
  }
    






/* ------END----- */