body { margin:0; font-family:sans-serif; }

/* Hide all pages by default */
.page { display:none; }
#menu:checked ~ .page-menu { display:block; }
#dressup:checked ~ .page-dressup { display:block; }

/* Menu styling */
.page-menu { text-align:center; padding:40px; }
.menu-title { font-size:28px; margin-bottom:20px; }
.menu-avatar { width:200px; position:absolute; right:50px; top:100px; }
.play-btn { width:160px; cursor:pointer; transition:0.2s; }
.play-btn:hover { transform:scale(1.05); }

/* Dress-up styling */
.page-dressup { padding:20px; }
.avatar-area { position:relative; width:200px; margin-bottom:20px; }
.avatar-base, .hair, .shirt { position:absolute; top:0; left:0; width:200px; }
.hair1, .hair2, .shirt1, .shirt2 { display:none; }

/* Show avatar layers when radio buttons checked */
#hair1:checked ~ .page-dressup .hair1 { display:block; }
#hair2:checked ~ .page-dressup .hair2 { display:block; }
#shirt1:checked ~ .page-dressup .shirt1 { display:block; }
#shirt2:checked ~ .page-dressup .shirt2 { display:block; }

.dress-panel { margin-top:20px; }
.icon { width:60px; margin:5px; cursor:pointer; }
.back-btn { display:block; margin-top:20px; cursor:pointer; color:#f25f5c; }