@font-face {
    font-family: 'Lazy Dog';
    src: url('lazy_dog.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.quiz-content.result h3,
.quiz-content.result h5,
.btn-ld,
.btn-start {
    font-family: 'Lazy Dog';
}

/* xs: phone - portrait */
/* default. no media */

img {
    max-width: 100%;
}
img#image-question {
    max-width: 80%;
    border-radius: 10px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

.btn-ld,
.btn-start {
    font-size: 1.4rem;
    padding-top: 0px;
    padding-bottom: 0px;
}

.quiz-content {
    margin: auto;
    height: 94vh;
    margin-top: 3vh;
    position: relative;
    z-index: 5;
}
.section {
    position: relative;
    height: 100vh;
}
.section::before {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;
    width: 20%;
    height: 20%;
    background-image: url('ptest-assets/assets/ptest-top-left.webp');
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
}
.section::after {
    content: '';
    position: absolute;
    z-index: 1;
    right: 0px;
    bottom: 0px;
    width: 50%;
    height: 50%;
    background-image: url('ptest-assets/assets/ptest-bottom-right.webp');
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
}

#button-answers {
    width: 80%;
    margin: auto;
}

.quiz-content.result h3,
.quiz-content.result h5 {
    text-align: center;
}
.quiz-content.result {
    padding: 10px;
}
.quiz-content.result .footer-fish p,
.quiz-content.result .desc-fish p {
    font-size: 0.8rem;
    margin-bottom: 5px;
}
.quiz-content.result img {
    max-height: 150px;
}

/* sm: phone - landscape */
@media (min-width: 576px) {
}
/* md: tablet */
@media (min-width: 768px) {
}
/* lg: desktop */
@media (min-width: 992px) {
    
    .quiz-content {
        border: solid 1px #1151AB;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    }

    .btn-ld,
    .btn-start {
        font-size: 2rem;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    img.what-kind-fish {
        max-width: 400px;
    }
    img#image-question {
        max-width: 300px;
    }

    .quiz-content.result .footer-fish p,
    .quiz-content.result .desc-fish p {
        font-size: 0.9rem;
    }
}
/* xl: wide */
@media (min-width: 1200px) {
}
/* super wide */
@media (min-width: 1440px) {
}