@font-face {
    font-family: 'Goyang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Goyang.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@media(min-width: 375px) {
    .text-xl {
        font-size: 26px;
    }
    .text-md {
        font-size: 21px;
    }
    .text-sm {
        font-size: 14px;
    }
}

.bg {
    background: linear-gradient(to bottom left, #dee6c3, #fff1ea);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}  

.text-title {
    font-size: calc(100% + 2vw + 2vh);
}

#title {
    font-family: "Goyang";
    color: #3797a4;
    word-break: keep-all;
}

.btn-start {
    transition: 0.25s;
    font-family: "Goyang";
    color: #3797a4;
    background-color:  #d8e9f4; 
    border-color: #3797a4;
    border-radius: 10px;
    border-width: 0.13rem;
}

.btn-answer {
    transition: 0.25s;
    font-family: "Goyang";
    color: #3797a4;
    background-color:  #d8e9f4; 
    border-color: #3797a4;
    border-width: 0.1rem;
}

.btn-answer:hover {
    color: #d8e9f4;
    background-color: #3797a4;
}


.btn-action {
    transition: 0.25s;
    font-family: "Goyang";
    color: white;
    background-color: #bf4141; 
    border-color: #2e1010;
    border-width: 0.1rem;
    border-radius: 10px;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.btn-action:focus {
    transition: 0.25s;
    font-family: "Goyang";
    color: white;
    background-color: #bf4141; 
    border-color: #2e1010;
    border-width: 0.1rem;
    border-radius: 10px;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.btn-action:hover {
    color: #bf4141;
    background-color:  white; 
}

/* 질문지 */

.anne {
    color: #bf4141;
}

.ht {
    color: black;
}

.card {
    background-color: #dfebdb51;
    border-color: #d0bb8c;
    border-width: 0.7vw;
    outline: 0.2vw solid black;
}

.card-text {
    font-family: "Goyang";
    word-break: keep-all;
    font-size: calc(100% + 0.5vw + 0.5vh);
}

.card-from {
    font-family: "Goyang";
    word-break: keep-all;
    font-size: calc(100%);
}

#icon-q {
    height:19%;
    position:absolute;
    top:-50px;
    margin-left:auto;
    margin-right:auto;
    left:0;
    right:0
}

.mt {
    margin-top: 15vw;
}

#que-1 {
    display: none;
}

#que-2 {
    display: none;
}

#que-3 {
    display: none;
}

#que-4 {
    display: none;
}

/* loading */

.cup {
    height: 70px;
    width: 90px;
    border: 3px solid white;
    position: absolute;
    margin-left:auto;
    margin-right:auto;
    top:65%;
    left:-10px;
    right:0;
    border-radius: 0px 0px 40px 40px;
    background: url(img/coffee.png);
    background-size: 50px;
    box-shadow: 0px 0px 0px 3px #3797a4;
    background-repeat: repeat-x;
    background-position: 0px 70px;
    animation: fill 2.5s infinite;
}

@keyframes fill{
    0%{
        background-position: 0px 70px;
    }
    20%{
        background-position: -50px 55px;
    }
    40%{
        background-position: -100px 40px;
    }
    60%{
        background-position: -150px 25px;
    }
    80%{
        background-position: -200px 10px;
    }
    100%{
        background-position: -250px 0px;
    }
    
}

.handle{
    height:30px;
    width:25px;
    background-color: transparent;
    border: 4px solid #3797a4;
    position:relative;
    left:89px;
    top:3px;
    border-radius: 0px 25px 80px 0px;
    box-shadow: 0px 0px 0px 1px #2794a2;
}

/* result */
#foo, #hed {
    display:block;
    width:100%;
    height:auto;
}