* {
	cursor: url('images/cursor.png') 5 6, auto !important;
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
	box-sizing: border-box;
	color: inherit;
	font-family: 'Hahmlet-Regular';
}
*::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ }
*:hover { cursor: url('images/cursor.png') 5 6, auto !important; }
a:link { text-decoration: none; color: inherit; }
a:visited { text-decoration: none; color: inherit; }
a:active { text-decoration: none; color: inherit; }
a:hover { text-decoration: none; color: inherit; }
@font-face {
    font-family: 'Hahmlet-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2110@1.0/Hahmlet-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

:root {
	--color1 : #EBD7FF; /*배경색1*/
	--color2 : #FFF5C4; /*배경색2*/
	--color3 : #60575f; /*텍스트 색상*/
	--color4 : rgba(222, 204, 232, 0.6); /*반투명 배경색*/
	--color5 : rgb(182, 165, 178); /*그림자*/
	--colorA : rgb(120, 148, 99); /*A테마컬러1*/
	--colorB : #8b21bc; /*B테마컬러1*/
	--bggra : linear-gradient(to bottom, var(--color1), var(--color2));
	--fontK : 'Pretendard-Regular'; /*폰트*/
}

html { width: 100vw; height: 100vh; }

body {
	background-image: var(--bggra);
	background-repeat: no-repeat;
	background-attachment: fixed;
	width: 100vw;
	height: 100vh;
}

.blur {	filter: blur(10px); transition: all 0.1s linear; }
.visible { opacity: 1; visibility: visible; transition: all 0.1s linear; }
.hidden { opacity: 0;	visibility: collapse; transition: all 0.1s linear; }

.allwrap { width: 1560px; transition: all 0.1s linear; }

/*---데코---*/
.corner { width: 251px; height: 252px; position: fixed; z-index: 99; }
#topleft { top: 0; left: 0; transform: scaleY(-1) scaleX(-1);  }
#topright { top: 0; right: 0; transform: scaleY(-1); }
#bottomleft { bottom: 0; left: 0; transform: scaleX(-1); }
#bottomright { bottom: 0; right: 0; }

/*---조작버튼---*/
.buttons { position: fixed; bottom: 0; }
.buttons .btn { margin: 0 5px; font-size: 18pt; }
.buttons .btn i { transition: all 0.1s linear; }
.btnA i { color: var(--colorA); }
.btnBG i { color: var(--color5); }
.btnB i { color: var(--colorB); }
.btnB#B0 i { color: #60575f; }
.buttons .btn:hover i { color: white; transform: translateY(-10pt); text-shadow: 0 0 6px var(--color1); }

/*---정보 커버---*/

.infocover { width: 100vw; height: 100vh; position: fixed; z-index: 90; background-color: var(--color4); }
.coverinner { font-family: 'Hahmlet-Regular'; text-align: center; color: var(--color3); }
.coverinner strong { background-color: var(--color2); padding: 1px 2px; }
.coverinner a, .coverinner a:visited .coverinner a:link, .coverinner a:active, .coverinner .bi-x-lg { color: var(--color5); transition: all 0.2s ease; }
.coverinner a:hover, .coverinner .bi-x-lg:hover { color: white; }
.coverinner h1 { font-size: 14pt; color: var(--color5); margin-top: 40px; }
.coverinner .musicinfo { font-size: 10pt; }

#youtubeplayer {
	width: 24pt; height: 24pt;
	position: absolute; z-index: 10;
	overflow: hidden;
	border-radius: 12pt;
	left: 18pt; top: 3pt;
	transition: all 0.1s linear;
}
.buttons .btn#playmusic:hover #youtubeplayer { color: white; transform: translateY(-10pt); text-shadow: 0 0 6px var(--color1); }


/*---옷장,박스 정렬---*/
.closet { width: 360px; height: 500px; }
.charabox, .basetop { width: 800px; height: 650px; transition: all 0.2s ease; }
.charabox { background-image: url('images/bg/bg1.png'); }
.basetop { background-image: url('images/bg/basetop.png'); }
.charabase { width: 287px; height: 396px; margin-bottom: 40px; }
.charabase img { position: absolute; }
#charaA { margin-right: -50px;  }
#charaB { }
#closetA { background-image: url('images/bg/closet.png'); }
#closetB { background-image: url('images/bg/closet2.png'); }
.closetinbox { width: 240px; height: 280px; top: 112px; position: relative; }

