body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-image: url('theme.jpg'); /* 배경 이미지 설정 */
  background-size: cover; /* 배경 이미지 크기 조절 */
  background-position: center; /* 배경 이미지 위치 조정 */
  display: flex;
  justify-content: center; /* 가로로 중앙 정렬 */
  align-items: center; /* 세로로 중앙 정렬 */
  font-size: 12px;
  height: 100vh; /* 뷰포트 높이 전체를 사용 */
  color: white; /* 기본 텍스트 색상을 흰색으로 설정 */
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 120px;
}

h1 {
  text-align: center;
}

form {
  background-color: rgba(255, 255, 255, 0.5); /* 폼 배경색을 반투명하게 조정 */
  backdrop-filter: blur(5px); /* 무광 효과를 폼 배경에 적용 */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 그림자 스타일 조정 */
  border: 2px solid white; /* 흰색 테두리 추가 */
  display: flex;
  flex-direction: column;
  width: 300px; /* 로그인 폼 너비 조정 */
}

form div {
  margin-bottom: 20px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"] {
  width: calc(100% - 20px); /* 텍스트 필드 너비 조정 */
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: rgba(0, 0, 0, 0.2); /* 텍스트 필드 배경색을 조정하여 투명도 부여 */
  color: white; /* 텍스트 필드 내 텍스트 색상 조정 */
}

button[type="submit"] {
  width: calc(100% - 20px); /* 버튼 너비 조정 */
  padding: 10px;
  border: none;
  border-radius: 5px;
  background: linear-gradient(to right, #007bff, #ff5555); /* 버튼에 그라데이션 적용 */
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s; /* 배경색 변경시 트랜지션 효과 적용 */
}

button[type="submit"]:hover {
  background: linear-gradient(to right, #0056b3, #cc4444); /* 버튼 호버시 그라데이션 변경 */
}

.button_container {
  display: flex;
  justify-content: center; /* 수평 중앙 정렬 */
  align-items: center; /* 수직 중앙 정렬 */
  height: 50px; /* 버튼을 감싸는 div의 높이 설정 */
}

.login_btn {
  margin: 0 auto; /* 좌우 마진 자동으로 설정하여 버튼을 가운데 정렬 */
  padding: 10px;
  border: none;
  border-radius: 5px;
  background: linear-gradient(to right, #007bff, #ff5555);
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
  display: block; /* 버튼을 블록 요소로 만들어 전체 너비를 사용할 수 있도록 함 */
}

.login_btn:hover {
  background: linear-gradient(to right, #0056b3, #cc4444);
}

