/* |||||||||||||||||||||||||| */
/* HTML STYLE FOR BABYMONSTER */
/* |||||||||||||||||||||||||| */
html 
{
height: 100%;
}
/* |||||||||||||||||||||| */
/* Canvas for Babymonster */
/* |||||||||||||||||||||| */
#canvas 
{
width: 100%;
height: 15%;
}
/* ||||||||||||||||||||||||||||||||||||| */
/* INSTALLED FONT. Do not change syntax! */
/* ||||||||||||||||||||||||||||||||||||| */
@font-face 
{
font-family: 'monotonfont';
src: 
url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
url('myfont-webfont.woff') format('woff'), 
url('https://d-lol-lol-b.neocities.org/etc/monoton.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/etc/fred.ttf')  format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
@font-face 
{
font-family: 'zenloop';
src: 
url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
url('myfont-webfont.woff') format('woff'), 
url('https://d-lol-lol-b.neocities.org/etc/zenloop.ttf')  format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
/* ||||||||||||||| */
/* MAIN BACKGROUND */
/* ||||||||||||||| */
body 
{
background-image: 
linear-gradient(40deg, transparent 33%, #0B8C61 90%, transparent 55%), 	 /* Cone */
linear-gradient(-40deg, transparent 33%, #2A3632 80%, transparent 33%),  /* Parallelogram */
linear-gradient(90deg, transparent 44%, #354E52 70%, transparent 55%),   /* Vertical Thread */
linear-gradient(-90deg, transparent 44%, #323E41 60%, transparent 22%),  /* Parallel Vertical Thread */
linear-gradient(50deg, transparent 44%, #41836D 50%, transparent 44%),   /* TIP */
linear-gradient(-50deg, transparent 44%, #1F6F54 40%, transparent 77%),  /* Bottom Part of Parallelogram */
linear-gradient(103deg, transparent 33%, #059E6A 30%, transparent 55%),  /* Stem */
linear-gradient(-103deg, transparent 70%, #1E483A 20%, transparent 88%), /* Inner Stem */
linear-gradient(77deg, transparent 44%, #3B6D5C 10%, transparent 99%),   /* Space Below Parallelogram */
linear-gradient(-77deg, transparent 44%, #58786D 90%, transparent 44%),  /* Cone Platform above Parallelogram */
radial-gradient(#5A8073 10px, transparent 0%);
background-size: 20px 120px, 40px 220px;
background-color: #145A42;
}
/* ||||||||||||||| */
/* Main Navigation */
/* ||||||||||||||| */
.mainnavigation
{
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%; /* Total: 5 Columns. */
justify-content: center;
}
/* ||||||||||||| */
/* Main Content  */
/* ||||||||||||| */
.maincontent
{
background: transparent;
width: 100%;	
display: grid;
grid-template-columns: 1% 98% 1%; /* Total: 3 Columns. */
}
/* ||||||||||||| */
/* Menu Entries  */
/* ||||||||||||| */
.maintoplink:link, .maintoplink:visited 
{
background: none;
background-color: transparent;
text-decoration: none;
border: none;
font-size: 3rem;
font-family: monotonfont, 'Brush Script MT', cursive;
color: #ffffff; 
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);	
}
.maintoplink:hover, .maintoplink:active 
{
background: none;
background-color: transparent;
text-decoration: none;
border: none;
font-size: 3rem;
font-family: monotonfont, 'Brush Script MT', cursive;
color: #0088A3;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.submaintoplink:link, .submaintoplink:visited 
{
background: linear-gradient(to right, #00412b, #003020, #002015);
text-decoration: none;
border: none;
font-size: 1.3rem;
font-family: monotonfont, 'Brush Script MT', cursive;
color: #ffffff; 
font-weight: bold;	
}
.submaintoplink:hover, .submaintoplink:active 
{
background: linear-gradient(to right, #00412b, #003020, #002015);
text-decoration: none;
border: none;
font-size: 1.3rem;
font-family: monotonfont, 'Brush Script MT', cursive;
color: #0088A3;
font-weight: bold;
}
/* |||||||||||||||||||| */
/* MAIN ENTRY DROPDOWN  */
/* |||||||||||||||||||| */
.mainentrydropdown 
{
position: relative;
display: inline-block;
}
.mainentrydropdowncontent 
{
display: none;
position: absolute;   
z-index: 203;
}
.mainentrydropdown:hover .mainentrydropdowncontent 
{
display: block;
}
.mainentrydropdowndescription 
{
padding: .1px;
background: linear-gradient(to right, #00412b, #003020, #002015);
border: 2px solid #0088A3;
color: #000000;
width: 225px;
height: 370px;
font-size: .9rem;
font-weight: bold;
text-align: center;
z-index: 204;
-webkit-box-shadow: 22px 24px 32px 8.5px #000000;
-moz-box-shadow: 22px 24px 32px 8.5px #000000;
box-shadow: 22px 24px 32px 8.5px #000000;
}
/* ||||||||||||||| */
/* USER LOGO TEXT  */
/* ||||||||||||||| */
.logouser
{
color: #bc4763;
font-size: 7rem;
font-family: fred, georgia, garamond;
text-align: center;
animation-name: logomorph;
animation-duration: 6s;
animation-iteration-count: infinite;
}   
@keyframes logomorph 
{
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;}
}
/* |||| */
/* TEXT */
/* |||| */
.moneroaddress
{
background: linear-gradient(0deg, #ba9368 1%, #c49e76 5%, #cea984 10%, #d9b393 15%, #e3bea1 20%, #edc9af 100%);
font-size: 1.5rem;
font-family: zenloop, arial, verdana;
font-weight: bold;
}
.kpoptitle
{
padding: 20px;
text-align: center;
color: #000000;
background: linear-gradient(to right, #00724b, #008256, #009261, #00a36c, #19ac7a, #32b589, #e5f5f0, #32b589, #19ac7a, #00a36c, #009261, #008256, #00724b);
border-radius: 10px;
border: 1px solid rgba(79, 67, 80, 0.34);
font-size: 2rem;
font-family: monotonfont, 'Brush Script MT', cursive;
font-weight: bold;
animation-name: kpopanimationtitle;
animation-duration: 3s;
animation-iteration-count: infinite;
}   
@keyframes kpopanimationtitle 
{
0%		{color: #000000; text-shadow: -10px 0 #3584E4, 0 10px #438BE3, 10px 0 #5394E3, 0 -10px #679FE4;}
25%  	{color: #000000; text-shadow: -10px 0 #33D17A, 0 10px #29DA78, 10px 0 #1EE477, 0 -10px #13EE75;}
50%  	{color: #000000; text-shadow: -10px 0 #F6D32D, 0 10px #F4D338, 10px 0 #F4D648, 0 -10px #F2D85E;}
75%  	{color: #000000; text-shadow: -10px 0 #FF7800, 0 10px #EE7911, 10px 0 #E0791D, 0 -10px #D47928;}
100% 	{color: #000000; text-shadow: -10px 0 #9141AC, 0 10px #9D3ABE, 10px 0 #A330C9, 0 -10px #B22AE0;}
}
.kpoptitlenotes
{
background: linear-gradient(to right, #e5f5f0, #7fd1b5, #66c7a6, #00a36c, #66c7a6, #7fd1b5, #e5f5f0);
clip-path: polygon(72% 93.2%, 100% 0%, 75.1% 100%, 0% 100%, 68.1% 95.5%, 3.9% 94.7%, 24.9% 12.1%, 0% 100%, 25.1% 0%, 100% 0%, 28.5% 6.1%, 95.7% 6.8%);
border: .1px solid #002015;
color: #000000;
font-family: zenloop, arial, verdana;
font-weight: bold; 
font-size: 1rem;
letter-spacing: .8px;
line-height: 90%;
padding: 6px;
height: 100%;
width: 93%;
outline: solid;
outline-style: double;
outline-color: #00100a;
outline-width: thick;
outline-offset: 10px;
}
.kpopextranotes
{
background: linear-gradient(to right, #e5f5f0, #7fd1b5, #66c7a6, #00a36c, #66c7a6, #7fd1b5, #e5f5f0);
clip-path: polygon(72% 93.2%, 100% 0%, 75.1% 100%, 0% 100%, 68.1% 95.5%, 3.9% 94.7%, 24.9% 12.1%, 0% 100%, 25.1% 0%, 100% 0%, 28.5% 6.1%, 95.7% 6.8%);
border: .1px solid #002015;
color: #000000;
font-family: zenloop, arial, verdana;
font-weight: bold; 
font-size: 2rem;
letter-spacing: .8px;
line-height: 90%;
padding: 6px;
height: 100%;
width: 93%;
outline: solid;
outline-style: double;
outline-color: #00100a;
outline-width: thick;
outline-offset: 10px;
}
.kpopdisbanded
{
background: linear-gradient(to right, #954A96, #B373B3, #D3A0D4, #B373B3, #954A96);
clip-path: polygon(72% 93.2%, 100% 0%, 75.1% 100%, 0% 100%, 68.1% 95.5%, 3.9% 94.7%, 24.9% 12.1%, 0% 100%, 25.1% 0%, 100% 0%, 28.5% 6.1%, 95.7% 6.8%);
color: #000000;
font-family: zenloop, arial, verdana; 
font-weight: bold;
font-size: 1rem;
width: 93%;
}
.hofrotyicon
{
height: 300px;
width: 300px;
}
/* ||||||||||||||||||| */
/* Link Customization  */
/* ||||||||||||||||||| */
a:link, a:visited 
{
background: #03FB89;
border: .8px solid #000000;
color: #000000; 
font-weight: bold;	
}
a:hover, a:active 
{
background: #E7EB69;
border: .8px dashed #000000;
color: #000000;
font-weight: bold;
}
/* ||||||||||| */
/* LINE BREAK  */
/* ||||||||||| */
hr
{
height: .5px;
color: #0088A3;
}
del
{
color: #954A96;
font-weight: bold;
}
li
{
padding: 5px;
}
/* ||||||||||||||||| */
/* Image Properties  */
/* ||||||||||||||||| */
.gifimg 
{
height: 160px;
width: 220px;
padding: 1px;
border: 5px solid #00A36C;
clip-path: polygon(60% 0%, 67.7% 16%, 57.7% 67%, 90% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 10% 0%, 43.7% 67%, 34.3% 16%, 40% 0%);
}
.gifimg:hover
{
height: 160px;
width: 220px;
padding: 1px;
border: 5px dashed #0088A3;
clip-path: polygon(60% 0%, 67.7% 16%, 57.7% 67%, 90% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 10% 0%, 43.7% 67%, 34.3% 16%, 40% 0%);
}
.kpoppix
{
width: 90px;
height: 90px;
vertical-align: middle;
clip-path: polygon(33% 0%, 70% 0%, 82% 18%, 100% 0%, 91% 42%, 100% 78%, 60% 100%, 43% 100%, 0% 77%, 9% 42%, 0% 0%, 22% 17%);
filter: grayscale(90%);
}
.kpoppix:hover
{
width: 90px;
height: 90px;
filter: grayscale(0%);
transition: .4s;
}
.animefloat
{
float: left;
}
.bmalbum
{
height: 75px;
width: 75px;
border: 5px solid #00A36C;
}
.bmalbum:hover
{
height: 75px;
width: 75px;
border: 5px dashed #0088A3;
}
.bmlink, .bmlink:link, .bmlink:visited, .bmlink:active, .bmlink:hover
{
background: transparent;
border: none;
}
.seasonunicodesymbols
{
font-size: 10rem;
}
/* ||||||||||||||| */
/* CUSTOM HEADERS  */
/* ||||||||||||||| */
h1
{
padding: 25px;
color: #000000;
width: 94%;
background: linear-gradient(to right, #00724b, #008256, #009261, #00a36c, #19ac7a, #32b589, #e5f5f0, #32b589, #19ac7a, #00a36c, #009261, #008256, #00724b); 	
font-family: fred, georgia, garamond; 
font-weight: bold;
font-size: 1.9rem;
text-decoration: overline underline;
border-radius: 20px;
border: .1px solid #000000;
position: relative;
line-height: 1.2;
letter-spacing: 1px;
animation: h1shift 4s ease-in-out infinite alternate;
transform: skewX(0deg);
z-index: 1;
}
@keyframes h1shift 
{
0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {transform: skewX(0deg);}
41% {transform: skewX(10deg);}
42% {transform: skewX(-10deg);}
59% {transform: skewX(40deg) skewY(10deg);}
60% {transform: skewX(-40deg) skewY(-10deg);}
63% {transform: skewX(10deg) skewY(-5deg);}
70% {transform: skewX(-50deg) skewY(-20deg);}
71% {transform: skewX(10deg) skewY(-10deg);}
}
h2
{
padding: 25px;
color: #000000;
width: 94%;
background: linear-gradient(to right, #00724b, #008256, #009261, #00a36c, #19ac7a, #32b589, #e5f5f0, #32b589, #19ac7a, #00a36c, #009261, #008256, #00724b);	
font-family: fred, georgia, garamond; 
font-weight: bold;
font-size: 1.8rem;
text-decoration: overline underline;
border-radius: 20px;
border: .1px solid #000000;
position: relative;
line-height: 1.2;
letter-spacing: 1px;
animation: h1shift 4s ease-in-out infinite alternate;
transform: skewX(0deg);
z-index: 1;
}
h3
{
padding: 25px;
color: #000000;
width: 94%;
background: linear-gradient(to right, #00724b, #008256, #009261, #00a36c, #19ac7a, #32b589, #e5f5f0, #32b589, #19ac7a, #00a36c, #009261, #008256, #00724b);	
font-family: fred, georgia, garamond; 
font-weight: bold;
font-size: 1.7rem;
text-decoration: overline underline;
border-radius: 20px;
border: .1px solid #000000;
position: relative;
line-height: 1.2;
letter-spacing: 1px;
animation: h1shift 4s ease-in-out infinite alternate;
transform: skewX(0deg);
z-index: 1;
}
h4
{
padding: 25px;
color: #000000;
width: 94%;
background: linear-gradient(to right, #00724b, #008256, #009261, #00a36c, #19ac7a, #32b589, #e5f5f0, #32b589, #19ac7a, #00a36c, #009261, #008256, #00724b);	
font-family: fred, georgia, garamond; 
font-weight: bold;
font-size: 1.6rem;
text-decoration: overline underline;
border-radius: 20px;
border: .1px solid #000000;
position: relative;
line-height: 1.2;
letter-spacing: 1px;
animation: h1shift 4s ease-in-out infinite alternate;
transform: skewX(0deg);
z-index: 1;
}
h5
{
padding: 25px;
color: #000000;
width: 94%;
background: linear-gradient(to right, #00724b, #008256, #009261, #00a36c, #19ac7a, #32b589, #e5f5f0, #32b589, #19ac7a, #00a36c, #009261, #008256, #00724b); 	
font-family: fred, georgia, garamond; 
font-weight: bold;
font-size: 1.5rem;
text-decoration: overline underline;
border-radius: 20px;
border: .1px solid #000000;
position: relative;
line-height: 1.2;
letter-spacing: 1px;
animation: h1shift 4s ease-in-out infinite alternate;
transform: skewX(0deg);
z-index: 1;
}
h6
{
padding: 25px;
color: #000000;
width: 94%;
background: linear-gradient(to right, #00724b, #008256, #009261, #00a36c, #19ac7a, #32b589, #e5f5f0, #32b589, #19ac7a, #00a36c, #009261, #008256, #00724b); 	
font-family: fred, georgia, garamond; 
font-weight: bold;
font-size: 1.4rem;
text-decoration: overline underline;
border-radius: 20px;
border: .1px solid #000000;
position: relative;
line-height: 1.2;
letter-spacing: 1px;
animation: h1shift 4s ease-in-out infinite alternate;
transform: skewX(0deg);
z-index: 1;
}
.animemainheadline
{
padding: 25px;
color: #FF0000;
width: 94%;
background: #000000; 	
font-family: fred, georgia, garamond; 
font-weight: bold;
font-size: 5rem;
text-decoration: overline underline;
border-radius: 20px;
border: .1px solid #000000;
position: relative;
line-height: 1.2;
letter-spacing: 1px;
animation: h1shift 4s ease-in-out infinite alternate;
transform: skewX(0deg);
z-index: 1;
}
.animeheadline
{
padding: 25px;
color: #FF0000;
width: 94%;
background: #000000; 	
font-family: fred, georgia, garamond; 
font-weight: bold;
font-size: 2rem;
text-decoration: overline underline;
border-radius: 20px;
border: .1px solid #000000;
position: relative;
line-height: 1.2;
letter-spacing: 1px;
animation: h1shift 4s ease-in-out infinite alternate;
transform: skewX(0deg);
z-index: 1;
}
/* ||||||||||||| */
/* KPOP SECTION  */
/* ||||||||||||| */
.blog
{
padding: 15px;
line-height: 125%;
background: linear-gradient(0deg, #ba9368 1%, #c49e76 5%, #cea984 10%, #d9b393 15%, #e3bea1 20%, #edc9af 100%);
color: #000000;
font-family: zenloop, arial, verdana; 
font-weight: bold;
font-size: 1.5rem;
}
.kpopbio
{
background: linear-gradient(0deg, #ba9368 1%, #c49e76 5%, #cea984 10%, #d9b393 15%, #e3bea1 20%, #edc9af 100%);
color: #000000;
line-height: 125%;
font-family: zenloop, arial, verdana; 
font-weight: bold;
font-size: 1.5rem;
}
.kpopratinglink
{
background: linear-gradient(0deg, #ba9368 1%, #c49e76 5%, #cea984 10%, #d9b393 15%, #e3bea1 20%, #edc9af 100%);
color: #000000;
line-height: 125%;
font-family: zenloop, arial, verdana; 
font-weight: bold;
font-size: 1.5rem;
}
.kpopblog
{
background: linear-gradient(0deg, #ba9368 1%, #c49e76 5%, #cea984 10%, #d9b393 15%, #e3bea1 20%, #edc9af 100%);
color: #000000;
line-height: 125%;
font-family: zenloop, arial, verdana; 
font-weight: bold;
font-size: 1.5rem;
}
.kpopcalculations
{
background: linear-gradient(0deg, #ba9368 1%, #c49e76 5%, #cea984 10%, #d9b393 15%, #e3bea1 20%, #edc9af 100%);
color: #000000;
line-height: 125%;
font-family: zenloop, arial, verdana; 
font-weight: bold;
font-size: 1.5rem;
}
.animeblog
{
background: linear-gradient(0deg, #ba9368 1%, #c49e76 5%, #cea984 10%, #d9b393 15%, #e3bea1 20%, #edc9af 100%);
color: #000000;
line-height: 125%;
font-family: zenloop, arial, verdana; 
font-weight: bold;
font-size: 1.5rem;
}
/* ||||||||||||||||||| */
/* TABLE CUSTOMIZATION */
/* ||||||||||||||||||| */
table
{
background: none;
border: none; 
width: 100%;
margin: auto;
}
/* |||||||||||||||||||||||||| */
/* IMAGE DESCRIPTION DROPDOWN */
/* |||||||||||||||||||||||||| */
.kpopdropdown 
{
position: relative;
display: inline-block;
}
.kpopdropdowncontent 
{
display: none;
position: absolute;   
z-index: 203;
}
.kpopdropdown:hover .kpopdropdowncontent 
{
display: block;
}
.kpopdescription 
{
padding: 6px;
display: flex;
justify-content: flex-end;
align-items: flex-end;
clip-path: polygon(40.3% 26.3%, 99.7% 27%, 100% 100%, 0% 100%, 0% 27%, 19% 27%, 18.3% 0%);
background-color: #80BDA8;
font-family: fred, georgia, garamond;
color: #000000;
width: 300px;
height: 70px;
font-size: 1rem;
font-weight: bold;
text-align: center;
z-index: 204;
}
/* |||||||||||| */
/* SCORE METER. */
/* |||||||||||| */
meter
{
background: #DCC8E0;
border: none;
width: 300px;
height: 100%;
display: block;
}
.finalscorehoover
{
background: linear-gradient(to right, #ff0000 0%, #FF4000 12.5%, #FF8000 25%, #FFC000 37.5%, #ffff00 50%, #C0E000 62.5%, #80C000 75%, #40A000 87.5%, #008000 100%);
height: 5px;
font-size: 100%;
width: 300px;
font-weight: bold;
z-index: 60;
color: #000000;
font-family: helvetica, garamond, palatino;
}
.finalscorehoover::after 
{
content : attr(data-value);
top: -33px;
left: 1px;
position:relative;
}
meter::-moz-meter-bar 
{
z-index: 50;
background-size: 100% 100%;
animation-name: bloodbar;
animation-duration: 3s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
animation-direction: alternate;	
}
@keyframes bloodbar
{
0%
{
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
background: #002015;
}
12.5%{background: #003020;}
25%{background: #00412b;}
37.5%{background: #005136;}
50%{background: #006140;}
62.5%{background: #00724b;}
75%{background: #008256;}
87.5%{background: #009261;}
100%	
{
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
background: #00a36c;
}
}
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* "kpopaccordion.js" CONTENT Button that hides/displays content */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */      
.kpopaccordion 
{
display: flex;
align-items: flex-start;
width: 100%;
height: 450px;
border-radius: .1px;
mask: radial-gradient(25px at 50px 50px, transparent 98%, black) -50px -50px;
background: linear-gradient(90deg, #edc9af 5%, transparent 25%), linear-gradient(210deg, #90d1de 10%, transparent 30%), linear-gradient(330deg, #e3bea1 10%, transparent 30%), linear-gradient(450deg, #d9b393 15%, transparent 35%), linear-gradient(570deg, #cea984 20%, transparent 40%), linear-gradient(690deg, #c49e76 25%, transparent 45%), linear-gradient(810deg, #ba9368 73%, transparent 93%);
color: #000000;
cursor: pointer;
padding-top: 25px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
border: .1px solid #edc9af;
font-size: 2rem;
font-family: zenloop, arial, verdana;
transition: 0.4s;
outline: solid;
outline-style: double;
outline-color: #a36c00;
outline-width: thick;
outline-offset: .2px;
}
.active, .kpopaccordion:hover 
{
display: flex;
align-items: flex-start;
width: 100%;
height: 450px;
border-radius: .1px;
mask: radial-gradient(25px at 50px 50px, transparent 98%, black) -50px -50px;
background: linear-gradient(90deg, #edc9af 5%, transparent 25%), linear-gradient(210deg, #90d1de 45%, transparent 65%), linear-gradient(330deg, #e3bea1 10%, transparent 30%), linear-gradient(450deg, #d9b393 15%, transparent 35%), linear-gradient(570deg, #cea984 20%, transparent 40%), linear-gradient(690deg, #c49e76 25%, transparent 45%), linear-gradient(810deg, #ba9368 73%, transparent 93%);
color: #000000;
cursor: pointer;
font-size: 2rem;
font-family: zenloop, arial, verdana;
border: .1px solid #ba9368;	
padding-top: 25px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
outline: solid;
outline-style: double;
outline-color: #bd7d00;
outline-width: thick;
outline-offset: .2px;
}
.kpoppanel 
{
text-align: center;
background: none;
border: none;
margin: auto;
width: 55%;
height: 100%;
padding: 15px 15px;
display: none;
overflow: scroll;
overflow-y: scroll; 												
overflow-x: hidden; 												
}
.kpopaccordion:after 
{
content: "\1F512 Click To Open";													
font-size: 1.5rem;
padding: 1px;
color: #F6E209;
background-color: #000000;
float: right;
clear: both;
border: none;
border-radius: .1px;
transform: rotate(30deg);
z-index: 100;
}
.active:after 
{
content: "\01F513 Click To Close";													
color: #F6E209;
font-size: 1.5rem;
padding: 1px;
background-color: #000000;
float: right;
clear: both;
border: none;
border-radius: .1px;
transform: rotate(30deg);
z-index: 100;
}
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* "kpopscrollshift.js" Scrolling down reveals an html banner  */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
.scrollingcontent 
{
display: flex;
flex-direction: column;
align-items: center;
width: 425px;
height: 200px;
border-radius: .1px;
color: #000000;
font-size: 1rem;
letter-spacing: 7px;
font-weight: bold;
font-family: fred, georgia, garamond;
text-align: center;
justify-content: center;
margin: 1px;
transform: translateX(-400%);
transition: transform 0.5s ease;
background: 
linear-gradient(to right, #003e87, #0766d7, #0375fc, #ffffff, #0375fc, #0766d7, #003e87) 50%/calc(100% - 60px) calc(100% - 60px) no-repeat,
radial-gradient(33px, transparent 60%, #ce1127, 22px, transparent 63%, #fb0825) 0 -30px/55.5px 60px round no-repeat,
radial-gradient(33px, transparent 60%, #ce1127, 22px, transparent 63%, #fb0825) 0 calc(100% + 30px)/55.5px 60px round no-repeat,
radial-gradient(33px, transparent 60%, #ce1127, 22px, transparent 63%, #fb0825) -30px 0/60px 55.5px no-repeat round,
radial-gradient(33px, transparent 60%, #ce1127, 22px, transparent 63%, #fb0825) 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);
}
/* ||||||||||||||||||||||||||||||||||||||||||| */
/* "kpoptablefilter.js" A sticky search filter */
/* ||||||||||||||||||||||||||||||||||||||||||| */
#kpopboxinput 
{
background-image: url(''); 											
background-size: 50px 50px;
background-position: 1px 40px; 										
background-repeat: no-repeat; 										
width: 90%; 														
font-size: 3rem;													
font-family: zenloop, arial, verdana;
padding: 3px 5px 3px 10px; 										
border: 1px solid #C061CB; 											
margin-bottom: 8px; 												
margin-left: 15px;
}
.sticker /* Currently, turned off. */
{
position: -webkit-sticky; 											
position: sticky;
top: 0;
z-index: 200;
}
/* ||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* "frontpagemenu.js" A menu strictly for "index.html" */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* ".tab" is the area underneath the ".tab button". */
.tab 
{
float: left;
border: none;
padding: 5px 5px;
width: 22%;
height: 800px;	
background: transparent;
}
/* Style the buttons that are used to open the tab content. */
.tab button 
{
font-size: 2.3rem;
font-family: fred, georgia, garamond;
display: block;
background: linear-gradient(to right, #005136, #006140, #00724b, #008256, #009261, #00A36C, #19ac7a, #b2e3d2, #ccece1, #ffffff, #ccece1, #b2e3d2, #19ac7a, #00A36C, #009261, #008256, #00724b, #006140, #005136);
color: #000000;
padding: 1px 1px;
width: 100%;
border: 1px solid #002015;
outline: solid;
outline-style: double;
outline-color: #00100a;
outline-width: thick;
outline-offset: 5px;
height: 110px;
text-align: left;
cursor: pointer;
}
/* Rotates at a degree within an x and y axis. */
#rotatedtabbutton
{
rotate: 3 7 0 60deg;
}
/* Change background color of buttons on hover. */
.tab button:hover 
{
background: radial-gradient(circle, #ffffff 6%, #cce7ec 12%, #b2dbe3 25%, #1993ac 50%, #0088a3 100%);
border: 1px solid #0088A3;
color: #000000;
animation-name: anitabbuttonhover;
animation-duration: .5s;
animation-iteration-count: infinite;
}
@keyframes anitabbuttonhover
{
0%		{background: radial-gradient(circle, #ffffff 6%, #cce7ec 12%, #b2dbe3 25%, #1993ac 50%, #0088a3 100%); border: 1px solid #0088A3; color: #CF0DEC;}
25%  	{background: radial-gradient(circle, #0088a3 6%, #ffffff 12%, #cce7ec 25%, #b2dbe3 50%, #1993ac 100%); border: 1px dashed #27C5E5; color: #000000;}
50%  	{background: radial-gradient(circle, #1993ac 6%, #0088a3 12%, #ffffff 25%, #cce7ec 50%, #b2dbe3 100%); border: 1px solid #0088A3; color: #CF0DEC;}
75%  	{background: radial-gradient(circle, #b2dbe3 6%, #1993ac 12%, #0088a3 25%, #ffffff 50%, #cce7ec 100%); border: 1px dashed #27C5E5; color: #000000;}
100% 	{background: radial-gradient(circle, #cce7ec 6%, #b2dbe3 12%, #1993ac 25%, #0088a3 50%, #ffffff 100%); border: 1px solid #0088A3; color: #CF0DEC;}
}
/* Creates an active/current "tab button" class. */
.tab button.fpactive 
{
background: radial-gradient(circle, #ffffff 6%, #cce7ec 12%, #b2dbe3 25%, #1993ac 50%, #0088a3 100%);
border: 1px solid #0088A3;
color: #000000;
animation-name: anitabbuttonhover;
animation-duration: .5s;
animation-iteration-count: infinite;
}
/* Tab Content Style */
.frontpagetabcontent 
{
float: right;
padding: 1px 1px;
width: 75%;
border-left: none;	
overflow-y:scroll;
height: 100%;
display: none;
border: none;
}
/* ||||||||||||||||||||||||||||||||||||||| */
/* "modalbox.js" A dialog box/popup window */
/* ||||||||||||||||||||||||||||||||||||||| */
.modal-button
{
background: linear-gradient(to right, #e5f5f0, #7fd1b5, #66c7a6, #00a36c, #66c7a6, #7fd1b5, #e5f5f0);
color: #000000;
font-family: fred, georgia, garamond;
font-size: 1rem;
border: 3px solid #000000;
width: 98%;
height: 50px;
}
.modal-button:hover
{
background: linear-gradient(to right, #00a36c, #66c7a6, #7fd1b5, #e5f5f0, #7fd1b5, #66c7a6, #00a36c);
color: #000000;
font-family: fred, georgia, garamond;
font-size: 2rem;
border: 3px solid #000000;
width: 98%;
height: 50px;
}
/* "modal" background */
.modal 
{
display: none; 
position: fixed; 
padding-top: 100px; 
left: 0;
top: 0;
width: 100%; 
height: 90%; 
overflow: auto; 
z-index: 205;
background: rgba(0,163,108,0.5);
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
border: 1px solid rgba(0,163,108,0.25);
}
/* Modal Content */
.modal-content 
{
background: rgba(0,163,108,0.5);
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
border: 1px solid rgba(0,163,108,0.25);
position: relative;
margin: auto;
padding: 0;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Animation for ".modal-content". */
@-webkit-keyframes animatetop 
{
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop 
{
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* CLOSE MODAL */
.close 
{
color: white;
float: none;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus 
{
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header 
{
padding: 2px 16px;
background: rgba(0,163,108,0.5);
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
border: 1px solid rgba(0,163,108,0.25);
color: white;
}
.modal-body 
{
margin: auto;
width: 77%;
padding: 15px 15px;
background: rgba(0,163,108,0.5);
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
border: 1px solid rgba(0,163,108,0.25);
}
.modal-footer 
{
background: rgba(0,163,108,0.5);
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
border: 1px solid rgba(0,163,108,0.25);
padding: 2px 16px;
color: white;
}