/* ===== Body CSS ===== */
body {		
				background-image: url('https://joy-stick.org/img/STRIPES-ANIMATED.gif');
				background-size: 								 16px;
				background-blend-mode: 			 multiply;
				font-family: 'Courier New', monospace;
				background-color: 							 #000;
				overflow-x: 										 auto;
				color: 													 #999; }
/* ===== BG CSS ===== */
	div.BG {	
				z-index: 					 -2;
				position: 			fixed;
				bottom: 				0px;
				right: 					 -4px;
				max-width: 		 	 100%;
				overflow: 		 hidden; 
				filter:  opacity(20%); }
	img.BG {
				height: 						 124px;
				filter: 		grayscale(80%);
				image-rendering: pixelated; }
/* ===== General CSS ===== */
hr{ border-bottom: 1px dashed #ffa5e0; }
a { 			color: #ffa5e0; }
a:hover { color: #a5ffc4; }
h1 {    text-transform: 		 uppercase;
				z-index: 										 2;
				font-family: 				 monospace;
				font-size: 								18px;
				color: 										#a5ffc4;
				margin-left: 							26px;
				margin-right: 						16px; 
				border-bottom: 1px dashed #666;
				font:  bold 18pt "Lucida Console"; }
h2 {
			color: 												#a5ffc4;
			font-size: 											 22px;
			margin-left: 											8px;
			text-decoration: 						underline; }
h4 { 
				font-family: 				 monospace;
				font-size: 								18px;
				color: 										#fff;
				margin-left: 							16px;
				margin-right: 						16px; }
/* ===== GRID CSS ===== */
.GRIDcontainer {  
	display: grid;
  grid-template-columns: 0.2fr 2.9fr 0.4fr;
  grid-template-rows: 0.4fr 2.7fr;
  gap: 0px 0px;
  grid-auto-flow: row;
	
	background-image: url('https://cavicakes.neocities.org/image/24percent.png');
	background-size: contain;
	background-position: bottom left;
	background-repeat: no-repeat;
box-shadow:  -124px -224px 180px -30px #000 inset;																																					
border-bottom: 24px double #000;
	margin-top: -8px;
	margin-left: -8px;
	margin-right: -8px;
		min-height: 800px;
	min-width: 500px;
	color: #a5ffc4;
}
	.Header { 
	grid-area: 1 / 2 / 2 / 3;
	background-repeat: no-repeat;
	background-size: contain;
		max-height: 112px;
}
	.linkout { 
	filter:opacity(50%);
	grid-area: 1 / 3 / 2 / 4; 
	background-image: url('https://cavitees.com/images/download.png');
	background-size: 112px;
	background-position: top;
	background-repeat: no-repeat;
	border-left: 24px double #000;
		max-height: 124px;
}
	.Row_01 { 
	grid-area: 1 / 1 / 2 / 4;
	border-bottom: 4px solid #000;
	z-index: -10;
	background-image: url('https://crystal-lionheart.neocities.org/img/graphics/sparkles_Grey.gif');
	background-size: cover;
	background-position: center;
	image-rendering: pixelated;
				max-height: 112px; }
	.Row_02 { 
	grid-area: 2 / 2 / 3 / 4;
		max-height: 824px;
		border: 0px solid red;
		overflow: auto;
}
	.Nav_L { 
	grid-area: 2 / 1 / 3 / 2;
	border: 2px solid black;
	
}
/* ============================ */
/* ===== NAVBAR CSS ===== */
div.navbox {
	background-color: #000; 
						margin-left: -4px;
						padding-top: 18px;
						padding-left: 8px;
						padding-bottom: 0px;
						text-align: justify;
max-height: 48px;
min-width: 204px;
}
	 .navlink {
	color: #000;
	font-size: 24px;
	margin-left: 21px;
	text-decoration: none;
	text-transform: ;
	font-style: ;
font-variant: small-caps;
	font-weight: ;
	
	
}
	 .navlink:hover{
	text-decoration: underline;

} 
	 .nav_active {
	color: #a5ffc4;
}
	 .nav_active:before{
	margin-left: -8px;
	content: url("https://cavitees.com/img/caviEXEsparkle.png");

}
/* ============================ */
/* ===== SIDEBAR CSS ===== */
	div.bottom-box {
	background-image: url('https://crystal-lionheart.neocities.org/img/graphics/sparkles_Grey.gif');
	background-size: 			1082px;
	background-position:  center;
	image-rendering:   pixelated;
	border-top:  6px dashed #000;
	height: 								64px;
	overflow: 						hidden;
	padding: 								32px;
	text-align: 				 justify;
	line-height: 						250%; }
	 	 .patreon {
	filter: hue-rotate(140deg);
}
/* ===== Icon CSS ===== */
	div.avvie {
				float: left;
				z-index: 				 3;
				position: relative;
				top: 				 0px;
				left: 			 0px;
				width: 			 148px;
				height: 		 112px;
				border:  4px solid #000;
				border-bottom: 4px solid #000;
				border-left: hidden;
				border-top: hidden;
				box-shadow: -2px 3px 0px #000;				
				background-image: url('https://cavitees.com/images/Retro-Cavi_idle.gif'); 
				background-size: cover;
				image-rendering: pixelated;
				background-color: 		 #000;
				background-position: center;
				background-repeat: 	 repeat;
				filter: 		 grayscale(64%); }
	img.avvie {
				border-style: 			hidden;
				width: 								100%;
				image-rendering: pixelated; }
/* ============================ */
/* ============================ */
/* ===== MAIN TEXTBOX BOX CSS ===== */
div.main { 
	border: 						0px solid red;
	padding-left: 			 0px;
	padding-right: 			48px;
	padding-top: 				 0px;
	  background: 				rgb(0, 0, 0);
  	background: 	rgba(0, 0, 0, 0.5); 
	min-height: 										 800px;
	font-family: 	'Comfortaa', cursive;
	font-size: 						14px;
	word-spacing: 				 2px;
	word-break: 		break-word;
	text-align: 			 justify;  
  text-justify: 	inter-word;
	line-height: 					150%; }
div.blog {
	border: 0px dotted #a5ffc4;
	height: 							100%;
	width:  							100%; 
	background: 			rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); 
	overflow: 						auto;
	padding: 							16px;
	color: 								#999; }
	p.blog {
	text-indent: 	1cm;
	color: 		#a5ffc4;
	padding: 				4px;
	padding-right:  16%;}
	a.blog {}
	a.blog:hover {}
	b.blog {}
	h5.blog {
	border-bottom: 		1px dashed #ffa5e0;
	text-transform: ;
	font:  		bold 12pt "lucida console";
	text-align: 		left;
	padding-left: 	 0px;
	margin-left: 		64px;
	color: 			 #a5ffc4; }
	h4.blog {
	padding-right: 24px; }
 img.blog { }
/* ============================ */
/* ===== Accordian Galleries CSS ===== */
#GalleryBox {	


}
.Galleries {
	position:relative;
	min-height: 0px;
	margin-bottom: 0px;}
.gallery_bar {
background-color: 	transparent;
border: 								 hidden;
box-shadow: 24px -24px 14px -16px #000 inset;																																					
	background-position: center;																							
	background-size: 			cover; 
	height: 	98px; width:100%;
	background-position: center;
	background-size: cover; }
.gallery_bar:active{
	filter: opacity(80%);}
.gallery_bar:hover {
	cursor: pointer;}
.gallery_bar:after {
  content: '\002B';
  font-weight: bold;
	font-size: 42px;
  float: right;
  margin-left: 5px;
	color: transparent;
background: #2affaf;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
text-shadow: -2px -1px 0px #fff;
}
.active:after {
  content: "\2212";
	
}
.content {
  padding: 0px;
	margin-top: 0px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
	border-bottom: 0px dashed #f7ffbb;
}
.lightshadow {
		box-shadow: 220px 0px 48px 10px #fff inset;																																					
}
.darkshadow {	
		box-shadow: 220px 0px 48px 10px #000 inset;																																					
}
/* ===== Hover-Preview CSS ===== */
#tiles {
	  transition: max-width 0.2s ease-out;
	overflow: auto; 
	padding-top: 0px;
	height: 				700px;
	width: 	100%; 
	overflow-y: scroll;
	position: relative;
	margin-right: 124px;
background-color: #f7ffbb;
 }
#tiles img {
	width: 25%;}
#preview_box {																																				
	background-size: 			contain;
	background-position:  left top;
	background-repeat: 		no-repeat;
	margin-top: 	 0px;
	height: 				824px;
	width: 624px;																																		


	position: relative;}
/* ============================ */
/* ===== Image Gallery CSS ===== */
	div.gridbox {
position: relative;}
	.masonry-grid {	
	

	column-count: 		 3;
	width: 					100%; }
	.masonry-grid_item {
	position: relative;}
	img.masonry-grid {
	border-radius: 0px 0px 0px 36px;
	border-bottom: 8px solid red;
	border-right: 8px solid red;
	width: 				 124px;}
	.zoom {
  transition: transform .3s;
  margin: 					 0 auto; }
	.zoom:hover {
	transition: transform .4s;
  transform: 			scale(2.5);
	position: ;
	}
	.fuckass {
	
position: absolute;
	bottom: 0px;
	left: 0px; width: 112px; height: 16px;
	background-position: right;
	padding: 16px;
	font-size: 12px;
	background-repeat: no-repeat;
	border: 1px dashed red;
	border-top: hidden;
	border-right: hidden;
	margin-bottom: 0px;
	background-blend-mode: overlay;
	background-image: url('https://joy-stick.org/img/floppy-disk_softbank.png');
background-size: 24px;
}
	.fuckass:hover {
	transition: transform .4s;
	background-color: red;
}
/* ============================ */
/* ===== Starbar CSS ===== */
	#statbar {
	z-index: 			5;
	position: fixed; 
	bottom: 		0px;
	left: 			0px;
	height: 	 18px; 
	width: 	 	 100%; 
	color:  #883EB9;
	background-color: 		#000;
	border-top: 1px solid #7F2A7F;
	box-shadow: 0px 1px 2px 1px #FBFACB inset; }
	#lastupdate {
	text-decoration: underline;
}
	#hitcount {
	text-decoration: underline; }
	div.lastupdate {
	position: 	fixed;
	bottom: 		-16px;
	left: 				4px;
	z-index: 				6;
	color: 		#FBFACB; }
	div.hitcount {
	position: 		fixed;
	bottom: 				2px;
	right: 					4px;
	z-index: 					6;
	color: 			#FBFACB; }
/* ============================ */
/* ===== Scrollbar CSS ===== */
  * { scrollbar-width: auto;
    	scrollbar-color: #ffbbf1 #f7ffbb;}
  *::-webkit-scrollbar {
    width: 15px; }
  *::-webkit-scrollbar-track {
    background: #f7ffbb; }
  *::-webkit-scrollbar-thumb {
    background-color: #ffbbf1;
    border-radius: 			 10px;
    border:  5px none #d669de; }