body {
  font-family: 'Arial';
	background-image: url('yellowhands.jpeg');
	background-repeat: repeat;
  background-size: 700px auto;
  background-attachment: fixed;
  background-position: left;
  width: 100%;
  height: 100%;
  cursor: url('blackberry-curs.png'), auto;
  overflow-x: clip;
}
  a {
	  color: #ff0000;
	  text-decoration: none;
	}
	
    a:hover {
      cursor: url('blackberry-curs-big.png'), auto;
    }
    
  argentpixel-it {
    font-family: 'argent-pixel-cf'; 
    font-style: italic;
  }
  argentpixel {
    font-family: 'argent-pixel-cf'; 
    font-style: ;
  }
  garamond {
    font-family: 'Garamond';
  }
  
  
  hiliter {
	  background-color: #000000;
	  color: #ff00ff;
	}
	hiliter-two {
	  background-color: #003b00;
	  color: #ff5024;
	}
	  black-bg {
	    background-color: #000000;
	  }
	  green-bg {
	    background-color: #003b00;
	  }
	.link-decor {
	  margin: 140px 0 0 25px; 
	  padding: 2.5px 4px 6px 4px;
	  font-size: 12pt;
	}
	   red-black-txt {
	     text-decoration-line: underline;
	     text-decoration-style: wavy;
	     background-color: #000000;
	     color: #ff0000;
	     padding: 5px;
	     border: 3px outset #8c8c8c; 
	   }
	     red-black-txt:hover {
	       border: 3px inset #8c8c8c;
	       cursor: url('blackberry-curs-big.png'), auto;
	     }
	   white-purp-txt {
	     text-decoration-line: underline;
	     text-decoration-style: wavy;
	     background-color: #990099;
	     color: #b3ffff;
	     padding: 5px;
	     border: 3px outset #cc00cc; 
	   }
	     white-purp-txt:hover {
	       border: 3px inset #cc00cc;
	       cursor: url('blackberry-curs-big.png'), auto;
	     }
	   lime-blue-txt {
	     text-decoration-line: underline;
	     text-decoration-style: wavy;
	     background-color: #000066;
	     color: #ccff99;
	     padding: 5px;
	     border: 3px outset #000099; 
	   }
	     lime-blue-txt:hover {
	       border: 3px inset #000099;
	       cursor: url('blackberry-curs-big.png'), auto;
	     }
	
#purp-butt {
  position: fixed;
  top: 20px;
  right: 80px;
  background-image: url('purp-butt.png');
  width: 64px;
  height: 64px;
  object-fit: contain;
  opacity: 1;
}
  #purp-butt:active {
    background-image: url('purp-butt-press.png') 
  }
	
@keyframes jiggle {
   0% { transform: rotate(-10deg) }
	 100% { transform: rotate(10deg) }   
}

#header {
  width: 100%;
	height: 80px;
	padding-top: 3%;
}  
  .tg-logo {
    width: 404px;
    height: auto;
    margin: 0 0 0 0;
  }
    
#main {
  display: flex;
	width: 100%;
	height: auto;
	flex-wrap: wrap;
	row-gap: 30px;
	align-items: center;
	justify-content: start;
	margin: 20px 0px 65px 0px;
 }
   .banner-photo {
     width: auto;
     height: auto;
     object-fit: contain;
	 }
	   .alb-cover {
	     overflow: visible;
	   }
	     .alb-cover img {
	       border: 1px inset #000000;
	       height: auto;
	       width: 300px;
	       transition: transform 2s ease-in-out; 
	       transform-origin: center;
	      }
	     .alb-cover:hover {
	       transform: scale(1.1);
	      }
   .banner {
     min-width: 50%;
     height: auto;
	   padding-top: 20px;
	   text-align: center;
	   font-size: 23pt;
	 }
	   .newrelease-animation {
	     animation: getbigger 1.5s ease-in-out infinite alternate;            
     }
     @keyframes getbigger {
       0% { transform: scale(15%, 15%) rotate(-20deg); } 
       75% { transform: scale(110%, 110%) rotate(7deg); }
       100% { transform: scale(110%, 110%) rotate(7deg); }
     }
      
#releases {
  display: flex;
  width: fit-content;
	height: fit-content;
	gap: 20px;
	margin-left: 45px;
	margin-top: 30px;
	font-family: 'pf-pixelscript';
	font-size: 13pt;
}
  
#list-merch {
  display: grid;
  grid-template-columns: 38% 62%;
  grid-auto-flow: row;
  margin-top: -15px;
  width: 100%;
  height: auto;
  gap: 20px 50px;
}
   .release-list {
     width: auto;
	   height: fit-content;
	   margin: 0 0 0 50px;
	   padding: .5px 0 0 0;
	   border-left: 2px dotted #000000;
	   text-indent: -10px;
	   font-size: 13pt;
	  }
	    .release-list li {
	      padding: 3px;
	    }
	    .release-list li:hover {
	      transform: scale(1.1); 
	      transform-origin: 0 0;
	    }
	    
	 .merch {
	   display: grid;
	   grid-template-columns: repeat(3, 1fr);
	   gap: 15px;
	   height: fit-content;
	   width: auto;
	   object-fit: contain;
	  }
	    .merch img {
	      margin: auto;
	      height: 350px;
	      width: auto;
	     }
	    .cosmic-buttons {
	     display: flex;
	     flex-direction: column;
	     }
	     
