@font-face {
    font-family: 'EBSHMJESaeronRA';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/EBSHMJESaeronRA.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: 'GumiIndustryTTF';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2410-1@1.0/GumiIndustryTTF.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

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

html{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color:#D0D0D0;
    width: 100%;
    overflow-x: hidden;
    height: 4500px;
    transition: background-color 0.3s ease; 
    
}

.bg{z-index: 0;}

.title{ 
    font-size: 130px;
    font-family: 'EBSHMJESaeronRA';
    color:#B578FF;
    -webkit-text-stroke: 2px #B578FF;
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;}



.scroll-top-button {
    position: fixed;
    bottom: 30px; 
    right: 30px; 
    width: 50px;
    height: 50px;
    background-color: rgba(214, 161, 255, 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(144, 255, 59, 0.7);
    transform: scale(1.1);
}



    body {
            margin: 0;
            padding: 0;
            height: 4500px; 
        }


/* 컨테이너 스타일 */
.like-container {
    
    position: relative;
    display: flex;
    flex-direction: column; 
    align-items: flex-end; 
    margin: 2%; 
    gap: 30px; 
}
 



.like, .word1, .word2, .word3 {
    font-size: 80px;
    font-family: 'EBSHMJESaeronRA';

}

.like {
    color: #000000;
}

.word1, .word2, .word3 {
    color: #ffffff;
    -webkit-text-stroke: 2px rgb(0, 0, 0);
}




.backletter {
    position: sticky;
    top: 200px;
    font-size: 280px;
    font-family: 'EBSHMJESaeronRA';
    color: #B578FF;
    -webkit-text-stroke: 6px #B578FF;
    text-align: center;
    margin: 70px;
    z-index: 5;
}

@keyframes float {
    0% {
      transform: translateX(0); /* 초기 위치 */
    }
    50% {
      transform: translateX(-20px); 
    }
    100% {
      transform: translateX(0); 
    }
  }
  
  .arrow {
    rotate: 90deg;
    font-size: 250px;
    position: absolute;
    font-family: 'EBSHMJESaeronRA';
    color: #ffffff;
    z-index: 150;
    left: 41.5%;
    top: 630px;
    animation: float 2s ease-in-out infinite;
  }



.container {
    position: relative; 
    height: 5500px;
    overflow: visible; 
    top: 200px;
    z-index: 1; 

}

.whiteback1 {
    background-color: #ffffff;
    position: absolute;
    height: 1100px;
    width: 100%;
    top: 500px;
    margin-top: 1300px;
    z-index: 3; 
    box-shadow: #ffffff 0px 0px 50px;
}

.albumtext{
    position: absolute;
    font-size: 20px;
    font-family: 'EBSHMJESaeronRA';
    color:#494949;
    z-index: 150;
    margin: 10%;
    top: 2360px;
    text-align: center;
    left:32%
}
.albumtitle{
    font-size: 30px;
    position: absolute;
    font-family: 'EBSHMJESaeronRA';
    color:#494949;
    z-index: 150;
    margin: 10%;
    top: 1900px;
    text-align: center;
    left:29%}


.img {
    position: absolute;
    top: 2000px; 
    left:15%;
    width: 70%;
    z-index: 100;
    border-radius: 20px;
}

.darkback {
    background-color: #5B5B5B;
    position: absolute;
    height: 700px;
    width: 70%;
    top: 3100px;
    left:15%;
    margin-top: 100px;
    z-index: 7; 
    border-radius: 20px;
}


.dragspace{
    position: absolute;
    top: 3100px;
    left:55%;
    width: 750px;
    height: 1100px;

    z-index: 10;
}



.draggable {
    position: absolute; 
    top: 45%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    cursor: url(./img/cursor2.png), auto !important;
    user-select: none; 
    box-shadow: 5px 5px 7px#00000083;
    
}
.coda1{    width: 280px;}
.coda2{    width: 400px;}
.coda3{    left: 55%;top: 54%; width: 280px;}

.codalogo{
    position: absolute; 
    width: 400px;
    top: 3600px; 
    left: 20%;
z-index: 10;
animation: floatAnimation 4s infinite ease-in-out;
cursor: url(./img/cursor2.png), auto !important;}

@keyframes floatAnimation {
    0% {
      transform: translate(0, 0) scale(1); 
    }
    55% {
      transform: translate(-10px, -10px) scale(1.02); 
    
    }
    100% {
      transform: translate(0, 0) scale(1); 
    }
  }

  

.codatext{
    position: absolute;
    font-size: 20px;
    font-family: 'EBSHMJESaeronRA';
    color:#dddddd;
    z-index: 10;
    margin: 10%;
}
.codatitle{font-size: 40px;z-index: 10;}

.whitecontainer2{
    position: relative;
    height: 1300px;
    width: 100%;
    top: 3600px;
}
.whiteback2 {
    background-color: #ffffff;
    
    position: relative;
    height: 1100px;
    width: 100%;
    z-index: 3; 
    box-shadow: #ffffff 0px 0px 50px;
}

    .typoimg1{position: absolute; 
    left:15%;
    top:160px;
    width: 32%;
    z-index: 100;
    border-radius: 10px;
    cursor: url(./img/cursor2.png), auto !important;}

    .typoimg2{position: absolute; 
        left:55%;
        top:480px;
        width: 30%;
        z-index: 100;
        border-radius: 10px;}

    .typotextbox{position: absolute; 
        left:55%;
        top:160px;
        width: 30%;
        height:20%;
        z-index: 100;
        background-color: #d0d0d0af;
        backdrop-filter: blur(15px); /* 블러 효과 */
        border-radius: 10px;}


        .typotext{
            position: absolute;
            font-size: 20px;
            font-family: 'EBSHMJESaeronRA';
            color:#6a6a6a;
            z-index: 10;
            margin: 10%;
        }
        .typotitle{font-family: 'GumiIndustryTTF';font-size: 35px;z-index: 10;}

        .background-pattern {
            position: absolute;
            
            width: 0;
            height: 0;
            background: radial-gradient(circle, rgb(255, 255, 255) 1%,rgba(178, 123, 255, 0.602) 5%, transparent 60%);
            opacity: 0;
            transform: translate(-50%, -50%) scale(0);
            border-radius: 50%;
            pointer-events: none;
            transition: all 0.5s ease-in-out;
            z-index: 7;
          }

            .pattern1{top: 50%;left: 50%;}
            .pattern2{top: 15%;left: 10%;}
            .pattern3{top: 20%;left: 93%;
                background: radial-gradient(circle, rgb(255, 255, 255) 0.5%,rgba(178, 123, 255, 0.602) 3%, transparent 40%);}
            .pattern4{top: 60%;left: 12%; 
                background: radial-gradient(circle, rgb(255, 255, 255) 0.5%,rgba(178, 123, 255, 0.602) 3%, transparent 40%);}
            .pattern5{top: 65%;left: 90%;}


          /* Hover 시 애니메이션 */
          .typoimg1:hover ~ .background-pattern {
            width: 500px;
            height: 500px;
            opacity: 1;
            transform: translate(-50%, -50%) scale(0.5);
          }


          footer { 
            position: absolute;
            left: 50%; 
            transform: translateX(-50%); 
            font-size: 30px;
            font-family: 'EBSHMJESaeronRA';
            color: #B578FF;
            -webkit-text-stroke: 1px #B578FF; 
            margin: 0; 
            text-align: center;
            width: 100%; 
            top:6600px;
        }


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