body {
    margin-top: 40px;
    background-color: #122b1d;
    min-width: 320px;
    display: flex;
    flex-flow: column;
    justify-content: center;  /* 가로 가운데 */
    align-items: center;      /* 세로 가운데 */
    min-height: 100vh;        /* 화면 높이 전체 */
    margin: 0;
}
body h1 {
    font-family: "Racing Sans One", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #f8de6c;
    display: flex; flex-flow:column ;
    margin-bottom: 40px; 
    font-size: 3.125rem;
    
}
body h1:nth-child(1) {
    animation: movingup3 1s ease forwards;
}

body h1:nth-child(2) {
    animation: movingup2 2s ease forwards;
    }

body h1:nth-child(3) {
    animation: movingup1 3s ease forwards;
}
#container {
    z-index: 999;
    background-color: #a6bc7c;
    text-align: center; display: flex; flex-flow: column nowrap;
    width: 600px; height: 400px;
    padding:15px 15px ;
    border-radius: 15px;}
#container .title {
    padding: 20px 10px;
    
}
#container .title h2{
    font-family: "Racing Sans One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
}
.main { margin-top: 30px; display: flex;
    flex-flow: column; align-items: center;
    }
.hw_box {
    display: flex;
    flex-direction: column;
    gap: 20px;  /* height / weight 박스 사이 간격 */
    align-items: center;
}

.hw_box .height,
.hw_box .weight {
    display: flex;
    justify-content: center; /* 가로 가운데 */
    align-items: center;     /* 세로 가운데 */
    border-radius: 15px;
    width: 400px;
    height: 60px;
    padding: 10px;
    background-color: beige;
}
#container .height .body_h {
    font-weight: 600;
    margin-right: 10px;
}
#container .height #userHeight {background-color: beige;}
#container .weight .body_w {
    margin-right: 10px;
    font-weight: 600;
}
#container .weight #userWeight{background-color: beige;}
#container .result_btn {background-color: #122b1d;
    border-radius: 15px;
    width: 200px;
    padding: 10px 10px;
    margin-top: 20px;}
#container .result_btn:active {
    transform: scale(1.4); 
    transition: transform 0.5s linear;
}
#container .result_btn .btn {
    color: beige;
    font-family: "Racing Sans One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.875rem;
}
#container .result {margin-top: 20px;}


@keyframes movingup3 {
    from { opacity: 0; transform: translateY(600px); }
    to { opacity: 1; transform: translateY(0); }
  }
@keyframes movingup2 {
    from { opacity: 0; transform: translateY(300px); }
    to { opacity: 1; transform: translateY(0); }
  }
@keyframes movingup1 {
    from { opacity: 0; transform: translateY(200px); }
    to { opacity: 1; transform: translateY(0); }
  }