html {
    background-color: #778899;
    /* background-color: #aa8484; */
    text-align: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.gh {
    position: absolute;
    top: 0;
    left: 0;
}

.heading {
    font-size: 52pt;
}

#turn {
    font-size: 32pt;
}

#start-buttons {
    margin-bottom: 30px;
}

button, #score {
    font-size: 24pt;
    margin: 0 5px;
}

#score {
    margin-top: 10px;
}

.grid-container {
    margin: auto;
    display: inline-grid;
    grid-template-columns: auto auto auto;
    background-color: #2196F3;
    /* background-color: #f32121; */
    padding: 10px;
}

.grid-item {
    background-color: #d4d4d4;
    border: 1px solid #000000;
    padding: 20px;
    font-size: 128pt;
    height: 150px;
    width: 150px;
    line-height: 150px;
}

.hover {
    background-color: #f2f2f2;
}

.x {
    background-color: #778899;
}

.xWin {
    background-color: #75a6d6;
}

.o {
    background-color: #aa8484;
}

.oWin {
    background-color: #e07676;
}

.hidden {
    display: none;
}

@media only screen and (max-width: 979px) {
    .grid-item {
        font-size: 200pt;
        height: 225px;
        width: 225px;
        line-height: 225px;
    }
}

@media only screen and (max-width: 830px) {
    .grid-item {
        font-size: 175pt;
        height: 200px;
        width: 200px;
        line-height: 200px;
    }
}

@media only screen and (max-width: 768px) {
    .grid-item {
        font-size: 150pt;
        height: 175px;
        width: 175px;
        line-height: 175px;
    }
}

@media only screen and (max-width: 678px) {
    .grid-item {
        font-size: 125pt;
        height: 150px;
        width: 150px;
        line-height: 150px;
    }
}

@media only screen and (max-width: 608px) {
    .grid-item {
        font-size: 100pt;
        height: 125px;
        width: 125px;
        line-height: 125px;
    }

    #score {
        font-size: 18pt;
    }
}

@media only screen and (max-width: 530px) {
    .heading {
        font-size: 40pt;
    }

    #turn {
        font-size: 20pt;
    }

    button {
        margin-bottom: 10px;
    }

    .grid-item {
        font-size: 80pt;
        height: 100px;
        width: 100px;
        line-height: 100px;
    }

    #start-buttons {
        margin-bottom: 3px;
        margin-top: 3px;
    }
}

@media only screen and (max-width: 450px) {
    .grid-item {
        font-size: 60pt;
        height: 80px;
        width: 80px;
        line-height: 80px;
    }
}