#bio {
	height: fit-content;
	width: 95%;
	font-family: 'Garamond';
	font-style: italic;
	font-size: 26pt;
	padding: 10px;
	overflow-wrap: break-word;
	margin: 80px 0 0 15%;
}
   #bio img {
     width: 250px;
     height: auto;
     float: left;
     shape-outside: url('tape player right.PNG');
     margin: 25px 0px -15px 50px;
     padding: 0 20px 0 0;
     transition: transform 0.5s ease-in-out;
   }
    #bio img:hover {
        transform: scale(1.5) ; 
        transform-origin: left;
        cursor: url('blackberry-curs.png') 32 0, auto;
      }
	 
	   
#button-pin {
  content: url('cosmicblue.png');
  height: 90px;
  width: 90px;
  margin: 20px 0 0 60px;
  animation: cosmic-swap 3s infinite alternate; 
}
  @keyframes cosmic-swap {
    0% { content: url('cosmicblue.png'); }
    25% { content: url('cosmicpurp-spin.png'); }
    50% { content: url('cosmicblue.png'); }
    75% { content: url('cosmicpurp-spin.png'); }
    100% { content: url('cosmicblue.png'); }
  }

#bobbi-pin {
  content: url('bobbi-pin.png');
  height: 90px;
  width: 90px;
  margin: 20px 0 0 0;
  animation: spin 4s ease-out infinite;
}
  @keyframes spin {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(2160deg); }
    100% { transform: rotate(2160deg); }
  }


	   
#footer {
  display: flex;
  flex-direction: column;
  min-width: 100%;
	height: 120px;
	padding-bottom: 40px;
	align-items: center;
	justify-content: end;
	gap: 8px;
}

.dev-credit {
  display: flex;
	border: 1px solid #e60000;
	font-size: 7pt;
  font-style: italic;
	color: #e67300;
	background-color: #abcced;
	width: fit-content;
	height: 17px;
	align-items: center;
	padding: 2px 4px 2px 4px;
	text-align: center;
	opacity: 0;
}
 .dev-credit img {
   width: 17px;
   height: 17px;
   float: right;
   margin-left: 2px;
   position: relative;
 }
 .devtitle {
   content: url('coded-by.png');
   width: 200px;
   height: auto;
   opacity: .1; 
   transition: opacity 0.2s ease;
   position: relative;
   top: 50px;
   margin-left: auto;
   margin-right: auto;
 }
   .dev-credit:hover {
    opacity: 0;
   }
   .devtitle:hover {
    opacity: 1;
   }
   
update-txt {
	 color: #000066;
	 font-family: 'Brush Script MT';
	 font-size: 13pt;
} 
#counterbox {
   display: flex;
   width: 97%;
   height: auto;
   margin: 0 30px 0 1%;
   padding-right: 30px;
   justify-content: space-between;
}
  #counterbox a {
   opacity: 1; 
  }



/* ------------------------------------MOBILE ADAPT-------------------------------------*/
@media (max-width: 600px) {
body {
  background-size: 80px auto;
  width: 97vw;
}
  #counterbox a {
   opacity: 0; 
  }
  #main {
    flex-direction: column;
    height: auto;
  }
#purp-butt {
  opacity: 0;
}
  .tg-logo {
    width: 350px;
    margin: 0 auto 0 auto;
  }
  .release-list {
    font-size: 10pt;
    margin: 10px 0px 0px 20px;
    text-indent: -25px;
    width: 90%;
  }
  #list-merch {
    gap: 20px;
    grid-template-columns: 100%;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
  }
  .merch {
	   grid-template-columns: repeat(2, 1fr);
	   flex: 1;
	   height: fit-content;
	   width: 98%;
	   overflow-x: visible;
	 }
	 .merch img {
	   height: 270px;
	   width: auto;
	 }
  #purp-butt {
     position: absolute;
     right: 18px;
     top: 80px;
  }
  #bio {
	  height: auto;
	  width: 97%;
	  margin: 60px 0 0 0;
	  text-align: justify;
	  font-style: italic;
	  font-size: 10.5pt;
	  padding: 5px;
	  overflow-wrap: break-word;
  }
    #bio img {
     width: 130px;
     height: auto;
     margin: 40px 20px -5px 0;
     padding: 0 0px 0 0;
     float: bottom-left;
   }
	 
    .stretch-font {
    transform: scale(1.1, .7);
    }
  
.link-decor {
	  font-size: 9pt;
	  margin: 90px 0 40px 25px;
	}

  .dev-credit {
   opacity: 1; 
  }
  .dev-credit:hover {
    opacity: 1;
  }
  .devtitle {
   opacity: 0; 
  }
update-txt {
	 font-size: 10pt;
}