body {
    background-color: #0e181a;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    user-select: none;
}

.container {
    padding: .5vmax;
    width: 36vmax;
    height: 36vmax;
    border-radius: .5vmax;
    background-color: #162527;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -18vmax 0 0 -18vmax;
}

.col {
    height: 8vmax;
    width: 8vmax;
    margin: .5vmax;
    line-height: 8vmax;
    text-align: center;
    vertical-align: middle;
    background-color: #1d3134;
    border-radius: .5vmax;
    float: left;
    color: white;
    font-size: 3vmax;
    transition: all .2s cubic-bezier(.01,.95,.58,.93);
    user-select: none;
}


#credits {
    color: #0ad1c0;
    position: absolute;
    bottom:0;
    right:0;
    margin-right: 1vmax;
    font-size: .8vmax;
    font-family: 'Courier New', Courier, monospace;
    user-select: none;
}

#gameOver {
    display: none;
    color: red;
    font-size: 2vmax;
    font-family: 'Courier New', Courier, monospace;
    transition: all .2s cubic-bezier(.01,.95,.58,.93);
    user-select: none;
}

#credits p{
    text-align: right;
    user-select: none;
}

.arrows, #reset {
    transition: color .2s ease;
    user-select: none;
}

.arrows:hover, #reset:hover { 
    color: red !important;
    cursor: pointer;
    user-select: none;
}

a {
    color: #0ad1c0;
    text-decoration: none;
  }

a:hover{
    color: red;
}

@media only screen and (max-width: 1080px) {
    #hideOnMobile {
        display: none;
    }

    #credits {
        font-size: 1.2vmax;
    }

    #reset {
        font-size: 3vmax;
    }

    #gameOver {
        font-size: 4vmax;
    }

    .container {
        width: 40vmax;
        height: 40vmax;
        margin: -20vmax 0 0 -20vmax;
    }
    
    .col {
        height: 9vmax;
        width: 9vmax;
        line-height: 9vmax;
    }
}