body {
    background-color: black;
}

:root {
    --vw-scale: 1vw;
}

/* BEGIN Challenge/MP Display */

#chal_mp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    margin-top: 1vw;
    padding: 0 3vw;
    column-gap: 4vw;
    color: white;
    font-family: 'FuturaCondensedMedium';
}

/* Skewed background box for headers */
.event-header {
    background: linear-gradient(to bottom, #052a99, #274cbb 40%, #274cbb 60%, #052a99 100%);
    padding: 1% 0;
    font-size: max(28px, 2.25*var(--vw-scale));
    text-align: center;
    transform: skew(-10deg);
}

/* Unskew text inside headers */
.event-header span {
    display: inline-block;
    transform: skew(10deg);
}

/* Translate text of small headers up */
#pz-header span,
#survivor-header span {
    transform: skew(10deg) translateY(10%);
}

/* Desktop/Tablet - Two sections displayed in 2 columns */
#chal-wrapper,
#mp-wrapper,
#bt-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* Split sections into two for 2 card/gear pics */
#chal-wrapper_left,
#chal-wrapper_right,
#mp-wrapper_left,
#mp-wrapper_right {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* Section Headers */
.chal_mp-subheader,
.bt-subheader {
    text-align: center;
    line-height: 100%;
    background: linear-gradient(to bottom, #131166, #353188 40%, #353188 60%, #131166 100%);
    padding: 2.5% 0;
    margin: 0 0 2.5% 0;
    -webkit-border-radius: 3% / 30%;
    -moz-border-radius: 3% / 30%;
    border-radius: 3% / 30%;
    font-size: max(24px, 2*var(--vw-scale));
}

/* Section Headers of 2 column-sections cover whole section */
.chal_mp-subheader {
    grid-column: 1 / span 2;
}

/* Wrapper containing event info */
.event-subwrapper {
    width: 95%;
    margin: 2.5% 2.5% 0 2.5%;
    border-left: 2px solid #242077;
    border-right: 2px solid #242077;
    border-bottom: 2px solid #242077;
    border-radius: 5%;
    -webkit-box-shadow: 0 0 calc(0.5*var(--vw-scale)) 0 #274cbb;
    -moz-box-shadow: 0 0 calc(0.5*var(--vw-scale)) 0 #274cbb;
    box-shadow: 0 0 calc(0.5*var(--vw-scale)) 0 #274cbb;
    background-color: #010310;
}

#chal-wrapper_left {
    grid-template-rows: 4fr 14fr 3fr 7fr 4fr; 
}

#chal-wrapper_right {
    grid-template-rows: 4fr 24fr 4fr;
}

/* BEGIN Card Container Styling */
.card-container {
    text-align: center;
    position: relative;
    font-family: 'FuturaCondensedMediumBT';
}

.card-container .card_img {
    width: 80%;
    height: 100%;
    text-align: left;
}

.card-container .elite {
    position: absolute;
    font-size: calc(1.5*var(--vw-scale));
    color: #f0f0f0;
    top: -0.5%;
    left: 12%;
}

.card-container .level {
    position: absolute;
    font-size: calc(1.5*var(--vw-scale));
    color: #f0f0f0;
    top: -0.5%;
    right: 12%;
}

.card-container .damage_icon {
    position: absolute;
    bottom: 13.5%;
    left: 11%;
    width: calc(0.7*var(--vw-scale));
    height: calc(0.7*var(--vw-scale));
}

.card-container .damage {
    position: absolute;
    bottom: 12%;
    left: 18.5%;
    font-size: calc(0.95*var(--vw-scale));
    text-align: left;
    color: #6080d0;
}

.card-container .health_icon {
    position: absolute;
    bottom: 13.5%;
    left: 37.7%;
    width: calc(0.87*var(--vw-scale));
    height: calc(0.8*var(--vw-scale));
}

.card-container .health {
    position: absolute;
    bottom: 12%;
    left: 46%;
    font-size: calc(0.95*var(--vw-scale));
    text-align: left;
    color: #d80305;
}

.card-container .aug-overlay {
    position: absolute;
    background-color: #192750;
    width: 65%;
    padding-right: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    left: 14%;
    bottom: 45%;
    font-size: calc(1.2*var(--vw-scale));
    text-align: right;
    color: #677a9b;
}

.card-container .max_aug {
    display: inline-block;
    color: #f0f0f0;
    margin-left: 2%;
}

/* END Card Container Styling */

/* Gear displayed inside card container */
.card-container .gear_img {
    width: 80%;
    height: 60%;
    margin: 25% 10% 25% 10%;
}

/* Gear Reward -> No card content displayed */
.mp_gear .card_img,
.mp_gear .elite,
.mp_gear .level,
.mp_gear .damage_icon,
.mp_gear .damage,
.mp_gear .health_icon,
.mp_gear .health,
.mp_gear .aug-overlay {
    display: none;
}

