body{
    margin:0;
    padding:0;
}
.start-note{
    padding:0;
    margin:0;
    font-size:50px;
    text-shadow:1px 0 0 black,
                0 1px 0 black,
                -1px 0 black,
                0 -1px 0 black,
                -1px -1px 0 black,
                1px 1px 0 black,
                1px -1px 0 black,
                -1px 1px 0 black;
}
#start-note1{
    color:rgb(194, 15, 248);
    text-align: left;
    font-size:60px; 
    padding-left:21%;
    padding-top:0;
    padding-bottom:0%;
}
#start-note2{   
    color:rgb(233, 5, 184);
    text-align: right;
    padding-right:17%;
    font-size:70px;
    margin-top:-15%;
    padding-top:0;
    padding-bottom:0;
}
#start-note3{
    padding-left:35%;
    font-size:58px;
    color:yellowgreen;
}
#start-note4{   
    color:rgb(235, 187, 125);
    text-align: right;
    font-size:80px;
    padding-right:9%;
    padding-top:0;
    padding-bottom:0;
    margin-bottom:-7%;
    margin-top:-16%;
}
#start-note5{
    color:cadetblue; 
    text-align: left;
    font-size:70px;
    padding-left:7%;
    padding-top:0;
    padding-bottom:0;
    margin-top:-20%;
}
.start{
    padding-top:0;
    /* border:20px solid rgb(243, 241, 114); */
    border:20px solid black;
    width:360px;
    height:640px;
    margin:0 auto;
    margin-top:3%;
    background-color:white;
}

.start-text{
    /* color:rgb(104, 104, 255); */
    color:black;
    text-align:center;
    margin-top:10%;
    margin-bottom:0;
    font-size:45px;
    font-weight: bold;
    font-family:'Single Day', cursive; 
}
.start-text2{
    /* color:rgb(5, 175, 96); */
    color:black;
    font-size:20px;
    font-weight: bold;
    text-align:center;
    font-family: 'Poor Story', cursive;
    padding:0;
    margin:0;
}
.startbutton{
    display:block;
    margin-top:5%;
    width:180px;
    height:70px;
    margin-left:auto;
    margin-right:auto;
    border-radius:12px;
    background-color:white;
    /* border: 5px solid rgb(190, 85, 168); */
    border: 5px solid black;
    font-size:28px;
    font-weight:bold;
    /* color:rgb(253, 160, 207); */
    color:black;
    cursor:pointer;
    transition:all 0.5s;    
}
.startbutton:hover{
    background-color: rgb(252, 224, 245);
    
}   


.question-text{
    color:black;
    margin-left:5%;
    margin-top:15%;
    text-align:center;
    font-size:45px;
    font-family: 'Single Day', cursive;
}


.questionbutton{
    text-align:center;
    display:flex;
    flex-direction: column;
}


.loading{
    display:flex;
    /* justify-content: center; */
    flex-direction: column;
    align-items : center;
    height: 100vh;
    margin-top:10%;
}
.loadingtext{
    font-family: 'Single Day', cursive;
    color: black;
    font-size:32px;
    margin-top:0;
    padding:0;
    margin-bottom:2%;
}
.note{
    text-align:center;    
    font-size:90px;
    color:rgb(83, 82, 82);
    position:relative;
}
.note::before{
    content: attr(data-text);
    color:black;
    position:absolute;
    left:0; z-index: 2;
    overflow:hidden;
    width:100%;
    animation: loading 1.5s ease infinite;
}
.note::after{
    content: "";
    width:100px;
    height: 3px;
    background:black;
    position:absolute;
    left: 0; bottom: -10px;
    animation: loadingLine 1.5s ease infinite;
}

@keyframes loading {
    from {width: 0%;}
    to {width: 100%;}
}

@keyframes loadingLine {
    from {width: 0%;}
    to {width: 100%;}
}

.alert{
    font-size:15px;
    font-family: 'Single Day', cursive;
    text-align:right;
    margin-top:0;
    padding:0;
    margin-bottom:1%;

}

.progress{
    text-align:center;
    width:80%;
    margin-top:1%;
    margin-left:auto;
    margin-right:auto;
}
#progressbar{
    padding:0;
}
.question{
    background-color:white;
    margin-top:3%;
    width:360px;
    height:640px;
    margin-left:auto;
    margin-right:auto;
    border:35px double rgb(0, 0, 0);
    padding-top:3%;

}

.question-text{
    color:black;
    margin-top:10;
    width:280px;    
    height:160px;    
    text-align:center;
    font-size:27px;
    font-family: 'Single Day', cursive;
    margin-bottom:0;
}

.questionbutton{
    text-align:center;
    display:flex;
    flex-direction: column;
    padding:0;
}

.button1{
    font-family: 'Cute Font', cursive;
    font-size:22px;
    width : 270px;
    height: 80px;
    margin-top:10%;
    margin-left:auto;
    margin-right:auto;
    color:#fff;
    background-color:black;
    border: 1px solid #ebebeb;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
}
.button2{
    font-family: 'Cute Font', cursive;
    font-size:22px;
    width : 270px;
    height: 80px;
    margin-top:16%;
    margin-left:auto;
    margin-right:auto;
    color:black;
    background-color:#fff;
    border: 1px solid #ebebeb;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
}
.result{    
    margin-top:-72px;
    padding:0;
    width:360px;
    margin-left:auto;
    margin-right:auto;
    background-color: rgb(245, 237, 195);
    border: 20px dashed rgba(71, 0, 0, 0.6);
}

