@font-face {
    font-family: 'EliceDigitalBaeum_Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_220508@1.0/EliceDigitalBaeum_Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'EBSHunminjeongeumSBA';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/EBSHunminjeongeum.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'SBAggroB';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PFStardust';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/PFStardust.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DOSGothic';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/DOSGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


*{cursor:url('cursor.png') 2 2, auto;}

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color:#BBFF79;
    width: 100%;
    overflow-x: hidden;
    height:5000px;
    
}

.bg{z-index: 0;}

.title{ 
    font-size: 130px;
    font-family: 'SBAggroB';
    color:rgb(255, 255, 255);
    -webkit-text-stroke: 3px rgb(0, 0, 0);
margin: 70px;}
    

header {
    width: 100%; 
    height: 75px;
    background-color: transparent;
    color: black;
    position: fixed;
    top: 0; 
    left: 0; 
    z-index: 10; /* 다른 요소 위에 표시되도록 설정 */
    display: flex; /* 플렉스 박스 사용 */
    justify-content: center; /* 좌우 정렬 */
    align-items: center; /* 수직 정렬 */
    

    }
    .header1 {
        font-size: 24px;
        font-family: 'SBAggroB';
        
    }
    
    .header2 {
        font-size: 24px;
        font-family: 'SBAggroB';
        text-align: center;
        flex: 0.9; /* 가운데 정렬 */
    }
    
    .header3 {
        font-size: 24px;
        font-family: 'SBAggroB';
        text-align: center;
    }

    a{text-decoration: none;
        color: black;        cursor: url(./img/cursor2.png), auto !important;}
    a:visited{text-decoration: none;
        color: black;}


        .button-container {
            display: flex;
            justify-content:right;
            gap: 20px;
            margin: 20px 0;
            position: fixed; 
            top: 340px;
            left: 70%;
            transform: translateX(-50%);
            z-index: 1000;
            transition: all 0.3s ease;
        }
        
     
        .button-container.scrolled {
            left: auto; 
            right: 10px; 
            top:40px;
            transform: none; 
            flex-direction: column; 
            justify-content: flex-start; 
            align-items: flex-end; 

            padding: 10px;
            border-radius: 10px;
   
            scale: 0.6;
        }
        
        .scroll-button {
            font-family: 'SBAggroB';
            font-size: 20px;
            padding: 10px 20px;
            border: 2px solid #000;
            background-color: #FFD1E7;
            color: #000;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s;
            white-space: nowrap; /* 줄바꿈 방지 */
        }
        
        .scroll-button:hover {
            background-color: #FFA0D6;
        }



/* 맨 위로 가기 버튼 스타일 */
.scroll-top-button {
    position: fixed;
    bottom: 30px; 
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: rgba(255, 140, 217, 0.7);
    color: white; 
    font-family: 'SBAggroB';
    font-size: 18px;
    text-align: center;
    line-height: 55px; 
    border-radius: 50%; 
    cursor: pointer;
    display: none;
    transition: opacity 0.3s ease, transform 0.3s ease; 
    z-index: 1000;
}

.scroll-top-button:hover {
    background-color: rgba(255, 59, 190, 0.7);
    transform: scale(1.1);
}

        .stars {
            position: absolute;
            height: 180px;
            background: url('star-pattern.png') repeat;
            background-size: contain;
            z-index: 1;
            transition: transform 0.2s;
          }
        
        .star1{top:490px;}
        .star2{top:2600px;}

     
.spiral-container {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    position: absolute;
   
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; 
    height: 150px;
  }

  .spiral1{ top: 1550px;}
  .spiral2{ top: 3800px;}
  

  .spiral {
    width: 200px; /* 각 spiral의 크기 */
    height: 200px;
    background: url('img/spiral.png') no-repeat center / contain;
    transition: transform 0.2s;
  }

  .textslide{
    font-family: 'EBSHunminjeongeumSBA';
    position: relative;
    transition: transform 0.2s;
    font-size: 100px;
    color: #B2B2B2;
    background-size: contain;
     z-index: 1;
     margin-top: 300px;

     width:200%;
     overflow-x: hidden;
  }


  .container{  background-color: #ffffff;
    position: relative;
    height: 700px;
    width: 80%;
    left:10%;
    z-index: 7; 
    border-radius: 30px;
border: 2px solid black;}

.name{
    font-family: 'DOSGothic';
    font-size: 70px;
    color:#ffd1e7;
    -webkit-text-stroke: 2px #ffa0d6;
    position: absolute;
    top: 40px;
}

.img{
    position: absolute;
    margin:2%;
    border: 2px solid black;
    border-radius: 20px;
}
.info{
    position:absolute;
    font-family: 'PFStardust';
    font-size:20px;
    line-height:25px; 
}
.year{font-size:30px;}

.dreamcontainer{
    margin-top:400px;
}
.dreamname{right: 50px;}
.dreamimg{
    width:46%;
}

.dreaminfo{
    right: 50px;
    text-align: right;
    bottom:40px;
}

.limbocontainer{
    margin-top:30px;
}
.limboname{left: 50px;}
.limboimg1{
    width:47%;
    right:0px;
}
.limboimg2{
    width:46%;
   left:0px;
   bottom: 0px;
}
.limboinfo{
    left: 50px;
    text-align: left;
    top:100px;
    
}

.kecontainer{
    margin-top:330px;
}
.kename{right: 50px;}
.keimg{
    width:46%;
}
.keinfo{
    right:50px;
    text-align: right;
    bottom:40px;
}


.puddingcontainer{
    margin-top:400px;
}
.puddingname{left: 50px;}
.puddingimg1{
    width:46%;
   
    bottom:0;
    right:0;
}
.puddingimg2{
    width:47%;
    left:0;
    bottom:0;
}

.puddinginfo{
    left: 50px;
    text-align: left;
    top:100px;
    
}


*{
    cursor: url(./img/cursor1.png), auto !important;
  }