body {
    font-family: 'Arial', sans-serif;
    background-color: #303030;
    color: #eee;
    display: flex;
    flex-direction: column; /* 세로 방향으로 요소를 쌓기 위해 변경 */
    align-items: center;
    justify-content: flex-start;
    height: 98vh;
    padding: 15px;
    box-sizing: border-box; /* 패딩을 전체 높이에 포함 */
}

/* 화면 전체를 덮는 네비게이션 바 스타일 */
.navigation {
    margin-top: auto; /* 나머지 콘텐츠와 상관없이 하단에 배치 */
    display: flex; /* Flexbox 레이아웃 적용 */
    width: 100%; /* 부모 컨테이너(.section-window)의 전체 너비를 차지 */
    margin-top: 10px; /* 섹션 하단과의 간격 */
}

/* 채팅창 섹션만 표시 */
#chat.container2 {
    display: flex;  /* 채팅창 섹션만 flex로 변경하여 활성화 */
    flex-direction: column;
}

/* 수정된 섹션 스타일링 */
.section {
    display: none; /* 기본적으로 섹션을 숨김 */
    width: 100%; /* 각 섹션은 뷰포트의 전체 너비를 차지하도록 변경 */
    margin-top: 60px; /* 네비게이션 바와 겹치지 않도록 상단 여백을 설정 */
}

/* 채팅창이 활성화되었을 때만 표시 */
.section.active {
    display: flex; /* 활성화된 섹션만 표시 */
    justify-content: space-around; /* 내부 요소들을 균등하게 분배 */
    align-items: flex-start; /* 섹션의 시작 부분에 요소들을 정렬 */
    flex-wrap: wrap; /* 추가 요소가 있을 경우 줄바꿈 */
    height: auto; /* 자동으로 높이를 설정하여 전체 섹션을 덮지 않도록 함 */
}

.section-window {
    border-radius: 15px; /* 모서리를 둥글게 */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* 그림자 효과 */
    background-color: #e7e4e4; /* 배경색 */
    padding: 20px; /* 내부 여백 */
    margin: 20px 0; /* 상하 여백 */
    width: 70%; /* 반응형을 위한 전체 너비 */
    height: 100%;
    box-sizing: border-box; /* 패딩과 테두리를 너비에 포함 */
    overflow-y: auto; /* 세로 스크롤 활성화 */

    display: flex; /* Enables flexbox */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: space-between; /* 상단과 하단 콘텐츠 사이에 공간 분배 */
}

/* 각 컨테이너 스타일링 */
.container1, .container2 {
    background-color: #797979;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    margin: 10px; /* 주변 여백 설정 */
    height: 67vh; /* 높이를 자동으로 설정 */
    max-width: calc(50% - 20px); /* 너비를 화면의 절반으로 설정 */
    width: 38%;
    display: flex;
    flex-direction: column;
}


h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #da9aff;
}

h2 {
    margin-bottom: 20px;
    margin-top: 0px;
    color: #da9aff;
    font-size: 70px;
}

.chatBox {
    flex-grow: 1;  /* 채팅 박스가 남은 공간을 차지하도록 함 */
    overflow-y: auto;  /* 세로 스크롤을 활성화 */
    display: flex;
    flex-direction: column;
}

.message {
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    max-width: 70%;
    width: fit-content;
}

.message.you {
    margin-left: auto;  /* 오른쪽으로 메시지를 밀어냄 */
    background-color: #da9aff;
    color: #fff;
}

.message.translated {
    margin-right: auto;  /* 왼쪽으로 메시지를 밀어냄 */
    background-color: #eee;
    color: #444;
}

.input-area {
    display: flex;
    align-items: center;
    margin-bottom: 10px;  /* Added some margin between input areas */
    margin-top: auto;  /* 입력 영역을 아래로 밀어냄 */
}

input {
    flex: 1;
    padding: 10px;
    margin-right: 10px;
    margin-left: 10px;
    border: none;
    border-radius: 5px;
    outline: none;
    transition: box-shadow 0.2s;
}

input:focus {
    box-shadow: 0 0 5px #da9aff;
}

