*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background-image:url("assets/background/background-yellow.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    overflow:hidden;
    font-family:sans-serif;
    transition:
    background-image .4s ease,
    background-color .4s ease;
}
.cloud{
    position:absolute;
    z-index:1;
}
.cloud-1{
    top:5%;
    left:10%;
    width:100px;
}
.cloud-2{
    top:7%;
    right:12%;
    width:120px;
}
.cloud-3{
    top:4%;
    left:45%;
    width:90px;
}
.game-container{
    width:400px;
    border-radius:18px;
    background:#e9bac8;
    border:3px solid #8B4C41;
   padding:14px;
    z-index:10;
}
.header{
    height:60px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:14px 14px 0 0;
    background:#FFF5F8;
    border:3px solid #8B4C41;
}
.header img{
    width:80%;
}
.dressup-area{
    height:300px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-left:3px solid #8B4C41;
    border-right:3px solid #8B4C41;
    background-image:url("assets/background/background-yellow.png");
    background-size:cover;
    background-position:center;
}
.arrow-btn{
    background:none;
    border:none;
    cursor:pointer;
    font-size:30px;
    color:#8B4C41;
    padding:10px;
}
.character-container{
    width:180px;
    height:260px;
    display:flex;
    justify-content:center;
    align-items:center;
}
#character{
    position:relative;
    width:180px;
    height:260px;
}
#character img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    image-rendering:pixelated;
    image-rendering: crisp-edges;
}
#shirt{
    z-index:1;
}
#pants{
    z-index:2;
}
#head{
    z-index:3;
}
#hat{
    z-index:4;
}
.tabs{
    height:50px;
    display:flex;
    justify-content:space-evenly;
    align-items:center;
    background:#FFDDE7;
    border-left:3px solid #8B4C41;
    border-right:3px solid #8B4C41;
}
.tab{
    width:70px;
    height:40px;
    border:2px solid #8B4C41;
    background:#FFF5F8;    
    border-radius:8px 8px 0 0;
    cursor:pointer;
}
.tab.active{
    background:#E8B6C3;
}
.tab img{
    width:24px;
}
#done-btn{
    width:40px;
    height:40px;
    border:2px solid #8B4C41;
    background:#E8B6C3;
    border-radius:8px;
    cursor:pointer;
}
#done-btn img{
    width:20px;
}
.options{
    display:flex;
    justify-content:center;
    gap:15px;
    padding:20px;
    border:3px solid #8B4C41;
    background:#FFDDE7;
    border-top:none;
    border-radius:0 0 14px 14px;
}
.options button{
    width:70px;
    height:60px;
    background:#F6FFFA;
    border:2px solid #8B4C41;
    border-radius:12px;
    cursor:pointer;
}

.options button img{
    width:55px;
}
.hidden{
    display:none;
}
button:hover{
    transform:scale(1.05);
}
.cloud-1{
    animation: float1 10s ease-in-out infinite;
}
.cloud-2{
    animation: float2 14s ease-in-out infinite;
}
.cloud-3{
    animation: float3 12s ease-in-out infinite;
}
@keyframes float1{
    0%,100%{
        transform:translateX(0);
    }
    50%{
        transform:translateX(40px);
    }
}
@keyframes float2{
    0%,100%{
        transform:translateX(0);
    }
    50%{
        transform:translateX(-50px);
    }
}
@keyframes float3{
    0%,100%{
        transform:translateX(0);
    }
    50%{
        transform:translateX(30px);
    }
}