/*---캐릭터---*/
.a_hair1, .b_hair1 { display: block; }
.a_hair2,.a_hair3, .a_hair4, .a_hair5, .a_hair6, .b_hair2, .b_hair3, .b_hair4, .b_hair5, .b_hair6, #b_back { display: none; }

/*---의상---*/
.cc { position: absolute; transition: filter 0.2s ease; }
.cc:hover { filter: drop-shadow(0 0 5px var(--color5));}

#ac1 { bottom: 0; right: -70px; }
#ac2 { bottom: 0; right: -30px; }
#ac3 { bottom: 0; right: -5px; }
#ac4 { bottom: 0; right: 40px; }
#ac5 { bottom: 0; right: 20px; }
#ac6 { bottom: 0; right: 70px; }
#ac7 { bottom: 0; right: 60px; }
#ac8 { bottom: 0; right: 70px; }
#ac9 { bottom: 0; right: 90px; }
#ac10 { bottom: 0; right: 130px; }
#ac11 { bottom: 0; right: 120px; }
#ac12 { top: -87px; right: 90px; }
#ac13 { top: 30px; right: -50px; }
#ac14 { top: 30px; right: -40px; }
#ac15 { top: 30px; right: -20px; }
#ac16 { top: 30px; right: 0px; }
#ac17 { top: 30px; right: 10px; }
#ac18 { top: 30px; right: 20px; }
#ac19 { top: 30px; right: 100px; }
#ac20 { top: 30px; right: 70px; }
#ac21 { top: 30px; left: 50px; }
#aacc1 { top: -15px; right: -65px; }
#aacc2 { bottom: -90px; right: -65px; }
#aacc10 { top: 20px; left: -65px; }
#aacc11 { top: -40px; left: -75px; }
#aacc20 { top: -105px; left: -15px; }
#amini { top: -30px; right: 70px; }

#bc1 { bottom: 0; left: -40px; }
#bc2 { bottom: 0; left: -50px; }
#bc3 { bottom: 0; left: 0px; }
#bc4 { bottom: 0; left: 25px; }
#bc5 { bottom: 0; left: 30px; }
#bc6 { bottom: 0; left: 90px; }
#bc7 { bottom: 0; left: 90px; }
#bc8 { bottom: 0; left: 110px; }
#bc9 { bottom: 0; left: 150px; }
#bc10 { bottom: 0; left: 180px; }
#bc11 { bottom: 0; left: 180px; }
#bc12 { top: -87px; left: 100px; }
#bc13 { top: 30px; left: -60px; }
#bc14 { top: 30px; left: -30px; }
#bc15 { top: 30px; left: -10px; }
#bc16 { top: 30px; left: 20px; }
#bc17 { top: 30px; left: 20px; }
#bc18 { top: 30px; left: 0px; }
#bc19 { top: 30px; left: 70px; }
#bc20 { top: 30px; left: 60px; }
#bc21 { top: 30px; left: 110px; }

#bacc1 { top: 170px; left: -80px; }
#bacc2 { top: -30px; left: -70px; }
#bacc3 { top: 30px; left: 100px; }
#bacc4 { top: -7px; right: -65px; }
#bacc5 { top: -58px; right: -30px; }
#bacc10 { top: -20px; right: -100px; }
#bacc11 { bottom: -90px; right: -90px; }
#bacc11_2 { top: -70px; right: 25px; }
#bacc15 { top: -60px; right: -130px; }
#bacc18 { top: -80px; right: -120px; }
#bmini { top: -35px; left: 70px; }
#bacc19 { bottom: -90px; right: -90px; }
#bacc19_2 { top: -90px; right: -30px; }
#bacc20 { top: -115px; right: -60px; }
#bacc21 { top: -115px; left: -10px; }