body {
    position: relative;
    width: 100vw;
    height: 100vh;
    margin: 0rem;

}

h1 {
    margin: 0;
    width: 30rem;
    position: absolute;
    left: calc(50% - 30rem / 2);
    top: 10%;
    text-align: center;
    filter: drop-shadow(0rem 0rem 0.5rem #ffffff);



}








/* background image */
body>img {
    width: 100%;
    height: 100%;
    object-fit: cover;


}







/* kirby zone */
div {
    position: absolute;
    top: calc(50% - 25rem / 2);
    left: calc(50% - 25rem / 2);
    width: 25rem;
    height: 25rem;
}


div img {
    width: 100%;
    height: auto;
    object-fit: cover;
    position: absolute;
    bottom: 0rem;
}







/* input kirby name */

section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
    align-items: center;


}

.naming {
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    position: absolute;
    justify-content: center;
    top: 0;
}

.naming input {
    width: 20rem;
    height: 2rem;
    margin-bottom: 1rem;


}

.naming button {
    background-color: #F4A4A9;
    text-decoration: none;
    color: black;
    width: fit-content;
    padding: 0.5rem;
    text-align: center;
    font-size: 2rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;

}








/* dress and feed kirby */

.dress_up button,
.kirby_needs button {
    background-color: transparent;
    border: none;
    width: 100%;
    height: 45%;


}

section img {
    filter: drop-shadow(0rem 0rem 0.5rem #ede8e8);
}

.dress_up {
    width: 10rem;
    height: 15rem;
    position: absolute;
    right: 5rem;
    top: calc(50% - 15rem / 2);


}

.dress_up button img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    cursor: pointer;

}

.kirby_needs {
    width: 6.5rem;
    height: 80%;
    position: absolute;
    left: 5rem;
    top: calc(50% - 80% /2);
}

.kirby_needs button {
    width: 100%;
    height: 30%;

}

.kirby_needs img {
    width: 100%;
    height: auto;
}






/* classes linked to javascript */
.hidding {
    visibility: hidden;
}

.Inflation {
    width: 35rem;
    height: 35rem;
    top: calc(50% - 35rem / 2);
    left: calc(50% - 35rem / 2);
}







/* button reload */
a {
    background-color: #F4A4A9;
    text-decoration: none;
    color: black;
    width: 6.5rem;
    height: 2.5rem;
    text-align: center;


    font-size: 2rem;
    border-radius: 0.5rem;
    position: absolute;
    bottom: 2rem;
    left: calc(50% - 6.5rem / 2);
}

body>button {
    width: 5rem;
    height: 3rem;
    position: absolute;
    top: 3rem;
    left: 3rem;
}