/*구글 폰트 api*/
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gowun+Dodum&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gowun+Batang&family=Gowun+Dodum&display=swap');


.black-han-sans-regular { /*팀 제목 폰트*/
    font-family: "Black Han Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.gowun-dodum-regular { /*슬로건 폰트*/
    font-family: "Gowun Dodum", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .gowun-batang-regular { /*팀 카드 폰트*/
    font-family: "Gowun Batang", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  /* 푸터에서 뛰는 이미지를 불러오는 css */
  .footer-img {
    /* 사이즈*/
    width: 700px;
    height: 250px;
    /* 이미지 가져오기 */
    background-image: url('../img/footer.png');
    /* 이미지가 지정 사이즈를 채우도록 함 */
    background-size: cover;
}

.footer-box {
    /* 사이즈, 'vw' 는 'view width'로 현재 보이는 만큼을 채울때 쓰는 단위 */
    width: 100vw;
    height: 250px;
    /* 글씨 왼쪽으로 정렬 */
    text-align: left;
    background-color: #D73E45;
}

.footer-image-container {
    /* 플렉스 박스 디스플레이로 두 요소 양옆으로 정렬 */
    display: flex;
    /* 풋터의 이미지와 박스 사이 갭이없도록 조절 */
    gap: 0;
    position: relative;
}

.link-holder {
    /* 깃헙링그의 가장 바깟요소의 테두리를 둥글게 만듬 */
    border-radius: 13px;
    /* 테두리색 */
    border-color: rgb(235, 171, 171);
}

.btn {
    /* 버튼 누를때 생기는 테두리 없애기 */
    border: none;
}

.link-holder:hover {
    background-color: #f3e0e1;
}

.paragraph-container {
    margin-left: 100px;
    margin-top: 40px;
    display: flex;
    flex-direction: row;
}

.footer-paragraph {
    margin-left: 50px;
}

.line-container {
    color: #fff;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.line-container-heading {
    color: #fff;
    display: flex;
    flex-direction: column;
    font-weight: bold;
}

/* 팀 슬로건 */
.card-mb-2 {
    width: 100%;
    height: 350px;
    margin: 0px 0px 20px auto;
    padding: auto 200px 20px;
    padding-left: 150px;
    background-color: #D73E45;
    border-radius: 0px;
    box-shadow: 0px 0px 3px 0px rgb(255, 255, 255);
}

/* 팀원 개인카드 */
.card {
    background-color: #D73E45;
    border-radius: 5px;
    border: 1px solid rgb(255, 255, 255);
    color: white;
    font-weight: 500;
    /*폰트 굵기 추가*/
    font-family: 'Gowun Dodum' !important;
    /*폰트 추가*/
}

.card:hover {
    /* 카보드 마우스 지날때 투명도 65% */
    filter: opacity(0.65);
    /* 마우스 지날때 손포인터 모양으로 변함 */
    cursor: pointer;
}

/* 응원 한마디 */
.mypostingbox {
    width: 800px;
    margin: 20px auto 20px auto;
    padding: 20px 20px 20px 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 3px 0px black;
}

/* 응원의 메세지 */
.card2 {
    width: 800px;
    background-color: white;
    margin: 20px auto 20px auto;
    border-radius: 5px;
    border: 1px solid rgb(0, 0, 0);
    height: 300px;
    /*세로 길이 지정*/
    overflow-y: scroll;
    /*해당 클래스 요소에 세로 방향 스크롤 기능 활성화*/
}

/* 깃허브 링크 */
.card3 {
    background-color: white;
    margin: 20px auto 20px auto;
    border-radius: 5px;
    border: 1px solid rgb(0, 0, 0);
}

/*팀 카드*/
.team-card {
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 1000px;
    padding: 20px;
    box-sizing: border-box;
    margin: 0;
    font-family: 'Gowun Dodum' !important;
    /*폰트 추가*/

}

/* 팝업 모달 */
.team-card .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    border: 5px solid white;
}

.team-card .social-icons {
    margin-top: 10px;
}

.team-card .social-icons a {
    color: #333;
    margin-right: 10px;
    font-size: 24px;
}

.team-card .social-icons a:hover {
    color: #D73E45;
}

/* 게시판 부분 css */
.nickname {
    width: 10%;
}

.cheering {
    text-align: center;
}

/* 가운데 정렬 css */
.wrap {
    margin: auto;
    width: 80%;
    padding: 10px;
}

/* 슬로건 전용 정렬 css */
.header {
    margin: 60px auto;
    width: 80%;
    padding: 0px;
}

/* 스크롤 버튼 css */
#scrollBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 15px 20px;
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    display: none;
    /* 이 중 필수 요소는
        position: fixed; - 요소를 고정 위치에 배치, 스크롤을 해도 버튼이 항상 화면의 같은 위에 존재한다.
        bottom: 20px; - 화면 하단으로 부터 20px 떨어진 위치에 배치
        right: 20px; - 오른쪽 화면으로 부터 20px 떨어진 위치에 배치
        cursor: pointer; - 요소 위에 마우스를 올렸을 때 커서 모양을 손가락 모양으로 변경
        display: none; - 요소를 처음에는 화면에 안보이도록 숨긴다.
    */
}