@import url('https://fonts.googleapis.com/css2?family=Gravitas+One&family=IM+Fell+English+SC&family=New+Rocker&family=Pirata+One&family=UnifrakturCook:wght@700&display=swap');
html{
width:100svw; margin:0; padding:0;
overflow-x:hidden;
background-color:#000; color:#fff;
font-size:2.4vmin; font-family:'IM Fell English SC',serif;
image-rendering:pixelated;
}
body{
margin:0; padding:0;
overflow-x:hidden;
}
button{
-webkit-appearance:none; -moz-appearance:none; appearance:none;
margin:3svw 0.4svw 5svw 0.4svw; padding:0.5svw 1svw 0.5svw 1svw; 
color:#fff; font-size:2.5vmin; 
font-family:'New Rocker','IM Fell English SC',serif;
background:#000; border:double 4px #fff; border-radius:100%;
}
button:hover{
color:#000; background-color:#fff; cursor:pointer;
}
a{
color:#dff; text-decoration:none; 
}
a:hover{
color:#ccc
}
#how1,#how2{
width:90svw; margin:2vmin auto; 
padding:1svw 0 1svw 0; text-align:center; 
word-break:all; border:double 3px #fff;
}
#how2{
border-style:dotted;
}
h2{
margin:0 0 1svw 0; padding:0; font-size:2.8vmin; 
font-family:'New Rocker','IM Fell English SC',serif;
}
/*#awlie{width:70svw; margin:6svw auto 6svw auto; padding:1svw; text-align:left; word-break:all; border:solid 1px #aaa; color:#ddd;}*/
#footer{
width:100%; height:50svw; 
text-align:center;margin:10svw 0 0 0; 
padding:1svw 0 1svw 0;
background:linear-gradient(180deg, #444, #000 60%, #000)
}
/* ----------------- */
/* ----------------- */
#dollbox{
width:96svw; 
min-height:80svw; max-height:80svh;
margin:0; padding:0; 
}
#photoarea{
background-color:transparent; 
width:47svw; min-height:73svw;max-height:73svh;
margin:0; padding:0; display:inline-block;
position:absolute; top:3.5%; left:0;
}
/* ----------------- */
#clothbox{
background-color:transparent;
margin:0; padding:0; width:48svw; 
min-height:64svw; max-height:calc(73svh - 9svw);
position:absolute; top:9svw; left:48svw;
}
#closet{
background:no-repeat center/100% url("./img/awk_closet.PNG");
}
.itemson,.sheetitemson{
background-color:transparent;
display:inline-block; position:absolute;
margin:0; padding:0;}
/* ----------------- */
#sheetbox{
background-size:contain; width:44%; 
min-height:14.8svw; max-height:14.8svh; 
margin:0; padding:0; display:inline-block;
position:absolute; top:9svw; left:-40svw;
background:no-repeat center/100% url("./img/awk_sheet.PNG");
}
.sheetheadson{
background-color:transparent;
display:inline-block; position:absolute;
margin:0; padding:0; width:6svw;
min-height:5.6svw; max-height:5.6svh;
}
/* ----------------- */
.itemson:hover,.sheetitemson:hover,.sheetheadson:hover{
cursor:pointer;}
/* ----------------- */
#bg1,#bg2,#bg3,#body0,#inner0,#closet,.item{
background-size:contain; width:100%; 
min-height:80svw; max-height:80svh;
margin:0; padding:0; 
position:absolute; top:0; left:0;
}
/* ----------------- */
#bg1{opacity:1;
    background:no-repeat center/100% url("./img/awk_bg1.PNG");}
#bg2{opacity:0;
    background:no-repeat center/100% url("./img/awk_bg2.PNG");}
#bg3{opacity:0;
    background:no-repeat center/100% url("./img/awk_bg3.PNG");}
#soul{opacity:0;
    background:no-repeat center/100% url("./img/awk-1.png");}
#spade{opacity:0;
    background:no-repeat center/100% url("./img/awk-2.png");}
#wing{opacity:0;
    background:no-repeat center/100% url("./img/awk-3.png");}
#jacket_1{opacity:0;
    background:no-repeat center/100% url("./img/awk-4.png");}
#tawo1_1{opacity:0;
    background:no-repeat center/100% url("./img/awk-5.png");}
#tawo2_1{opacity:0;
    background:no-repeat center/100% url("./img/awk-6.png");}
#body0{
    background:no-repeat center/100% url("./img/awk_body0.PNG");}
#tail1{opacity:0;
    background:no-repeat center/100% url("./img/awk-7.png");}
#tail2{opacity:0;
    background:no-repeat center/100% url("./img/awk-8.png");}
#tail3{opacity:0;
    background:no-repeat center/100% url("./img/awk-9.png");}
#twintail_1{opacity:0;
    background:no-repeat center/100% url("./img/awk-10.png");}
#twintail_2{opacity:0;
    background:no-repeat center/100% url("./img/awk-11.png");}
#horn_1{opacity:0;
    background:no-repeat center/100% url("./img/awk-12.png");}
#dango{opacity:0;
    background:no-repeat center/100% url("./img/awk-13.png");}
#head1{opacity:1;
    background:no-repeat center/100% url("./img/awk-14.png");}
#head2{opacity:0;
    background:no-repeat center/100% url("./img/awk-15.png");}
#head3{opacity:0;
    background:no-repeat center/100% url("./img/awk-16.png");}
#head4{opacity:0;
    background:no-repeat center/100% url("./img/awk-17.png");}
