body {
    margin: 0;/*block요소바깥간격*/
    overflow: hidden; /* 안쪽콘텐츠가 요소 크기보다 크면 안보이게 처리 스크롤방지 */
    background-color: #131410/*우주배경색*/
}

.background {
    position: absolute;/*레이어 씌우는 값 선언*/
    top: 0;/*요소 위쪽위치*/
    left: 0;/*relative(상대)왼쪽으로부터 0 지정*/
    width: 100%;/*가로넓이*/
    height: 100%;/*세로넓이*/
    pointer-events: none; /* 배경 클릭 방지 */
    z-index: 0; /*반응값 우선순위*/
}

/*index1.js를 위한 별빛 나타나기*/
.flower {
    position: relative;/*레이어 씌우는 값 선언*/
    width: 20px;/*가로넓이*/
    height: 20px;/*세로넓이*/
    background-color: #e8c229; /* 별색*/
    border-radius: 50%;/*모서리(테두리) 반지름*/
    opacity: 0.8;/*요소 불투명도*/
    animation: fall linear forwards;/*전방에 직선선형 식으로 떨어지는 효과*/
    z-index: 2;/*반응값 우선순위*/
}

@keyframes fall {
    0% {
        transform: translateY(100vh) rotate(0deg);/*이동회전크기 기울임등변형속성값*/
        opacity: 0.8;/*요소 불투명도*/
    }
    100% {
        transform: translateY(-10vh) rotate(720deg);/*이동회전크기 기울임등변형속성값*/
        opacity: 0;/*요소 불투명도*/
    }
}

/* 상단 고정 내비게이션 바 내부 기본값 설정 스타일 */
.fixed-top-bar {
    position: fixed; /*레이어 씌우는 위치 값 고정 */
    top: 0;/*요소 위쪽위치*/
    left: 5;/*relative(상대)왼쪽으로부터 0 지정*/
    width: 100%;/*가로넓이*/
    display: flex;/*요소들을 행 또는 열로 배치하는 속성 값 
    inline-table이면 간격없이 영역설정*/
    justify-content: space-around;/* 요소와공간바동일간격space-between
    요소간 동일간격 양끝 공간사이값, flex-start시작지점부터정렬, 
    flex-end끝지점부터정렬,center가운데정렬 */
    align-items: center;/*네비바 내에서 수직축라인으로 아이템이 중심정렬*/
    padding: 12px 12px;/*요소 안쪽 간격 값*/
    background-color: rgba(0, 0, 0, 0.7); /* 반투명 배경 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);/*그림자효과이고 
    수평수직, 그림자확산정도, 블러효과, 색상순서*/
    z-index: 1000;/*반응값 우선순위*/
}

.logo {
    font-weight: bold;/*글자굵기*/
    margin-right: 20px;
    gap: 30px
}

a {
    text-decoration: none;/*링크형태의 텍스트 밑줄 제거*/
    color: #f5f5f5;
    font-size: 20px;/*글자크기*/
}

/*nav menu 글자 값 bar*/
nav a {
    color: white;
    text-decoration: none;/*링크형태 텍스트 밑줄 제거*/
    padding: 5px 10px 2px 2px;/*요소 안쪽 상하좌우 값*/
    margin-right: 30px;/*요소 우측 바깥 여백 값*/
    font-size: 15px;/*네비바 내부 메뉴글자크기*/
    transition: color 0.3s;/*애니메이션 효과를 갖기위한 속성값*/
}

.nav-link-1:hover {/*마우스 위로올때 반응*/
    color:#09910d;/*home*/
}

.nav-link-2:hover {/*마우스 위로올때 반응*/
    color: #e8c22c;/*information*/
}

.nav-link-3:hover {/*마우스 위로올때 반응*/
    color: #09910d;/*membership*/
}

.nav-link-4:hover {/*마우스 위로올때 반응*/
    color: #e8c229;/*helpus*/
}

.button-container {
    display: flex;
    gap: 30px;/*버튼 간의 간격*/
}

.button {
    min-width: 40px;
    max-width: 60px;
    min-height: 20px;
    /*display: flex; /* 요소를붙여서중앙정렬 */
    flex-direction: row;/*행(가로)배치 값,column열(세로)배치 값 
    flex-wrap:wrep은 여러행과열로 나누는 값*/
    justify-content: center; /* 네비 수평 중앙 정렬 */
    font-size: 15px;
    border: 0;
    outline: 0;
    color: white;
    background: linear-gradient(to right, #ee0979, #ff6a00);
    text-decoration: none; /* 링크의 기본 밑줄 제거 */
    cursor: pointer;
    padding: 10px; /* 패딩 추가 */
    border-radius: 5px; /* 모서리 둥글게 */
}

/*index1.js를 위한 스르륵 중간 문장 나타나기효과 */
.textStyle1 {
    font-weight: 900;/*글자최대두께*/
    font-size: 30px;/*글자크기*/
    text-align: center; /* 텍스트 가운데 정렬 */
    color: #fff;/*글자색상*/
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);/*글자 그림자효과이고 깊이및 입체감을 위한 효과처리요소이고
    수평,그림자크기,블러정도,색상순서*/
    margin: 300px 0px 0px 0px;/*요소 바깥 상단 우측 하단 좌측 간격*/
}

