@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=EB+Garamond:wght@400;500&display=swap');

body {
    margin: 0;
    font-family: "Cinzel", serif;
    background: transparent;
    color: #e8dcc2;
    cursor: url("../Pictures/meilingsmall.png"), auto;
    height: 100%;
    overflow: hidden;
}

/* Text highlight color */
::selection {
    background: #ca280e;
    color: black;
}

.table-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding: 30px 20px;   
    min-height: 100vh;
    box-sizing: border-box;
}

.table-frame {
    position: relative;

    width: 80%;
    max-width: 900px;

    display: flex;
    justify-content: center;

    margin: 0 auto;
}

/* table stays normal and centered via parent */
table {
    width: 100%;
    border-collapse: collapse;

    text-align: left;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(216, 194, 138, 0.3);

    cursor: url("../Pictures/meilingsmall.png"), auto;
}

/* cells */
th, td {
    padding: clamp(6px, 1vw, 14px);
}

.staff-image {
    position: absolute;
    top: 0;
    left: 0;

    --offset-x: 0.88; /* tweak this to move reimu staff image */

    transform: translate(calc(-1 * var(--offset-x) * 100%), -2px);

    width: clamp(90px, 10vw, 130px);
}

.page-title {
    text-align: center;
    font-size: 32px;
    color: #d8c28a;
    letter-spacing: 2px;

    margin: 40px 0 0 0;
}

th, td {
    padding: 12px 18px;
    border-bottom: 1px solid rgba(216, 194, 138, 0.15);
}

tr:last-child td {
    border-bottom: none;
}


tr:hover td {
    background: rgba(202, 40, 14, 0.08);
}

.table-scroll {
    max-height: 70vh;
    overflow-y: auto;
}

.table-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(202, 40, 14, 0.5) transparent;
}

.table-anchor {
    position: relative;
    display: inline-block;
    transform: translateZ(0);
}