/* Character Reward -> No gear content displayed */
.mp_character .gear_img {
    display: none;
}

/* BEGIN Challenge Section 1 Styling */
#chal-wrapper #chal_exp {
    grid-column: 1 / span 2;
    display: block;
    width: 90%;
    margin: 2% 5%;
    font-size: max(20px, calc(1.5*var(--vw-scale)));
    color: #caefff;
}

#chal-wrapper .reqs-wrapper {
    grid-column: 1 / span 2;
}

#chal-wrapper .reqs-header {
    margin: 0% 5%;
    font-size: max(18px, calc(1.4*var(--vw-scale)));
    text-decoration: underline;
    color: #97bcfe;
}

#chal-wrapper .reqs-list {
    list-style: none;
    margin: 0% 5%;
    font-size: max(14px, calc(1.2*var(--vw-scale)));
    color: #677a9b;
}

/* End Challenge Section 1 Styling */

/* BEGIN Challenge Section 2 Styling */
#chal-wrapper .upcoming_chal-wrapper {
    grid-column: 1 / span 2;
    display: grid;
    grid-template-columns: 3fr 7fr;
}

#chal-wrapper .upcoming_chal_icon {
    width: calc(6*var(--vw-scale));
    height: calc(6*var(--vw-scale));
    margin: 15% 0;
}

#chal-wrapper .upcoming_chal_info {
    padding: 2.5% 0;
}

#chal-wrapper .upcoming_chal {
    font-size: max(14px, calc(1.33*var(--vw-scale)));
    color: #97bcfe;
}

/* End Challenge Section 1 Styling */

/* Button Styling */
#chal-wrapper a,
#mp-wrapper a,
#bt-wrapper a,
#pz-wrapper a,
#survivor-wrapper a {
    width: 75%;
    height: max-content;
    margin: 5% 7.5%;
    padding: 5%;
    line-height: 100%;
    background-color: #131166;
    text-decoration: none;
    text-align: center;
    font-size: max(16px, calc(1.6*var(--vw-scale)));
    color: #97bcfe;
}

#mp-wrapper_left {
    grid-template-rows: 4fr 14fr 6fr 4fr 4fr;
}

#mp-wrapper_right {
    grid-template-rows: 4fr 11.75fr 1.25fr 2fr 13fr;
}

#mp-wrapper .expire-container {
    grid-column: 1 / span 2;
    margin: 5% 0 5% 5%;
    padding-right: 12.5%;
    font-size: max(18px, calc(1.5*var(--vw-scale)));
    text-align: right;
    white-space: nowrap;
    color: #caefff;
}

/* Headers for cutoff tables/upcoming rewards */
#mp-wrapper .mp-subsubheader {
    margin: 0% 5%;
    font-size: max(18px, calc(1.4*var(--vw-scale)));
    text-decoration: underline;
    text-align: center;
}

#mp-wrapper .cutoff-table {
    display: grid;
    grid-template-columns: 2fr 1fr 5fr;
    margin: 2% 5%;
    font-size: max(14px, calc(1.35*var(--vw-scale)));
    font-family: 'FuturaCondensedMediumBT';
    text-align: center;
    background-color: #040041;
    border-top: 1px solid #081640;
    border-right: 1px solid #081640;
}

#mp-wrapper .cutoff-table div {
    grid-column: 1 / span 3;
    width: 100%;
    margin-left: 0;
    border-bottom: 1px solid #081640;
    background-color: #131166;
    color: #caefff;
}

#mp-wrapper .cutoff-table span {
    border-bottom: 1px solid #081640;
    border-left: 1px solid #081640;
    color: #97bcfe;
}

#mp-wrapper .top1per_icon,
#mp-wrapper .top2per_icon,
#mp-wrapper .top3per_icon,
#mp-wrapper .top4per_icon,
#mp-wrapper .top5per_icon {
    display: inline-block;
    margin-left: 2%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#mp-wrapper .top1per_icon {
    background-image: url("../img/icon/top_1_percent.webp");
}

#mp-wrapper .top2per_icon {
    background-image: url("../img/icon/top_2_percent.webp");
}

#mp-wrapper .top3per_icon {
    background-image: url("../img/icon/top_3_percent.webp");
}

#mp-wrapper .top4per_icon {
    background-image: url("../img/icon/top_4_percent.webp");
}

#mp-wrapper .top5per_icon {
    background-image: url("../img/icon/top_5_percent.webp");
}

#mp-wrapper .cutoff_info {
    margin-left: 5%;
    font-size: max(8px, calc(0.9*var(--vw-scale)));
    font-style: italic;
    color: #97bcfe;
}

#mp-wrapper .upcoming-header {
    grid-column: 1 / span 2;
    color: #caefff;
}

