mainstyle.css

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

* {
  font-family: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

body {
  background-color: #0b0806;
  background-image: url("image/team.jpg");
  background-size: 1700px auto;
  background-position: calc(50% + 250px) calc(50% - 730px);
  background-repeat: no-repeat;
}

/* 헤더 스타일 */
header {
  background-color: #1e1e1e; /* 짙은 회색 배경 */
  color: #fff;
  padding: 20px 0; /* 상단과 하단의 패딩을 늘림 */
  text-align: center;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* 더 깊은 그림자 효과 */
}

/* 네비게이션 스타일 */
.navbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #222; /* 어두운 회색 배경 */
  border-top: 2px solid #ff4500; /* 빨간색 상단 테두리 추가 */
  border-bottom: 2px solid #ff4500; /* 빨간색 하단 테두리 추가 */
}

.logo {
  font-family: "Abril Fatface", cursive;
  font-size: 80px; /* 전당포 글씨 크기 증가 */
  /* font-weight: bold; */
  text-decoration: none;
  color: #ffa500; /* 주황색으로 강조 */
  margin-bottom: 25px;
  margin-left: auto;
  margin-right: auto;
}

.nav-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

.nav-menu li {
  margin-left: 100px;
  margin-right: 50px;
}

.nav-menu li a {
  font-family: "Noto Serif KR", serif;
  text-decoration: none;
  color: #fff;
  transition: color 0.3s ease;
  font-size: 25px; /* 네비게이션 글씨 크기 증가 */
  font-weight: bold; /* 강조된 텍스트 */
}

.nav-menu li a:hover {
  color: #ff4500; /* 호버 시 빨간색으로 변경 */
}

#teamBox {
  height: 650px;
  padding-top: 150px;
  padding-left: 400px;
}

#introduceTeam {
  font-family: "Noto Serif KR", serif;
  font-weight: bold; /* 강조된 텍스트 */
  font-style: italic;
  color: white;
  font-size: 60px;
  text-decoration: none;
}

#introduceTeam {
  font-family: "Noto Serif KR", serif;
  font-weight: bold; /* 강조된 텍스트 */
  font-style: italic;
  color: white;
  font-size: 60px;
  text-decoration: none;
}

#modalPhoto {
  border: 1px solid #fff;
  border-radius: 20px;
  box-shadow: 0 4px 8px #222;
  width: 100%;
}

.int p {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 8px;
}

.modal-header {
  background-color: #333;
}

.modal-header > h5 {
  color: #fff;
}

.accordion {
  padding: 50px 100px 20px 100px;
  text-align: center;
}

#introduceBox {
  margin-left: auto;
  margin-right: auto;
}

#introduce {
  font-size: 45px; 
  font-weight: bold;
  color: #ffd700; 
  background-color: #222; 
  padding-top: 35px;
  padding-bottom: 20px; 
  text-align: center; 
  margin-bottom: 0; 
  text-shadow: 2px 2px 4px rgb(55, 0, 221);
}

#imageContainer {
  display: flex; /* 이미지들을 가로로 정렬 */
  justify-content: center; /* 이미지들을 가운데 정렬 */
  gap: 100px; /* 이미지들 사이의 간격 설정 */
  flex-wrap: wrap; /* 이미지들이 넘칠 경우 다음 줄로 넘어가게 함 */
  background-color: #ece6cc; 
  margin-top: 0; 
  padding: 20px 0; 
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); 
}

#imageContainer img {
  max-width: 200px;
  height: 200px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); /* 보다 짙은 그림자 효과 */
  transition: transform 0.3s ease-in-out;
  animation: rotateImage 5s infinite linear; /* 이미지를 5초 동안 무한히 회전시키는 애니메이션 추가 */
  filter: grayscale(100%) brightness(80%) contrast(100%);
}

@keyframes rotateImage {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#imageContainer img:hover {
  transform: scale(1.1) rotate(10deg);
  filter: grayscale(0%) brightness(100%) contrast(100%);
}

.tmiBox {
  width: 100%;
  height: 800px;
  background-image: url("image/tmi.jpg");
}

@keyframes pulse {
  0% { font-size: 80px; }
  50% { font-size: 87px; }
  100% { font-size: 80px; }
}

#tmiTitle {
  font-weight: bold;
  font-size: 80px;
  color: red;
  padding-top: 110px;
  margin-left: 700px;
  text-shadow: 2px 2px 4px rgb(247, 152, 152);
  animation: pulse 0.7s infinite; /* 1초 간격으로 반복 */
}


#tmiInfo {
  font-weight: bold;
  font-size: 30px;
  color: rgb(30, 30, 30);
  padding-top: 10px;
  margin-left: 850px;
}

.mainTitle {
  display: flex; /* Flex 컨테이너로 설정 */
  justify-content: center; /* 요소들을 수평 중앙으로 정렬 */
  padding-top: 150px;
}

#mindset {
  font-size: 70px; /* 더 큰 글꼴 크기 */
  font-weight: bold;
  text-shadow: 2px 2px 4px rgb(43, 0, 255);
  /* text-align: center; */
  color: white; /* 텍스트 색상을 더 진한 옐로우로 변경 */
  margin-right: 600px;
}

#rules {
  font-size: 70px; /* 더 큰 글꼴 크기 */
  font-weight: bold;
  text-shadow: 2px 2px 4px rgb(214, 0, 0);
  /* text-align: center; */
  color: white; /* 텍스트 색상을 더 진한 옐로우로 변경 */
  margin-left: 370px;
}

.mainContainer {
  display: flex; /* Flex 컨테이너로 설정 */
  justify-content: center; /* 요소들을 수평 중앙으로 정렬 */
  padding-top: 1px;
  padding-bottom: 180px;
}

.ourMind {
  position: relative; /* 부모 요소에 대해 상대적인 위치 지정 */
  width: 500px;
  height: 500px;
  background-image: url("image/teeth.jpg");
  background-size: cover;
  margin-right: 200px;
  border-radius: 30px;
}

#mind {
  font-size: 70px;
  font-weight: bold;
  /* text-align: center; */
  color: black; 
  position: absolute;
  padding-top: 40px;
  padding-left: 30px;
}

.ourRule {
  width: 800px;
  height: 500px;
  background-image: url("image/blackboard.png");
  background-size: 106%;
  background-position: center;
}

#rule_blackboard {
  font-size: 30px;
  font-weight: bold;
  color: white; 
  padding-top: 130px;
  padding-left: 130px;
}

.modal-body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-body .row {
  width: 100%;
}

.modal-body2 {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.modal-body3 {
  width: 100%;
}

.modal-name,
.modal-age,
.modal-home,
.modal-MBTI {
  border: 1px #222 solid;
  border-radius: 5px;
  box-shadow: 0 0 5px #222;
  padding: 4px;
  /* margin-right: 10px; */
}

.modal-one,
.modal-blog,
.modal-goal,
.modal-hobby,
.modal-pro,
.modal-info {
  width: 100%;
  border: 1px #222 solid;
  border-radius: 5px;
  box-shadow: 0 0 5px #222;
  padding: 4px;
}

.modal-dialog {
  max-width: 900px;
  margin: 0 auto;
  transform: translateX(-50%);
}

.modal-content {
  width: 100%;
  max-width: none;
}