:root {
 
    --opaque_border_color: rgba( 255, 255, 255, 0.3 );
    --opaque_hover_bg_color: rgba( 255, 255, 255, 0.1 );
    --muted_text: var( --k_40 );
    --link_color: #82a5de;
    --link_color_hover: #bcd6ff;
    --aside_header_bg: var( --k_80 );
    --theme_green: var( --c_light_green );
    --theme_red: var( --c_light_red );
    --icon_invert: invert( 1 );
    --voting_bg: var( --k_90 );
    --voting_num_bg: #21904c;
    --voting_num_border_color: #85d881;
    --modpack_header_color: var( --k_80 );
}

@media ( prefers-color-scheme: light ) {

    :root {
        --opaque_border_color: rgba( 0, 0, 0, 0.3 );
        --opaque_hover_bg_color: rgba( 255, 255, 255, 0.3 );
        --muted_text: var( --k_70 );
        --link_color: #476a99;
        --link_color_hover: #4b73a9;
        --aside_header_bg: var( --k_20 );
        --theme_green: #446f2e;
        --theme_red: var( --c_red );
        --icon_invert: invert( 0 );
        --voting_bg: var( --k_5 );
        --voting_num_bg: #85d881;
        --voting_num_border_color: #21904c;
        --modpack_header_bg: var( --k_10 );
    }
}

/* █████████████████████ Global/layout █████████████████████ */

    /* Changes default black icon color to white */
    svg.icon:not(.black),
    img.icon:not(.black) { filter: var( --icon_invert ); }

    /* Lighter link colors */
    a {
        color: var( --link_color );
        font-weight: 700;
    }

    a:hover { color: var( --link_color_hover ) !important; }

    /* No bottom margin on user player images */
    #aside_right menu img { margin: 0; }

    /* No bottom padding on .panel header children */
    main .panel > header * { margin: 0; }

    /* No bottom padding on last .panel body child */
    main .panel .body > *:last-child { margin-bottom: 0; }

    /* More bottom padding for .panel */
    main .panel .body { padding-bottom: var( --r_1_5 ); }

    /* Emoji lists */
    ul.emoji_list {
        list-style: none;
        margin-left: 0;
        margin-bottom: 0;
    }

    ul.emoji_list > li {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-bottom: 8px;
        margin-bottom: 8px;
        border-bottom: var( --layout_borders );
    }

    ul.emoji_list > li:last-child {
        border-bottom: none;
        margin-bottom: none;
    }

    ul.emoji_list > li > .emoji { margin-right: var( --r ); }

    ul.emoji_list > li ul {
        margin-bottom: 0;
    }

    @media( max-width: 700px ) {

        /* Add margin to buttons so they don't stack up on each other */
        #content .btn { margin: 5px; }
    }

