@media only screen and (min-width: 100px) and (max-width: 768px) {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .hidden {
        display: none;
    }

    body {
        font-family: "Orbitron", sans-serif;
    }

    .main {
        display: flex;
        flex-direction: column;
        /* align-items: center; */
        justify-content: start;
        /* width: 100vw; */
        height: 95vh;
        background: wheat;
        /* border-radius: .5rem; */
    }

    .title {
        text-align: center;
        margin: 5px 0px 10px 0px;
    }

    /* HIDDEN IN XSMALL */
    .intro.description {
        display: none;
    }

    /* HIDDEN IN XSMALL */
    .title-span {
        display: none;
    }

    .red {
        /* color: #dd1534; */
        color: #c93d1b;
    }

    .green {
        color: #0e7c4a;
    }

    /* HIDDEN IN XSMALL */
    .fractions-container {
        width: 100vw;
        display: flex;
        justify-content: space-around;
        margin-bottom: 5%;
        display: none;
    }

    /* !!! THIS IS AFFECTED BY FAKE DIV !!! */
    /* ADD BORDER TO SEE !!! */
    .sq-table-img-container {
        width: fit-content;
        /* height: 250px; */
        height: fit-content;
        margin: 20px 0px 0px 0px;
        /* border: 3px solid green; */
    }

    .sq-table-img {
        /* z-index: -1; */
        width: 100%;
        margin-bottom: 0px;
        position: relative;
        top: -30px;
        /* border: 3px solid black; */
    }

    /* THIS IS A FAKE DIV TO MASK DIFFERENT FONTS IN PICTURE TEMPORARILY !!! */
    .table-img-header {
        z-index: 1;
        position: relative;
        width: 100%;
        height: 35px;
        background: #ffa600;
        /* border: 5px solid black; */

        /* display: none; */
    }

    .table-img-header h2 {
        font-size: 12px;
        font-weight: 400;
        padding-top: 8px;
        /* display: none; */
    }

    /* FONT SIZES */

    h1 {
        font-size: 22px;
        font-weight: 800;
    }

    h2 {
        font-size: 18px;
        text-align: center;
        letter-spacing: 0.05rem;
    }

    /* CHOOSE YOUR LEVEL-CLICK PLAY-GUESS SQUARE */
    /* .description {
        font-size: 14px;
    } */

    /* SQ TABLE/STATISTICS - PLAY BUTTON*/
    .player__toggle,
    .table__toggle {
        font-family: "Orbitron", sans-serif;
        font-size: 16px;
        /* background: grey; */
        background: #ffa600;
        border: 3px solid #ffa600;
        /* border-top: 2px solid #ffa600;
        border-bottom: 1px solid #ffa600; */
        height: 35px;
        width: 100%;
        /* font-weight: 500;   */
        /* outline: none; */
    }

    /* HIDDEN IN XSMALL */
    /* YOU ARE ON LEVEL ...  */
    h2.level-message.player-row {
        display: none;
    }

    /* WHAT IS ... SQUARED? */
    .question.player-row {
        margin: 0px 0px 10px 0px;
    }

    .player-container {
        margin: 5px auto;
        margin: 5% auto;
        width: 100%;
        background: #ffa600;
        text-transform: capitalize;
    }

    .level-buttons {
        font-family: "Orbitron", sans-serif;
        outline: none;
        background: grey;
        /* border: none; */
        margin: 0px 0px 4px 0px;
        height: 48%;
        width: 18.9%;
        /* width: 18%; */
        font-size: 22px;
        /* font-weight: 600; */
    }

    .level-buttons:nth-of-type(1),
    .level-buttons:nth-of-type(6) {
        margin-left: 1.5%;
        /* border: 1px solid rebeccapurple; */
    }

    .level-buttons:nth-of-type(5),
    .level-buttons:nth-of-type(10) {
        margin-right: 1.5%;
        /* border: 1px solid rebeccapurple; */
    }

    .level-buttons:hover {
        color: darkslategrey;
        /* #1897b4 */
        background: orange;
    }

    .selected {
        background: darkcyan;
    }

    .buttons-row {
        width: 100%;
        height: 140px;
        background: #676668;
        /* background: orange; */
        padding: 1% 0% 1% 0%;
        margin-bottom: 10px;
        /* FLEX WILL MESS UP BUTTON ANIMATION  */
        /* display: flex;
        justify-content: space-around; */
    }

    h2.question {
        color: darkcyan;
    }

    .question-span {
        font-size: 22px;
        color: darkcyan;
    }

    input {
        font-family: "Orbitron", sans-serif;
        margin: 0px 0px 10px 26%;
        width: 50%;
        height: 35px;
        /* border: 3px solid #676668; */
        background: beige;
        background: wheat;
        font-size: 18px;
        padding: 13px 13px 13px 13px;
        /* outline: none; */
    }

    .startPlay {
        font-family: "Orbitron", sans-serif;
        background: grey;
        height: 45px;
        width: 70px;
        font-size: 16px;
        /* text-align: center; */

        /* font-weight: 700;   */
        margin: 10px 0px 8px 8%;
        /* outline: none; */
    }

    /* =================================================== */

    .start-play-reset {
        /* font-family: 'Bungee Inline', cursive; */
        font-family: "Orbitron", sans-serif;
        text-transform: uppercase;
        font-weight: 400;
        background: grey;
        border: 4px solid #000000;
        /* padding-right: 5px;
        padding-left: 5px; */
        /* height: 65px; */
        height: 50px;
        /* width: 100px; */
        width: 70px;
        text-align: center;
        font-size: 15px;
        /* font-weight: 700;   */
        margin: 0px 0px 0px 0%;
        outline: none;
    }

    .start-play-reset:hover {
        background: orange;
        cursor: pointer;
        font-weight: 600;
        border: 3px solid black;
    }

    .start-play-reset.disabled {
        background: orange;
    }

    .start-play-reset.disabled:hover {
        font-weight: 400;
        cursor: not-allowed;
        border: 4px solid #000000;
    }

    /* =================================================== */

    /* FIX THIS USE SPAN FOR LEVEL AND RANGE TOO !!! */
    .startPlay.play-button {
        /* display: flex; */
        /* flex-direction: column; */
        width: 86px;
    }

    .display-level-play-button {
        display: block;
        margin-left: 0px;
        font-size: 12px;
        font-weight: 400;
        color: darkslategrey;
    }
    /* =================================================== */

    .logo {
        margin: 0px 5% 0px 0px;
        padding-right: 10px;
        font-size: 22px;
        font-weight: 600;
    }

    /* CSS BLINKER */
    .blink {
        /* animation: blinker 1.1s linear infinite; */
        animation: blinker 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    @keyframes blinker {
        50% {
            opacity: 0;
        }
    }

    .prog-bar-text {
        text-align: right;
        /* font-weight: 100; */
        margin-top: 6px;
        margin-right: 4px;
        font-size: 16px;
        /* color: black; */
    }

    .prog-bar-container {
        width: 100%;
        /* height: 25px; */
        margin: 15px auto 10px auto;
        /* ??? border not hidden??? */
        /* border: 3px solid #676668; */
        /* border-radius: 10px; */
        background-color: #c93d1b;
    }

    /* NOT WORKING COS ITS NOT EMPTY */
    /* HAVE TO REMOVE BORDER  ???*/
    /* MAYBE ADD BORDER ONLY WHEN ITS DISPLAYED??? */
    .prog-bar-container:empty {
        /* display:none; */
        /* OR */
        border: none;
        /* margin: 20px 0px 0px 0px; */
    }

    .prog-bar {
        width: 0%;
        height: 35px;
        padding-top: 1px;
        padding-bottom: 16px;
        text-align: center;
        background-color: #0e7c4a;
        -webkit-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
    }

    .button-logo-container {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 10px;
    }
    /* ALTERNATING COLOR LIST ITEMSS */
    /* span:nth-child(even){
      color:green;
    }
    span:nth-child(odd){
      color:red;
    } */

    .ordered-stat {
        display: flex;
        /* flex-direction: column; */
        background: #ffa600;
        width: 100%;
        min-height: 35px;
        height: fit-content;
        text-align: center;
        font-size: 12px;
    }

    .ordered-stat:empty {
        display: none;
    }

    .ordered-stat.first-ordered-stat-container {
        /* align-items: center; */
        justify-content: center;
        /* margin-top: 5%; */
        margin-bottom: 20px;
    }

    /* SECOND STAT DIV */
    .ordered-stat.second-ordered-stat-container {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        height: 35px;
    }

    /* DIV SPANS */
    .ordered-stat.first-ordered-stat-container span {
        display: inline-block;
        height: fit-content;
        padding: 2px;
        margin: 7px 2px 0px 2px;
        border: 1px solid black;
    }

    /* .ordered-stat.first-ordered-stat-container {
        padding-top: 9px;
    } */

    .ordered-stat.second-ordered-stat-container {
        /* color: yellow; */
        /* margin-top: 5%; */
        padding-top: 9px;
    }

    .ordered-stat.second-ordered-stat-container span {
        margin: 0px 0px 0px 0px;
    }
}

@media only screen and (max-width: 700px) {
    .level-buttons:nth-of-type(1),
    .level-buttons:nth-of-type(6) {
        margin-left: 1%;
        /* border: 1px solid rebeccapurple; */
    }

    .level-buttons:nth-of-type(5),
    .level-buttons:nth-of-type(10) {
        margin-right: 1%;
        /* border: 1px solid rebeccapurple; */
    }
}

@media only screen and (max-width: 500px) {
    .level-buttons:nth-of-type(1),
    .level-buttons:nth-of-type(6) {
        margin-left: 0.5%;
        /* border: 1px solid rgb(153, 51, 51); */
    }

    .level-buttons:nth-of-type(5),
    .level-buttons:nth-of-type(10) {
        margin-right: 0.5%;
        /* border: 1px solid rebeccapurple; */
    }

    @media only screen and (max-width: 400px) {
        .level-buttons:nth-of-type(1),
        .level-buttons:nth-of-type(6) {
            margin-left: 0%;
            /* border: 1px solid rgb(153, 51, 51); */
        }

        .level-buttons:nth-of-type(5),
        .level-buttons:nth-of-type(10) {
            margin-right: 0%;
            /* border: 1px solid rebeccapurple; */
        }
    }
}