/* Copyright (C) 2024  Anthony DeDominic
 * SPDX-License-Identifier: GPL-3.0-or-later
 */
img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

html {
    min-width: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
}

:root { --col-size: 3; }

@media only screen and (max-width: 600px) {
    :root { --col-size: 1; }
}
@media only screen and (min-width: 601px) and (max-width: 1310px) {
    :root { --col-size: 2; }
}

.cards {
    display: grid;
    place-content: center;
    grid-template-columns: repeat(var(--col-size), auto);
}

.card {
    margin: 0.5em;
    padding-top: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-bottom: 0.5em;
    background-color: var(--bg);
    border-radius: 2%;
    text-align: center;
}

.nav-block {
    display: grid;
    grid-template-columns: repeat(14, minmax(3em, max-content));
    /* display: flex; */
    justify-content: center;
    margin: 1em 1em;
    user-select: none;
}

@media only screen and (max-width: 600px) {
    .nav-block {
        grid-template-columns: repeat(4, 1fr);
        font-size: 1.5em;
    }
}

@media only screen and (min-width: 600px) and (max-width: calc(3em * 14 + 4em + 6em)) {
    .nav-block {
        grid-template-columns: repeat(6, 1fr);
    }
}

.nav-block > a {
    margin-left: 0.1em;
    margin-right: 0.1em;
}

.float-right {
    float: right;
}

.black-link {
    color: var(--fg);
}

.full-width {
    display: flex;
    justify-content: center;
    margin-left: 2em;
    margin-right: 2em;
}

.full-width > :first-child {
    max-width: 100%;
}

@media only screen and (max-width: 600px) {
    #search-field {
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
    }
    .full-width {
        margin-left: 0.5em;
        margin-right: 0.5em;
    }
    .full-width > input[type="submit"] {
        display: none;
    }
}

.center-banner {
    margin: 40px;
    text-align: center;
}

.hidden {
    display: none;
}

.disable {
    pointer-events: none;
    opacity: .33;
}

.paddle {
    text-align: center;
    text-decoration: none;
    color: var(--fg);
    background-color: var(--bg-btn);
    padding: 0.25em 0.5em 0.25em 0.5em;
}

.paddle.selected {
  background-color: var(--select-col);
}

.arrow-right {
    padding: 0.25em 3em 0.25em 1em;
    text-decoration: none;
    color: var(--fg);
    background:
        linear-gradient(-120deg, transparent 1em,
            var(--bg-btn) 1.05em,
            var(--bg-btn) 1.5em,
            transparent 1.45em,
            transparent 2em,
            var(--bg-btn) 2.05em) top no-repeat,
        linear-gradient(300deg,
            transparent 1em,
            var(--bg-btn) 1.05em,
            var(--bg-btn) 1.5em,
            transparent 1.45em,
            transparent 2em,
            var(--bg-btn) 2.05em) bottom no-repeat;
    text-align: left;
    background-size: 100% 50%;
}

.arrow-left {
    /* margin: 1em 0.05em 1em 0.25em; */
    padding: 0.25em 1em 0.25em 3em;
    text-decoration: none;
    color: var(--fg);
    background:
        linear-gradient(120deg, transparent 1em,
            var(--bg-btn) 1.05em,
            var(--bg-btn) 1.5em,
            transparent 1.45em,
            transparent 2em,
            var(--bg-btn) 2.05em) top no-repeat,
        linear-gradient(-300deg,
            transparent 1em,
            var(--bg-btn) 1.05em,
            var(--bg-btn) 1.5em,
            transparent 1.45em,
            transparent 2em,
            var(--bg-btn) 2.05em) bottom no-repeat;
    text-align: right;
    background-size: 100% 50%;
}


.paddle-edge > span.short {
    display: none;
}

@media only screen and (max-width: calc(3em * 14 + 4em + 6em)) {
    .paddle-edge > span.full {
        display: none;
    }
    .paddle-edge > span.short {
        display: block;
    }

    .arrow-left,
    .arrow-right,
    .paddle {
        text-align: center;
        text-decoration: none;
        color: var(--fg);
        background-color: var(--bg-btn);
        padding: 0.25em 0.2em 0.25em 0.2em;
        margin: 0.1em;
    }

    .arrow-left,
    .arrow-right {
        font-size: 1.2em;
        grid-column: 1 / -1;
    }
}

@media (hover: hover) {
    .paddle:hover, input[type="submit"]:hover {
      background-color: var(--select-hover);
    }
    .upvote:hover::before,
    .upvoted .upvote::before
    {
        content: "\25b2";
        color: var(--destructive-col);
    }
}

.is-alias {
    text-decoration: underline;
    text-decoration-style: dotted;
}

.vote {
    float: left;
}

.upvote {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.upvote:before {
    content: "\25b3";
}