.textStyle2 {
    font-weight: 900;/*글자최대두께*/
    font-size: 30px;/*글자크기*/
    text-align: center; /* 텍스트 가운데 정렬 */
    color: #fff;/*글자색상*/
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);/*글자 그림자효과이고 깊이및 입체감을 위한 효과처리요소이고
    수평,그림자크기,블러정도,색상순서*/
    margin: 0px 0px 300px 0px;/*요소 바깥 상단 우측 하단 좌측 간격*/
}

.textAniBox {
    position: relative;/* 레이어속성의 기준을 잡는 relative라는 값을 fixed 로 변경시 세로만 보여짐 비권장*/
    top: 50%; /*요소 위쪽위치*/
    left: 50%; /*relative(상대)왼쪽으로부터 50 지정*/
    display: flex;/*요소들을 행 또는 열로 배치하는 속성 값*/
    transform: translate(-50%,-50%);/*이동회전크기 기울임등변형속성값*/
    align-items: center;/*수직축라인으로 아이템이 중심정렬*/
    flex-direction: row; /* 가로 방향으로 정렬 */
    justify-content: center; /* 가운데 정렬하고 content(필수값) */
    z-index: 1; /*반응값 우선순위*/
    color: #e8c22c;
    font-size: 30px;
    margin: 100px 0px 100px;
}

.textAni1 {
    position: absolute;/*레이어 씌우는 값 선언*/
    opacity: 0;/*요소 불투명도*/
    animation: updown 15s;/*위아래요소움직임 slideup요소를숨기는효과 slideDown요소를아래로펼치는효과도 있다*/
    animation-delay:  0s;/*지연시간*/
    animation-fill-mode: forwards;/*마지막 프레임의 상태 유지 속성인데 이때 none은 끝나고 원상태복귀 backwards 첫번째로 회귀 both 끝과 마지막프레임유지*/
    animation-iteration-count: infinite;/*반복 숫자 무한대*/
}

.textAni2 {
    position: absolute;/*레이어 씌우는 위치값 선언*/
    opacity: 0;/*요소 불투명도*/
    animation: updown 15s;
    animation-delay:  3s;/*지연시간*/
    animation-fill-mode: forwards;/*마지막 프레임의 상태 유지 속성인데 이때 none은 끝나고 원상태복귀 backwards 첫번째로 회귀 both 끝과 마지막프레임유지*/
    animation-iteration-count: infinite;/*반복 숫자 무한대*/
}

.textAni3 {
    position: absolute;/*레이어 씌우는 위치 값 선언*/
    opacity: 0;/*요소 불투명도*/
    animation: updown 15s;
    animation-delay:  6s;/*지연시간*/
    animation-fill-mode: forwards;/*마지막 프레임의 상태 유지 속성인데 이때 none은 끝나고 원상태복귀 backwards 첫번째로 회귀 both 끝과 마지막프레임유지*/
    animation-iteration-count: infinite;/*반복 숫자 무한대*/
}

.textAni4 {
    position: absolute;/*레이어 씌우는 위치 값 선언*/
    opacity: 0;/*요소 불투명도*/
    animation: updown 15s;
    animation-delay:  9s;/*지연시간*/
    animation-fill-mode: forwards;/*마지막 프레임의 상태 유지 속성인데 이때 none은 끝나고 원상태복귀 backwards 첫번째로 회귀 both 끝과 마지막프레임유지*/
    animation-iteration-count: infinite;/*반복 숫자 무한대*/
}

.textAni5 {
    position: absolute;/*레이어 씌우는 위치 값 선언*/
    opacity: 0;/*요소 불투명도*/
    animation: updown 15s;
    animation-delay:  12s;/*지연시간*/
    animation-fill-mode: forwards;/*마지막 프레임의 상태 유지 속성인데 이때 none은 끝나고 원상태복귀 backwards 첫번째로 회귀 both 끝과 마지막프레임유지*/
    animation-iteration-count: infinite;/*반복 숫자 무한대*/
}

@keyframes updown {
    0%{
        opacity: 0;/*요소 불투명도*/
        transform: translate3d(0, 30%, 0);/*이동회전크기 기울임등변형속성값*/
    }
    5%{
        opacity: 1;/*요소 불투명도*/
        transform: translateZ(0);/*이동회전크기 기울임등변형속성값*/
    }
    10%{
        opacity: 1;/*요소 불투명도*/
        transform: translateZ(0);/*이동회전크기 기울임등변형속성값*/
    }
    20%{
        opacity: 0;/*요소 불투명도*/
        transform: translate3d(0, 30%, 0);/*이동회전크기 기울임등변형속성값*/
    }
    100%{
        opacity: 0;/*요소 불투명도*/
        transform: translate3d(0, 30%, 0);/*이동회전크기 기울임등변형속성값*/
    }
}