tutorial.css

*{margin: 0; padding: 0; overflow: hidden; border: none} 

body {
    overflow: hidden; 
}

#image {
    position: relative; 
    width: 400vw; 
    height: 100vh;  
    overflow: hidden; 
    animation: moveBackground 25s linear infinite;

}


#back {
    position: absolute;
    top: 3.5vh; 
    left: 3.6vw;  
    transform: translate(-50%, -50%);        
    background-color: transparent;
}

.back_img{
    width: 7vw    
}


.rhythme {

    position: fixed;
    width: 9.5vw;
    height: 9.5vw;
    top: 75%;
    left: 30%; 
    transform: translate(-50%, -50%); 
    z-index: 6; 

}


#gameCompleteScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5); /* 반투명한 검은 배경 */
    display: none; /* 초기에는 화면에 보이지 않음 */
    justify-content: center;
    align-items: center;
    z-index: 8;
}

.gameComplete{    
    width: 60vw;
    margin-top : -250px;
}


.button_img {
    width: 22vw;
}

#reStart{
    position: absolute;
    display: none;
    top: 59vh; 
    left: 50vw;
    transform: translate(-50%, -50%);
    z-index: 9;
}

#quit{
    position: absolute;
    display: none;
    top: 73vh; 
    left: 50vw; 
    transform: translate(-50%, -50%);
    z-index: 9;

}


.hat{

    position: fixed;
    top: 75%;
    left: 30%; 
    width: 9.5vw;
    height: 9.5vw;
    transform: translate(-50%, -50%); 
    z-index: 7; 

}

.clothes{

    position: fixed;
    top: 75%;
    left: 30%; 
    width: 9.5vw;
    height: 9.5vw;
    transform: translate(-50%, -50%); 
    z-index: 7; 

}

.shadow {
    position: fixed;
    width: 6vw;
    top: 79.9%;
    left: 30.4%; 
    opacity: 0.5;
    transform: translate(-50%, -50%); 
    z-index: 5; 
}

.background {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh; 
    background-repeat: no-repeat;
    background-size: cover;
}

.background:nth-child(1) {
    background-image: url('backgroudns_img/tutorial_background.png'); 
    left: 0; 
    z-index: 4; 
}

.background:nth-child(2) {
    background-image: url('backgroudns_img/tutorial_background.png');
    left: 100vw; 
    z-index: 3; 
}

.background:nth-child(3) {
    background-image: url('backgroudns_img/tutorial_background.png');
    left: 200vw; 
    z-index: 2; 
}

.background:nth-child(4) {
    background-image: url('backgroudns_img/tutorial_background.png');
    left: 300vw; 
    z-index: 1; 
}





@keyframes moveBackground {
    0% {
        transform: translateX(0); 
    }
    100% {
        transform: translateX(-300vw); 
    }
}

.block {
    position:absolute;
    height: 4vh;
    width: 6vw;
    top: 78.5%;
    z-index: 5;
}

.block_guide{
    position: fixed;
    width: 67vw;
    height: 26vw;
    top: 17.5%;
    left: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 6; 
}


.achievement {
    position: fixed;
    display: none;
    width: 15vw;
    height: 5vh;
    top: 65%;
    left: 20%; 
    transform: translate(-50%, -50%); 
    z-index: 7; 
}


.instruction {
    position: fixed;
    width: 38vw;
    height: 3.8vw;
    top: 55%;
    left: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 7; 
}


.press_s {
    position: fixed;
    width: 270px;
    height: 42px;
    top: 55%;
    left: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 7; 
}


.press_k {
    position: fixed;
    width: 270px;
    height: 42px;
    top: 55%;
    left: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 7; 
}

.press_Sk {
    position: fixed;
    width: 300px;
    height: 42px;
    top: 55%;
    left: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 7; 
}