/*
https://www.geeksforgeeks.org/how-to-target-desktop-tablet-and-mobile-using-media-query/
 */

@media (max-width: 480px) {
    .device {
        background-color: red;
    }

    .sw-p {
        font-size: 1.5em;
    }

    .nav-logo {
        display: none;
    }
}

/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
    .device {
        background-color: yellow;
    }

    .sw-p {
        font-size: 1.8em;
    }

    .nav-logo {
        display: none;
    }
}

/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px) {
    .device {
        background-color: #0d6efd;
    }

    .sw-p {
        font-size: 1.9em;
    }
}

/* Media Query for Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px) {
    .device {
        background-color: green;
    }

    .sw-p {
        font-size: 1.4em;
    }
}

/* Media Query for Large screens */
@media (min-width: 1281px) {
    .device {
        background-color: orange;
    }

    .sw-p {
        font-size: 1.4em;
    }
}

.sw-badge {
    font-size: 1.5em;
}

.sw-badge-2 {
    font-size: 1.2em;
}

a.sw-link:link { color: #0000EE !important; font-size: 1.3em; margin-bottom: 1.3em; }
a.sw-link:visited { color: #551A8B; font-size: 1.3em; }
a.sw-link:link:active, :visited:active { color: #FF0000; font-size: 1.3em; }

.sw-red {
    color: #ee3d49;
}

.sw {
    font-family: "Arial";
    font-weight: 200;
    font-style: normal;
    font-size: 2.5em;
}

.story-div {
    border: 1px solid #ddd;
    padding: 5px;
    font-size: 2.2em;
    display: inline-block;
    color: #000;
}

.questions div {
    font-size: 2.2em;
    color: #000;
}

.question-1 {
    font-size: 2.2em;
    padding-bottom: 1em;
    color: #000;
}

.story-div-split {
    display: block;
    padding: 20px;
}

.sw-color {
    color: #000;
}

.sw-gray1 {
    color: #999;
    font-size: 1em;
}

.mark-save {
    float: right;
    font-size: 0.8em;
}

.sentence {
    margin-bottom: 10px;
    font-size: 2.2em;
    border: 1px solid #666;
}

.line {
    display: block;
}

a:visited {
    color: blue;
}