/* Main page setup */
body {
    font-size: 18px;
}

/* Year list */
div#yearsEl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
div.break {
    flex: 0 0 100%;
}
div.break.large {
    height: 10px;
}

/* Years */
button.year {
    background-color: darkgray;
    cursor: pointer;
    color: black;
    border-radius: 5px;
    font-size: 13.5px;

    display: inline-block;
    width: 220px;
    height: 180px;
}
button.year.current {
    background-color: lightgray;
}
button.year.unreleased {
    background-color: gray;
    cursor: default;
}
body:not(.debug) button.year.debug {
    display: none;
}
button.year[disabled] {
    cursor: default;
}
button:not(.year) {
    font-size: 14.5px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* Year images */
img.year-img {
    background-color: black;
    border: 1px solid black;
    border-radius: 5px;

    width: 100%;
    height: auto;
    margin-top: 3px;
}

/* Tools */
button.tool {
    background-color: lightgray;
    cursor: pointer;
    color: black;
    border-radius: 5px;
}
body:not(.debug) button.tool.debug {
    display: none;
}


/* Light mode (adds override rules to a dark mode stylesheet) */

/* Years */
body.light button.year {
    background-color: lightgray !important;
}
body.light button.year.current {
    background-color: whitesmoke !important;
}
body.light button.year.unreleased {
    background-color: darkgray !important;
}

/* Year images */
body.light img.year-img {
    background-color: lightgray !important;
}