button {
    background-color: #da9aff;
    color: #eee;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

button:hover {
    background-color: #da9aff;
}

.nav-btn {
    background-color: #ddd; /* 배경색 */
    border: none; /* 테두리 제거 */
    padding: 10px 15px; /* 내부 여백 설정 */
    cursor: pointer; /* 커서 스타일 변경 */
    width: 50px; /* 버튼의 가로 크기 */
    height: 50px; /* 버튼의 세로 크기 */
    font-size: 16px; /* 글자 크기 */
    /* 기타 필요한 스타일 */
}

.section-btn {
    background-color: rgb(84 84 84); /* 배경색 */
    border: none; /* 테두리 제거 */
    padding: 15px; /* 내부 여백 */
    font-size: 16px; /* 글자 크기 */
    margin-left:10px;
    margin-right: 10px;
    margin-bottom: -10px;
    flex: 1; /* 모든 버튼이 컨테이너 너비의 동일한 비율을 차지하도록 설정 */
    text-align: center; /* 텍스트 중앙 정렬 */
}

.friends-list {
    display: flex;
    flex-direction: column; /* 항목을 세로 방향으로 쌓음 */
    overflow-y: auto; /* 세로 스크롤 활성화 */
    max-height: 500px; /* 네비게이션 바와 버튼 영역을 제외한 높이 */
    padding: 10px;
}

.friend {
    background-color: #da9aff;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 10px;
    width: 900px; /* 너비 설정 */
    height: 75px; /* 높이 설정 */
    color: #eee;
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.profile-pic {
    background-color: #cc60ff;
    border-radius: 20%;
    width: 70px;
    height: 70px;
    margin-right: 20px;
}

.name {
    font-weight: bold; /* Make the name text bold */
    color: #333; /* Darker text color for better contrast */
}

.video-nav, .video-thumbnails, .video-controls {
    display: flex; /* Aligns items horizontally */
    align-items: center; /* Centers items vertically */
    justify-content: space-between; /* Spaces out the navigation buttons */
    margin-bottom: 10px; /* Spacing between elements */
}

.video-nav {
    margin-bottom: 20px; /* Additional spacing from the thumbnails */
}

.nav-btn {
    background-color: #da9aff; /* A light grey background */
    border: none; /* Removes the border */
    padding: 10px; /* Padding inside the buttons */
    cursor: pointer; /* Changes cursor to indicate it's clickable */
}

.thumbnail {
    background-color: rgb(98 98 98); /* A slightly darker grey for thumbnails */
    width: 80px; /* Width of the thumbnails */
    height: 60px; /* Height of the thumbnails */
    margin: 0 5px; /* Margin between thumbnails */
    border-radius: 5px; /* Slightly rounded corners for thumbnails */
    cursor: pointer; /* Indicates the thumbnails are clickable */
    text-align: center; /* Centers the text horizontally */
    line-height: 60px; /* Centers the text vertically */
}

.video-main-screen {
    background-color: rgb(98 98 98); /* Even darker grey to represent the main screen */
    height: 500px; /* Sufficient height to represent the video screen */
    width: 100%; /* Full width */
    border-radius: 5px; /* Slightly rounded corners for the video screen */
    display: flex; /* Enables flexbox */
    align-items: center; /* Centers content vertically */
    justify-content: center; /* Centers content horizontally */
    font-size: 6em; /* Increases the font size */
    color: #ddd; /* Text color for better contrast */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.video-main-screen2 {
    background-color: rgb(98 98 98); /* Even darker grey to represent the main screen */
    height: 550px; /* Sufficient height to represent the video screen */
    width: 48%; /* Full width */
    border-radius: 5px; /* Slightly rounded corners for the video screen */
    display: flex; /* Enables flexbox */
    align-items: center; /* Centers content vertically */
    justify-content: center; /* Centers content horizontally */
    font-size: 6em; /* Increases the font size */
    color: #ddd; /* Text color for better contrast */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.video-main-screen3 {
    background-color: rgb(98 98 98); /* Even darker grey to represent the main screen */
    height: 550px; /* Sufficient height to represent the video screen */
    width: 48%; /* Full width */
    border-radius: 5px; /* Slightly rounded corners for the video screen */
    display: flex; /* Enables flexbox */
    align-items: center; /* Centers content vertically */
    justify-content: center; /* Centers content horizontally */
    font-size: 6em; /* Increases the font size */
    color: #ddd; /* Text color for better contrast */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.control-btn {
    margin-top: 15px;
    background-color: #da9aff; /* A light grey background */
    border: none; /* Removes the border */
    margin-right: 32px; /* Margin between buttons */
    border-radius: 5px; /* Slightly rounded corners for buttons */
    cursor: pointer; /* Changes cursor to indicate it's clickable */
    flex: 1; /* Flex-grow to allow buttons to fill space equally */
    text-align: center; /* Center the text inside buttons */
    min-width: 120px; /* 가장 큰 버튼의 가로 길이 */
    height: 60px; /* 세로 길이 고정 */
    white-space: nowrap; /* 버튼 내부의 텍스트가 줄바꿈 되지 않도록 설정 */
    overflow: hidden; /* 내용이 넘칠 경우 숨김 처리 */
    text-overflow: ellipsis; /* 내용이 넘칠 경우 말줄임표(...)로 표시 */
    color: #fff;
}

.control-btn2 {
    margin-top: 30px;
    background-color: #da9aff; /* A light grey background */
    border: none; /* Removes the border */
    margin-right: 32px; /* Margin between buttons */
    border-radius: 5px; /* Slightly rounded corners for buttons */
    cursor: pointer; /* Changes cursor to indicate it's clickable */
    flex: 1; /* Flex-grow to allow buttons to fill space equally */
    text-align: center; /* Center the text inside buttons */
    min-width: 200px; /* 가장 큰 버튼의 가로 길이 */
    height: 60px; /* 세로 길이 고정 */
    white-space: nowrap; /* 버튼 내부의 텍스트가 줄바꿈 되지 않도록 설정 */
    overflow: hidden; /* 내용이 넘칠 경우 숨김 처리 */
    text-overflow: ellipsis; /* 내용이 넘칠 경우 말줄임표(...)로 표시 */
    color: #fff;
}


.control-btn[href] {
    text-decoration: none; /* 링크의 밑줄 제거 */
    display: inline-flex; /* flexbox를 이용한 가운데 정렬을 위해 변경 */
    align-items: center; /* 세로 방향 가운데 정렬 */
    justify-content: center; /* 가로 방향 가운데 정렬 */
    padding: 10px 20px; /* 필요하다면 버튼과 동일한 패딩 적용 */
    height: 40px; /* 세로 길이 고정 */
    width: 30px; /* 버튼의 가로 길이 설정 */
    font-size: 15px;
}

.control-btn:last-child {
    margin-right: 0;
}