/* 전체 화면 설정 */
body {
    /* 화면 전체를 채우고 중앙 정렬 */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-color: #fff; /* 배경은 흰색 */
}

/* 검은색 테두리 사각형 (와이어프레임의 외곽) */
.screen-box {
    width: 80%;
    max-width: 600px;
    height: 400px;
    border: 2px solid black; /* 검은색 테두리 */

    /* 내부 요소를 중앙에 배치하기 위한 flex 설정 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 'start' 버튼 스타일 */
.start-button {
    /* 버튼 모양 */
    padding: 10px 30px;
    font-size: 1.2rem;
    font-weight: bold;
    color: black;
    background-color: white;

    /* 모서리가 둥근 테두리 */
    border: 1px solid black;
    border-radius: 20px;
    cursor: pointer;

    /* 이미지와 유사한 시각적 효과를 위해 기본 테두리 제거 */
    box-shadow: none;
}

.start-button:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.bgimg {
    scale: 0.34;
    position: fixed;
    display: block;
    z-index: 1;
}
.gra {
    scale: 0.5;
    position: fixed;
    display: block;
    z-index: 2;
}
.bt {
    scale: 0.25;
    position: fixed;
    top: 590px;
    display: block;
    z-index: 2;
}

.bt:hover {
    cursor: pointer;
}
.logo {
    scale: 0.45;
    position: fixed;
    top: 20px;
    display: block;
    z-index: 2;
}