@font-face {
    font-family: Trebuchet MS;
    src: local("Trebuchet MS"), url("/fonts/trebuc.ttf");
}

@font-face {
    font-family: Trebuchet MS;
    src: local("Trebuchet MS Bold"), url("/fonts/trebucbd.ttf");
    font-weight: bold;
}

@font-face {
    font-family: Trebuchet MS;
    src: local("Trebuchet MS Bold Italic"), url("/fonts/trebucbi.ttf");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: Trebuchet MS;
    src: local("Trebuchet MS Italic"), url("/fonts/trebucit.ttf");
    font-style: italic;
}

body {
    font-family: Trebuchet MS, sans-serif;
    background: #181818;
    background-image: radial-gradient(rgba(45, 0, 0, 1.0) 5%, rgba(85, 0, 0, 0) 25%), repeating-conic-gradient( rgb(85,0,0) 0deg, rgb(85,0,0) 6deg, rgb(45,0,0) 6deg, rgb(45,0,0) 12deg );
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: #EFEFEF;
}

/*
    navigation bar

*/
nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-top: 0.65em;
    padding-bottom: 0.25em;
    border-bottom: 0.1em solid #EFEFEF;
    font-size: min(3.1em, 10vw); /*10vw is the approximate size for 'RE Trading Cards' to fill the width of the viewport */
    font-variant: small-caps;
}

.logo {
    color: #EFEFEF;
    font-weight: bold;
    flex-shrink: 0;
}

nav ul {
    display: inline-block;
    margin: 0;
    padding: 0;
}

    nav ul li {
        display: inline-block;
        margin: 0 0.6em;
        font-size: 0.5em;
    }

        nav ul li a {
            color: #EFEFEF;
            text-decoration: none;
        }

a.active, a:hover {
    color: #4876FF;
}


/*
    Main body container

*/
.container {
    padding: 1.5em;
    margin: 1em auto;
    max-width: 90%;
    background-color: rgba(24,24,24,0.85);
}

    .container h1 {
        text-align: center;
    }

    .container h2 {
        text-decoration: underline;
        font-size: 1.2em;
        margin-block-start: 2em;
        margin-block-end: 0.75em;
    }

    .container h3 {
        text-decoration: underline;
        font-size: 1em;
        margin-block-start: 2em;
        margin-block-end: 0.75em;
    }

    .container h4 {
        margin-block-start: 1.5em;
        margin-block-end: 0.75em;
    }

    .container p {
        margin: 0.5em 0;
    }

    .container .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

        .container .row > .column {
            flex: calc(50% - 2em);
            flex-grow: 0;
        }

/*
    Set default card sizes
    To maintain roughly the same physical size (without scaling with the window size) cards will be larger on
    higher dpi displays.
    The min of 0.75vh, 1vw also means at minimum of 2x2 grid of cards should be visible on the screen - these values
    generally come into play when you put a mobile device into horizontal mode
*/
#card-holder {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    user-select: none;
    font-size: max(min(5px, 0.75vh, 0.9vw), 3px);
    color: black;
}

    #card-holder > * {
        user-select: text;
        margin: 2em;
    }

/*Drop two-column layout to single column when we can't fit a lot of text across the screen */
@media (max-width: 60em) {
    .container .row > .column {
        flex: 100%;
    }
}

/*
    search bar - cards page

*/
#searchBar {
    width: max(55%, 17em);
    /*55%, or enough space to allow ~40 characters with the default font*/
    /*the minus 0.5em is accouting for our padding*/
    max-width: calc(100% - 0.5em);
    line-height: 200%;
    border-radius: 3px;
    border: 1px solid #eaeaea;
    padding-left: 0.5em;
    font-size: 0.75em;
    margin-bottom: 2em;
}

#search-wrapper {
    position: relative;
}

.pointer-only {
}

.touch-only {
}

@media (pointer: fine) and (hover: hover) {
    .touch-only {
        display: none !important;
    }
}

@media not (pointer: fine), not (hover: hover) {
    .pointer-only {
        display: none !important;
    }
}

.text-button {
    display: inline-block;
    padding: 0 0.4em;
    min-width: 2.5em;
    margin: 0.2em;
    border-radius: 0.35em;
    border: 2px solid #CFCFCF;
    background-color: #EFEFEF;
    color: #000;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}

    .text-button:hover {
        border: 2px solid #2856DF;
        background-color: #4876FF;
        color: #000;
    }

    .text-button.disabled {
        background-color: #888;
        border-color: #777;
        color: #555;
        cursor: revert;
    }

        .text-button.disabled:hover {
            background-color: #888;
            border-color: #777;
            color: #555;
        }

#card-info-bar {
    display: flex;
    position: fixed;
    left: 0;
    transition: bottom 0.5s;
    width: 100%;
    height: 2.75em;
    bottom: -3em;
    background-color: #400;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #EFEFEF;
    font-size: 1em;
    padding: 0 0.25em;
    box-sizing: border-box;
    z-index: 1;
}

    #card-info-bar.visible {
        bottom: 0;
    }

    #card-info-bar .date-added {
        font-size: 0.75em;
        flex: 1 1 0;
        max-width: 10em;
    }

    #card-info-bar #original-scan-button {
        font-size: 0.75em;
        flex: 1 1 0;
        line-height: 2em;
        max-width: 10em;
    }

    #card-info-bar #card-title {
        font-weight: bold;
        flex: 0 0 35%;
    }

#full-screen-fade {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background-color: rgba(0,0,0,0.0);
    transition: background-color 0.35s;
}

    #full-screen-fade.active {
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0,0,0,0.35);
    }