* {
    font-family: 'Source Sans Pro', sans-serif;
}

#settings {
    position: absolute;
}

#player_name_text,
#opponent_name_text {
    font-family: "Permanent Marker", cursive;
    opacity: 0.7;
    font-size: calc(2vw + 2vh + 1vmin);
    position: absolute;
    top: 50%;
}

#player_name_text {
    left: 25%;
    margin-right: -25%;
    transform: translateX(-50%) rotate(-25deg);
}

.winner_name {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 15%;
    width: 100%;
    color: white;
    font-weight: bold;
    font-size: 2em;
    transform: rotate(5deg);
    font-family: 'Permanent Marker';
    -webkit-text-stroke: 0.1px black;
}

#opponent_name_text {
    left: 75%;
    margin-right: -25%;
    transform: translateX(-50%) rotate(25deg);
}

input {
    margin: 0.1% 0%;
}

.race_selector {
    margin-top: 10px;
}

.hidden {
    visibility: hidden;
}

.no_display {
    display: none;
}

.cookies {
    color: white;
    text-align: center;
    background-color: #2a323d;
}

footer {
    display: block;
    /* z-index: 5; */
    /* min-height: 50px; */
    margin: 0% 3%;
}

html,
body {
    min-height: 100vh;
    background-image: url("../../asfalt-texture.png");
    background-color: #222831;
    color: #EEEEEE;
    padding: 0;
    margin: 0;
    /* width: 100%;
    height: 100%; */
    display: grid;
    grid-template-rows: auto 1fr auto;
}


/* .picked {
    border-left: 6px solid #B0DB9C;
    border-right: 6px solid #B0DB9C;
}

.opponent_picked {
    border-left: 6px solid #386424;
    border-right: 6px solid #386424;
}

.banned {
    border-left: 6px solid #A62C2C;
    border-right: 6px solid #A62C2C;
}

.opponent_banned {
    border-left: 6px solid #4c0303;
    border-right: 6px solid #4c0303;
} */

.veto_contents {
    position: relative;
    z-index: 1;
    margin: 20px 20px;
}

.opponent_tag {
    /* Abs positioning makes it not take up vert space */
    position: relative;
    top: 0;
    left: 0;
    /* Border is the new background */
    background: none;
    width: 0%;
    /* Rotate from top left corner (not default) */
    transform-origin: 0 0;
    transform: rotate(90deg);
}

.map-image {
    position: relative;
    top: 1%;
    left: 50%;
    width: 250px;
    height: 250px;
    margin-left: -125px;
    margin-bottom: 10px;
}

#player-race-image {
    opacity: 0.3;
    z-index: 0;
    pointer-events: none;
    position: absolute;
    width: 50%;
    height: 100%;
}

#opponent-race-image {
    z-index: 0;
    opacity: 0.3;
    pointer-events: none;
    position: absolute;
    width: 50%;
    height: 100%;
    left: 50%;
}

.tiny-text {
    font-size: 10px;
}

footer,
.footer-link {
    color: gray;
}

.right {
    float: right;
}

.nav-link:hover,
.fa-solid:hover {
    color: #76ABAE;
}

.fa-solid.fa-thumbs-up,
.fa-solid.fa-thumbs-down,
.fa-solid.fa-square-xmark {
    padding: 10px;
}

#clear_all_button_container {
    width: 100%;
    display: flex;
}

#clear_all_button {
    margin: auto;
    /* width: 50px; */
}

table {
    width: 20%;
    position: relative;
    border-collapse: collapse;
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10+ and Edge */
    user-select: none;
    /* Standard syntax */
    margin: 0 auto;
}

td {
    position: relative;
}

tr {
    cursor: grabbing;
}

th {
    background-color: #2a323d;
}

tr:nth-child(odd) {
    background-color: #222831;
}

tr:nth-child(even) {
    background-color: #2a323d;
}

#updated_date {
    padding-right: 1%;
}

@media (max-width: 1200px) {
    #settings {
        padding-bottom: 10px;
        position: relative;
    }
    table {
        width: 100%;
    }
    .fa-up-long,
    .fa-down-long {
        padding: 0px 5px;
        display: inline;
    }
    #player-race-image,
    #opponent-race-image,
    #player_name_text,
    #opponent_name_text {
        display: none;
    }
}