/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */

@media (min-width: 300px) {
    #logo {
        width: 50%;
    }
    #scroll-card {
        overflow: scroll;
        height: 80vh;
    }

    #inner-scroll {
        position: relative;
        top: 0rem;
    }

    #modalContent {
        overflow: auto;
        height: 50vh;
    }
    .question-img, .answer-img {
        max-width: 100%;
        height: auto;
    }

}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    #logo {
        width: 30%;
    }

    .modal-dialog {
        max-width: 610px !important;
        margin: 1.75rem auto;
    }

    #scroll-card {
        overflow: scroll;
        height: 80vh;
    }

    #inner-scroll {
        position: relative;
        top: 0rem;
    }
    #modalContent {
        overflow: auto;
        height: 50vh;
    }
    .question-img, .answer-img {
        max-width: 100%;
        height: auto;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    #logo {
        width: 30%;
    }
    #scroll-card {
        overflow: scroll;
        height: 80vh;
    }
    #inner-scroll {
        position: relative;
        top: 0rem;
    }
    #modalContent {
        overflow: auto;
        height: 50vh;
    }
    .question-img, .answer-img {
        max-width: 100%;
        height: auto;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    #logo {
        width: 30%;
    }

    #scroll-card {
        overflow: visible;
        height: auto;
    }

    #inner-scroll {
        position: relative;
        top: 6rem;
    }

    #modalContent {
        text-align: justify;
        overflow: auto;
        height: 100%;
    }
    .question-img, .answer-img {
        max-width: 50%;
        height: auto;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    #logo {
        width: 80%;
    }
    #inner-scroll {
        position: relative;
        top: 7rem;
    }
    #qrScan {
        height: 80vh;
    }

    #modalContent {
        text-align: justify;
        height: 100%;
    }
    .question-img, .answer-img {
        max-width: 50%;
        height: auto;
    }
}