body, html {

    height:100%;
    width:100%;
    margin: 0;
}

body {
  position :relative;
  height:100%;
  width:100%;  
  background-image: url('background.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

#title {
    z-index: 10;
    position: absolute;
    top : 3%;
    left :50%;
    transform: translateX(-50%);
    font-size: 5vw; /* 변경된 부분 */
    color: white;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, -3px 0 0 #000, 3px 0 0 #000, 0 -3px 0 #000, 0 3px 0 #000;
}

/* 정보입력 */
#infoForm {
    top : 15%;
    left :50%;
    width : 70%;
    transform: translateX(-50%);
    position: absolute;
    text-align: center; /* 수정된 부분 */
}

#infoForm span {
    margin-right: 10px;
}

#infoForm input {
    margin: 10px;
    padding: 5px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 15%;
    max-width: 300px;
}

#infoForm select {
    margin: 10px;
    padding: 5px;
    width : 7%;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#infoForm button {
    padding: 5px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 10%;
}


/* 테이블 관련 css */


#bottomSheet {
    position: fixed;
    border: 2px solid #000;
    width: 50vw;
    left :50%;
    height: 30%;
    transform: translateX(-50%);
    overflow-y: auto; /* Adds scroll for content exceeding the height */
    bottom: 0; /* 바닥에서의 거리를 0으로 설정합니다. */
    transition: all 0.3s ease;
    top: calc(100% - 30px);
}

#toggleBottomSheet {
    position: static;
    top:0%;
    left: 50%;
    width: 100%;
    height: 30px;
    z-index: 20;
}


#bottomSheet.active {
    transform: translateX(-50%) translateY(-90%); 
}

/* #bottomSheet.active + #toggleBottomSheet {
    bottom: 50vh; 
}
 */

table, th, td {
    position: static;
}
th, td {
    padding: 10px;
}

#schoolData {
    
    position : absolute ;
    font-size: 0.9em; /* Reduce font size */
    width: 100%; /* Adjust width as needed */
    margin: auto; /* Center the table */
    background-color: white;
}

/*Removing all borders*/
#schoolData, #schoolData th, #schoolData td {
    border: none;
}

#schoolData th, #schoolData td {
    padding: 5px; /* Adjust padding to make cells smaller */
}

#schoolData th {
    background-color: #f2f2f2; /* 헤더 배경색 */
    color: #333; /* 헤더 텍스트 색상 */
    padding-top: 12px; /* 헤더 위쪽 패딩 */
    padding-bottom: 12px; /* 헤더 아래쪽 패딩 */
}

#schoolData td {
    vertical-align: top; /* 셀 내용 상단 정렬 */
}


/* 본 게임 화면 */
#main {
    width: 100%;
    height: 100%;
    position: absolute;

}

#image {
    position: fixed;
    left : 35%;
    bottom : 0%;
    height: 50vh;
}

#counter {
    position: absolute;
    left: 50%;
    top : 20%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 4vw; /* 수정된 부분 */
    z-index: 10;
    padding: 10px;
    border-radius: 10px;
    text-shadow: -2px -2px 0 #000,  2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, -3px 0 0 #000, 3px 0 0 #000, 0 -3px 0 #000, 0 3px 0 #000;
}

#endgame {
    position: absolute;
    top: 30%; /* 상단에서 50%의 위치 */
    left: 50%; /* 좌측에서 50%의 위치 */
    transform: translate(-50%, -50%);
    z-index: 10;
    padding: 10px 20px;
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

#endgame:hover {
    background-color: #2980b9;
}

/* 미디어 쿼리 추가 */
@media (max-width: 600px) {

    #title {
        font-size: 10vw; /* 모바일 장치에서 크기 조정 */
    }


    #bottomSheet {
        width: 90%;
    }
    #schoolData {
        width: 100%;
    }


    #infoForm {
        width: auto;
        margin-top: 40%; /* 모바일에서 조정된 마진 */
    }

    #infoForm input, #infoForm select, #infoForm button {
        font-size: 14px; /* 모바일에서 조정된 폰트 크기 */
        padding: 8px; /* 모바일에서 조정된 패딩 */
        width: 50%; /* 모바일에서 조정된 너비 */
        max-width: none; /* 모바일에서는 최대 너비 제한 없음 */
    }
    #counter {
        font-size: 10vw; /* 고정된 폰트 크기로 수정 */
    }

    #image {
        position: fixed;
        left : 20vw;
        bottom : 0%;
        height: 40vh;
    }

    #title {
        font-size: 10vw;
    }
    #endgame {
        width: 100%; /* 너비를 자동으로 조정 */
        max-width: 300px; /* 최대 너비 설정 */
        padding: 10px 15px; /* 모바일에서 적절한 패딩으로 조정 */
        font-size: 14px; /* 모바일에서 적절한 폰트 크기로 조정 */
    }
}