body {
    font-family: Arial, sans-serif;
    position: relative;
    min-height: 100vh;
    margin: 0;
}
body::after {
    content: '';
    display: block;
    height: 50px;
}

/*Main Nav*/
nav {
    background-color: grey;
    padding: 0 1rem;
    position: sticky;
    top: 0;
    display: grid;
    place-items: center;

    > ul {
        grid-auto-flow: column;

        > li {
            margin: 0 0.5rem;

            a,
            .navbarDropdownTitle {
                text-decoration: none;
                text-align: center;
                display: inline-block;
                color: #fff;
                font-size: 1.125rem;

                &:focus {
                    outline: none;
                }
            }

            > a,
            .navbarDropdownTitle {
                padding: 1rem 0.5rem;
                border-top: 3px solid transparent;

                &:hover,
                &:focus {
                    border-top-color: black;
                    color: black;
                }
            }
        }
    }

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;

        li {
            padding: 0;
        }
    }
}
.navbarDropdown {
    position: relative;

    .navbarDropdownTitle {
        display: inline-flex;
        align-items: center;

        &:after {
            content: "";
            border: 0.35rem solid transparent;
            border-top-color: rgba(255, 255, 255, 0.45);
            margin-left: 0.25em;
            transform: translateY(0.15em);
        }
    }

    .navbarDropdownMenu {
        position: absolute;
        min-width: 15ch;
        left: 50%;
        top: calc(100% - 0.25rem);
        transform: rotateX(-90deg) translateX(-50%);
        transform-origin: top center;
        visibility: hidden;
        opacity: 0.3;
        padding: 0.5em 0;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 0.15em 0.25em rgba(0, 0, 0, 0.25);

        a {
            color: darkgray;
            display: block;
            padding: 0.5em;
            opacity: 0;

            &:hover {
                background-color: rgba(128, 128, 128, 0.15);
            }

            &:focus {
                outline: none;
                background-color: rgba(128, 128, 128, 0.25);
            }
        }
    }

    &:after {
        content: "";
        border: 0.5rem solid transparent;
        border-bottom-color: #fff;
        position: absolute;
        top: calc(100% - 1.25rem);
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        will-change: opacity;
    }

    &:hover,
    &:focus-within {
        .navbarDropdownTitle {
            border-top-color: black;
        }

        .navbarDropdownMenu {
            opacity: 1;
            transform: rotateX(0) translateX(-50%);
            visibility: visible;

            a {
                opacity: 1;
            }
        }

        &:after {
            opacity: 1;
        }
    }
}
.navbarDropdownTitle {
    background-color: transparent;
    border: none;
    font-family: inherit;
}

/*Main Footer*/
footer {
    background-color: grey;
    width: 100%;
    display: grid;
    text-align: center;
    place-items: center;
    position: absolute;
    bottom: 0;
    height: 50px;

    ul {
        list-style: none;
        grid-auto-flow: column;
        display: grid;
    }
    li {
        display: inline-block;
        margin: 0 0.5rem;
        a {
            color: white;
            text-decoration: none;
        }
    }
}

/*UnusualHatsInCases.php*/
#unusualHatsInCasesTable {
    table-layout: fixed;
    width: 100%;
    border-spacing: 0;
}
.topCell {
    border-top: 2px solid black;
}
.bottomCell {
    border-bottom: 2px solid black;
}
.leftCell {
    border-left: 4px solid black;
}
.rightCell {
    border-right: 4px solid black;
}
.topCell.wholeHead {
    border: 4px solid gold;
}
.bottomCell.wholeHead {
    border: 4px solid gold;
}
.leftCell.wholeHead {
    border: 4px solid gold;
}
.rightCell.wholeHead {
    border: 4px solid gold;
}
.emptyCell1 {
    background-color: #D3D3D3;
}
.emptyCell2 {
    background-color: #808080;
}
td.Mercenary {
    background-color: #4B69FF;
}
td.Commando {
    background-color: #8847FF;
}
td.Assassin {
    background-color: #D32CE6;
}
td.Elite {
    background-color: #EB4B4B;
}
tr {
    height: auto;
}
td img {
    max-width: 100%;
}
th img {
    max-width: 100%;
}
th {
    position: sticky;
    top: 0;
    border-top: 4px solid black;
    border-bottom: 2px solid black;
    padding: 0;
}
#classIconRow th{
    width: 4%;
    text-align: center;
}