@font-face {font-family: 'UhBeeSe_hyun';src: url('UhBeeSe_hyun.woff') format('woff');}

body{
	background-color: #E3D8E9;
	
	text-align:center;
	font-family:UhBeeSe_hyun;
	font-weight:bold;
	color: #5f4385;
	font-size:16px;
}
*{
	margin:0;
	padding:0;
	
	/* I hate chrome*/
	/* nvm I hate every single browser there is */
	/*
	text-size-adjust: none;
	-webkit-text-size-adjust:none;*/
}
img{
	display:block;
}

a.plainlink{
	text-decoration:none;
}
#content{
	box-sizing: border-box;
	width:100%;
	padding-left:10px;
	padding-right:10px;
	max-width:720px;
	margin-left:auto;
	margin-right:auto;
	
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:20px;
}
#headerimage{
	box-sizing: border-box;
	width:100%;
	max-width:600px;
	height:unset;
	
	padding-left:20px;
	padding-right:20px;
	margin-bottom: -10px;
}
.introtext{
	box-sizing: border-box;
	width:100%;
	padding-left:0;
	padding-right:0;
	font-size:1.3em;
}
.normaltext{
	box-sizing: border-box;
	width:100%;
	padding-left:60px;
	padding-right:60px;
	font-family:"Noto Sans KR";
	font-weight: normal;
	text-align:left;
}
.reverse-indent-2em{ 
	margin-left: 2em; 
	text-indent: -2em;
}
.reverse-indent-2em > *{ 
	text-indent: 0;
}
.monotext-bold{
	font-family:"Noto Sans Mono";
	font-weight: bold;
}
.monotext{
	font-family:"Noto Sans Mono";
	font-weight: normal;
}
.nobreak{
	white-space: nowrap;
}
h2{
	margin-top:1.0em;
}
h2:after {
	content: "";
	display: block;
	height: 2px;
	width: 60%;
	margin-top: 3px;
	background: linear-gradient( 90deg, #5f4385FF,#5f438500 );
}

/*background-color:#5f4385; */
.divider{
	background: linear-gradient( 
		90deg, 
		#5f438500 0%,
		#5f4385FF 10%,
		#5f4385FF 90%,
		#5f438500 100% );
	width:100%;
}

/* A nice row of items. */
.flexrow{
	display:flex; 
	flex-direction:row; 
	justify-content:space-evenly; 
	align-items:center;
	gap:16px;
}
.flex-wrapping{
	flex-wrap:wrap;
}

a.snsbtn{
	text-decoration: none;
}
.snsbtn{
	display:block;
	font-weight:bold;
	text-align:center;
	display:flex;
	flex-direction:row;
	align-items:center;
	transition-property: background-color, color;
	transition-duration: 0.5s;
}

.snsbtn_larg {
	padding-left:12px;
	padding-right:12px;
	padding-top:4px;
	padding-bottom:4px;
	font-size:1.2em;
	border-radius:8px;
	gap:8px;
	border: 4px solid;
}
.snsbtn_larg > img {
	width:32px;
	height:32px;
}
.snsbtn_smol{
	padding-left:6px;
	padding-right:6px;
	padding-top:2px;
	padding-bottom:2px;
	font-size:0.8em;
	border-radius:6px;
	gap:4px;
	border: 2px solid;
}
.snsbtn_smol > img {
	width:24px;
	height:24px;
}

.twitter{
	border-color: #000000;
	background-color: #000000;
	color:#FFF;
}
.twitter:hover{
	background-color: #FFF;
	color:#000000;
}

.bluesky{
	border-color: #1185fe;
	background-color: #1185fe;
	color:#FFF;
}
.bluesky:hover{
	background-color: #FFF;
	color:#1185fe;
}
.bluesky > img {
	filter:drop-shadow(0 0 4px #1185fe);
}
.naver{
	border-color: #05d686;
	background-color: #05d686;
	color:#FFF;
}
.naver:hover{
	background-color: #FFF;
	color:#05d686;
}

.google{
	border-color: #4285f4;
	background-color: #4285f4;
	color:#FFF;
}
.google:hover{
	background-color: #FFF;
	color:#4285f4;
}

.malang{
	border-color: #5f4385;
	background-color: #5f4385;
	color:#FFF;
}
.malang:hover{
	background-color: #FFF;
	color:#5f4385;
}
.linkbar{
	width:100%;
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	border-radius:8px;
	background-color: #5f4385;
	align-items:stretch;
	height:48px;
}

.linkbar a {
	display:flex;
	text-decoration: none;
}

.linkbar_btn{
	flex-grow:1;
	font-size:1.4em;
	padding-left:10px;
	padding-right:10px;
	display:flex;
	flex-direction:row;
	justify-content: center;
	align-items: center;
	border-width:4px 0;
	border-style:solid;
	border-color:#FFFFFF00;
	transition:border-color 0.5s;
	
}

.linkbar_btn:hover{
	border-bottom-color:#FFFFFFFF;
	animation:btn_hover_anim 1s infinite;
}
@keyframes btn_hover_anim{
	from { padding-bottom: 0; }
	50% { padding-bottom: 4px; }
	to { padding-bottom: 0; }
}

.linkbar_red{
	color:#ff91db;
}
.linkbar_yellow{
	color:#f2df8c;
}
.linkbar_blue{
	color:#70bcff;
}
.linkbar_purple{
	color:#c9aaf2;
}

.linkbar_inactive{
	color:#FFFFFF40 !important;
}

.linkbar_selected{
	color:#F0F0F0 !important;
	text-shadow:#FFFFFF 0 0 10px;
	border-bottom-color: #FFFFFFFF;
}

.selected_icon{
	display:none;
}
.unselected_icon{
	display:block;
}
.linkbar_selected > .selected_icon{
	display:block !important;
}
.linkbar_selected > .unselected_icon{
	display:none !important;
}


.image-with-text{
	display:flex;
	flex-direction:column;
	align-items:center;
}
.imgdesc{
	align-self:flex-end;
	box-sizing: border-box;
	/*width:100%;*/
	padding-left:16px;
	padding-right:16px;
	padding-top:4px;
	font-family:"Noto Sans KR";
	font-weight: normal;
	text-align:left;
	opacity:0.8;
	font-size:0.8em;
}
.imgdesc_snsicon{
	width:14px;
	height:14px;
	margin-left:2px;
}






/* Card lists: Staff list, News page*/
.cardlist{
	display:flex;
	flex-direction:column;
	width:100%;
	box-sizing: border-box;
	gap:8px;
}
.cardpost{
	position:relative;
	display:flex;
	flex-direction:row;
	filter:drop-shadow(0 0 4px #00000080);
	/*border: 1px solid black;*/
	text-align:left;
	
	text-decoration:none;
	color: #5f4385;
	
	border-radius:12px;
	overflow:hidden;
	background-color:#FFF;
}
.cardbgtop{
	position: absolute;
	top:0px; 
	left:0px; 
	bottom:0px; 
	right:0px;
	z-index:-5;
}.cardbg{
	position: absolute;
	top:0px; 
	left:0px; 
	bottom:0px; 
	right:0px;
	z-index:-10;
}
.cardpic{
	display:flex;
	flex-direction:column;
	margin-right:4px;
	/*border-radius:12px;*/
	align-items:center;
	justify-content:center;
}
.cardpic > img{
	object-fit: cover;
	/*border-radius: 5px;*/
	width:100px;
	height:100px;
	border-radius:10px;
}
.cardbody{
	display:flex;
	flex-direction:column;
	gap:4px;
	flex-grow:1;
	padding:8px;
	align-items:stretch;
	width:0;
}

.stafflist .cardpost{
	background-color:#f1ebf4;
}
.stafflist .cardpic > img{
	border-radius:50%;
	margin-left:12px;
	margin-right:4px;
}
.stafflist{
	max-width:500px;
	margin-left: auto;
	margin-right: auto;
}
/*
.stafflist .cardbgtop{
	opacity:0.5;
	background-color:#E3D8E9;
}
.stafflist .cardbg{
	display:none;
	background-position: right bottom;
	background-size: 100px auto;
	background-repeat: no-repeat;
	background-image:url(bgimg_orig/CM_CropA_R_1000px.png);
}*/
.stafftop{
	display:flex;
	flex-direction:row;
	gap:8px;
	justify-content:flex-start;
	align-items:baseline;
}
.staffname{
	font-size:1.5em;
	font-weight:bold;
}
.staffbio{
	margin-left:4px;
	font-size:1.0em;
}
.staffsns{
	display:flex;
	flex-direction:row; 
	justify-content:flex-start;
	align-items:flex-start;
	gap:8px;
	flex-wrap:wrap;
}


.newslist{
	font-family:"Noto Sans KR";
	font-weight: normal;
}
.newslist .cardbgtop{
	opacity:0.9;
	background-color:#FFF;
}
.newslist .cardbg{
	background-position: center center;
	background-size: cover;
	filter: blur(3px);
}
.newstext{
	font-size:1.0em;
	mask-image: linear-gradient(to right, rgba(0,0,0,1) 60%, rgba(0,0,0,0));
	overflow:hidden;
	white-space: nowrap;
}
.newsbottom{
	display:flex;
	align-items:center;
}
.newstime{
	font-size:0.8em;
	align-self:flex-start;
}


.timetable{
	font-family:"Noto Sans KR";
	font-weight: normal;
	border-collapse: separate;
	border-spacing:5px;
}
.timetable tr{
	height:30px;
	
}
.tt_block{
	border-radius:4px;
	padding: 4px 16px;
}

.tt_block_vert{
	border-radius:4px;
	padding: 16px 4px;
	text-align: center; 
    vertical-align: middle;
}
.tt_block_vert_inner{
	writing-mode: vertical-rl; 
	text-orientation: sideways; 
	margin: auto;
	width: 40px; 
	display: flex; 
	justify-content: center; 
	align-items:center; 
	flex-direction:row; 
	transform: rotate(180deg);
}

/* I hate safari */
.tt_block_vert_inner div{
	writing-mode: vertical-lr !important; 
	text-orientation: sideways !important;
}

.tt_time{
	font-size:0.7em;
}
.tt_trange{
	font-style: italic;
	font-size:1.0em;
}
.tt_actname{
	font-size:1.3em;
	font-weight: bold;
}
.tt_block_red{
	background-color:#ff91db;
}
.tt_block_yellow{
	background-color:#f2df8c;
}
.tt_block_blue{
	background-color:#70bcff;
}
.tt_block_purple{
	background-color:#c9aaf2;
}
.tt_block_aj{ background-color:#FABA62; }
.tt_block_pp{ background-color:#F5B7D0; }
.tt_block_fs{ background-color:#FAF5AB; }
.tt_block_rd{ background-color:#9BDBF5; }
.tt_block_ry{ background-color:#EAEEF0; }
.tt_block_ts{ background-color:#CC9CDF; }
.tt_block_sp{ background-color:#96CE7D; }
.tt_block_ss{ background-color:#FFCA54; }
.tt_block_sg{ background-color:#F2C7F8; }
.tt_block_flawless{ background-color:#C1C7F4; }
.tt_expl{
	height:100%; /* idk why but this is needed for child divs to fill this cell*/
	font-size:1.0em;
	width:320px;
	opacity:1.0;
	text-align:left;
	padding-left:4px;
}
.tt_exfill{
	width:100%;
	height:100%;
	position:relative;
	display:flex;
	flex-direction:column;
	align-content:flex-start;
	justify-content:center;
}
.tt_extext{
}
.tt_exbg{
	position:absolute;
	left:-16px;
	right:0;
	top:0;
	bottom:0;
	z-index:-3;
	opacity:0.5;
}
.tt_exbg_aj{ background:linear-gradient(90deg, #FABA62FF 0%, #FABA6200 100%); }
.tt_exbg_pp{ background:linear-gradient(90deg, #F5B7D0FF 0%, #F5B7D000 100%); }
.tt_exbg_fs{ background:linear-gradient(90deg, #FAF5ABFF 0%, #FAF5AB00 100%); }
.tt_exbg_rd{ background:linear-gradient(90deg, #9BDBF5FF 0%, #9BDBF500 100%); }
.tt_exbg_ry{ background:linear-gradient(90deg, #EAEEF0FF 0%, #EAEEF000 100%); }
.tt_exbg_ts{ background:linear-gradient(90deg, #CC9CDFFF 0%, #CC9CDF00 100%); }
.tt_exbg_sp{ background:linear-gradient(90deg, #96CE7DFF 0%, #96CE7D00 100%); }
.tt_exbg_ss{ background:linear-gradient(90deg, #FFCA54FF 0%, #FFCA5400 100%); }
.tt_exbg_sg{ background:linear-gradient(90deg, #F2C7F8FF 0%, #F2C7F800 100%); }

@media (width>900px){
	.bgdisp{display:flex;}
}
@media (width<=900px){
	.bgdisp{display:none;}
}

.bgdisp{
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	flex-direction:row;
	align-items:stretch;
	z-index:-100;
}
.bg_spacer{
	opacity:0.4;
	width:500px;
	flex-shrink:0;
	flex-grow:0;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
}
.bg_container{
	width:0;
	flex-grow:1;
	display:flex;
	flex-direction:column;
}
.bg_topbg_left{
	align-items:flex-start;
}
.bg_right{
	align-items:flex-end;
}
.bg_top{
	justify-content:flex-start;
}
.bg_btm{
	justify-content:flex-end;
}
.bg_container img{
	opacity:0.2;
	width:100%;
	max-width:600px;
}

.bottom_floater{
	position:fixed;
	right:0;
	bottom:0;
	left:0;
	display:flex;
	flex-direction:row;
	align-items:flex-end;
	justify-content:center;
	gap:16px;
	z-index:+10;
}

.bottom_floater > a{
	margin:10px;
	box-shadow: 0 0 5px #000000FF;
}
a.actual_link{
	color:#5f4385;
	font-weight:bold;
}

a.link_with_icon{
	display:inline-flex;
	flex-direction:row;
	align-items:center;
	flex-wrap:wrap;
}

/* I hate safari */
/* Explanation: Safari renders the text-shadow effect */
/* with some weird 3D shenanigans that result in a very different looking */
/* shadows compared to chrome or firefox.*/
/* Using drop-shadow is a good enough workaround. */
.hanmari{
	color:#ffffff;
	font-weight:bold;
	/*text-shadow: #000000FF 0 0 4px;*/
	filter: drop-shadow(0px 0px 3px #000000C0);
}
.kimmari{
	color:#404040;
	font-weight:bold;
	/*text-shadow:#FFFFFFFF 0 0 4px;*/
	filter: drop-shadow(0px 0px 3px #FFFFFFFF);
}

.mari_big{
	font-size:1.5em;
}
.hanmari.mari_big{
	/*text-shadow: #00000080 0 0 6px;*/
	filter: drop-shadow(0px 0px 4px #000000D0);
}
.kimmari.mari_big{
	/*text-shadow:#FFFFFFD0 0 0 6px;*/
	filter: drop-shadow(0px 0px 4px #FFFFFFD0);
}

.placeholder{
	color:#FF0000;
	font-weight:bold;
}


.fanart_gallery{
	display:flex;
	flex-direction:row;
	justify-content:center;
	width: 100%;;
	flex-wrap: wrap;
	
	font-family:"Noto Sans KR";
	font-weight: normal;
}
.fanart_container{
	margin:8px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:8px;
}
.fanart_thumb{
	max-width:max(300px,calc(20vw - 24px));
	
	object-fit: contain;
	filter:drop-shadow(2px 2px 5px #00000080);
}/* max-height:200px; */

.pulsating{
	animation-duration: 0.3s;
	animation-direction: alternate;
	animation-delay: 0s;
	animation-play-state: running;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name:pulsateanim;
}
@keyframes pulsateanim {
  from {
    /* pushes the sun down past the viewport */
    opacity: 1.0;
  }
  to {
    /* returns the sun to its default position */
    opacity: 0.5;
  }
}

.loading-spinner{
	animation-duration: 1.0s;
	animation-direction: normal;
	animation-delay: 0s;
	animation-play-state: running;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name:fullrotation;
	width:32px;
	height:32px;
}
@keyframes fullrotation {
	from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

/*
.spthanks{
	display:flex;
	flex-direction:row;
	width:100%;
	justify-content:space-evenly;
	flex-wrap:wrap
}
.spthanks > div{
	width:230px;
}
*/

.spthank_table{
	font-family:"Noto Sans KR";
	font-weight: normal;
	border-collapse: collapse;
}
.spthank_spacer{
	height:8px;
}
.spthank_name{
	width:200px;
	vertical-align: top;
	text-align:left;
	padding-left:10px;
	/*border-right:1px solid #5f4385;*/
}
.spthank_desc{
	width:200px;
	vertical-align: top;
	font-weight:bold;
	text-align:right;
	padding-right:10px;
}

.ruleframe{
	width:100%;
	flex-grow:1;
	border-radius:8px; 
	border:2px solid #5f4385;
	box-sizing: border-box;
}

/* Responsive Section */
/* Targeting down to 300px. */

/* Mobile mode */
@media (width<640px) {
	.normaltext{
		font-size:1.0em;
		padding-left:20px;
		padding-right:20px;
	}
	.linkbar_btn{
		font-size:1.1em;
	}
	
	/* For use with .flexrow - pivots at 680px*/
	.mobile-pivot-early{
		flex-direction:column;
	}
	.linkbar a {
		flex-grow:1;
	}
	.linkbar_btn{
		padding-left:0;
		padding-right:0;
	}
}

/* Smaller Mobiles */
@media (width<480px) {
	/* For use with .flexrow - pivots at 500px*/
	.mobile-pivot-late{
		flex-direction:column;
	}
	.tt_block{
		padding: 4px 4px;
	}
	.stafftop{
		flex-direction:column;
		justify-content:flex-start;
		align-items:flex-start;
	}
	
	.tt_block{
		font-size:0.9em;
	}
	
	.fanart_thumb{
		max-width:90vw;
	}
}

/* Ridiculously Small Mobiles */
@media (width<360px) {
	.mobile-pivot-verylate{
		flex-direction:column;
	}
	.staffname{
		font-size:1.3em;
	}
	
}

/* Mobile ladder */
/* PC <-640-> Big Mobile <-480-> Small Mobile <-360-> Ridiculous <-300-> I give up */
@media (width>=480px) and (width<640px) {
	body{
		font-size:18px;
	}
	.linkbar_btn{
		font-size:1.1em;
	}
	.linkbar_btn img{
		height:40px;
		width:40px;
	}
	.linkbar{
		height:44px;
	}
	.tt_expl{
		width:220px;
	}
}
@media (width>=360px) and (width<480px) {
	body{
		font-size:16px;
	}
	.linkbar_btn{
		font-size:1.0em;
	}
	.linkbar_btn img{
		height:32px;
		width:32px;
	}
	.linkbar{
		height:36px;
	}
	.tt_block_vert_inner{
		width:32px;
	}
	.tt_expl{
		width:200px;
		font-size:0.9em;
	}
}
@media (width<360px) {
	body{
		font-size:14px;
	}
	.linkbar_btn{
		font-size:1.1em;
	}
	.linkbar_btn img{
		height:32px;
		width:32px;
	}
	.linkbar{
		height:36px;
	}
	.tt_block_vert_inner{
		width:24px;
	}
	.tt_expl{
		width:180px;
		font-size:0.85em;
	}
}