#mp-wrapper .upcoming_mp-wrapper {
    grid-column: 1 / span 2;
    display: grid;
    grid-template-columns: 1fr 3fr;
    font-size: max(14px, calc(1.35*var(--vw-scale)));
    text-align: center;
    color: #97bcfe;
}

#mp-wrapper .upcoming_mp_icon {
    height: calc(4*var(--vw-scale));
    width: calc(4*var(--vw-scale));
    margin: 0 12.5%;
}

#mp-wrapper .upcoming_mp_reward {
    padding-top: 5%;
}

/* END Challenge/MP Display */

/* BEGIN BT/PZ/Survivor Display */

#bt_pz_survivor-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
    margin-top: 1vw;
    padding: 0 3vw;
    column-gap: 4vw;
    color: white;
    font-family: 'FuturaCondensedMedium';
}

#bt-header {
    grid-area: 1 / 1 / 2 / 2;
}

#bt-wrapper {
    grid-area: 2 / 1 / 3 / 2;
}

#bt-wrapper_left,
#bt-wrapper_right {
    display: grid;
    grid-template-rows: 3.5fr 14.5fr 4fr;
}

#bt-wrapper .bt-table {
    display: grid;
    grid-template-columns: 2fr 3fr;
    margin: 2% 5%;
    font-size: max(14px, calc(1.5*var(--vw-scale)));
    font-family: 'FuturaCondensedMediumBT';
    text-align: center;
    background-color: #040041;
    border-top: 2px solid #081640;
    border-right: 2px solid #081640;
}

#bt-wrapper .bt-table span {
    border-bottom: 2px solid #081640;
    border-left: 2px solid #081640;
}

#bt-wrapper .bt-table .bronze {
    color: #be7037;
}

#bt-wrapper .bt-table .silver {
    color: #ccd4d8;
}

#bt-wrapper .bt-table .gold_bt_date,
#bt-wrapper .bt-table .gold_bt_chars {
    color: #e9b83b;
}

#bt-wrapper a,
#pz-wrapper a,
#survivor-wrapper a {
    padding: 2.5%;
    margin: 2.5% 10%;
}

#pz-header {
    grid-area: 1 / 2 / 2 / 3;
}

#pz-wrapper {
    grid-area: 2 / 2 / 3 / 3;
    display: grid;
    grid-template-rows: 5fr 5fr 4fr 4fr 4fr;
}

#pz-wrapper span {
    width: 90%;
    margin: 2% 5%;
    font-size: max(24px, calc(2*var(--vw-scale)));
    text-align: center;
    color: #caefff;
}

/* Conditionally toggle with JS */
#pz-wrapper .pz_active {
    color: #75ffaa;
    margin-top: 12.5%;
}

#pz-wrapper .pz_expired {
    color: #ff9aaa;
}

#survivor-header {
    grid-area: 1 / 3 / 2 / 4;
}

#survivor-wrapper {
    grid-area: 2 / 3 / 3 / 4;
    display: grid;
    grid-template-rows: 6fr 8fr 4fr 4fr;
}

#survivor-wrapper .top-info {
    font-size: max(14px, calc(1.35*var(--vw-scale)));
    color: #caefff;
    margin: 2% 5%;
}

/* Cycle List */
#survivor-wrapper ol {
    font-size: max(17px, calc(1.5*var(--vw-scale)));
    color: #97bcfe;
    margin: 0% 10%;
}

/* Tablet Display */
@media only screen and (max-width: 1050px) {
    :root {
        --vw-scale: 2vw;
    }

    #chal_mp-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
    }

    #mp-header {
        grid-area: 3 / 1 / 4 / 1;
        margin-top: 2vw;
    }

    #bt_pz_survivor-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
    }

    #pz-header span,
    #survivor-header span {
        transform: skew(10deg);
    }

    #bt-header {
        grid-area: 1 / 1 / 2 / 3;
    }

    #bt-wrapper {
        grid-area: 2 / 1 / 3 / 3;
    }

    #pz-header {
        grid-area: 3 / 1 / 4 / 2;
        margin-top: 2vw;
    }

    #pz-wrapper {
        grid-area: 4 / 1 / 5 / 2;
    }

    #survivor-header {
        grid-area: 3 / 2 / 4 / 3;
        margin-top: 2vw;
    }

    #survivor-wrapper {
        grid-area: 4 / 2 / 5 / 3;
    }
}

/* Mobile */
@media only screen and (max-width: 550px) {
    :root {
        --vw-scale: 3.9vw;
    }
    #chal-wrapper,
    #mp-wrapper,
    #bt-wrapper {
        grid-template-columns: 1fr;
    }

    #bt_pz_survivor-grid {
        grid-template-columns: 1fr;
    }

    #bt-header,
    #bt-wrapper,
    #pz-header,
    #pz-wrapper,
    #survivor-header,
    #survivor-wrapper {
        grid-area: auto;
    }
}