body {
    font-family: 'Roboto', sans-serif; 
    margin: 0;
    padding: 0;
    background-color: #ffffff; 
}

nav {
    background-color: #ffffff; /* 네비게이션 바 배경 색상 */
    padding: 10px;
    width:100%;
}

nav ul {
    list-style-type: none; /* 리스트 스타일 제거 */
    margin: 0;
    padding: 0;
    left: 10px;
}

nav ul li {
    display: inline; /* 리스트를 가로로 나열 */
    margin-left: 20px; /*오른쪽 마진*/
}

nav ul li a {
    text-decoration: none; /* 링크의 기본 밑줄 제거 */
    color: rgb(33, 33, 33); /* 링크 색상 */
}

nav ul li a:hover {
    text-decoration: underline; /* 마우스 오버시 밑줄 추가 */
}

nav ul li a:activate {
    text-decoration: underline; /* 마우스 오버시 밑줄 추가 */
}

#title {

    background-image: url('h.png');
    background-repeat: no-repeat;
    background-position:left;
    background-size: auto 100%;
    /* position: absolute; */
    /* top: 10px; */
    font-family: 'Bebas Neue'; 
    margin-left: 0px;
    text-align: left;
    font-size: 35px;
    background-color: rgba(185, 207, 161, 0.7);
    padding-left: 30px;
    /* 세로 중앙 정렬을 위한 추가 */
    display: flex;
    align-items: center;
    height: 60px;
}

#canvas2d {
  width: 25%;
  height: 55%;
}
#canvas3d {
  width: 70%;
  height: 70%;
}

#container {
    display: flex;
    width: 100%;
    height: 90vh;
}

#controls {
  position: absolute;
  bottom: 10px;
  left: 30px;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 10px;
  border-radius: 5px;
    /* font-family: 'Bebas Neue'; 
    margin-left: 30px;
    text-align: left;
    font-size: 19px;
    position: absolute;
    bottom: 10px; */
    /* left: 10px; */
    /* z-index: 100; */
    /* background-color: #b0e1f0, transparent; */
    /* padding: 10px; */
    /* border-radius: 10px; */
    
    /* border: none; */
    /* color: rgb(38, 37, 37); */
    /* padding: 10px 20px; */
    /* text-align: left; */
    /* text-decoration: none; */
    /* display: inline-block; */
    /* margin: 4px 2px; */
    /* cursor: pointer; */
}

#loadButton {
    font-family: 'Roboto'; 
    background-color: #baf114;
    /* border: none; */
    color: rgb(39, 38, 38);
    padding: 7px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 17px;
    margin: 1px 1px;
    cursor: pointer;
    border-radius: 5px;
}

#snapshotButton {
    font-family: 'Roboto'; 
    background-color: #baf114;
    /* border: none; */
    color: rgb(39, 38, 38);
    padding: 7px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 17px;
    margin: 1px 1px;
    cursor: pointer;
    border-radius: 5px;
    margin-left: 10px
}


#bottom {
    position: absolute; /* 절대 위치 */
    bottom: 0; /* 화면 하단에 고정 */
    right: 50px;
    /* transform: translateX(-50%); 중앙 정렬 */
    background-color: rgba(171, 171, 171, 0.0); /* 배경색 및 투명도 */
    padding: 10px; /*내부 여백 */
    font-size: 12px; /* 글자 크기 */
    /* box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); 그림자 효과 */
    width: 100%;
    text-align: right;
}

.button {
    display: flex;
    position: relative;
    background: linear-gradient(to bottom, #bdefe7, #63bdad);
    min-width: 7em;
    min-height: 2em;
    text-align: center;
    cursor: pointer;
  }
  .button .text {
    position: absolute;
    z-index: 1;
    top: -1px;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .button .tilt {
    display: inline-block;
    position: relative;
    z-index: 2;
    flex-grow: 1;
  }
  .button .background {
    position: absolute;
    top: -2px;
    left: -1px;
    height: 100%;
    width: calc(100% + 2px);
    background: #bdefe7;
  }
  .button:active .text {
    top: 1px;
  }
  .button:active .background {
    top: -1px;
  }
  .button .tilt-1:active ~ .background, .button .tilt-1:active ~ .text {
    transform: skewY(-1.3deg);
  }
  .button .tilt-2:active ~ .background, .button .tilt-2:active ~ .text {
    transform: skewY(-1.1deg);
  }
  .button .tilt-3:active ~ .background, .button .tilt-3:active ~ .text {
    transform: skewY(-0.9deg);
  }
  .button .tilt-4:active ~ .background, .button .tilt-4:active ~ .text {
    transform: skewY(-0.7deg);
  }
  .button .tilt-5:active ~ .background, .button .tilt-5:active ~ .text {
    transform: skewY(-0.5deg);
  }
  .button .tilt-6:active ~ .background, .button .tilt-6:active ~ .text {
    transform: skewY(-0.3deg);
  }
  .button .tilt-7:active ~ .background, .button .tilt-7:active ~ .text {
    transform: skewY(-0.1deg);
  }
  .button .tilt-8:active ~ .background, .button .tilt-8:active ~ .text {
    transform: skewY(0.1deg);
  }
  .button .tilt-9:active ~ .background, .button .tilt-9:active ~ .text {
    transform: skewY(0.3deg);
  }
  .button .tilt-10:active ~ .background, .button .tilt-10:active ~ .text {
    transform: skewY(0.5deg);
  }
  .button .tilt-11:active ~ .background, .button .tilt-11:active ~ .text {
    transform: skewY(0.7deg);
  }
  .button .tilt-12:active ~ .background, .button .tilt-12:active ~ .text {
    transform: skewY(0.9deg);
  }
  .button .tilt-13:active ~ .background, .button .tilt-13:active ~ .text {
    transform: skewY(1.1deg);
  }
  .button .tilt-14:active ~ .background, .button .tilt-14:active ~ .text {
    transform: skewY(1.3deg);
  }
  .button .tilt-15:active ~ .background, .button .tilt-15:active ~ .text {
    transform: skewY(1.5deg);
  }