/* █████████████████████ Asides █████████████████████ */

    #aside_ip_header {
        background: var( --aside_header_bg );
    }

    #aside_left {
        --current  : #7DA672;
        --survival : #407A7F;
        --legacy   : #4A5790;
        --alpha    : #6E358D;
        --newest   : var( --c_yellow );

        --current_light  : #8BB082;
        --survival_light : #4B8B93;
        --legacy_light   : #5B6BA3;
        --alpha_light    : #7E40A1;
        --newest_light   : var( --c_light_yellow );
    }

    #aside_legend {
        font-size: 90%;
    }

    #aside_legend tr td {
        border-bottom: var( --layout_borders );
    }

    #aside_legend .start,
    #aside_legend .end {
        white-space: pre-wrap;
    }

    #aside_legend .name {
        width: 70px;
        text-align: center;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    #aside_legend .current .name,
    .aside_spawns a.current { border: 2px solid var( --current ); }
    #aside_legend .survival .name,
    .aside_spawns a.survival { border: 2px solid var( --survival ); }
    #aside_legend .legacy .name,
    .aside_spawns a.legacy { border: 2px solid var( --legacy ); }
    #aside_legend .alpha .name,
    .aside_spawns a.alpha { border: 2px solid var( --alpha ); }
    #aside_legend .newest .name,
    .aside_spawns a.newest { border: 2px solid var( --newest ); }

    .aside_spawns a.newest {
        width: calc(100% - var(--r_1_5));
        margin-bottom: var(--r);
    }

    .dot {
        border-radius: 100%;
        height: 10px;
        width: 10px;
        display: inline-flex;
        flex-shrink: 0;
        margin: 0 var( --r_0_5 );
    }

    .dot.current { background: var( --current_light ); }
    .dot.survival { background: var( --survival_light ); }
    .dot.legacy { background: var( --legacy_light ); }
    .dot.alpha { background: var( --alpha_light ); }
    .dot.newest { background: var( --newest_light ); }

    .arrow_green { color: var( --theme_green ); }
    .arrow_red { color: var( --theme_red ); }

    .aside_spawns {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }

    .aside_spawns.first {
        border-bottom: var( --layout_borders );
        margin-bottom: var( --r );
        padding-bottom: var( --r_0_5 );
    }

    .aside_spawns .version { font-size: 1.4rem; }

    .aside_spawns .smaller.version { font-size: 1.2rem; }

    .aside_spawns a {
        display: flex;
        flex-direction: column;
        color: var( --k_color );
        padding: var( --r_0_5 ) var( --r_0_75 );
        flex-shrink: 0;
        border-radius: 10px;
        text-align: center;
        margin: 0 0 8px;
        min-width: 70px;
        position: relative;
    }

    .aside_spawns a:hover {
        color: var( --k_color ) !important;
        background: var( --opaque_hover_bg_color );
    }

    .aside_spawns a.current:hover { border: 2px solid var( --current_light ); }
    .aside_spawns a.survival:hover { border: 2px solid var( --survival_light ); }
    .aside_spawns a.legacy:hover { border: 2px solid var( --legacy_light ); }
    .aside_spawns a.alpha:hover { border: 2px solid var( --alpha_light ); }
    .aside_spawns a.newest:hover { border: 2px solid var( --newest_light ); }

    .aside_spawns .star {
        position: absolute;
        top: -8px;
        right: -10px;
        font-size: 1.9rem;
        color: #ffff7a;
        text-stroke: black 1px;
        -webkit-text-stroke: black 1px;
        text-shadow: 0 3px 3px rgb(0 0 0 / 20%);
    }

    .aside_spawns a .era {
        font-size: 90%;
        line-height: 90%;
        margin-top: 4px;
        padding-top: 5px;
        border-top: thin solid var( --opaque_border_color );
    }

    #poi_menu .dates {
        font-size: 90%;
        color: var( --muted_text );
    }

    #poi_menu li a {
        display: flex;
        flex-direction: row;
    }

    #poi_menu li a:hover {
        background: var( --opaque_hover_bg_color );
    }

    #poi_menu .dot { margin: 0 0 0 auto; }

    #poi_menu .desc { padding: 0 var( --r ) 0 0; }

    menu > li > a:hover:not( .btn ),
    menu > li > .href:hover:not( .btn ) {
        background: var( --opaque_hover_bg_color );
    }

/* █████████████████████ Home █████████████████████ */

    /* Home page header */
    #home_hero {
        background: url( /img/hero.webp );
        background-position: center center;
        background-size: cover;
    }

    #home_hero .inner {
        background: linear-gradient( transparent 0%, var( --background ) 30% );
        padding: 0 var( --r );
    }

    #home_hero h1 {
        margin-top: 150px;
    }

    #home_info {
        max-width: 850px;
        margin: 0 auto;
    }

    #home_info .slogan {
        font-size: 1.2rem;
        line-height: 1.8rem;
        text-align: center;
        margin-bottom: var( --r_2_5 );
    }

    #fountain {
        max-width: 200px;
        margin: var( --r_0_5 ) auto;
    }

    #home_info .hidden_hr { display: none; }

    @media( max-width: 700px )  {

        #home_info .hidden_hr { display: block; }
    }

/* █████████████████████ Pl3xMap █████████████████████ */

    /* Pl3xMap iframe full content width/height */
    #pl3xmap_iframe {
        width: 100%;
        height: 100%;
        grid-column: 2/4;
        border: 0;
    }

/* █████████████████████ Whitelist █████████████████████ */

    /* Whitelist form - make smaller */
    #whitelist_form_wrap {
        max-width: 350px;
        margin: 0 auto;
    }

    /* Whitelist form - rules */
    #rules_list {
        font-size: 120%;
    }

    #rules_list li {
        margin-bottom: var( --r_0_75 );
        line-height: var( --r_1_5 );
    }

    #rules_list .adults_only {
        color: var( --c_light_red );
    }

    /* Whitelist form - large check boxes; https://www.w3schools.com/howto/howto_css_custom_checkbox.asp */
    #whitelist_form .large_check {
        padding-left: 35px;
        font-size: var( --r_1_25 );
        text-align: left;
        display: inline-block;
        margin: 0 0 var( --r_2 );

        position: relative;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    #whitelist_form .large_check input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    #whitelist_form .large_check .checkmark {
        height: 25px;
        width: 25px;
        background-color: #eee;

        position: absolute;
        top: -3px;
        left: 0;
    }

    #whitelist_form .large_check:hover input ~ .checkmark { background-color: var( --k_30 ); }
    #whitelist_form .large_check input:checked ~ .checkmark { background-color: #8596eb; }

    #whitelist_form .large_check .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    #whitelist_form .large_check input:checked ~ .checkmark:after {
        display: block;
    }

    #whitelist_form .large_check .checkmark:after {
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

