@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');

*{
    margin:0;
    padding:0;
    font-family: 'Nanum Pen Script', cursive;
}

body{
    width:100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content{
    width: 100vw;
    max-width: 65rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 0 5vw 0 5vw;
    /*상우하좌*/
}

#start>p{
    font-size: 2.5rem;
    font-weight:bold;
    margin-top: 10vh;
    color:darkblue;
}

#start>img{
    width:300px;
    height:200px;
    display: block;
    margin:5vw auto 0 auto;
}

#start>button{
    margin-top:50px;
    width:300px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size:1.5rem;
}

#start>.shareImage{
    width:300px;
}

#question>#pgrNum{
    text-align: left;
    margin-top: 3vh;
    font-size:2rem;
    font-weight:bold;
}

#question>#title{
    width: 100%;
    height: 20vh;
    margin: 10vh 0 5vh 0;
    font-size: 2rem;
    font-weight:bold;
}

#question>button{
    height: auto;
    min-height:80px;
    width:auto;
    font-size:1.5rem;
}

#result>p{
    font-size: 2.5rem;
    font-weight:bold;
    margin-top: 8vh;
}

#result>.resultImage{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom:10%;
}

#result>.resultImage>#photo{
    width:50%;
}

#result>.resultImage>#photo>img{
    width:100%;
}

#result>.resultImage>#music{
    width:50%;
}

#result>.resultImage>#music>img{
    margin-top:10%;
    width:100%;
}

#result>.result-btn{
    display:flex;
    flex-direction: column;
}

.result-btn button{
    font-size:1.5rem;
    width:300px;
}