body {
    margin: auto;
    font-family: monospace;
}
main {
    margin:auto; 
    top: 50%;  
    right: 50%; 
    padding: 10px; 
    width: 500px; 
    height: 500px; 
    text-align: center; 
    position: absolute; 
    transform: translate(50%, -50%);
}
h1 {
    text-align: center; 
    position: absolute; 
    width: 500px; 
    font-size: 30px; 
    top: 35%; 
    right: 50%; 
    transform: translate(50%, -50%);
    z-index: 3; 
}
#face, #hair, #mood, #clothes, #height {
    width: 300px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    display: none; 
    z-index: 5; 
}
button {
    margin: auto; 
    position: absolute; 
    font-size: 20px; 
    z-index: 10; 
}
#start {
    top: 45%; 
    left: 50%; 
    transform: translate(-50%, 0%);
}
#done, #done2, #restart {
    bottom: 12%; 
    left: 50%; 
    transform: translate(-50%, 0%);
    display: none; 
}
.arrow {
    position: absolute; 
    width: 20px;
    display: none; 
}
#p {
    position: absolute; 
    top: 18%; 
    right: 5%; 
    display: none; 
}

#hairLeftArrow, #moodLeftArrow, #clothesLeftArrow {
    transform: rotate(90deg);
    left: 15%; 
}

#hairRightArrow, #moodRightArrow, #clothesRightArrow {
    transform: rotate(-90deg);
    right: 15%; 
}

#hairLeftArrow, #hairRightArrow {
    top: 22%;
}

#moodLeftArrow, #moodRightArrow {
    top: 30%; 
}

#clothesLeftArrow, #clothesRightArrow {
    top: 47%; 
}

#lastSteps {
    position: absolute; 
    top: 25%; 
    right: 10%; 
    width: 100px; 
    display: none; 
}

#lastSteps label, #lastSteps input {
    width: 100%; 
}

#heightCheck {
    width: 100px; 
    padding-bottom: 20px; 
}
#bg {
    margin:auto; 
    top: 48%;  
    right: 52%; 
    padding: 10px; 
    width: 220px; 
    height: 320px; 
    text-align: center; 
    position: absolute; 
    background: white; 
    display: none; 
    transform: translate(50%, -50%);
}