/* █████████████████████ 3D Buttons █████████████████████ */

    /*
        3D buttons
        - .shadow span is optional!
        - Potentially add .s/.l/.xl size styling to offsets
        - Heavily refactored from https://www.joshwcomeau.com/animation/3d-button/

        <button class="btn btn_3d green">
            <span class="shadow"></span>
            <span class="edge"></span>
            <span class="face">Button Text</span>
        </button>
    */

    :root {

        --btn_3d_color_bg      : var( --k_70 );
        --btn_3d_color_shadow  : rgba( 0, 0, 0, 0.2 );
        --btn_3d_border_filter : brightness( 60% );

        --btn_3d_outline_offset          : 4px;
        --btn_3d_transition_hover        : 250ms;
        --btn_3d_transition_push_down    : 90ms;
        --btn_3d_transition_push_up      : 350ms;
        --btn_3d_transition_cubic_bezier : cubic-bezier( .3, .7, .4, 1 );
        --btn_3d_hover_filter            : brightness( 110% );
        --btn_3d_border_radius           : 6px;

        --btn_3d_button_offset           : -4px;
        --btn_3d_button_depressed_offset : 0px;
        --btn_3d_shadow_offset           : 2px;
        --btn_3d_shadow_depressed_offset : 0px;
    }

    .btn_3d {
        color: var( --k_0 );
        outline-offset: var( --btn_3d_outline_offset );
        transition: filter var( --btn_3d_transition_hover );
        position: relative;
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0;
        cursor: pointer;
    }

    .btn_3d > .shadow {
        border-radius: var( --btn_3d_border_radius );
        background: var( --btn_3d_color_shadow );
        transform: translateY( var( --btn_3d_shadow_offset ) );
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        will-change: transform;
        transition:
            transform
            var( --btn_3d_transition_push_up )
            var( --btn_3d_transition_cubic_bezier );
    }

    .btn_3d > .edge {
        border-radius: var( --btn_3d_border_radius );
        background: var( --btn_3d_color_bg );
        filter: var( --btn_3d_border_filter );
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .btn_3d > .face {
        border-radius: var( --btn_3d_border_radius );
        background: var( --btn_3d_color_bg );
        color: var( --k_0 );
        padding: var( --input_padding );
        transform: translateY( var( --btn_3d_button_offset ) );
        display: block;
        position: relative;
        will-change: transform;
        transition:
            transform
            var( --btn_3d_transition_push_up )
            var( --btn_3d_transition_cubic_bezier );
    }

    .btn_3d:hover {
        filter: var( --btn_3d_hover_filter );
        outline: none;
    }

    .btn_3d:active .face {
        transition: transform var( --btn_3d_transition_push_down );
        transform: translateY( var( --btn_3d_button_depressed_offset ) );
    }

    .btn_3d:active .shadow {
        transform: translateY( var( --btn_3d_shadow_depressed_offset ) );
        transition: transform var( --btn_3d_transition_push_down );
    }

    .btn_3d:focus:not( :focus-visible ) { outline: none; }

    .btn_3d.s > .face { padding: var( --input_s_padding ); }
    .btn_3d.l > .face { padding: var( --input_l_padding ); }
    .btn_3d.xl > .face { padding: var( --input_xl_padding ); }

    .btn_3d.red > *:not( .shadow ) {
        color: var( --c_red_over );
        background: var( --c_red );
    }

    .btn_3d.orange > *:not( .shadow ) {
        color: var( --c_orange_over );
        background: var( --c_orange );
    }

    .btn_3d.yellow > *:not( .shadow ) {
        color: var( --c_yellow_over );
        background: var( --c_yellow );
    }

    .btn_3d.green > *:not( .shadow ) {
        color: var( --c_green_over );
        background: var( --c_green );
    }

    .btn_3d.cyan > *:not( .shadow ) {
        color: var( --c_cyan_over );
        background: var( --c_cyan );
    }

    .btn_3d.blue > *:not( .shadow ) {
        color: var( --c_blue_over );
        background: var( --c_blue );
    }

    .btn_3d.purple > *:not( .shadow ) {
        color: var( --c_purple_over );
        background: var( --c_purple );
    }

    .btn_3d.light_red > *:not( .shadow ) {
        color: var( --c_light_red_over );
        background: var( --c_light_red );
    }

    .btn_3d.light_orange > *:not( .shadow ) {
        color: var( --c_light_orange_over );
        background: var( --c_light_orange );
    }

    .btn_3d.light_yellow > *:not( .shadow ) {
        color: var( --c_light_yellow_over );
        background: var( --c_light_yellow );
    }

    .btn_3d.light_green > *:not( .shadow ) {
        color: var( --c_light_green_over );
        background: var( --c_light_green );
    }

    .btn_3d.light_cyan > *:not( .shadow ) {
        color: var( --c_light_cyan_over );
        background: var( --c_light_cyan );
    }

    .btn_3d.light_blue > *:not( .shadow ) {
        color: var( --c_light_blue_over );
        background: var( --c_light_blue );
    }

    .btn_3d.light_purple > *:not( .shadow ) {
        color: var( --c_light_purple_over );
        background: var( --c_light_purple );
    }

    /* Discord colors */
    .btn_3d.discord_colors > *:not( .shadow ) {
        color: var( --k_0 );
        background: #7289DA;
    }

/* █████████████████████ Modpack █████████████████████ */

    .modpack_header {
        background: var( --modpack_header_bg );
    }

    #button_ctas {
        display: flex;
        justify-content: center;
    }

    #button_ctas .btn { margin: 5px; }

    #input_table {
        border-left: var( --table_borders );
        border-right: var( --table_borders );
    }

    #input_table kbd {
        border-bottom-width: 3px;
        margin-bottom: 3px;
        display: inline-block;
    }

    .fade_block {
        -webkit-mask-image: linear-gradient( to bottom, black 50%, transparent 100% );
        mask-image: linear-gradient( to bottom, black 50%, transparent 100% );
        height: 350px;
    }

    .client_block {
        margin: var( --r_1_5 ) 0;
        border-bottom: 2px dashed var( --k_80 );
    }

    .client_block.last {
        margin-bottom: var( --r_3 );
        border-bottom: none;
    }

    .client_block h5 { margin-top: 0; }
    .client_block h5 a { color: var( --k_10 ); }
    .client_block h5 a:hover { color: var( --k_0 ); }

    .mod_table img {
        border-radius: 5px;
        max-width: 50px;
    }

    .mod_table tbody tr td:first-child {
        width: 1%;
    }

    @media( max-width: 600px ) {

        #button_ctas { flex-direction: column; }
        #button_ctas .face { width: 100%; }
    }