.life{
    margin-top:5%;
    font-size:22px;
    font-weight:bold;
    padding-left:4%;
    margin-bottom:0;
    font-family:'Jua', sans-serif;
}
.subtitle{
    text-align:center;
    margin-top:2px;
    font-family:'Jua', sans-serif;
    font-size:23px;
    margin-bottom:0;
    line-height: 30px;
    font-weight: bold;
    color:rgba(80, 3, 3, 0.925);

}

.genre{
    font-size:60px;
    margin-top:-8px;
    margin-bottom:0;
    padding-top:0;
    padding-bottom:0;
    text-align:center;
    color:rgb(243, 227, 138);
    font-family: 'Jua', sans-serif;
    font-weight: bold;
    text-shadow:1px 0 0 black,
                0 1px 0 black,
                -1px 0 black,
                0 -1px 0 black,
                -1px -1px 0 black,
                1px 1px 0 black,
                1px -1px 0 black,
                -1px 1px 0 black;
                
    /* padding:0;
    margin:0;
    text-align:center;
    font-size : 100px;
    color:rgb(10, 10, 10);
    font-family: 'Jua', sans-serif;
    text-shadow: 1px 1px 0 rgb(39, 39, 39),
                2px 2px 0 rgb(70, 70, 70),
                3px 3px 0 rgb(105, 105, 105),
                4px 4px 0 rgb(139, 139, 139),
                5px 5px 0 rgb(172, 172, 172),
                6px 6px 0 rgb(199, 198, 198),
                7px 7px 0 rgb(226, 224, 224); */
                
                    
    /* text-align: center;
    display:inline;
    background:linear-gradient(to right, rgb(153, 2, 2),black);
    font-size:100px;
    font-family: 'Hi Melody', cursive;
    font-weight: bold;
    -webkit-background-clip: text;
    -webkit-text-fill-color:transparent;    
    margin: 0 auto; */

            }
            
.my-melody{
    color:rgb(207, 31, 69);
    font-weight: bold;
    font-size:28px;
    font-family:'Poor Story', cursive;
    margin-top:0;
    margin-bottom:-3%;
    padding-left:3%;
    
}

.explain{
    padding-top:0;
    font-size:17px;
    color:rgb(2, 65, 7);
    font-family: 'Single Day', cursive;     
    padding:0;
    padding:3%;
    margin-left:3%;
    margin-right:3%;
    margin-bottom:10%;


}

.my-note{
    color:rgb(207, 31, 69);
    font-weight: bold;
    font-size:28px;
    font-family:'Poor Story', cursive;
    margin-top:0;
    margin-bottom:-3%;
    padding-left:3%;
}

.sub_explain{
    padding-top:0;
    font-size:17px;
    color:rgb(2, 65, 7);
    font-family: 'Single Day', cursive;     
    padding:0;
    padding:3%;
    margin-left:3%;
    margin-right:3%;
    margin-block-start: 1px;
    margin-block-end: 1px;
}
/* ::-webkit-scrollbar{
    width:8px;
}
::-webkit-scrollbar-thumb{
    background:linear-gradient(transparent,rgb(182, 1, 1));
    border-radius:6px;
} */

.wrap{
    overflow:hidden;
}

.chemi{
    font-family: 'Single Day', cursive;
    margin-bottom:0;
    font-size:26px;
    padding-left:17px;
    margin-top:5%;
    float:left;
}
.chemibox{
    font-family: 'Jua', sans-serif;
    font-size:29px;
    float:right;
    margin-left:-10%;

    text-align:center;
    width:130px;
    margin-top:5%;
    color:rgb(247, 224, 93);
    text-shadow:1px 0 0 black,
                0 1px 0 black,
                -1px 0 black,
                0 -1px 0 black,
                -1px -1px 0 black,
                1px 1px 0 black,
                1px -1px 0 black,
                -1px 1px 0 black;
}

.restart{
    margin-top:5%;
    text-align:center;
    cursor:pointer;
    font-size:25px;
    font-weight:bold;
    font-family:'Poor Story', cursive;
    color:rgb(241, 139, 4);
    border:2px solid rgb(241, 139, 4);
    width:120px;
    border-radius: 10px;
    margin:0 auto;
    margin-top:5%;
    margin-bottom:5%;
}


#share{
    text-align: center;
    margin-bottom:15px;
}


.kakao_ad{
    width:320px;
    margin: 0 auto;
    margin-top:2%;
}
.banner{
    margin:0 auto;
    width:320px;
    display:flex;
    justify-content: center;
}
.banner-img{
    margin-top:4%;
    width:320px;
}





@media only screen and (max-width: 600px) {

   .start{
        margin-top:5%;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:-10%;
    }

    .start-text{
        font-size:40px;  
    }

    .question{
        margin-top:5%;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:-10%;
    }

    .loading{
        display:flex;
        /* justify-content: center; */
        flex-direction: column;
        align-items : center;
        height: 100vh;
        margin-top:30%;

    }
    
    .result{
        margin-top:-20%;
    }
}