*{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif, ;
    box-sizing: border-box;
}
body{
    overflow: hidden;
}
@keyframes intro {
    0%{
        background-color: #1B3943;
    }
    99%{
        background-color: #1B3943;
    }
    100%{
        background-color: #A9BCC3;
    }
}
.intro{
    width: 100vw;
    height: 100vh;
    background-color: #1B3943;
    position: relative;
    animation: intro 4s forwards;
}
@keyframes Hand {
    0% {top:100%;left:56%;}
    50%{
        transform: translateY(-55%);
    }
    100%{
        top:40%;left:56%;
    }
}
@keyframes String {
    0%{top: -30%;left: 63%;}
    100%{top: -20%;left: 63%;}
}
.Hand{
    position: absolute;
    animation: Hand 4s ease normal forwards;
}
.String{
    position: absolute;
    top: -30%;
    left: 63%;
    animation: String 2s ease normal 2s forwards;
}
@keyframes Handpath {
    0%{
        stroke: #A9BCC3;
    }
    99%{
        stroke: #A9BCC3;
    }
    100%{
        stroke: #1B3943;
    }
}
@keyframes Handbantay {
    0%{
        fill: #A9BCC3;stroke: #A9BCC3;
    }
    99%{
        fill: #A9BCC3;stroke: #A9BCC3;
    }
    100%{
        fill: #1B3943;stroke: #1B3943;
    }
}
@keyframes Stringstroke {
    0%{
        stroke: #A9BCC3;
    }
    99%{
        stroke: #A9BCC3;
    }
    100%{
        stroke: #1B3943;
    }
}
.Hand path{
    animation: Handpath 4s forwards;
}
.Hand .bantay{
    animation: Handbantay 4s forwards;
}
.String line{
    animation: Stringstroke 4s forwards;
}
.String circle{
    animation: Stringstroke 4s forwards;
}