/* █████████████████████ Voting █████████████████████ */

    #voting {
        display: flex;
        flex-direction: column;
        padding: 0 var( --r ) var( --r );
    }

    #voting_info {
        background: var( --voting_bg );
        display: flex;
        padding: var( --r_1_5 );
        border: var( --layout_borders );
        max-width: 600px;
        margin: var( --r_2 ) auto 0;
        align-items: center;
    }

    #voting_blurb { margin: 0 var( --r ); }

    #voting_cat {
        flex-shrink: 0;
        margin: 0 var( --r );
        overflow: hidden;
    }

    #voting_cat img {
        position: relative;
        top: -5px;
        margin-bottom: var( --r_0_5 );
    }

    #voting_sites {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }

    #voting_sites .voting_site {
        display: flex;
        padding: var( --r_0_5 );
    }

    #voting_sites .voting_site:first-child {
        border-top: none;
    }

    #voting_sites .voting_site .number {
        color: var( --color );
        font-size: 20px;
        border: 2px solid var( --k_50 );
        border-radius: 100%;
        width: 35px;
        height: 35px;
        display: inline-block;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 2px;
    }

    #voting_sites .voting_site:hover .number {
        border-color: var( --color );
    }

    #voting_sites .voting_site .site_name {
        font-size: 20px;
        display: flex;
        align-items: center;
        margin: 0 0 0 var( --r );
    }

    #voting_sites .voting_site.clicked .number {
        background: var( --voting_num_bg );
        border-color: var( --voting_num_border_color );
    }

    @media( max-width: 600px ) {

        #voting_cat { max-width: 30%; }
        #voting_ctrl_hint { display: none; }
    }

    @media( max-width: 500px ) {

        #voting_info {
            flex-direction: column;
            padding: var( --r ) var( --r_0_5 );
        }

        #voting_blurb { order: 1; }
        #voting_cat { order: 0; }
        #voting_sites .voting_site .site_name { font-size: 17px; }
    }