#head5{opacity:0;
    background:no-repeat center/100% url("./img/awk-18.png");}
#head6{opacity:0;
    background:no-repeat center/100% url("./img/awk-19.png");}
#head7{opacity:0;
    background:no-repeat center/100% url("./img/awk-20.png");}
#hairpin1{opacity:0;
    background:no-repeat center/100% url("./img/awk-21.png");}
#hairpin2{opacity:0;
    background:no-repeat center/100% url("./img/awk-22.png");}
#horn_2{opacity:0;
    background:no-repeat center/100% url("./img/awk-23.png");}
#tattoo1{opacity:0;
    background:no-repeat center/100% url("./img/awk-24.png");}
#tattoo2{opacity:0;
    background:no-repeat center/100% url("./img/awk-25.png");}
#tattoo3{opacity:0;
    background:no-repeat center/100% url("./img/awk-26.png");}
#inner0{
    background:no-repeat center/100% url("./img/awk_inner0.PNG");}
#b1tight{opacity:0;
    background:no-repeat center/100% url("./img/awk-27.png");}
#b2boots{opacity:0;
    background:no-repeat center/100% url("./img/awk-28.png");}
/*#inner2{opacity:0; background:no-repeat center/100% url("./img/awk-29.png");}*/
#b3pajama{opacity:0;
    background:no-repeat center/100% url("./img/awk-30.png");}
#b4jersey{opacity:0;
    background:no-repeat center/100% url("./img/awk-31.png");}
#b5china{opacity:0;
    background:no-repeat center/100% url("./img/awk-32.png");}
#b6cover{opacity:0;
    background:no-repeat center/100% url("./img/awk-33.png");}
#b7pride1{opacity:0;
    background:no-repeat center/100% url("./img/awk-34.png");}
#b7pride2{opacity:0;
    background:no-repeat center/100% url("./img/awk-35.png");}
#hand1{opacity:0;
    background:no-repeat center/100% url("./img/awk-36.png");}
#hand2{opacity:0;
    background:no-repeat center/100% url("./img/awk-37.png");}
#hand3{opacity:0;
    background:no-repeat center/100% url("./img/awk-38.png");}
#hand4{opacity:0;
    background:no-repeat center/100% url("./img/awk-39.png");}
#hand5{opacity:0;
    background:no-repeat center/100% url("./img/awk-40.png");}
#jewel1{opacity:0;
    background:no-repeat center/100% url("./img/awk-41.png");}
#jewel2{opacity:0;
    background:no-repeat center/100% url("./img/awk-42.png");}
#scarf1_1{opacity:0;
    background:no-repeat center/100% url("./img/awk-43.png");}
#scarf2_1{opacity:0;
    background:no-repeat center/100% url("./img/awk-44.png");}
#t1pajama{opacity:0;
    background:no-repeat center/100% url("./img/awk-45.png");}
#necktie{opacity:0;
    background:no-repeat center/100% url("./img/awk-46.png");}
#t2long{opacity:0;
    background:no-repeat center/100% url("./img/awk-47.png");}
#t3over{opacity:0;
    background:no-repeat center/100% url("./img/awk-48.png");}
#t4tight1{opacity:0;
    background:no-repeat center/100% url("./img/awk-49.png");}
#t4tight2{opacity:0;
    background:no-repeat center/100% url("./img/awk-50.png");}
#t5frill1{opacity:0;
    background:no-repeat center/100% url("./img/awk-51.png");}
#t5frill2{opacity:0;
    background:no-repeat center/100% url("./img/awk-52.png");}
#tops2{opacity:0;
    background:no-repeat center/100% url("./img/awk-53.png");}
#vest1{opacity:0;
    background:no-repeat center/100% url("./img/awk-54.png");}
#belt1{opacity:0;
    background:no-repeat center/100% url("./img/awk-55.png");}
#belt2{opacity:0;
    background:no-repeat center/100% url("./img/awk-56.png");}
#t6china{opacity:0;
    background:no-repeat center/100% url("./img/awk-57.png");}
#t7layer{opacity:0;
    background:no-repeat center/100% url("./img/awk-58.png");}
#tawo1_2{opacity:0;
    background:no-repeat center/100% url("./img/awk-59.png");}
#tawo2_2{opacity:0;
    background:no-repeat center/100% url("./img/awk-60.png");}
#tops1{opacity:0;
    background:no-repeat center/100% url("./img/awk-61.png");}
#t8blong{opacity:0;
    background:no-repeat center/100% url("./img/awk-62.png");}
#vest2{opacity:0;
    background:no-repeat center/100% url("./img/awk-63.png");}
#chain1{opacity:0;
    background:no-repeat center/100% url("./img/awk-64.png");}
#chain2{opacity:0;
    background:no-repeat center/100% url("./img/awk-65.png");}
#key{opacity:0;
    background:no-repeat center/100% url("./img/awk-66.png");}
#choker1{opacity:0;
    background:no-repeat center/100% url("./img/awk-67.png");}
#choker2{opacity:0;
    background:no-repeat center/100% url("./img/awk-68.png");}
#scarf1_2{opacity:0;
    background:no-repeat center/100% url("./img/awk-69.png");}
#scarf2_2{opacity:0;
    background:no-repeat center/100% url("./img/awk-70.png");}
#jacket_2{opacity:0;
    background:no-repeat center/100% url("./img/awk-71.png");}
#mug{opacity:0;
    background:no-repeat center/100% url("./img/awk-72.png");}
#plush{opacity:0;
    background:no-repeat center/100% url("./img/awk-73.png");}