@font-face {
    font-family: 'britanic';
    src: url('../../assets/fonts/britanic.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'bronic';
    src: url('../../assets/fonts/bronic.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'fr-bold';
    src: url('../../assets/fonts/fr-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


html {
	background-color: #151515; /* fallback to mitigate white flash */
	background-image: url("../../assets/images/pageBack.png");
	background-repeat: repeat;
    padding-bottom: 20vh;
}

body {
	margin: 0px;
	font-family: 'britanic', sans-serif;
    background: transparent; /* let html own the tiled bg */
}

/* Global table body typography */
table tbody td {
    font-family: 'fr-bold', sans-serif;
    letter-spacing: 0.5px;
    font-size: 13px;
}

/* Global table look and feel (match Collections monster names) */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: #e6eeff;
}

table thead th {
    background: #2f3b52; /* cool blue-slate header */
    color: #a9c5ff;
    text-align: left;
    padding: 10px 12px;
    font-family: 'fr-bold', sans-serif;
}

table thead th:first-child { border-top-left-radius: 10px; }
table thead th:last-child  { border-top-right-radius: 10px; }

table tbody td {
    background: #242b33; /* neutral blue-gray */
    padding: 8px 12px;
    border-top: 1px solid #00000055;
}

table tbody tr:nth-child(even) td { background: #29313c; }
table tbody tr:hover td         { background: #313b4c; }

/* Fade in page content (not the background) */
body > * {
    opacity: 0;
    animation: app-fade-in 500ms ease-out 0s forwards;
}

@keyframes app-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    body > * { animation: none; opacity: 1; }
}