:root {
    --category1: #008fde;
    --category2: #a78358;
    --category3: #068b71;
    --category4: #00a5de;
    --category5: #f5ac0f;
    --bookmark-color: #ff4166;
    --unvisited-color: #1841c7;
    --visited-color: #7b8dbf;
    --black: #333333;
    --white: #ffffff;
    --border-color: gray;
    --border-width: 2px;
    --boarder-radius: 8px;
}

*,
*:before,
*:after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    color: var(--black);
    font-size: 1rem;
}

main {
    flex: 1;
    min-height: 0;

    border: var(--border-width) solid var(--border-color);
}

.container {
    width: calc(100vw - 32px);
    max-width: 1200px;
    margin: 0 auto;

    height: 100vh;

    display: flex;
    flex-direction: column;
}

.header {
    display: flex;
    align-items: end;
    gap: 8px;
    margin: 16px 0;
}

.footer {
    text-align: center;
    margin: 8px 0;
}

.site-title {
    font-size: 1.5rem;
}

.year-combobox {
    padding: 4px;

    border-radius: var(--boarder-radius);
    border: var(--border-width) solid var(--border-color);
}

.tab {
    white-space: nowrap;
    overflow-x: auto;

    padding-bottom: var(--border-width);
    margin-bottom: calc(var(--border-width) * -1);

    flex-shrink: 0;
}

.tab-list {
    display: flex;
    gap: 8px;

    list-style: none;
}

.tab-item a {
    display: block;

    padding: 0 8px;

    text-decoration: none;

    border-top: var(--border-width) solid var(--border-color);
    border-left: var(--border-width) solid var(--border-color);
    border-right: var(--border-width) solid var(--border-color);
    border-radius: var(--boarder-radius) var(--boarder-radius) 0 0;
}

.tab-item.active a {
    position: relative;
    z-index: 1;
}

.tab-item.active a::after {
    display: block;
    content: "";
    position: absolute;

    bottom: -2px;
    left: 0px;

    width: 100%;
    height: 2px;

    background-color: var(--white);
}

.tab-item.category1 a {
    color: var(--category1);
}

.tab-item.category2 a {
    color: var(--category2);
}

.tab-item.category3 a {
    color: var(--category3);
}

.tab-item.category4 a {
    color: var(--category4);
}

.tab-item.category5 a {
    color: var(--category5);
}

.entry-list {
    list-style-type: none;
}

.entry-item {
    display: flex;
    gap: 8px;
}

.entry-rank {
    flex: 0 0 5ch;
    text-align: right;
    font-weight: bold;
}

.entry-bookmark {
    flex: 0 0 10ch;
    text-align: right;
}

.entry-bookmark-count a {
    color: var(--bookmark-color);
}

.entry-title {
    flex: 1;
    min-width: 0;

    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entry-title a {
    color: var(--unvisited-color);
}

.entry-title a:visited {
    color: var(--visited-color);
}