@media all and (min-width: 1008px) {
    body{
        grid-template-columns:repeat(30, 1fr);
        grid-template-rows:repeat(56, 1.3vw);
        position:relative;
    }
    #header{
        grid-column: 1 /31;
        grid-row: 1 / 5;
    }
    #header #logo{
        height:4vw;
        float:left;
        margin:0.5vw;
        cursor:pointer;
    }
    .headerbutton{
        float:right;
        margin:1vw;
        font-size:1.2vw;
        color:white;
        font-family:arial;
        border:none;
        border-radius:0vw;
        width:8vw;
        height:3vw;
        transition: transform 0.4s;
        background: #3f3f3f;
        box-shadow: 3px 5px 5px #5a5a5a;
        cursor:pointer;
    }
    .headerbutton:hover{
        transform:scale(1.08);
    }


    #widediv{
        grid-column: 4 /28;
        grid-row: 7 / 12;
    }
    #widediv table{
        width:80%;
        text-align:center;
        margin:auto;
        border-spacing:0px;
    }

    #widediv p{
        font-size:1.5vw;
        margin: 0.5vw auto;
    }
    #widediv table th{
        width: 33.3%;
        font-size:2.25vw;
    }



    #leaderboarddiv{
        grid-column: 11 / 21;
        grid-row: 14 / 40;
    }
    #earndiv{
        grid-column: 22 / 30;
        grid-row: 14 / 40;
    }
    #gamediv{
        grid-column: 2 / 10;
        grid-row: 14 / 40;
    }
    .featuredgames{
        box-shadow:2px 2px 4px black;
    }
    .featuredgames h1{
        font-size:3vw;
        margin:1vw;
    }
    .featuredgames h2{
        font-size:2.7vw;
        margin:1vw;
    }
    .featuredgames p{
        font-size:1.15vw;
        margin:0 1vw;
        margin-bottom:0.2vw;
    }
    .featuredgames h3{
        font-size:2.1vw;
        margin:0.5vw 1vw;
        margin-bottom:0;
    }
    #leaderboardtable th{
        font-size:1.3vw;
    }
    .gamebtn{
        width:10vw;
        height:3vw;
        margin:1.6vw auto;
        font-size:1.3vw;
    }
    .footerdiv{
        /*grid-column: 1 /31;
        grid-row:  50 / 56;*/
        width:100%;
        position:absolute;
        bottom:0px;
    }
}/*-------------------------------------------End of desktop media query-----------------------*/

@media all and (min-width: 320px) and (max-width: 1007px) {
    body{
        grid-template-columns:repeat(2, 1fr);
        grid-template-rows:repeat(100, 3.5vw);
        position:relative;
    }
    #header{
        grid-column: 1 /3;
        grid-row: 1 / 9;
        position:relative;
    }
    #header #logo{
        width:87.5vw;
        margin:1.75vw auto;
        cursor:pointer;
        display:block;
    }
    #header .loginbtns{
        height:11.25vw;
        width:50vw;
        margin:0;
        display:inline-block;
        font-size:4.5vw;
    }
    #header button:nth-child(5){
        position:absolute;
        right:0px;
        bottom:0px;
    }
    #header button:nth-child(4){
        position:absolute;
        left:0px;
        bottom:0px;
    }
    #header .headerbutton{
        color:white;
        font-family:arial;
        border:solid black 1px;
        border-radius:0vw;
        transition: transform 0.4s;
        background: #3f3f3f;
        text-decoration: underline;
        cursor:pointer;
    }
    #header .extrabtns{
        display:none;
    }

    #widediv{
        /*margin:0px 10px;*/

        grid-column: 1 /3;
        grid-row: 10 / 15;
    }
    #widediv table{
        width:80%;
        text-align:center;
        font-size:1.8vw;
        margin:auto;
        border-spacing:0.5vw;
    }

    #widediv p{
        font-size:3.5vw;
        margin: 1.5vw auto;
    }
    #widediv table th{
        width: 33.3%;
        font-size:4.5vw;
    }

    #leaderboarddiv{
        grid-column: 1 / 3;
        grid-row: 16 / 40;
    }
    #earndiv{
        grid-column: 1 / 2;
        grid-row: 41 / 80;
        position:relative;
    }
    #gamediv{
        grid-column: 2 / 3;
        grid-row: 41 / 80;
        position:relative;
    }
    .featuredgames{
        position:relative;
    }
    .featuredgames h1{
        font-size:8vw;
        margin:1.25vw;
    }
    .featuredgames h2{
        font-size:10vw;
        margin:1.25vw;
    }
    .featuredgames h3{
        font-size:6.25vw;
        margin:1.25vw 3.75vw;
        margin-bottom:0;
    }
    .featuredgames p{
        font-size:4.25vw;
        margin:0.5vw 4.5vw;
        margin-bottom:0.5vw;
        display:inline-block;
    }
    .gamebtn{
        /*
        width:20.5vw;
        height:15.5vw;
        */
        margin:7vw auto;
        font-size:6.5vw;
        display:inline-block;
        /*position:absolute;
        bottom:5vw;
        overflow:hidden;
        */
    }
    #earnnow{
        padding: 3vw 2.5vw;
    }
    #playnow{
        padding: 3vw 2.5vw;
        right:3vw;
    }

    #leaderboarddiv table{
        border-spacing: 0.5vw;
    }

    #leaderboarddiv table th{
        font-size:5.5vw;
    }
    #leaderboarddiv table td{
        font-size:5vw;
    }



    .footerdiv{
        /*grid-column: 1 / 3;
        grid-row: 81/101;
        */
        width:100%;
        position:absolute;
        bottom:0px;
    }
}/*------------------------------------------------------------------------------End of mobile friendly media Query----------------------------------------------------------------------------------------------------*/

