/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* INSTALLED FONT. Note: Do not change syntax or font won't show!  */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
@font-face 
{
font-family: 'monotonfont';
src: 
url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
url('myfont-webfont.woff') format('woff'), 
url('https://d-w-o-o-w-b.neocities.org/etc/monoton.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-w-o-o-w-b.neocities.org/etc/zenloop.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-w-o-o-w-b.neocities.org/etc/fred.ttf')  format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
/* ||||||||||||||| */
/* MAIN BACKGROUND */
/* ||||||||||||||| */
html 
{
height: 100%;
}
body 
{
background-image: 
linear-gradient(45deg, transparent 44%, #9c55a6 22%, transparent 77%),
linear-gradient(-45deg, transparent 22%, #5a1464 44%, transparent 0), 
linear-gradient(77deg, transparent 55%, #883d94 33%, transparent 33%), 
linear-gradient(-77deg, transparent 33%, #71287c 55%, transparent 0),
radial-gradient(#612f68 16px, transparent 0);
background-size: 44px 45px, 46px 47px, 48px;
background-color: #b578be;
height: 100%;
margin: 0;
}
/* ||||||||||||||| */
/* 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 */
/* |||||||||||| */
.menuentry
{
color: #ffffff;
font-size: 1rem;
font-family: monotonfont, arial, verdana, tahoma;
text-align: center;
border: none;
background: rgba(79, 67, 80, 0.34);
border-radius: 1px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(2.9px);
z-index: 202;
}
/* |||||||||||||| */
/* USER LOGO TEXT */
/* |||||||||||||| */
.logouser
{
color: #bc4763;
font-size: 9rem;
font-family: fred, helvetica, garamond, palatino;
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;}
}
/* |||||||||||||||||||||| */
/* Canvas for Babymonster */
/* |||||||||||||||||||||| */
#canvas 
{
width: 100%;
height: 52%;
}
/* ||||||||||||||||||| */
/* REGULARLY USED TEXT */
/* ||||||||||||||||||| */
.moneroaddress
{
background-color: #DC8ADD;
font-size: 1.3rem;
font-family: zenloop, arial, verdana, tahoma;
font-weight: bold;
}
.kpoptitle
{
padding: 20px;
text-align: center;
color: #000000;
background: linear-gradient(to right, #b578be, #4f4350, #b5a7b6, #ca7a51, #8f4822, #b578be, #4f4350, #b5a7b6, #ca7a51, #8f4822);
border-radius: 10px;
border: 1px solid rgba(79, 67, 80, 0.34);
font-size: 2rem;
font-family: monotonfont, helvetica, garamond, palatino;
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-color: #DC8ADD;
background: linear-gradient(to right, #7E2680, #C467C5, #DC8ADD, #C467C5, #7E2680);
color: #000000;
font-family: zenloop, arial, verdana, tahoma; 
font-size: 1.3rem;
font-weight: bold;
width: 50%;
}
.kpopdisbanded
{
background-color: #F11223;
background: linear-gradient(to right, #AE3740, #E11D2B, #F11223, #E11D2B, #AE3740);
color: #000000;
font-family: zenloop, arial, verdana, tahoma; 
font-size: 1.2rem;
font-weight: bold;
width: 50%;
}
/* |||||||||||||||||| */
/* Link Customization */
/* |||||||||||||||||| */
a:link, a:visited 
{
border: .8px solid transparent;
color: #ffffff; 
font-weight: bold;	
}
a:hover, a:active 
{
background: #E7EB69;
border: .8px dashed #000000;
color: #000000;
font-weight: bold;
}
/* |||||||||| */
/* LINE BREAK */
/* |||||||||| */
hr
{
height: .5px;
color: #F7C107;
}
/* |||||||||||||||||||||| */
/* Kpop Image Properties  */
/* |||||||||||||||||||||| */
.gifimg 
{
width: 95%;
padding: 1px;
border: 5px solid #b578be;
}
.gifimg:hover
{
border: 5px dashed #F7C107;
}
.kpoppix
{
width: 100px;
height: 100px;
vertical-align: middle;
filter: grayscale(90%);
}
.kpoppix:hover
{
width: 100px;
height: 100px;
filter: grayscale(0%);
transition: .4s;
}
/* ||||||||||||| */
/* KPOP TITLE    */
/* ||||||||||||| */
h1
{
padding: 25px;
color: #000000;
background: linear-gradient(to right, #b578be, #4f4350, #b5a7b6, #ca7a51, #8f4822, #b578be, #4f4350, #b5a7b6, #ca7a51, #8f4822); 	
font-family: fred, arial, verdana, tahoma; 
font-weight: bold;
font-size: 2.5rem;
text-decoration: overline underline;
border-radius: 20px;
border: 1px solid rgba(79, 67, 80, 0.34);
}
h2
{
padding: 25px;
color: #000000;
background: linear-gradient(to right, #b578be, #4f4350, #b5a7b6, #ca7a51, #8f4822, #b578be, #4f4350, #b5a7b6, #ca7a51, #8f4822);
font-family: fred, arial, verdana, tahoma;
font-weight: bold;
font-size: 2.4rem;
text-decoration: overline underline;
border-radius: 20px;
border: 1px solid rgba(79, 67, 80, 0.34);
}
h3
{
padding: 25px;
color: #000000;
background: linear-gradient(to right, #b578be, #4f4350, #b5a7b6, #ca7a51, #8f4822, #b578be, #4f4350, #b5a7b6, #ca7a51, #8f4822);
font-family: fred, arial, verdana, tahoma;
font-weight: bold;
font-size: 2.3rem;
text-decoration: overline underline;
border-radius: 20px;
border: 1px solid rgba(79, 67, 80, 0.34);
}
h4
{
padding: 25px;
color: #000000;
background: linear-gradient(to right, #b578be, #4f4350, #b5a7b6, #ca7a51, #8f4822, #b578be, #4f4350, #b5a7b6, #ca7a51, #8f4822);
font-family: fred, arial, verdana, tahoma;
font-weight: bold;
font-size: 2.2rem;
text-decoration: overline underline;
border-radius: 20px;
border: 1px solid rgba(79, 67, 80, 0.34);
}
h5
{
padding: 25px;
color: #000000;
background: linear-gradient(to right, #b578be, #4f4350, #b5a7b6, #ca7a51, #8f4822, #b578be, #4f4350, #b5a7b6, #ca7a51, #8f4822);
font-family: fred, arial, verdana, tahoma;
font-weight: bold;
font-size: 2.1rem;
text-decoration: overline underline;
border-radius: 20px;
border: 1px solid rgba(79, 67, 80, 0.34);
}
h6
{
padding: 25px;
color: #000000;
background: linear-gradient(to right, #b578be, #4f4350, #b5a7b6, #ca7a51, #8f4822, #b578be, #4f4350, #b5a7b6, #ca7a51, #8f4822);
font-family: fred, arial, verdana, tahoma;
font-weight: bold;
font-size: 2rem;
text-decoration: overline underline;
border-radius: 20px;
border: 1px solid rgba(79, 67, 80, 0.34);
}
/* ||||||||||||| */
/* KPOP SECTION  */
/* ||||||||||||| */
.blog
{
padding: 15px;
background-color: #DC8ADD;
color: #000000;
font-family: zenloop, arial, verdana, tahoma; 
font-size: 1.5rem;
font-weight: bold;
border: 7px dotted #496898;
}
.kpopnoteskip
{
background-color: #EB7171;
color: #000000;
font-family: zenloop, arial, verdana, tahoma; 
font-size: 1.5rem;
font-weight: bold;
}
.kpopbio
{
background-color: #DC8ADD;
color: #000000;
font-family: zenloop, arial, verdana, tahoma; 
font-size: 1.5rem;
font-weight: bold;
border: 7px dotted #496898;
}
.kpopratinglink
{
background-color: #EB7171;
color: #000000;
font-family: zenloop, arial, verdana, tahoma; 
font-size: 1.5rem;
font-weight: bold;
}
.kpopblog
{
background-color: #9BBCEF;
color: #000000;
font-family: zenloop, arial, verdana, tahoma; 
font-size: 1.5rem;
font-weight: bold;
border: 7px dotted #496898;
}
.kpopcalculations
{
background-color: #EEC95B;
color: #000000;
font-family: zenloop, arial, verdana, tahoma; 
font-size: 1.5rem;
font-weight: bold;
}
/* ||||||||||||||||||| */
/* TABLE CUSTOMIZATION */
/* ||||||||||||||||||| */
table
{
background: rgba(79, 67, 80, 0.34);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(2.9px);
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
background-size: 58px 58px;
border: 1px solid rgba(79, 67, 80, 0.34);
border-spacing: 5px 5px;  
width: 100%;
margin: auto;
}
/* |||||||||||||||||||||||||||||||| */
/* KPOP IMAGE DESCRIPTION DROPDOWN. */
/* |||||||||||||||||||||||||||||||| */
.kpopdropdown 
{
position: relative;
display: inline-block;
}
.kpopdropdowncontent 
{
display: none;
position: absolute;
background-color: #F7C107;
width: 100%;   
z-index: 203;
border-radius: 1px;
}
.kpopdropdown:hover .kpopdropdowncontent 
{
display: block;
}
.kpopdescription 
{
padding: .1px;
background-color: #804D91;
border: 1px solid #F7C107;
color: #ffffff;
width: 200px;
font-size: 1.2rem;
font-weight: bold;
text-align: center;
z-index: 204;
}
/* ||||||||||||||||||||||||||||| */
/* THIS IS THE KPOP 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: 60;
color: #000000;
font-family: helvetica, garamond, palatino, zenloop;
}
.finalscorehoover::after 
{
content : attr(data-value);
top: -40px;
left: 1px;
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%);}
}
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* This is for "kpopaccordion.js". It is an Accordion FOR CONTENT BLOGS(Button that hides/displays content) */
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */      
.kpopaccordion 
{
display: flex;
align-items: flex-start;
width: 100%;
border-radius: 1px;
mask: radial-gradient(25px at 50px 50px, transparent 98%, black) -50px -50px;
background: linear-gradient(to right, #a45a51, #c19a6c, #a45a51, #ba8a65, #a45a51, #b37a5f, #a45a51, #ab6a58, #a45a51);
color: #000000;
cursor: pointer;
padding-top: 25px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 1px;
border: 1px solid #823329;
font-size: 2rem;
font-weight: bold;
font-family: zenloop, arial, verdana, tahoma;
transition: 0.4s;
}
.active, .kpopaccordion:hover 
{
display: flex;
align-items: flex-start;
width: 100%;
border-radius: 1px;
mask: radial-gradient(25px at 50px 50px, transparent 98%, black) -50px -50px;
background: linear-gradient(to right, #c19a6c, #ba8a65, #c19a6c, #b37a5f, #c19a6c, #ab6a58, #c19a6c, #a45a51, #c19a6c);
color: #ec1919;
cursor: pointer;
font-size: 2rem;
font-family: zenloop, arial, verdana, tahoma;
font-weight: bold; 
border: 1px dotted #000000;	
padding-top: 25px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 1px;
}
.kpoppanel 
{
text-align: center;
background: #000000;
margin: auto;
width: 77%;
height: 490px;
padding: 15px 15px;
border: 1px dashed #000000;
border-radius: 1px;
display: none;
overflow: scroll;
overflow-y: scroll; 												
overflow-x: hidden; 												
}
.kpopaccordion:after 
{
content: "OPEN BLOG\1F512";													
font-size: 1.2rem;
color: #D0B6B5;
background-color: #000000;
float: right;
clear: both;
border: 3px solid #b48482;
border-radius: 4px;
transform: rotate(20deg);
}
.active:after 
{
content: "CLOSE BLOG\1F513";													
color: #D0B6B5;
font-size: 1.2rem;
background-color: #000000;
float: right;
clear: both;
border: 3px solid #b48482;
border-radius: 4px;
transform: rotate(20deg);
}
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* This is for "kpopscrollshift.js". It shifts an html section to the left after scrolling down. */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
.scrollingcontent 
{
display: flex;
flex-direction: column;
align-items: center;
width: 325px;
height: 200px;
border-radius: 1px;
color: #000000;
font-size: 1.3rem;
font-weight: bold;
font-family: fred, helvetica, garamond, palatino;
text-align: center;
justify-content: center;
margin: 1px;
box-shadow: 1px 2px 3px 4px #3A2C4D;
transform: translateX(300%);
transition: transform 0.5s ease;
background: 
linear-gradient(to right, #0047a0, #7593BB, #97B0D0, #7593BB, #0047a0) 50%/calc(100% - 60px) calc(100% - 60px) no-repeat,
radial-gradient(30px,transparent 98%,#cd2e3a) 0 -30px/55.5px 60px round no-repeat,
radial-gradient(30px,transparent 98%,#D82634) 0 calc(100% + 30px)/55.5px 60px round no-repeat,
radial-gradient(30px,transparent 98%,#E31E2C) -30px 0/60px 55.5px no-repeat round,
radial-gradient(30px,transparent 98%,#F11223) 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(-25%);
}
.scrollingcontent.show 
{
transform: translateX(0);
}
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* This is for "kpoptablefilter.js". This is a kpop filter search. It also sticks to the screen. */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
#kpopboxinput 
{
background-image: url(''); 											
background-size: 50px 50px;
background-position: 1px 40px; 										
background-repeat: no-repeat; 										
width: 85%; 														
font-size: 1.2rem; 													
font-family: zenloop, arial, verdana, tahoma;
font-weight: bold;
padding: 3px 5px 3px 10px; 										
border: 1px solid #C061CB; 											
margin-bottom: 8px; 												
margin-left: 15px;
}
.sticker
{
position: -webkit-sticky; 											
position: sticky;
top: 0;
z-index: 200;
}
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* This is for "frontpagemenu.js". This is the menu strictly for the "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.7rem;
font-family: fred, arial, verdana, tahoma;
display: block;
background: linear-gradient(to right, #5c0d68, #eacdf6, #c692dd, #9458a1, #a66fb9, #eacdf6, #eacdf6, #c692dd, #9458a1, #a66fb9, #5c0d68);
color: #301848;
padding: 1px 1px;
width: 100%;
border: 1px solid #133421;
outline: solid;
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: linear-gradient(to right, #a57b0a, #bf9a33, #febd14, #fece43, #feda75, #a57b0a, #bf9a33, #febd14, #fece43, #feda75);
border: 1px dashed #feda75;
}
/* Creates an active/current "tab button" class. */
.tab button.fpactive 
{
background: linear-gradient(to right, #a57b0a, #bf9a33, #febd14, #fece43, #feda75, #a57b0a, #bf9a33, #febd14, #fece43, #feda75);
border: 1px dashed #feda75;
color: #000000;
}
/* Styling for the tab content. */
.frontpagetabcontent 
{
float: right;
padding: 1px 1px;
width: 75%;
border-left: none;	
overflow-y:scroll;
height: 11100px;
display: none;
border: none;
}
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* This is for "modalbox.js". It creates a dialog box/popup window that is displayed on top of the current page. */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
.modal-button
{
background-color: #C411C6;
color: #000000;
font-family: fred, arial, verdana, tahoma;
font-size: 1.3rem;
border: 5px solid #B915BB;
width: 700px;
height: 100px;
}
.modal-button:hover
{
background-color: #ED82EE;
color: #5E1A5F;
font-family: fred, arial, verdana, tahoma;
font-size: 2.4rem;
border: 5px dashed #672668;
width: 700px;
height: 100px;
}
/* The background for "modal". */
.modal 
{
display: none; 
position: fixed; 
padding-top: 100px; 
left: 0;
top: 0;
width: 100%; 
height: 90%; 
overflow: auto; 
background-color: rgb(0,0,0); 
background-color: rgba(0,0,0,0.4); 
z-index: 205;
}
/* Modal Content */
.modal-content 
{
position: relative;
background-color: #A53BF7;
margin: auto;
padding: 0;
border: 1px solid #888;
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}
}

/* Visual display of "close". */
.close 
{
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus 
{
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header 
{
padding: 2px 16px;
background-color: #A53BF7;
color: white;
}
.modal-body 
{
margin: auto;
width: 77%;
padding: 15px 15px;
border: 5px dashed #000000;
border-radius: 1px;
background-color: #CFA5F0;
}
.modal-footer 
{
padding: 2px 16px;
background-color: #A53BF7;
color: white;
}