body {
	background-color: #c4c4c4;
}

#arena {
    border-collapse:collapse;
    border:1px solid #FF0000;
    margin: 0 auto;
    width: 60%;
    background-color: #efefef;
}

h1 {
    text-align: center;
    font-family: sans-serif;
}

button {
    position: relative;
    height: 100%;
    width: 100%;
    opacity: 0;
}

img {
    position: relative;
    height: 100%;
    width: 100%;
}

#arena td {
    height: 20vw;
    width: 20vw;
    border: 5px solid #000000;
    text-align: center;
}
footer {
    text-align: center;
    width: 60%;
    margin: 1em auto 0;
    /*position: absolute;*/
    /*bottom: 0;*/
    padding: 1px;
    background-color: #efefef;
    border-radius: 50px;
    float: bottom;
}

@media (max-width: 800px) {
    #arena {
        margin-top: 2em;
        width: 80%;
    }
    #arena td {
        height: 30vw;
        width: 30vw;
    }
    footer {
        width: 80%;
    }
}

/* Darkmode stuff */

@media (prefers-color-scheme: dark) {
    body {
        background-color: #515151;
    }
    
    #arena, nav, footer {
    	background-color: #d3d3d3 !important;
    }
    
    h1, label {
    	color: #efefef
    }
}

nav {
    padding: 1em;
    background: #efefef;
    border-radius: 50px;
    width: 60%;
    margin: 0 auto 2em;
    text-align: center;
}

nav ol {
    list-style-type: none;
    padding-left: 0;
    margin: auto;
}

nav li {
    display: inline-block;
}

nav a::after {
    display: inline-block;
    color: #000;
    content: '>';
    font-size: 80%;
    font-weight: bold;
    padding: 0 3px;
}