@media only screen and (min-width: 1000px) {
    body {
        margin: 0%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .sorrymesg {
        display: none;
    }
    .container {
        z-index: 0;
        margin: 0%;
        position: relative;
        width: 100vw;
        height: 100vh;
        background-image: url(./bg.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
    .left {
        position: relative;
        /* padding: 20px; */
        width: 350px;
        height: auto;
        /* background-color: gainsboro; */
        border: 3px solid gainsboro;
        box-shadow: 2px 2px 4px rgb(105, 103, 103);
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .left::before{
        z-index: -2;
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        background-color: blueviolet;
        opacity: 1;
    }


    .leveltitle {
        margin-top: 20px;
        width: 90%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 35px;
        color: gray;
        font-family: cursive;
        border-radius: 10px;

        /* box-shadow: -1px -1px 4px black, 1px 1px 4px black; */
        /* border: 1px solid black; */
        background-color: white;
    }
    .levels {
        cursor: pointer;
        margin: 10px;
        width: 60%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-weight: bold;
        /* text-shadow: 1px 1px 0px rgb(172, 172, 172); */
        font-size: 27px;
        font-family: cursive;
        border: 3px solid gainsboro;
        background-color: red;
    }
    #easy {
        background-color: rgb(0, 255, 0);
    }
    #intermediate {
        background-color: rgb(255, 251, 0);
    }
    #hard {
        background-color: orangered;
    }
    .restart {
        margin-bottom: 20px;
        color: white;
        cursor: pointer;
        margin-top: 100px;
        /* margin: 10px; */
        width: 60%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        font-family: cursive;
        border: 2px solid gainsboro;
        background-color: red;
    }
    .right {
        width: 60%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        /* background-color: lime; */
    }
    .logo {
        /* background-color: red; */
        width: 600px;
        height: 150px;
        background-image: url(./logo.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .grid {
        width: 300px;
        height: 300px;
        /* border: 2px solid black; */
        background-color: white;
        box-shadow: 2px 2px 3px rgb(122, 122, 122);
        display: flex;
        flex-wrap: wrap;
    }
    .grid div {
        width: 20px;
        height: 20px;
    }
    .results {
        width: 350px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: blueviolet;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 45px;
        color: white;
        border: 3px solid white;
    }
    .scoreblock {
        position: relative;
        width: 200px;
        height: 70px;
        background-color: blueviolet;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 50px;
        color: white;
        border: 3px solid white;
    }
    .invader {
        /* background-color: purple; */
        border-radius: 50%;
        background-image: url(./evil.png);
        background-position: center;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .shooter {
        /* background-color: red; */
        background-image: url(./hero.png);
        background-position: center;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .laser {
        /* background-color: lime; */
        background-image: url(./fire.png);
        background-position: center;
        background-size: 70%;
        background-repeat: no-repeat;
    }
    .boom {
        background-image: url(./blast.gif);
        background-position: center;
        background-size: 100%;
        background-repeat: no-repeat;
    }
}

@media only screen and (max-width: 1000px) {
    .container {
        display: none;
    }
    .sorrymesg {
        box-sizing: border-box;
        padding: 100px;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .sorrylogo {
        width: 350px;
        height: 70px ;
        background-image: url(./logo.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .sorry {
        margin-top: 100px;
        width: 70vw;
        height: auto;
        color: red;
        text-align: center;
        font-size: 25px;
    }
}