/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* INSTALLED FONT. Note: Do Not Change Syntax Or It Will Not Work! */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
@font-face 
{
	font-family: 'kodemono';
	src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
		 url('myfont-webfont.woff') format('woff'), 
		 url('https://d-lol-lol-b.neocities.org/archives/2024/etc/kodemono.ttf')  format('truetype'),
		 url('myfont-webfont.svg#svgFontName') format('svg');
}
@font-face 
{
	font-family: 'fred';
	src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
	     url('myfont-webfont.woff') format('woff'), 
	     url('https://d-lol-lol-b.neocities.org/archives/2024/etc/fred.ttf')  format('truetype'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
} 
/* ||||||||||||||||||| */
/* CUSTOMIZE SCROLLBAR */
/* ||||||||||||||||||| */
html
{ 
	overflow: scroll;                       							/* Shows scrollbar           */
  	overflow-y: scroll; 												/* Show vertical scrollbar   */
	overflow-x: hidden; 												/* Hide horizontal scrollbar */
}											
::-webkit-scrollbar 													/* width */
{
	width: 20px;
}											
::-webkit-scrollbar-track 												/* Track */
{
	background: coral;
}										
::-webkit-scrollbar-thumb 												/* Handle */
{
	background: red;
}										
::-webkit-scrollbar-thumb:hover											/* Handle on hover */ 
{
	background: orange;
}
/* ||||||||||||||| */
/* MAIN BACKGROUND */
/* ||||||||||||||| */
body
{
	background: 
		linear-gradient(666deg, #666 8.25%, #333 8.25%, #333 41.75%, #666 41.75%, #666 58.25%, #333 58.25%, #333 91.75%, #666 91.75%);
	background-size: 100px 100px;
	background-position: 50px 50px;
}
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Grid Container for the main menu. This wraps around the main menu. */
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
.gridcontainer
{
	background: transparent;
	width: 100%;	
	display: grid;
  	grid-template-columns: 6.5% 21% 1% 21% 1% 21% 1% 21% 6.5%; 			/* Total: 9 Columns. */
}
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Grid Content Container is for the main content. This is not for the main menu. */
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
.gridcontentcontainer
{
	background: transparent;
	width: 100%;	
	display: grid;
  	grid-template-columns: 5% 90% 5%; 									/* Total: 3 Columns. */
}
/* |||||||||||||||||||||||||||||||||||| */
/* CUSTOMIZE MAIN MENU DROP-DOWN BUTTON */
/* |||||||||||||||||||||||||||||||||||| */
.mainmenu																/* Positions Main Menu. */
{
	top: 0;
	z-index: 200;
}
.dropdownbutton															/* Style the drop-down button. */
{
    font-family: fred, helvetica, garamond, palatino;
	color: #000000;
	font-size: 22px;
	text-align: center;
	padding: 1px;
	width: 90%;
	height: 0;
	border-bottom: 50px solid #1826DF; 									/* Changes the trapezoid. */
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	background-color: #7878E9; 											/* Changes the color of the drop down button. */
	border-radius: 1px;	    
	cursor: pointer;	
}
.dropdowncontent														/* Drop-down button content. */ 
{
	text-align: center;
	display: none;
  	position: absolute;
  	background-color: #1826DF; 											/* Changes the background of the dropdown menu, where the links are located. */
  	width: 250px;
  	border-radius: 1px;
  	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  	z-index: 200;
}
.mainmenu:hover .dropdownbutton 										/* Changes the color of the drop down button. */
{
	background-color: #B3B3F7; 											/* Changes the color of the drop down button on hover. */
  	color: #ff0000;
  	width: 80%;
  	border-bottom: 50px solid #B3B3F7; 									/* Changes the drop down button(bottom part) on hover. */
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	animation-name: textanimate;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
@keyframes textanimate													/* Animate Text On Drop Down Button. */
{
	50%	 {text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;}
    100% {text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;}
}
.mainmenu:hover .dropdowncontent 										/* Shows the dropdown menu on hover. */
{
	display: block;
}
.dropdowncontent a 														/* Style of the links inside the dropdown. */
{
	color: #fcfcfc;
  	border-radius: 50px;
  	text-decoration: none;
  	display: block;
}
.dropdowncontent a:hover 												/* Changes the color of the dropdown links on hover. */
{
	background-color: #ffff31;
	color: #000000;
}
/* |||||||||||||||| */
/* Attach a ribbon. */
/* |||||||||||||||| */
.ribbon 
{
	width: 96px;
  	font-size: 16px;  
  	position: absolute;
  	right: -40px;
  	top: -6px;
  	text-align: center;
  	border-radius: 25px;
  	transform: rotate(20deg);
  	background-color: #ff0000;
  	color: white;
}
.disbandedribbon 
{
	width: 250px;
  	font-size: 32px;  
  	position: relative;
  	right: -190px;
  	top: 20px;
  	text-align: center;
  	border-radius: 25px;
  	transform: rotate(20deg);
  	background-color: #ff0000;
  	color: white;
  	z-index: 175;
}
.latebloomerribbon 
{
	width: 130px;
  	font-size: 32px;  
  	position: relative;
  	right: -135px;
  	top: -10px;
  	text-align: center;
  	border-radius: 25px;
  	transform: rotate(-20deg);
  	background-color: #1BE51C;
  	color: white;
}
.bestrookiecategorey 
{
	width: 285px;
	height: 120px;
  	font-size: 32px;  
  	position: relative;
  	right: -240px;
  	top: 5px;
  	text-align: center;
  	border-radius: 25px;
  	transform: rotate(380deg);
  	background: 
		linear-gradient(to right, #b17304, #b29700, #b29700, #b17304);
  	mask: 
		radial-gradient(20px at 40px 40px, transparent 98%, black) -40px -40px;
  	color: #141414;
}
/* ||||||||||||||||||| */
/* IMAGE CUSTOMIZATION */
/* ||||||||||||||||||| */
.nuguimage																/* This is for images of unknown k-idols. */
{
	margin: auto;
	font-size: 50px;
	background-color: #13F194;
	width: 60%;
	border-color: #13F194;
	border-radius: 15px;
}
.exclusiveimage
{
	width: 400px;
	height: 400px;
} 
.exclusivemember
{
	width: 300px;
	height: 300px;
}     
img																		/* All images are small. */
{
	width: 75px;
	height: 50px;
	--g: 4px;     														/* the gap */
	--b: 6px;    														/* border thickness*/
	--c: #13F194; 														/* the color */ 
	padding: 
		calc(var(--g) + var(--b));
		--_c: #0000 0 25%, var(--c) 0 50%;
		--_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
		--_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
	background:
		var(--_g1) var(--_p1, 25%) 0   ,var(--_g2) 0    var(--_p2,125%),
		var(--_g1) var(--_p2,125%) 100%,var(--_g2) 100% var(--_p1, 25%);
	background-size: 200% var(--b),var(--b) 200%;
	cursor: crosshair;
	filter: grayscale(25%);		
}
img:hover 
{
	--_p1: 125%;
	--_p2: 25%;
	filter: grayscale(0%);
	transition: .4s;
}
.bigimage																/* Dropdown Bigger Image. */
{
	width: 415px;
	height: 375px;
}
.alienimage																/* Images with a different size. */
{
	width: 100%;
	height: 200px;
}
.monero
{
	width: 250px;
	height: 250px;
}
.monerotext
{
	font-size: 13px;
}
.babymonster
{
	width: 700px;
	height: 600px;
	border:none;
	background:
		linear-gradient(135deg,#1371E6, #1C6FD5, #246DC6, #2D6AB6, #3367A7, #376195, #3C5C83, #3E546F);
	--mask: 
		radial-gradient(20px at 75% 100%,#0000 98%,#000) 50% calc(100% - 20px)/80px 100% repeat-x,
		radial-gradient(20px at 25% 50% ,#000 99%,#0000 101%) bottom/80px 40px repeat-x;
	-webkit-mask: var(--mask);
    mask: var(--mask);
}
.babymonstermembers
{
	width: 425px;
	height: 400px;
	border:none;
	background:
		linear-gradient(135deg,#1371E6, #1C6FD5, #246DC6, #2D6AB6, #3367A7, #376195, #3C5C83, #3E546F);
	--mask: 
		radial-gradient(20px at 75% 100%,#0000 98%,#000) 50% calc(100% - 20px)/80px 100% repeat-x,
		radial-gradient(20px at 25% 50% ,#000 99%,#0000 101%) bottom/80px 40px repeat-x;
	-webkit-mask: var(--mask);
    mask: var(--mask);
}
/* |||||||||||||||||||||||||| */
/* Dropdown Image Attributes. */
/* |||||||||||||||||||||||||| */
.dropdown 
{
	position: relative;
    display: inline-block;
}
.dropdown-content 
{
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    border-radius: 25px;
}
.dropdown:hover .dropdown-content 
{
    display: block;
}
.desc 
{
    padding: 1px;
    text-align: center;
}
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* TEXT Customization. 																									*/
/* For font-size, always use rem. rem can be manipulated by the web-browser, which makes it easier for viewers to read. */
/* px creates an absolute size that web-browsers aren't able to magnify. 												*/
/* 1rem is 16px. 1.5rem is 24px. 2rem is 32px. In order to get the px value, you will have to multiply a rem to 16. 	*/
/* I've noticed that using rem for other parts of a website may break it. It is best only for fonts. 					*/
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
h1
{
	color: #bc4763;
	font-size: 9rem;
    font-family: fred, helvetica, garamond, palatino;
    text-align: center;
  	animation-name: titlechange;
  	animation-duration: 6s;
  	animation-iteration-count: infinite;
}   
@keyframes titlechange 
{
	0%		{color: #bc4763; text-shadow: -10px 0 #3584E4, 0 10px #438BE3, 10px 0 #5394E3, 0 -10px #679FE4;}
    25%  	{color: #CC3358; text-shadow: -10px 0 #33D17A, 0 10px #29DA78, 10px 0 #1EE477, 0 -10px #13EE75;}
    50%  	{color: #DA2651; text-shadow: -10px 0 #F6D32D, 0 10px #F4D338, 10px 0 #F4D648, 0 -10px #F2D85E;}
    75%  	{color: #E51D4D; text-shadow: -10px 0 #FF7800, 0 10px #EE7911, 10px 0 #E0791D, 0 -10px #D47928;}
    100% 	{color: #EE1146; text-shadow: -10px 0 #9141AC, 0 10px #9D3ABE, 10px 0 #A330C9, 0 -10px #B22AE0;}
}
h2
{
	color: #f5f5f5; 													/* Light text color */
	text-align: center; 												/* Center alignment of text */
	font-family: fred, helvetica, garamond, palatino; 					/* Monospace font */
	font-size: 3.5rem; 													/* Text size */
	text-shadow:														/* Multi-layered text-shadow for fire effect */
		px -1px 3px #fff, 												/* Innermost layer - intense heat (white) */
		px -2px 6px #FF3, 												/* Second layer - core of flame (yellow) */
		px -6px 12px #F90, 												/* Middle layer - body of flame (orange) */
		px -10px 20px #C33; 											/* Outermost layer - edges of flame (red) */
	animation: flicker 2s infinite;
} 
@keyframes flicker 														/* Define the animation named "flicker" */
{
																		/* 0% is the initial state of animation. */ 
																		/* 100% is the final state of animation. */
	0%, 100%
		{ 
		text-shadow: 
		0 -1px 3px #fff, 												/* Innermost layer - intense heat (white) */
        0 -2px 6px #FF3, 												/* Second layer - core of flame (yellow) */
        0 -6px 12px #F90, 												/* Middle layer - body of flame (orange) */
        0 -10px 20px #C33;												/* Outermost layer - edges of flame (red) */
		}
																		/* 50% is the middle state of animation. */
    50% 
		{ 
		text-shadow: 
        0 -2px 6px #fff, 												/* Innermost layer - intense heat (white) */
        0 -4px 12px #FF3, 												/* Second layer - core of flame (yellow) */
        0 -8px 16px #F90, 												/* Middle layer - body of flame (orange) */
        0 -12px 24px #C33;												/* Outermost layer - edges of flame (red) */
		}
}
h3
{
    color: #bc4763;
    font-size: 3rem;
    font-family: fred, helvetica, garamond, palatino;
    text-align: center;
}
h4
{
    color: #bc4763;
    font-size: 2.5rem;
    font-family: fred, helvetica, garamond, palatino;
    text-align: center;
}
h5
{
	color: #bc4763;
	font-size: 2rem;
	font-family: fred, helvetica, garamond, palatino;
	text-align: center;
}
h6
{
	color: #bc4763;
	font-size: 1.5rem;
	font-family: fred, helvetica, garamond, palatino;
	text-align: center;
}
p
{
    color: #ffffff;
    font-size: 1rem;
    font-family: kodemono, arial, verdana, tahoma;
}
mark																	/* Highlights Text */ 
{ 
    font-size: 1rem;
    background-color: #F6D32D;
    color: #000000;
    font-family: kodemono, arial, verdana, tahoma;
}
.finalmark
{ 
    font-size: 2rem;
    background-color: #F6D32D;
    color: #000000;
    font-family: kodemono, arial, verdana, tahoma;
}
.nowrap 																/* Text stay together on one line. */
{
	white-space: nowrap;
}
hr																		/* Visual Line Break */
{
	width: 85%;
	height: 50px;
	background-color: #366A37;
	border: 20px dotted #ea9314;
}
/* |||||||||||||||||||||||||||||||| */
/* MISCELLANEOUS TEXT CUSTOMIZATION */
/* |||||||||||||||||||||||||||||||| */
li																		/* Anime Plot Points. */
{
	color: #ffffff;
    font-size: 1rem;
    font-family: kodemono, arial, verdana, tahoma;
} 
.opinion																/* Anime Opinions. */
{
 	background-color: #EBBF68;
 	width: 75%;
 	text-align: center;
 	font-family: fred, helvetica, garamond, palatino;
 	font-weight: bold;
    color: black;
    font-size: 1.5rem;
    border: 20px dashed #55D2CB;
    margin: auto;
}
.kpopgroup
{
    color: #E02C57;
    font-size: 3rem;
    font-weight: bold;
    font-family: fred, helvetica, garamond, palatino;
    text-align: center;
}
.kpopdetails															/* KPOP Details. */
{
	margin: auto;
    background: 
		linear-gradient(to right, #8c89a9, #8682b0, #837ebc, #766ec8);
    border-radius: 5px;
	width: 90%;
	border: 5px dashed #DE8114;
	font-family: kodemono, arial, verdana, tahoma;
	font-size: 1rem;
	font-weight: bold;
	color: #000000;
}  
.babymonstertext
{
	color: #F20A42;
	font-size: 5rem;
    font-family: fred, helvetica, garamond, palatino;
    text-align: center;
  	animation-name: babymonstertextchange;
  	animation-duration: 3s;
  	animation-iteration-count: infinite;
}   
@keyframes babymonstertextchange 
{
	0%		{color: #CA1F48; text-shadow: -10px 0 #F5BA0B, 0 10px #D9A91D, 10px 0 #C29B27, 0 -10px #B08F2D;}
    25%  	{color: #93344B; text-shadow: -10px 0 #ED320B, 0 10px #E23714, 10px 0 #D83C1B, 0 -10px #CA3F22;}
    50%  	{color: #DA2651;}
    75%  	{color: #E51D4D;}
    100% 	{color: #EE1146;}
}
/* |||||||||||||||||| */
/* Link Customization */
/* |||||||||||||||||| */
a:link, a:visited 
{
  	background-color: #1826DF;
  	color: white;
  	font-family: kodemono, arial, verdana, tahoma;
  	padding: 4px 8px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	border-radius: 1px;
}
a:hover, a:active 
{
	text-align: center;
  	background-color: #ffff31;
  	font-family: kodemono, arial, verdana, tahoma;
  	color: #000000;
}
/* ||||||||||||||||||| */
/* TABLE CUSTOMIZATION */
/* ||||||||||||||||||| */
table
{
	background: rgba(70, 204, 204, 0.21);
	background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
	background-size: 58px 58px;
	border: 1px solid rgba(70, 204, 204, 1);
	border-radius: 16px;
	border-spacing: 15px 75px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	-webkit-backdrop-filter: blur(2.5px);  
    width: 100%;
    margin: auto;
}
td
{
	text-align: center;
	width: 30%;
	background: rgba(55, 27, 95, 0.38);
	border: 1px solid rgba(55, 27, 95, 1);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	-webkit-backdrop-filter: blur(2px);
}   
td:hover
{
	background: rgba(55, 27, 95, 0.69);
	border: 1px solid rgba(55, 27, 95, 1);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	-webkit-backdrop-filter: blur(1.5px);
	mask: 
		radial-gradient(20px at 40px 40px, transparent 98%, black) -40px -40px; 
}
th														
{
    background-color: #3d3532;
}
.nohover																/* Removes the Hover Element such as "td:hover". */
{
	border: none;
	background: none;
	pointer-events: none;
} 
/* |||||||||||||||||||||||||||| */
/* This is the kpop search box. */
/* |||||||||||||||||||||||||||| */
#myInput 
{
	background-image: url(''); 											/* Add a search icon to input */
	background-size: 50px 50px;
	background-position: 1px 12px; 										/* Position the search icon */
	background-repeat: no-repeat; 										/* Do not repeat the icon image */
	width: 45%; 														/* Full-width */
	font-size: 1rem; 													/* Increase font-size */
	font-family: kodemono, arial, verdana, tahoma;
	padding: 12px 20px 12px 40px; 										/* Add some padding */
	border: 1px solid #000000; 											/* Add a grey border */
	margin-bottom: 12px; 												/* Add some space below the input */
	margin-left: 15px;
	mask: 
		radial-gradient(20px at 40px 40px, transparent 98%, black) -40px -40px;
}
.makeitsticky
{
	position: -webkit-sticky; 											/* Sticky for Safari */
	position: sticky;
	top: 0;
	z-index: 200;
}
/* |||||||||||||||||||||||||||||||||||||| */
/* THIS IS THE KPOP OR ANIME SCORE METER. */
/* |||||||||||||||||||||||||||||||||||||| */
meter
{
	border: none;
    border-radius: 1px;
    background-color: transparent;
    width: 100%;
    height: 50px;
    display: block;
}
.finalscorehoover
{
	font-size: 24px;
	font-weight: bold;
	z-index: 150;
    color: #000000;
    font-family: fred, helvetica, garamond, palatino;
}
.finalscorehoover::after 
{
	content : attr(data-value);
	top: -40px;
	left: -10px;
	position:relative;
}
meter::-moz-meter-bar 
{
	z-index: 50;
    background-image: 
		linear-gradient( 90deg, #C86B6B 10%, #BE5F5F 20%, #B65454 30%, #AD4848 40%, #A03C3C 50%, #943131 60%, #872828 70%, #7B1E1E 80%, #6F1616 90%, #630F0F 100%);
    background-size: 100% 100%;
    border-radius: 1px;   
    animation-name: bloodbar;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;	
}
@keyframes bloodbar
{
	10%		{background-image: linear-gradient( 90deg, #4A0404 10%, #BE5F5F 20%, #B65454 30%, #AD4848 40%, #A03C3C 50%, #943131 60%, #872828 70%, #7B1E1E 80%, #6F1616 90%, #630F0F 100%);}
	20%		{background-image: linear-gradient( 90deg, #C86B6B 10%, #4A0404 20%, #B65454 30%, #AD4848 40%, #A03C3C 50%, #943131 60%, #872828 70%, #7B1E1E 80%, #6F1616 90%, #630F0F 100%);}
	30%		{background-image: linear-gradient( 90deg, #C86B6B 10%, #BE5F5F 20%, #4A0404 30%, #AD4848 40%, #A03C3C 50%, #943131 60%, #872828 70%, #7B1E1E 80%, #6F1616 90%, #630F0F 100%);}
	40%		{background-image: linear-gradient( 90deg, #C86B6B 10%, #BE5F5F 20%, #B65454 30%, #4A0404 40%, #A03C3C 50%, #943131 60%, #872828 70%, #7B1E1E 80%, #6F1616 90%, #630F0F 100%);}
	50%		{background-image: linear-gradient( 90deg, #C86B6B 10%, #BE5F5F 20%, #B65454 30%, #AD4848 40%, #4A0404 50%, #943131 60%, #872828 70%, #7B1E1E 80%, #6F1616 90%, #630F0F 100%);}
    60%		{background-image: linear-gradient( 90deg, #C86B6B 10%, #BE5F5F 20%, #B65454 30%, #AD4848 40%, #A03C3C 50%, #4A0404 60%, #872828 70%, #7B1E1E 80%, #6F1616 90%, #630F0F 100%);}
    70%		{background-image: linear-gradient( 90deg, #C86B6B 10%, #BE5F5F 20%, #B65454 30%, #AD4848 40%, #A03C3C 50%, #943131 60%, #4A0404 70%, #7B1E1E 80%, #6F1616 90%, #630F0F 100%);}
    80%		{background-image: linear-gradient( 90deg, #C86B6B 10%, #BE5F5F 20%, #B65454 30%, #AD4848 40%, #A03C3C 50%, #943131 60%, #872828 70%, #4A0404 80%, #6F1616 90%, #630F0F 100%);}
    90%		{background-image: linear-gradient( 90deg, #C86B6B 10%, #BE5F5F 20%, #B65454 30%, #AD4848 40%, #A03C3C 50%, #943131 60%, #872828 70%, #7B1E1E 80%, #4A0404 90%, #630F0F 100%);}
    100%	{background-image: linear-gradient( 90deg, #C86B6B 10%, #BE5F5F 20%, #B65454 30%, #AD4848 40%, #A03C3C 50%, #943131 60%, #872828 70%, #7B1E1E 80%, #6F1616 90%, #4A0404 100%);}
}
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* STYLE THE VERTICAL HOVER TABS ON THE MAIN CONTENT PAGE. */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Style the tab */
.tab 
{
	float: left;
	border: 1px dashed #1F5E36;
	background-color: #62A0EA;
	padding: 5px 5px;
	width: 8%; /* 13% */
	height: 310px;
}
/* Style the buttons that are used to open the tab content */
.tab button 
{
	font-size: 20px;
	display: block;
	background-color: #7DD69D; /* Original: inherit  */
	color: black;
	padding: 1px 1px;
	width: 100%;
	border: 1px dashed #3E7150;
	outline: dashed;
	height: 50px;
	text-align: left;
	cursor: pointer;
}
/* Change background color of buttons on hover */
.tab button:hover 
{
	background-color: #F5C211;
}
/* Create an active/current "tab button" class */
.tab button.active 
{
	background-color: #F5C211;
}
/* Style the tab content */
.tabcontent 
{
	float: right;
	padding: 1px 1px;
	width: 88%;
	border-left: none;	
	overflow-y:scroll;
	height: 11100px;
	display: none;
	border: 1px dashed #62A0EA;
}
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Accordion FOR CONTENT BLOGS(Button that hides/displays content) */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */      
.accordion 
{
	border-radius: 10px;
  	background-color: #8ff21c;
  	color: #000000;
  	cursor: pointer;
  	padding: 5px;
  	border: solid #76A73D;
  	text-align: left;
  	font-size: 20px;
  	font-family: kodemono, arial, verdana, tahoma;
  	transition: 0.4s;
}
.active, .accordion:hover 
{
	background-color: #FFFF00;
	color: #CC0000; 
	border: dotted #000000;
	border-radius: 10px;
}
.panel 
{
	margin: auto;
	width: 95%;
	height: 200px;
	padding: 0 5px;
	border: 3px dashed #3B6E4A;
	border-radius: 1px;
  	display: none;
  	background-color: #2E4535;
  	overflow: scroll;
  	overflow-y: scroll; 												/* Show vertical scrollbar */
	overflow-x: hidden; 												/* Show horizontal scrollbar */
}
.accordion:after 
{
	content: '\02795';													/* Unicode character for "plus" sign (+) */
  	font-size: 16px;
  	color: #777;
  	float: right;
  	margin-left: 5px;
}
.active:after 
{
	content: "\2796";													/* Unicode character for "minus" sign (-) */
}
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Accordion PART 2 TOP BLOGS(Button that hides/displays content) */
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */      
.accordion2 
{
	border-radius: 10px;
  	background-color: #8ff21c;
  	color: #000000;
  	cursor: pointer;
  	padding: 5px;
  	border: solid #76A73D;
  	text-align: left;
  	font-family: kodemono, arial, verdana, tahoma;
  	font-size: 22px;
  	transition: 0.4s;
}
.active2, .accordion2:hover 
{
	background-color: #FFFF00;
	color: #CC0000; 
	border: dotted #000000;
	border-radius: 10px;
}
.panel2 
{
	margin: auto;
	width: 95%;
	padding: 0 5px;
	border: 5px dashed #3B6E4A;
	border-radius: 1px;
  	display: none;
  	background-color: #28362c;
  	overflow: hidden;
}
.panel3																	/* "panel3" is for the hall of fame. */ 
{
	margin: auto;
	width: 95%;
	padding: 0 5px;
	border: 25px solid #c32a2a;
	border-radius: 1px;
  	display: none;
  	background-color: #000000;
  	overflow: hidden;
}
.rewardtext																/* Text For "panel". */
{
	font-size: 4rem; 
    font-family: fred, arial, verdana, tahoma; 
    background: 
		linear-gradient(to right, #b29700, #b17304, #b17304, #b29700); 
    -webkit-text-fill-color: transparent; 
    -webkit-background-clip: text;
    -webkit-text-decoration-color: #b29700; 							/* safari still uses vendor prefix */
    text-decoration: underline;		
	text-decoration-color: #b29700;
}
.accordion2:after 
{
	content: '\02795';													/* Unicode character for "plus" sign (+) */
  	font-size: 16px;
  	color: #777;
  	float: right;
  	margin-left: 5px;
}
.active2:after 
{
	content: "\2796";													/* Unicode character for "minus" sign (-) */
}
/* ///////////////// */
/* Scrolling Content */
/* ///////////////// */
.scrollingcontent {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 315px;
  height: 200px;
  border-radius: 10px;
  color: #E02C57;
  font-size: 1.7rem;
  font-weight: bold;
  font-family: fred, helvetica, garamond, palatino;
  text-align: center;
  justify-content: center;
  margin: 20px;
  box-shadow: 2px 4px 6px 8px #3A2C4D;
  transform: translateX(400%);
  transition: transform 0.5s ease;
  background: 
    linear-gradient(#5992F3 0 0) 50%/calc(100% - 60px) calc(100% - 60px) no-repeat,
    radial-gradient(30px,transparent 98%,#236BE7) 0 -30px/55.5px 60px round no-repeat,
    radial-gradient(30px,transparent 98%,#236BE7) 0 calc(100% + 30px)/55.5px 60px round no-repeat,
    radial-gradient(30px,transparent 98%,#236BE7) -30px 0/60px 55.5px no-repeat round,
    radial-gradient(30px,transparent 98%,#236BE7) calc(100% + 30px) 0/60px 55.5px no-repeat round;
  clip-path: polygon(60px 0,calc(100% - 60px) 0,100% 60px,100% calc(100% - 60px),calc(100% - 60px) 100%,60px 100%,0 calc(100% - 60px),0 60px);
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

.scrollingcontent:nth-of-type(even) {
  transform: translateX(-400%);
}

.scrollingcontent.show {
  transform: translateX(0);
}