body{
    display:grid;
    grid-gap:0px;
    margin: 0 auto;
    font-family:arial;
    color:#111;
    background:#333;
    /*position:relative;*/
}
#header{
    background: -moz-linear-gradient(right, rgb(255, 140, 0) 20%, rgb(255, 180, 0) 80%);
    background: -webkit-linear-gradient(right, rgb(255, 140, 0) 20%, rgb(255, 180, 0) 80%);
    background: linear-gradient(right, rgb(255, 140, 0) 20%, rgb(255, 180, 0) 80%);
    /*width:100%;*/

}
#widediv{
    padding:0.5vw;
    background:rgb(0, 120, 255);
    background: -moz-linear-gradient(left, rgb(0, 170, 255) 20%, rgb(0, 190, 255) 100%);
    background: -webkit-linear-gradient(left, rgb(0, 170, 255) 20%, rgb(0, 190, 255) 100%);
    background: linear-gradient(left, rgb(0, 170, 255) 20%, rgb(0, 190, 255) 100%);
    border:none;
    text-align:center;
    box-shadow:4px 4px 6px black;

}


.featuredgames{
    color:white;
    background:#555;

    /*
    width:25vw;
    height:33vw;
    margin:1vw;
    */

    text-align:center;


}






.gamebtn{
    background: rgb(0,160,255);
    background:-moz-linear-gradient(left, rgb(0,190,255) 0%, rgb(0,180,255) 80%);
    background:-webkit-linear-gradient(left, rgb(0,190,255) 0%, rgb(0,180,255) 80%);
    background:linear-gradient(left, rgb(0,190,255) 0%, rgb(0,180,255) 80%);
    border:none;
    color:#111;
    cursor:pointer;
    transition: transform 0.3s;
    padding:0px;
    font-weight:700;
}

.gamebtn:hover{
    transform:scale(1.05);
}

button:focus {
    outline:none;
    box-shadow: none;
}

/*
#aad{
position:absolute;
width:30%;
left:35%;
top:15vw;
text-align:center;
overflow:hidden;
border:solid black 1px;
}


#flexwrapper{
display:flex;
justify-content: space-evenly;
}
*/

#leaderboarddiv{
/*
width:30%;
margin-top:8vw;
*/
color:white;
background:rgb(255,165,50);
background:-moz-linear-gradient(top, rgb(255, 170, 0) 20%, rgb(255, 150, 0) 100%);
background: -webkit-linear-gradient(top, rgb(255, 170, 0) 20%, rgb(255, 150, 0) 100%);
background:#5a5a5a;
box-shadow:2px 2px 4px black;
text-align:center;
}
#leaderboardtable th{
width:33%;
color:rgb(20, 190, 255);
text-decoration:underline;
padding-bottom:0.1vw;
}
#leaderboardtable th:nth-child(2){
color:#00e600;
}


#leaderboardtable{
font-size:1.1vw;
text-align:center;
}


button:focus{
outline:none;
}


h1{
font-size:2.2vw;
}
h2{
margin:1.5vw;
font-size:1.5vw;
}
h3{
font-size:1.4vw;
}
br{
font-size:0vw;
line-height:0vw;
height:0vw;
padding:0vw;
margin:0vw;
}
p{
margin:0.2vw;
margin-right:1.5vw;
margin-left:1.5vw;
font-size:1.3vw;
text-align:center;
}

hr{
border:solid black 0.04vw;
margin-bottom:1vw;
}