@charset "UTF-8";

body {
    font-family: Inter, "Roboto Condensed", sans-serif;
}

a {
    color: #0088cc;
    text-decoration: none;
}

.menu-form {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 30px 0;
}

.menu-form span {
    font-weight: bold;
}

.menu-form option {
    white-space-collapse: collapse;
    text-wrap: nowrap;
}

.menu-form select,
.results-menu select {
    border-radius: 8px;
    width: 100%!important;
}

.records-menu select {
    padding: 10px
}

.results-menu select {
    background: white;
}

.results-menu {
    display: flex;
    gap: 10px;
    background: rgba(54, 56, 61, 0.05);
    padding: 20px;
    border-radius: 8px;
    justify-content: space-between;
    border: 1px solid rgba(54, 56, 61, 0.15);
}

.records-menu {
    align-items: center;
}

.records-menu .category-label {
    flex-shrink: 0;
    font-weight: bold;
}

.overall-category {
    display: flex;
    gap: 10px;
    align-items: center;
}

.overall-category span {
    padding: 10px;
    background: rgba(54, 56, 61, 0.05);
    border: 1px solid rgba(54, 56, 61, 0.15);
    cursor: pointer;
    flex-grow: 1;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    transition: 0.3s;
}

.overall-category span:hover{
    background: #003f5c;
    color: white;
}

.overall-category span.active {
    background: #1b7ea6;
    color: white;
}

.menu-option {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .menu-option label {
        font-weight: bold;
        word-break: normal;
    }

.result-header {
    text-align: center;
}

tr.Advance td:nth-child(2)::after {
    content: '•';
    margin-left: 5px;
    color: rgba(27 126 166 / 50%)
}

tr.Champ td:nth-child(2)::after {
    content: '•';
    margin-left: 5px;
    color: rgba(255, 215, 0,1)
}

tr.Runnerup td:nth-child(2)::after {
    content: '•';
    margin-left: 5px;
    color: rgba(192, 192, 192, 1);
}

span.Advance {
    color: rgba(27 126 166 / 50%)
}

span.Champ {
    color: rgba(255, 215, 0, 1)
}

span.Runnerup {
    color: rgba(192, 192, 192, 1);
}

.more-info {
    font-size: 0.8em;
    text-align: center;
    display: flex;
    gap: 5px;
    justify-content: center;
    font-style: italic;
}

.category-label::after {
    content: 'Select a category'
}

.record-type {
    font-weight: bold;
}

.record-type::after {
    content: 'Record type'
}

@media screen and (max-width: 800px) {
    .results-menu,
    .menu-option {
        flex-direction: column;
    }

    .menu-option select {
        flex-grow: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100%;
    }

    .more-info {
        flex-direction: column;
    }

    .category-label::after {
        content: 'Category'
    }

    .record-type::after {
        content: ''
    }

    .record-type {
        display: none;
    }

}

@media screen and (max-width: 360px) {

    .overall-category {
        flex-direction: column;
        align-items: unset;
    }

}