/* *********************** */
/* 1: grid layout for page */
/* *********************** */
#display_wrapper {
    /* like a circle within a circle, it's a grid within a grid */ 
    display: grid;
    grid-template-columns: 5dvw 90dvw 5dvw; 
    grid-template-rows: 16dvh 80dvh;
    grid-gap: 0; }

#heading_wrapper { grid-column: 1 / 4; 
                   grid-row: 1 / 2; }

#fixed_panel     { grid-column: 2 / 3;
                   grid-row: 2 / 3; }

/* ************************************************* */
/* 2: fixed info panel (the squad of players listed) */
/* ************************************************* */
/*    2.1: deal with scrolling                       */
/* ************************************************* */
#fixed_panel{
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--sitedark), 1) rgba(var(--sitedark), 0.3); 
    margin-top: 1dvh;
    display: flex;
    flex-direction: column;
}

/* ********************************************* */
/*    2.2 general table settings                 */
/* ********************************************* */ 
table, th, td, tr{ border-collapse: collapse; }
td{ background: rgba(var(--sitedark), 0.1); }
#update_head {
    background-color: rgba(var(--sitedark), 0.7);
    backdrop-filter: blur(2px);
    color: rgba(var(--sitewhite), 0.9);
    text-shadow: 2px 2px 4px rgba(var(--siteblack), 0.8);
    height: 4dvh;
    position: sticky;
    top: 0;
    z-index: 10;
    font-size: 1rem;
}
.update_head_date    { width: 7dvw; }
.update_head_team    { width: 12dvw; }
.update_head_name    { width: 10dvw; }
.update_head_details { width: 56dvw; }
.update_head_link    { width: 5dvw; }
.update_line {
    height: 4vh;
    background: rgba(var(--sitedark), 0.6);
    border-bottom: 0.5px solid rgba(var(--sitegold), 0.8);
    text-shadow: 2px 2px 4px rgba(var(--siteblack), 0.8);
    font-size: 0.9rem;
}
.update_date { 
    text-align: right;
    padding-right: 1dvw; 
}
.update_name { padding-left: 1dvw; }
.update_date,
.update_playername,
.update_link { 
    color: rgba(var(--sitewhite), 0.8);
    }
.update_link { text-align: center; }

/* ************************ */
/* 3: responsive layout     */
/* ************************ */
@media (min-width: 801px) and (max-width: 1400px) {
    #display_wrapper { grid-template-rows: 12dvh 82dvh; }
}
@media (max-width: 800px) {
    #display_wrapper { grid-template-rows: 8dvh 86dvh; }
    #update_table {
        display: flex;
        flex-direction: column; 
    }
    #update_table th, #update_table td { 
        display: block; 
        width: 100%;
        margin-bottom: 2px;
    }
    #update_head { display: none; }
    .update_line{
        height: auto;
        line-height: 1.70rem;
        border-bottom: 2px solid rgba(var(--sitegold), 0.8);
    }
    .update_link,
    .update_line td {
        text-align: left;
    }
    .update_date { 
        background: rgba(var(--sitedark), 0.9);
        text-align: center !important;
        font-size: 1.1rem; 
    }
    .update_line td { padding: 0 1.5dvw 0 2.5dvw; }
}