* {
	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 : #8B8B8B; /*배경색1*/
	--color2 : #E3D7DB; /*배경색2*/
	--color3 : #282020; /*텍스트 색상*/
	--color4 : rgba(97, 82, 92, 0.6); /*반투명 배경색*/
	--color5 : rgb(196, 186, 191); /*그림자*/
	--colorA : #cd1111; /*A테마컬러1*/
	--colorB : #9b6495; /*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); }
.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; }

/*---옷장,박스 정렬---*/
.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: 367px; margin-bottom: 10px; }
.charabase img { position: absolute; }
#charaA { margin-right: -20px;  }
#charaB { margin-left: -20px;  }
#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_1, #b_1 { display: block; }
#a_2, #a_3, #b_2, #b_3, #b_4 { display: none; }

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

#bc1 { bottom: 0; left: -50px; }
#bc2 { bottom: 0; left: 10px; }
#bc3 { bottom: 0; left: 25px; }
#bc4 { bottom: 0; left: 65px; }
#bc5 { bottom: 0; right: 10px; }
#bc6 { bottom: 0; right: 0; }
#bacc1 { top: 45px; right: -10px; }
#bacc1-1 { top: -50px; right: -30px; }
#bacc2 { bottom: -95px; left: -75px; }
#bacc3 { top: -75px; right: -8px; }
#bacc4 { top: 64px; right: 78px;  }
#bacc5 { top: 45px; left: 55px; }
#bacc6 { top: -30px; }
#abacc1b { top: -0px; }
#bmini { top: -50px; left: 30px; }

#ac1 { bottom: 0; right: -40px; }
#ac2 { bottom: 0; right: -8px; }
#ac3 { bottom: 0; right: 35px; }
#ac4 { bottom: 0; left: 65px; }
#ac5 { bottom: 0; left: 4px; }
#ac6 { bottom: 0; left: -10px; }
#aacc1 { top: 50px; left: -10px; }
#aacc3 { top : 33px; right: 24px; }
#aacc5 { top: 0; left: 0; }
#abacc1a { top: -25px; left: 25px; }
#amini { top: -30px; right: 60px; }