:root, :root.light {
    --light-season-winter-primary-rgb: 0, 74, 119;
    --light-season-winter-primary-color: display-p3 0.113 0.285 0.453;
    --dark-season-winter-primary-rgb: 162, 216, 255;
    --dark-season-winter-primary-color: display-p3 0.68 0.84 1;
    --light-season-winter-bright-rgb: 42, 204, 253;
    --light-season-winter-bright-color: display-p3 0.391 0.789 0.974;
    --dark-season-winter-bright-rgb: 33, 147, 182;
    --dark-season-winter-bright-color: display-p3 0.281 0.567 0.7;
    --light-season-winter-shadow-rgb: 0, 75, 123;
    --light-season-winter-shadow-color: display-p3 0 0.29 0.467;
    --dark-season-winter-shadow-rgb: 0, 15, 21;
    --dark-season-winter-shadow-color: display-p3 0 0.055 0.078;
    --light-season-winter-header-rgb: 198, 233, 249;
    --light-season-winter-header-color: display-p3 0.804 0.91 0.969;
    --dark-season-winter-header-rgb: 0, 61, 98;
    --dark-season-winter-header-color: display-p3 0 0.235 0.373;
    --light-season-winter-header-image: url("images/winter-header-wallpaper.png");
    --dark-season-winter-header-image: url("images/winter-header-wallpaper-dark.png");
    --light-season-winter-content-rgb: 249, 253, 255;
    --light-season-winter-content-color: display-p3 0.98 0.992 1;
    --dark-season-winter-content-rgb: 0, 20, 34;
    --dark-season-winter-content-color: display-p3 0 0.078 0.129;
    --light-season-winter-content-image: url("images/winter-wallpaper.png");
    --dark-season-winter-content-image: url("images/winter-wallpaper-dark.png");
    --light-season-winter-header-shadow-top-image: url("images/header-winter-shadow-top.png");
    --dark-season-winter-header-shadow-top-image: url("images/header-winter-shadow-top-dark.png");
    --light-season-winter-header-shadow-bottom-image: url("images/header-winter-shadow-bottom.png");
    --dark-season-winter-header-shadow-bottom-image: url("images/header-winter-shadow-bottom-dark.png");
    
    --light-season-spring-primary-rgb: 138, 0, 73;
    --light-season-spring-primary-color: display-p3 0.495 0.089 0.283;
    --dark-season-spring-primary-rgb: 255, 167, 213;
    --dark-season-spring-primary-color: display-p3 1 0.675 0.83;
    --light-season-spring-bright-rgb: 255, 125, 214;
    --light-season-spring-bright-color: display-p3 1 0.524 0.824;
    --dark-season-spring-bright-rgb: 192, 88, 150;
    --dark-season-spring-bright-color: display-p3 0.7 0.367 0.578;
    --light-season-spring-shadow-rgb: 151, 0, 74;
    --light-season-spring-shadow-color: display-p3 0.541 0 0.286;
    --dark-season-spring-shadow-rgb: 23, 0, 13;
    --dark-season-spring-shadow-color: display-p3 0.078 0 0.047;
    --light-season-spring-header-rgb: 255, 230, 243;
    --light-season-spring-header-color: display-p3 0.992 0.906 0.949;
    --dark-season-spring-header-rgb: 124, 0, 66;
    --dark-season-spring-header-color: display-p3 0.443 0 0.255;
    --light-season-spring-header-image: url("images/spring-header-wallpaper.png");
    --dark-season-spring-header-image: url("images/spring-header-wallpaper-dark.png");
    --light-season-spring-content-rgb: 255, 250, 253;
    --light-season-spring-content-color: display-p3 1 0.98 0.992;
    --dark-season-spring-content-rgb: 37, 0, 21;
    --dark-season-spring-content-color: display-p3 0.129 0 0.078;
    --light-season-spring-content-image: url("images/spring-wallpaper.png");
    --dark-season-spring-content-image: url("images/spring-wallpaper-dark.png");
    --light-season-spring-header-shadow-top-image: url("images/header-spring-shadow-top.png");
    --dark-season-spring-header-shadow-top-image: url("images/header-spring-shadow-top-dark.png");
    --light-season-spring-header-shadow-bottom-image: url("images/header-spring-shadow-bottom.png");
    --dark-season-spring-header-shadow-bottom-image: url("images/header-spring-shadow-bottom-dark.png");
    
    --light-season-summer-primary-rgb: 12, 81, 12;
    --light-season-summer-primary-color: display-p3 0.142 0.313 0.096;
    --dark-season-summer-primary-rgb: 172, 255, 164;
    --dark-season-summer-primary-color: display-p3 0.749 1 0.68;
    --light-season-summer-bright-rgb: 0, 248, 40;
    --light-season-summer-bright-color: display-p3 0.348 0.956 0.324;
    --dark-season-summer-bright-rgb: 0, 182, 32;
    --dark-season-summer-bright-color: display-p3 0.253 0.7 0.237;
    --light-season-summer-shadow-rgb: 0, 62, 0;
    --light-season-summer-shadow-color: display-p3 0.02 0.239 0;
    --dark-season-summer-shadow-rgb: 1, 20, 0;
    --dark-season-summer-shadow-color: display-p3 0.02 0.078 0;
    --light-season-summer-header-rgb: 209, 254, 200;
    --light-season-summer-header-color: display-p3 0.855 0.992 0.804;
    --dark-season-summer-header-rgb: 0, 91, 0;
    --dark-season-summer-header-color: display-p3 0.094 0.349 0;
    --light-season-summer-header-image: url("images/summer-header-wallpaper.png");
    --dark-season-summer-header-image: url("images/summer-header-wallpaper-dark.png");
    --light-season-summer-content-rgb: 249, 255, 248;
    --light-season-summer-content-color: display-p3 0.98 1 0.976;
    --dark-season-summer-content-rgb: 0, 23, 0;
    --dark-season-summer-content-color: display-p3 0.016 0.09 0;
    --light-season-summer-content-image: url("images/summer-wallpaper.png");
    --dark-season-summer-content-image: url("images/summer-wallpaper-dark.png");
    --light-season-summer-header-shadow-top-image: url("images/header-summer-shadow-top.png");
    --dark-season-summer-header-shadow-top-image: url("images/header-summer-shadow-top-dark.png");
    --light-season-summer-header-shadow-bottom-image: url("images/header-summer-shadow-bottom.png");
    --dark-season-summer-header-shadow-bottom-image: url("images/header-summer-shadow-bottom-dark.png");
    
    --light-season-fall-primary-rgb: 95, 57, 0;
    --light-season-fall-primary-color: display-p3 0.352 0.23 0.06;
    --dark-season-fall-primary-rgb: 255, 220, 167;
    --dark-season-fall-primary-color: display-p3 1 0.867 0.68;
    --light-season-fall-bright-rgb: 255, 167, 41;
    --light-season-fall-bright-color: display-p3 0.98 0.671 0.286;
    --dark-season-fall-bright-rgb: 193, 120, 23;
    --dark-season-fall-bright-color: display-p3 0.718 0.482 0.192;
    --light-season-fall-shadow-rgb: 101, 55, 0;
    --light-season-fall-shadow-color: display-p3 0.373 0.224 0;
    --dark-season-fall-shadow-rgb: 21, 11, 0;
    --dark-season-fall-shadow-color: display-p3 0.078 0.047 0;
    --light-season-fall-header-rgb: 255, 235, 213;
    --light-season-fall-header-color: display-p3 0.996 0.925 0.847;
    --dark-season-fall-header-rgb: 90, 47, 0;
    --dark-season-fall-header-color: display-p3 0.329 0.192 0;
    --light-season-fall-header-image: url("images/fall-header-wallpaper.png");
    --dark-season-fall-header-image: url("images/fall-header-wallpaper-dark.png");
    --light-season-fall-content-rgb: 255, 253, 250;
    --light-season-fall-content-color: display-p3 1 0.992 0.98;
    --dark-season-fall-content-rgb: 28, 15, 0;
    --dark-season-fall-content-color: display-p3 0.102 0.059 0;
    --light-season-fall-content-image: url("images/fall-wallpaper.png");
    --dark-season-fall-content-image: url("images/fall-wallpaper-dark.png");
    --light-season-fall-header-shadow-top-image: url("images/header-fall-shadow-top.png");
    --dark-season-fall-header-shadow-top-image: url("images/header-fall-shadow-top-dark.png");
    --light-season-fall-header-shadow-bottom-image: url("images/header-fall-shadow-bottom.png");
    --dark-season-fall-header-shadow-bottom-image: url("images/header-fall-shadow-bottom-dark.png");
    
    --light-season-announced-primary-rgb: 60, 27, 120;
    --light-season-announced-primary-color: display-p3 0.22 0.113 0.453;
    --dark-season-announced-primary-rgb: 204, 172, 255;
    --dark-season-announced-primary-color: display-p3 0.781 0.68 1;
    --season-announced-primary-rgb: var(--light-season-announced-primary-rgb);
    --season-announced-primary-color: var(--light-season-announced-primary-color);
    --light-season-announced-bright-rgb: 174, 61, 255;
    --light-season-announced-bright-color: display-p3 0.631 0.271 1;
    --dark-season-announced-bright-rgb: 157, 72, 220;
    --dark-season-announced-bright-color: display-p3 0.573 0.302 0.835;
    
    --light-season-shadow-edge-alpha: 0.15;
    --light-season-shadow-alpha: 0.25;
    --dark-season-shadow-edge-alpha: 0.70;
    --dark-season-shadow-alpha: 0.80;
    --light-season-shadow-rgb: 0 0 0;
    --dark-season-shadow-rgb: 0 0 0;
    --light-season-shadow-color: display-p3 0 0 0;
    --dark-season-shadow-color: display-p3 0 0 0;
    --light-season-header-shadow-top-image: url("images/header-shadow-top.png");
    --dark-season-header-shadow-top-image: url("images/header-shadow-top-dark.png");
    --light-season-header-shadow-bottom-image: url("images/header-shadow-bottom.png");
    --dark-season-header-shadow-bottom-image: url("images/header-shadow-bottom-dark.png");
    
    --season-shadow-edge-alpha: var(--light-season-shadow-edge-alpha);
    --season-shadow-alpha: var(--light-season-shadow-alpha);
    --season-shadow-rgb: var(--light-season-shadow-rgb);
    --season-shadow-color: var(--light-season-shadow-color);
    --season-header-shadow-top-image: var(--light-season-header-shadow-top-image);
    --season-header-shadow-bottom-image: var(--light-season-header-shadow-bottom-image);
    
    --light-segmented-control-background-color-alpha: 0.1;
    --dark-segmented-control-background-color-alpha: 0.5;
    --segmented-control-background-color-alpha: var(--light-segmented-control-background-color-alpha);
    --light-segmented-control-shadow-edge-alpha: 0.06;
    --dark-segmented-control-shadow-edge-alpha: 0.2;
    --segmented-control-shadow-edge-alpha: var(--light-segmented-control-shadow-edge-alpha);
    --light-segmented-control-highlight-edge-alpha: 0;
    --dark-segmented-control-highlight-edge-alpha: 0.4;
    --segmented-control-highlight-edge-alpha: var(--light-segmented-control-highlight-edge-alpha);
    --light-segmented-control-shadow-alpha: 0.15;
    --dark-segmented-control-shadow-alpha: 0.5;
    --segmented-control-shadow-alpha: var(--light-segmented-control-shadow-alpha);
    --light-segmented-control-dimple-shadow-alpha: 0.2;
    --dark-segmented-control-dimple-shadow-alpha: 0.6;
    --segmented-control-dimple-shadow-alpha: var(--light-segmented-control-dimple-shadow-alpha);
    
    --fill-color: white;
    --light-fill-color-transparent: rgba(255, 255, 255, 0.6);
    --dark-fill-color-transparent: rgba(20, 20, 20, 0.6);
    --fill-color-transparent: var(--light-fill-color-transparent);
    --light-fill-color-transparent-hover: rgba(255, 255, 255, 0.8);
    --dark-fill-color-transparent-hover: rgba(20, 20, 20, 0.6);
    --fill-color-transparent-hover: var(--light-fill-color-transparent-hover);
    --content-color: black;
    --dark-content-color: rgba(255, 255, 255, 0.8);
    --dark-content-color-opaque: white;
    --content-secondary-color: rgba(0, 0, 0, 0.5);
    --dark-content-secondary-color: rgba(255, 255, 255, 0.4);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --dark-shadow-color: rgba(0, 0, 0, 0.15);
    --shadow-edge-color: rgba(0, 0, 0, 0.2);
    --dark-shadow-edge-color: rgba(0, 0, 0, 0.75);
    --highlight-color: rgba(255, 255, 255, 0.3);
    --dark-highlight-color: rgba(255, 255, 255, 0.15);
    
    --bright-button-content-color: white;
    --alert-button-fill: rgba(255, 255, 255, 0.1);
    --alert-button-fill-cancel: rgba(255, 255, 255, 0.05);
    --alert-button-fill-hover: rgba(255, 255, 255, 0.15);
    --alert-button-fill-pressed: rgba(255, 255, 255, 0.4);
    --alert-button-fill-dangerous: rgba(255, 35, 35, 0.8);
    --alert-button-fill-dangerous-hover: rgba(255, 0, 0, 0.9);
    --alert-button-fill-dangerous-pressed: rgba(200, 0, 0, 0.8);
    --dark-button-fill: rgba(255, 255, 255, 0.2);
    --dark-button-fill-hover: rgba(255, 255, 255, 0.25);
    --dark-button-fill-pressed: rgba(255, 255, 255, 0.4);
    --dark-button-fill-disabled: rgba(255, 255, 255, 0.2);
    --inline-button-content-hover: black;
    --inline-button-content-pressed: white;
    --light-glass-button-inner-shadow-color: rgba(255, 255, 255, 1);
    --dark-glass-button-inner-shadow-color: rgba(255, 255, 255, 0.7);
    --glass-button-inner-shadow-color: var(--light-glass-button-inner-shadow-color);
    --light-glass-button-fill-hover: rgba(255, 255, 255, 1);
    --dark-glass-button-fill-hover: rgba(255, 255, 255, 1);
    --glass-button-fill-hover: var(--light-glass-button-fill-hover);
    --light-glass-button-fill-alpha: 0.05;
    --dark-glass-button-fill-alpha: 0.95;
    --glass-button-fill-alpha: var(--light-glass-button-fill-alpha);
    
    --thumbnail-shadow-edge-color: rgba(0, 0, 0, 0.4);
    --dark-thumbnail-shadow-edge-color: rgba(0, 0, 0, 0.6);
    --thumbnail-highlight-color: rgba(255, 255, 255, 0.35);
    --thumbnail-loading-color: rgb(190, 190, 190);
    --thumbnail-badge-shadow-color: rgba(0, 0, 0, 0.5);
    --thumbnail-badge-content-color: rgb(51, 51, 51);
    --dark-thumbnail-badge-content-color: black;
    
    --dimple-rgb: 255, 59, 46;
    --dimple-color: display-p3 0.92 0.31 0.24;
    
    --light-schedule-hover-background-color: rgba(255, 255, 255, 0.75);
    --dark-schedule-hover-background-color: rgba(0, 0, 0, 0.75);
    --schedule-hover-background-color: var(--light-schedule-hover-background-color);
    --light-schedule-highlight-edge-alpha: 0;
    --dark-schedule-highlight-edge-alpha: 0.2;
    --schedule-highlight-edge-alpha: var(--light-schedule-highlight-edge-alpha);
    --light-schedule-hour-ticks-alpha: 1;
    --dark-schedule-hour-ticks-alpha: 0.75;
    --schedule-hour-ticks-alpha: var(--light-schedule-hour-ticks-alpha);
    
    --season-winter-bright-rgb: var(--light-season-winter-bright-rgb);
    --season-winter-bright-color: var(--light-season-winter-bright-color);
    --season-spring-bright-rgb: var(--light-season-spring-bright-rgb);
    --season-spring-bright-color: var(--light-season-spring-bright-color);
    --season-summer-bright-rgb: var(--light-season-summer-bright-rgb);
    --season-summer-bright-color: var(--light-season-summer-bright-color);
    --season-fall-bright-rgb: var(--light-season-fall-bright-rgb);
    --season-fall-bright-color: var(--light-season-fall-bright-color);
    --season-announced-bright-rgb: var(--light-season-announced-bright-rgb);
    --season-announced-bright-color: var(--light-season-announced-bright-color);
}

.dark {
    --thumbnail-shadow-edge-color: var(--dark-thumbnail-shadow-edge-color);
    --fill-color: rgb(60, 60, 60);
    --fill-color-transparent: var(--dark-fill-color-transparent);
    --fill-color-transparent-hover: var(--dark-fill-color-transparent-hover);
    --highlight-color: var(--dark-highlight-color);
    --shadow-edge-color: var(--dark-shadow-edge-color);
    --content-color: var(--dark-content-color);
    
    --season-announced-primary-rgb: var(--dark-season-announced-primary-rgb);
    --season-announced-primary-color: var(--dark-season-announced-primary-color);
    --season-announced-bright-rgb: var(--dark-season-announced-bright-rgb);
    --season-announced-bright-color: var(--dark-season-announced-bright-color);
    
    --season-shadow-edge-alpha: var(--dark-season-shadow-edge-alpha);
    --season-shadow-alpha: var(--dark-season-shadow-alpha);
    --season-shadow-rgb: var(--dark-season-shadow-rgb);
    --season-shadow-color: var(--dark-season-shadow-color);
    --season-header-shadow-top-image: var(--dark-season-header-shadow-top-image);
    --season-header-shadow-bottom-image: var(--dark-season-header-shadow-bottom-image);
    
    --segmented-control-background-color-alpha: var(--dark-segmented-control-background-color-alpha);
    --segmented-control-shadow-edge-alpha: var(--dark-segmented-control-shadow-edge-alpha);
    --segmented-control-highlight-edge-alpha: var(--dark-segmented-control-highlight-edge-alpha);
    --segmented-control-shadow-alpha: var(--dark-segmented-control-shadow-alpha);
    --segmented-control-dimple-shadow-alpha: var(--dark-segmented-control-dimple-shadow-alpha);
    
    --schedule-hover-background-color: var(--dark-schedule-hover-background-color);
    --schedule-highlight-edge-alpha: var(--dark-schedule-highlight-edge-alpha);
    --schedule-hour-ticks-alpha: var(--dark-schedule-hour-ticks-alpha);
    
    --glass-button-inner-shadow-color: var(--dark-glass-button-inner-shadow-color);
    --glass-button-fill-hover: var(--dark-glass-button-fill-hover);
    --glass-button-fill-alpha: var(--dark-glass-button-fill-alpha);
}

@media (prefers-color-scheme: dark) {
    :root {
        --thumbnail-shadow-edge-color: var(--dark-thumbnail-shadow-edge-color);
        --fill-color: rgb(60, 60, 60);
        --fill-color-transparent: var(--dark-fill-color-transparent);
        --fill-color-transparent-hover: var(--dark-fill-color-transparent-hover);
        --highlight-color: var(--dark-highlight-color);
        --shadow-edge-color: var(--dark-shadow-edge-color);
        --content-color: var(--dark-content-color);
        
        --season-announced-primary-rgb: var(--dark-season-announced-primary-rgb);
        --season-announced-primary-color: var(--dark-season-announced-primary-color);
        --season-announced-bright-rgb: var(--dark-season-announced-bright-rgb);
        --season-announced-bright-color: var(--dark-season-announced-bright-color);
        
        --season-shadow-edge-alpha: var(--dark-season-shadow-edge-alpha);
        --season-shadow-alpha: var(--dark-season-shadow-alpha);
        --season-shadow-rgb: var(--dark-season-shadow-rgb);
        --season-shadow-color: var(--dark-season-shadow-color);
        --season-header-shadow-top-image: var(--dark-season-header-shadow-top-image);
        --season-header-shadow-bottom-image: var(--dark-season-header-shadow-bottom-image);
        
        --segmented-control-background-color-alpha: var(--dark-segmented-control-background-color-alpha);
        --segmented-control-shadow-edge-alpha: var(--dark-segmented-control-shadow-edge-alpha);
        --segmented-control-highlight-edge-alpha: var(--dark-segmented-control-highlight-edge-alpha);
        --segmented-control-shadow-alpha: var(--dark-segmented-control-shadow-alpha);
        --segmented-control-dimple-shadow-alpha: var(--dark-segmented-control-dimple-shadow-alpha);
        
        --schedule-hover-background-color: var(--dark-schedule-hover-background-color);
        --schedule-highlight-edge-alpha: var(--dark-schedule-highlight-edge-alpha);
        --schedule-hour-ticks-alpha: var(--dark-schedule-hour-ticks-alpha);
        
        --glass-button-inner-shadow-color: var(--dark-glass-button-inner-shadow-color);
        --glass-button-fill-hover: var(--dark-glass-button-fill-hover);
        --glass-button-fill-alpha: var(--dark-glass-button-fill-alpha);
    }
}

@view-transition {
    navigation: auto;
}

/* Page Structure */

html {
    max-width: 100%;
    overflow-x: hidden;
}

body,
.light body,
body.light {
    font-family: ui-rounded, system-ui, sans-serif;
    margin: 0px auto;
    min-width: 320px;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: clip;
    font-size: 16px;
    /* padding: 0px 70px 0px 70px; */
    background-position-x: center;
    /* background-attachment: fixed; */
    background-size: 372px 372px;
    background-color: rgb(var(--season-header-rgb));
    background-color: color(var(--season-header-color));
    background-image: var(--season-header-image);
    
    --season-header-image: var(--light-season-header-image);
    --season-header-rgb: var(--light-season-header-rgb);
    --season-header-color: var(--light-season-header-color);
    
    --season-winter-primary-rgb: var(--light-season-winter-primary-rgb);
    --season-winter-primary-color: var(--light-season-winter-primary-color);
    --season-spring-primary-rgb: var(--light-season-spring-primary-rgb);
    --season-spring-primary-color: var(--light-season-spring-primary-color);
    --season-summer-primary-rgb: var(--light-season-summer-primary-rgb);
    --season-summer-primary-color: var(--light-season-summer-primary-color);
    --season-fall-primary-rgb: var(--light-season-fall-primary-rgb);
    --season-fall-primary-color: var(--light-season-fall-primary-color);
    
    --season-winter-bright-rgb: var(--light-season-winter-bright-rgb);
    --season-winter-bright-color: var(--light-season-winter-bright-color);
    --season-spring-bright-rgb: var(--light-season-spring-bright-rgb);
    --season-spring-bright-color: var(--light-season-spring-bright-color);
    --season-summer-bright-rgb: var(--light-season-summer-bright-rgb);
    --season-summer-bright-color: var(--light-season-summer-bright-color);
    --season-fall-bright-rgb: var(--light-season-fall-bright-rgb);
    --season-fall-bright-color: var(--light-season-fall-bright-color);
}

.dark body,
body.dark {
    --season-header-image: var(--dark-season-header-image);
    --season-header-rgb: var(--dark-season-header-rgb);
    --season-header-color: var(--dark-season-header-color);
    
    --season-winter-primary-rgb: var(--dark-season-winter-primary-rgb);
    --season-winter-primary-color: var(--dark-season-winter-primary-color);
    --season-spring-primary-rgb: var(--dark-season-spring-primary-rgb);
    --season-spring-primary-color: var(--dark-season-spring-primary-color);
    --season-summer-primary-rgb: var(--dark-season-summer-primary-rgb);
    --season-summer-primary-color: var(--dark-season-summer-primary-color);
    --season-fall-primary-rgb: var(--dark-season-fall-primary-rgb);
    --season-fall-primary-color: var(--dark-season-fall-primary-color);
    
    --season-winter-bright-rgb: var(--dark-season-winter-bright-rgb);
    --season-winter-bright-color: var(--dark-season-winter-bright-color);
    --season-spring-bright-rgb: var(--dark-season-spring-bright-rgb);
    --season-spring-bright-color: var(--dark-season-spring-bright-color);
    --season-summer-bright-rgb: var(--dark-season-summer-bright-rgb);
    --season-summer-bright-color: var(--dark-season-summer-bright-color);
    --season-fall-bright-rgb: var(--dark-season-fall-bright-rgb);
    --season-fall-bright-color: var(--dark-season-fall-bright-color);
}

@media (prefers-color-scheme: dark) {
    body {
        --season-header-image: var(--dark-season-header-image);
        --season-header-rgb: var(--dark-season-header-rgb);
        --season-header-color: var(--dark-season-header-color);
        
        --season-winter-primary-rgb: var(--dark-season-winter-primary-rgb);
        --season-winter-primary-color: var(--dark-season-winter-primary-color);
        --season-spring-primary-rgb: var(--dark-season-spring-primary-rgb);
        --season-spring-primary-color: var(--dark-season-spring-primary-color);
        --season-summer-primary-rgb: var(--dark-season-summer-primary-rgb);
        --season-summer-primary-color: var(--dark-season-summer-primary-color);
        --season-fall-primary-rgb: var(--dark-season-fall-primary-rgb);
        --season-fall-primary-color: var(--dark-season-fall-primary-color);
        
        --season-winter-bright-rgb: var(--dark-season-winter-bright-rgb);
        --season-winter-bright-color: var(--dark-season-winter-bright-color);
        --season-spring-bright-rgb: var(--dark-season-spring-bright-rgb);
        --season-spring-bright-color: var(--dark-season-spring-bright-color);
        --season-summer-bright-rgb: var(--dark-season-summer-bright-rgb);
        --season-summer-bright-color: var(--dark-season-summer-bright-color);
        --season-fall-bright-rgb: var(--dark-season-fall-bright-rgb);
        --season-fall-bright-color: var(--dark-season-fall-bright-color);
    }
}

button {
    font-family: inherit;
}

@media all and (display-mode: standalone) {
    body {
        user-select: none;
        -webkit-user-select: none;
    }
}

h1 {
    font-size: 3.625rem;
    line-height: 3.563rem;
    font-weight: bold;
}

.section,
.light .section,
.light.section {
    position: relative;
    background-position-x: center;
    /* background-attachment: fixed; */
    background-size: 372px 372px;
    color: rgb(var(--season-primary-rgb));
    color: color(var(--season-primary-color));
    background-image: var(--season-content-image);
    background-color: rgb(var(--season-content-rgb));
    background-color: color(var(--season-content-color));
    
    --season-shadow-edge-alpha: var(--light-season-shadow-edge-alpha);
    --season-shadow-alpha: var(--light-season-shadow-alpha);
    --season-shadow-rgb: var(--light-season-shadow-rgb);
    --season-shadow-color: var(--light-season-shadow-color);
    --season-header-shadow-top-image: var(--light-season-header-shadow-top-image);
    --season-header-shadow-bottom-image: var(--light-season-header-shadow-bottom-image);
    
    --season-content-image: var(--light-season-content-image);
    --season-content-rgb: var(--light-season-content-rgb);
    --season-content-color: var(--light-season-content-color);
    
    --season-header-image: var(--light-season-header-image);
    --season-header-rgb: var(--light-season-header-rgb);
    --season-header-color: var(--light-season-header-color);
    
    --season-primary-rgb: var(--light-season-primary-rgb);
    --season-primary-color: var(--light-season-primary-color);
    --season-bright-rgb: var(--light-season-bright-rgb);
    --season-bright-color: var(--light-season-bright-color);
    
    --season-winter-primary-rgb: var(--light-season-winter-primary-rgb);
    --season-winter-primary-color: var(--light-season-winter-primary-color);
    --season-spring-primary-rgb: var(--light-season-spring-primary-rgb);
    --season-spring-primary-color: var(--light-season-spring-primary-color);
    --season-summer-primary-rgb: var(--light-season-summer-primary-rgb);
    --season-summer-primary-color: var(--light-season-summer-primary-color);
    --season-fall-primary-rgb: var(--light-season-fall-primary-rgb);
    --season-fall-primary-color: var(--light-season-fall-primary-color);
    
    --season-winter-bright-rgb: var(--light-season-winter-bright-rgb);
    --season-winter-bright-color: var(--light-season-winter-bright-color);
    --season-spring-bright-rgb: var(--light-season-spring-bright-rgb);
    --season-spring-bright-color: var(--light-season-spring-bright-color);
    --season-summer-bright-rgb: var(--light-season-summer-bright-rgb);
    --season-summer-bright-color: var(--light-season-summer-bright-color);
    --season-fall-bright-rgb: var(--light-season-fall-bright-rgb);
    --season-fall-bright-color: var(--light-season-fall-bright-color);
    
    --season-head-image: var(--light-season-head-image);
    --season-small-head-image: var(--light-season-small-head-image);
    --season-hand-image: var(--light-season-hand-image);
    --season-small-hand-image: var(--light-season-small-hand-image);
}

.dark .section,
.dark.section {
    --season-shadow-edge-alpha: var(--dark-season-shadow-edge-alpha);
    --season-shadow-alpha: var(--dark-season-shadow-alpha);
    --season-shadow-rgb: var(--dark-season-shadow-rgb);
    --season-shadow-color: var(--dark-season-shadow-color);
    --season-header-shadow-top-image: var(--dark-season-header-shadow-top-image);
    --season-header-shadow-bottom-image: var(--dark-season-header-shadow-bottom-image);
    
    --season-content-image: var(--dark-season-content-image);
    --season-content-rgb: var(--dark-season-content-rgb);
    --season-content-color: var(--dark-season-content-color);
    
    --season-header-image: var(--dark-season-header-image);
    --season-header-rgb: var(--dark-season-header-rgb);
    --season-header-color: var(--dark-season-header-color);
    
    --season-primary-rgb: var(--dark-season-primary-rgb);
    --season-primary-color: var(--dark-season-primary-color);
    --season-bright-rgb: var(--dark-season-bright-rgb);
    --season-bright-color: var(--dark-season-bright-color);
    
    --season-winter-primary-rgb: var(--dark-season-winter-primary-rgb);
    --season-winter-primary-color: var(--dark-season-winter-primary-color);
    --season-spring-primary-rgb: var(--dark-season-spring-primary-rgb);
    --season-spring-primary-color: var(--dark-season-spring-primary-color);
    --season-summer-primary-rgb: var(--dark-season-summer-primary-rgb);
    --season-summer-primary-color: var(--dark-season-summer-primary-color);
    --season-fall-primary-rgb: var(--dark-season-fall-primary-rgb);
    --season-fall-primary-color: var(--dark-season-fall-primary-color);
    
    --season-winter-bright-rgb: var(--dark-season-winter-bright-rgb);
    --season-winter-bright-color: var(--dark-season-winter-bright-color);
    --season-spring-bright-rgb: var(--dark-season-spring-bright-rgb);
    --season-spring-bright-color: var(--dark-season-spring-bright-color);
    --season-summer-bright-rgb: var(--dark-season-summer-bright-rgb);
    --season-summer-bright-color: var(--dark-season-summer-bright-color);
    --season-fall-bright-rgb: var(--dark-season-fall-bright-rgb);
    --season-fall-bright-color: var(--dark-season-fall-bright-color);
    
    --season-head-image: var(--dark-season-head-image);
    --season-small-head-image: var(--dark-season-small-head-image);
    --season-hand-image: var(--dark-season-hand-image);
    --season-small-hand-image: var(--dark-season-small-hand-image);
}

@media (prefers-color-scheme: dark) {
    .section {
        --season-shadow-edge-alpha: var(--dark-season-shadow-edge-alpha);
        --season-shadow-alpha: var(--dark-season-shadow-alpha);
        --season-shadow-rgb: var(--dark-season-shadow-rgb);
        --season-shadow-color: var(--dark-season-shadow-color);
        --season-header-shadow-top-image: var(--dark-season-header-shadow-top-image);
        --season-header-shadow-bottom-image: var(--dark-season-header-shadow-bottom-image);
        
        --season-content-image: var(--dark-season-content-image);
        --season-content-rgb: var(--dark-season-content-rgb);
        --season-content-color: var(--dark-season-content-color);
        
        --season-header-image: var(--dark-season-header-image);
        --season-header-rgb: var(--dark-season-header-rgb);
        --season-header-color: var(--dark-season-header-color);
        
        --season-primary-rgb: var(--dark-season-primary-rgb);
        --season-primary-color: var(--dark-season-primary-color);
        --season-bright-rgb: var(--dark-season-bright-rgb);
        --season-bright-color: var(--dark-season-bright-color);
        
        --season-winter-primary-rgb: var(--dark-season-winter-primary-rgb);
        --season-winter-primary-color: var(--dark-season-winter-primary-color);
        --season-spring-primary-rgb: var(--dark-season-spring-primary-rgb);
        --season-spring-primary-color: var(--dark-season-spring-primary-color);
        --season-summer-primary-rgb: var(--dark-season-summer-primary-rgb);
        --season-summer-primary-color: var(--dark-season-summer-primary-color);
        --season-fall-primary-rgb: var(--dark-season-fall-primary-rgb);
        --season-fall-primary-color: var(--dark-season-fall-primary-color);
        
        --season-winter-bright-rgb: var(--dark-season-winter-bright-rgb);
        --season-winter-bright-color: var(--dark-season-winter-bright-color);
        --season-spring-bright-rgb: var(--dark-season-spring-bright-rgb);
        --season-spring-bright-color: var(--dark-season-spring-bright-color);
        --season-summer-bright-rgb: var(--dark-season-summer-bright-rgb);
        --season-summer-bright-color: var(--dark-season-summer-bright-color);
        --season-fall-bright-rgb: var(--dark-season-fall-bright-rgb);
        --season-fall-bright-color: var(--dark-season-fall-bright-color);
        
        --season-head-image: var(--dark-season-head-image);
        --season-small-head-image: var(--dark-season-small-head-image);
        --season-hand-image: var(--dark-season-hand-image);
        --season-small-hand-image: var(--dark-season-small-hand-image);
    }
}

.header {
    position: relative;
    z-index: 1;
    background-position-x: center;
    /* background-attachment: fixed; */
    background-size: 372px 372px;
    background-image: var(--season-header-image);
    background-color: rgb(var(--season-header-rgb));
    background-color: color(var(--season-header-color));
}

.section::after {
    display: block;
    position: absolute;
    content: "";
    bottom: -1px;
    left: 0px;
    right: 0px;
    height: 65px;
    z-index: 2;
    background-size: 100% 100%;
    background-image: var(--season-header-shadow-top-image);
    image-rendering: pixelated;
    pointer-events: none;
}

.header::after {
    display: block;
    position: absolute;
    content: "";
    bottom: -64px;
    left: 0px;
    right: 0px;
    height: 65px;
    background-size: 100% 100%;
    background-image: var(--season-header-shadow-bottom-image);
    image-rendering: pixelated;
    pointer-events: none;
}

.header .content {
    position: relative;
    max-width: 960px;
    margin: 0px auto;
    display: flex;
    flex-direction: column;
}

.header h1 {
    text-align: left;
    /* padding-top: 4px; */
    margin-block: 0rem; /*removes the top/bottom spacing h1 has*/
    margin: 30px 40px;
}

.section > .content {
    position: relative;
    max-width: 960px;
    margin: 0px auto;
    padding-bottom: 100px;
}

@media all and (display-mode: standalone) {
    .section > .content {
        min-height: calc(100vh - 55px);
    }
}

.section > .content.wide {
    max-width: none;
    margin: 0px 0px;
}

.section > .content h1 {
    text-align: center;
    margin-block: 0rem; /*removes the top/bottom spacing h1 has*/
    padding-bottom: 30px;
}


/* Top Header */

.header.top .content {
    position: relative;
    display: flex;
    flex-direction: row;
    border-radius: 0px;
    height: 110px;
    align-items: center;
    overflow: visible;
}

.header.top.slim .content {
    height: 55px;
}

@media screen and ((max-width: 940px) and (not(display-mode))),
       screen and ((max-width: 940px) and (display-mode: browser)),
       screen and ((max-width: 740px) and (display-mode: standalone)) {
    .header.top .content {
        height: 55px;
    }
}

.header.top.slim {
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 5
}

@media screen and ((max-width: 940px) and (not(display-mode))),
       screen and ((max-width: 940px) and (display-mode: browser)),
       screen and ((max-width: 740px) and (display-mode: standalone)) {
    .header.top {
        position: fixed;
        width: 100%;
        top: 0px;
        z-index: 5
    }
}

.section.top:has(.header.top.slim) {
    margin-top: 55px;
}

@media screen and ((max-width: 940px) and (not(display-mode))),
       screen and ((max-width: 940px) and (display-mode: browser)),
       screen and ((max-width: 740px) and (display-mode: standalone)) {
    .section.top {
        margin-top: 55px;
    }
}

.header.top .content::after,
.header.bottom .content::after {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-size: 960px 177px;
    background-position: center center;
    pointer-events: none;
    z-index: 0;
    background-image: var(--season-petals-image);
}

.header.top .icon {
    position: relative;
    display: block;
    width: 130px;
    height: 110px;
    margin: 0px 14px 0px 11px;
    flex-grow: 0;
    flex-shrink: 0;
    z-index: 2;
}

.header.top.slim .icon {
    width: 65px;
    height: 55px;
    margin: 0px 2px 0px -19px;
}

@media screen and ((max-width: 940px) and (not(display-mode))),
       screen and ((max-width: 940px) and (display-mode: browser)),
       screen and ((max-width: 740px) and (display-mode: standalone)) {
    .header.top .icon {
        width: 65px;
        height: 55px;
        margin: 0px 2px 0px -19px;
    }
}

.header.top .icon .head {
    position: absolute;
    display: block;
    width: 130px;
    height: 110px;
    background-size: 100% 100%;
    background-image: var(--season-head-image);
}

.header.top.slim .icon .head {
    width: 65px;
    height: 55px;
    background-image: var(--season-small-head-image);
}

@media screen and ((max-width: 940px) and (not(display-mode))),
       screen and ((max-width: 940px) and (display-mode: browser)),
       screen and ((max-width: 740px) and (display-mode: standalone)) {
    .header.top .icon .head {
        width: 65px;
        height: 55px;
        background-image: var(--season-small-head-image);
    }
}

.header.top .icon .hand {
    position: absolute;
    width: 72px;
    height: 50px;
    top: 102px;
    left: 63px;
    z-index: 2;
    background-size: 100% 100%;
    background-image: var(--season-hand-image);
}

.header.top.slim .icon .hand {
    width: 36px;
    height: 25px;
    top: 51px;
    left: 31px;
    background-image: var(--season-small-hand-image);
}

@media screen and ((max-width: 940px) and (not(display-mode))),
       screen and ((max-width: 940px) and (display-mode: browser)),
       screen and ((max-width: 740px) and (display-mode: standalone)) {
    .header.top .icon .hand {
        width: 36px;
        height: 25px;
        top: 51px;
        left: 31px;
        background-image: var(--season-small-hand-image);
    }
}

.header.top .title {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1;
    padding: 12px 24px 16px 0px;
    height: 100%;
    box-sizing: border-box;
    flex-grow: 1;
    flex-shrink: 1;
}

.header.top.slim .title {
    flex-direction: row;
    gap: 10px;
    padding: 0px 12px 0px 0px;
    align-items: center;
}

@media screen and ((max-width: 940px) and (not(display-mode))),
       screen and ((max-width: 940px) and (display-mode: browser)),
       screen and ((max-width: 740px) and (display-mode: standalone)) {
    .header.top .title {
        flex-direction: row;
        gap: 10px;
        padding: 0px 12px 0px 0px;
        align-items: center;
    }
}

.header.top .title h1 {
    line-height: 1;
    font-size: 43px; 
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 22px;
    margin-right: 0px;
    margin-block: 0rem;
    flex-shrink: 0;
}

.header.top.slim .title h1 {
    font-size: 30px;
    margin-left: -30px;
    width: auto;
    max-width: 0px;
    opacity: 0;
    transition: margin-left 2s ease-in-out, opacity 1s linear, max-width 2s ease-out;
}

@media screen and ((max-width: 940px) and (not(display-mode))),
       screen and ((max-width: 940px) and (display-mode: browser)),
       screen and ((max-width: 740px) and (display-mode: standalone)) {
    .header.top .title h1 {
        font-size: 30px;
        margin-left: -30px;
        width: auto;
        max-width: 0px;
        opacity: 0;
        transition: margin-left 2s ease-in-out, opacity 1s linear, max-width 2s ease-out;
    }
}

.header.top .navigation {
    width: 100%;
    position: relative;
    height: 33px;
    padding: 3px 8px;
    box-sizing: border-box;
    z-index: 2;
    /* overflow: hidden; */
    
    display: flex;
    flex-direction: row;
    
    border-radius: 16.5px;
    background-color: rgba(var(--season-shadow-rgb), var(--segmented-control-background-color-alpha));
    background-color: color(var(--season-shadow-color) / var(--segmented-control-background-color-alpha));
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    
    outline: 1px solid rgba(var(--season-shadow-rgb), var(--segmented-control-shadow-edge-alpha));
    outline: 1px solid color(var(--season-shadow-color) / var(--segmented-control-shadow-edge-alpha));
    outline-offset: -1px;
    
    box-shadow: inset 0px 1px 5px 0px rgba(var(--season-shadow-rgb), var(--segmented-control-shadow-alpha));
    box-shadow: inset 0px 1px 5px 0px color(var(--season-shadow-color) / var(--segmented-control-shadow-alpha));
}

.header.top .navigation::before {
    content: "";
    position: absolute;
    inset: 0px;
    border-radius: inherit;
    outline: 1.5px solid rgba(var(--season-primary-rgb), var(--segmented-control-highlight-edge-alpha));
    outline: 1.5px solid color(var(--season-primary-color) / var(--segmented-control-highlight-edge-alpha));
    outline-offset: 0px;
}

.header.top .navigation a {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    
    padding: 0px 18px;
    margin: 0px -5px;
    border-radius: 13.5px;
    
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: center;
    width: 0px;
    flex-basis: min-content; 
    
    color: rgb(var(--season-primary-rgb));
    color: color(var(--season-primary-color));
    text-decoration: none;
    font-weight: 600;
    font-size: 17px;
}

.header.top .navigation a span {
    position: relative;
    display: block;
    width: 100%;
    opacity: 1;
    max-width: min-content;
    overflow: hidden;
}


.header.top .navigation a.current {
    color: rgb(var(--light-season-primary-rgb));
    color: color(var(--light-season-primary-color));
    background-color: white;
    
    outline: 1px solid rgba(var(--season-shadow-rgb), var(--segmented-control-shadow-edge-alpha));
    outline: 1px solid color(var(--season-shadow-color) / var(--segmented-control-shadow-edge-alpha));
    
    box-shadow: 0px 2px 10px 0px rgba(var(--season-shadow-rgb), var(--segmented-control-dimple-shadow-alpha));
    box-shadow: 0px 2px 10px 0px color(var(--season-shadow-color) / var(--segmented-control-dimple-shadow-alpha));
    width: 100%;
    z-index: 1;
}

@media (hover) {
    .header.top .navigation:hover a.current:hover {
        color: rgb(var(--light-season-primary-rgb));
        color: color(var(--light-season-primary-color));
        background-color: white;
        
        outline: 1px solid rgba(var(--season-shadow-rgb), var(--segmented-control-shadow-edge-alpha));
        outline: 1px solid color(var(--season-shadow-color) / var(--segmented-control-shadow-edge-alpha));
        
        box-shadow: 0px 2px 10px 0px rgba(var(--season-shadow-rgb), var(--segmented-control-dimple-shadow-alpha));
        box-shadow: 0px 2px 10px 0px color(var(--season-shadow-color) / var(--segmented-control-dimple-shadow-alpha));
        width: 100%;
        z-index: 1;
    }
    
    .header.top .navigation:hover a.current {
        color: rgb(var(--season-primary-rgb));
        color: color(var(--season-primary-color));
        background-color: transparent;
        outline: none;
        box-shadow: none;
    }
    
    .header.top .navigation a:hover,
    .header.top .navigation:hover a:hover {
        color: rgb(var(--light-season-primary-rgb));
        color: color(var(--light-season-primary-color));
        background-color: white;
        
        outline: 1px solid rgba(var(--season-shadow-rgb), var(--segmented-control-shadow-edge-alpha));
        outline: 1px solid color(var(--season-shadow-color) / var(--segmented-control-shadow-edge-alpha));
        
        box-shadow: 0px 2px 10px 0px rgba(var(--season-shadow-rgb), var(--segmented-control-dimple-shadow-alpha));
        box-shadow: 0px 2px 10px 0px color(var(--season-shadow-color) / var(--segmented-control-dimple-shadow-alpha));
        width: 100%;
        z-index: 1;
    }
}

@media (hover) {
    .header.top .navigation a.current:hover span,
    .header.top .navigation a:hover span {
        width: 100%;
        opacity: 1;
    }
}

.header.top .navigation a div {
    position: relative;
    width: 30px;
    height: 27px;
    margin: 0px -5px;
    flex-shrink: 0;
}

.header.top .navigation a[href="/"] div {
    background-color: currentcolor;
    -webkit-mask-image: url("/images/navigation-app-large.svg");
    mask-image: url("/images/navigation-app-large.svg");
}

.header.top .navigation a[href="/schedule"] div {
    background-color: currentcolor;
    -webkit-mask-image: url("/images/navigation-schedule-large.svg");
    mask-image: url("/images/navigation-schedule-large.svg");
}

.header.top .navigation a[href="/seasons"] div {
    background-color: currentcolor;
    -webkit-mask-image: url("/images/navigation-seasons-large.svg");
    mask-image: url("/images/navigation-seasons-large.svg");
}

.header.top .navigation a[href="/search"] div {
    background-color: currentcolor;
    -webkit-mask-image: url("/images/navigation-search-large.svg");
    mask-image: url("/images/navigation-search-large.svg");
}

.header.top .navigation a[href="/lists"] div {
    background-color: currentcolor;
    -webkit-mask-image: url("/images/navigation-lists-large.svg");
    mask-image: url("/images/navigation-lists-large.svg");
}

.header.top .navigation a[href="/support"] div {
    background-color: currentcolor;
    -webkit-mask-image: url("/images/navigation-support-large.svg");
    mask-image: url("/images/navigation-support-large.svg");
}

.header.top .navigation a[href="/account"] div {
    background-color: currentcolor;
    -webkit-mask-image: url("/images/navigation-account-large.svg");
    mask-image: url("/images/navigation-account-large.svg");
}

@media all and (display-mode: standalone) {
    .header.top .navigation a[href="/"],
    .header.top .navigation a[href="/support"] {
        display: none;
    }
}

@media screen and ((max-width: 665px) and (not(display-mode: standalone))),
       screen and ((max-width: 665px) and (display-mode: browser)),
       screen and ((max-width: 505px) and (display-mode: standalone)) {
    .header.top .navigation a.current span {
        width: 100%;
        opacity: 1;
    }
    
    @media (hover) {
        .header.top .navigation:hover a.current span {
            width: 0px;
            opacity: 0;
        }
    }
    
    .header.top .navigation a {
        padding: 0px 8px;
        flex-basis: 0; 
    }
    .header.top .navigation a span {
        width: 0px;
        opacity: 0;
    }
}

@media screen and ((max-width: 825px) and (not(display-mode))),
       screen and ((max-width: 825px) and (display-mode: browser)),
       screen and ((max-width: 630px) and (display-mode: standalone)) {
    .header.top .navigation {
        height: 25px;
        border-radius: 12.5px;
        padding: 3px 4px;
    }
    
    .header.top .navigation a {
        border-radius: 9.5px;
        gap: 4px;
        font-size: 13px;
        padding: 0px 12px;
        margin: 0 -1px;
    }
    
    .header.top .navigation a div {
        position: relative;
        width: 21px;
        height: 19px;
        margin: 0px -3px;
    }
    
    .header.top .navigation a[href="/"] div {
        -webkit-mask-image: url("/images/navigation-app-small.svg");
        mask-image: url("/images/navigation-app-small.svg");
    }
    
    .header.top .navigation a[href="/schedule"] div {
        -webkit-mask-image: url("/images/navigation-schedule-small.svg");
        mask-image: url("/images/navigation-schedule-small.svg");
    }
    
    .header.top .navigation a[href="/seasons"] div {
        -webkit-mask-image: url("/images/navigation-seasons-small.svg");
        mask-image: url("/images/navigation-seasons-small.svg");
    }
    
    .header.top .navigation a[href="/search"] div {
        -webkit-mask-image: url("/images/navigation-search-small.svg");
        mask-image: url("/images/navigation-search-small.svg");
    }
    
    .header.top .navigation a[href="/lists"] div {
        -webkit-mask-image: url("/images/navigation-lists-small.svg");
        mask-image: url("/images/navigation-lists-small.svg");
    }
    
    .header.top .navigation a[href="/support"] div {
        -webkit-mask-image: url("/images/navigation-support-small.svg");
        mask-image: url("/images/navigation-support-small.svg");
    }
    
    .header.top .navigation a[href="/account"] div {
        -webkit-mask-image: url("/images/navigation-account-small.svg");
        mask-image: url("/images/navigation-account-small.svg");
    }
}


/* Cards */

.card-collection {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 40px;
    margin: 0px 40px;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    margin: 40px 0px 0px 0px;
    width: 420px;
    height: auto;
    border-radius: 16px;
    box-shadow: 0px 7px 20px rgba(var(--season-shadow-rgb), var(--season-shadow-alpha));
    box-shadow: 0px 7px 20px color(var(--season-shadow-color) / var(--season-shadow-alpha));
    outline: 1px solid rgba(var(--season-shadow-rgb), var(--season-shadow-edge-alpha));
    outline: 1px solid color(var(--season-shadow-color) / var(--season-shadow-edge-alpha));
    outline-offset: 0px;
    background-color: var(--fill-color);
}

.card::before {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    outline: 1px solid var(--highlight-color);
    border: 1px solid var(--shadow-edge-color);
    outline-offset: -2px;
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
}

.card img {
    position: relative;
    display: block;
    border-radius: 16px 16px 0px 0px;
    width: 100%;
    aspect-ratio: 420 / 248;
}

.card:has(> img)::after {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    right: 0px;
    left: 0px;
    aspect-ratio: 420 / 248;
    background-size: 100% 100%;
    background-image: url("images/card-shading.png")
}

.label {
    margin: 6px 0px 0px 0px;
    padding-left: 16px;
    padding-right: 8px;
}

.label h2 {
    margin: 0px 0px;
    padding: 0px 0px;
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--content-color);
}

.label .tag {
    padding: 2px 4px;
    color: var(--dark-content-color);
    border-radius: 6px;
    font-size: 1rem;
    word-break: keep-all;
    background-color: rgb(var(--season-bright-rgb));
    background-color: color(var(--season-bright-color));
}

.label p {
    margin: 10px 0px;
    /* padding: 6px 0px 10px 0px; */
    text-align: left;
    font-size: 1.125rem;
    color: var(--content-color);
}

.card-grid {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0px;
    margin: 0px 40px;
}

.card-grid.card-group {
    padding: 10px 20px;
    margin: 0px 0px;
    background: rgba(var(--season-primary-rgb), 0.1);
    background: color(var(--season-primary-color) / 0.1);
    backdrop-filter: blur(6px);
    border-radius: 22px;
    outline: 2px solid rgba(var(--season-shadow-rgb), var(--season-shadow-edge-alpha));
    outline: 2px solid color(var(--season-shadow-color) / var(--season-shadow-edge-alpha));
    outline-offset: -1px;
}

/* Alerts */

html:has(.alert) {
    overflow: hidden; 
}

body > .alert {
    position: fixed;
    inset: 0;
    z-index: 100;
    background-color: rgba(var(--dark-season-shadow-rgb), 0.5);
    background-color: color(var(--dark-season-shadow-color) / 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}

body > .alert > .panel {
    position: relative;
    min-width: 280px;
    max-width: 360px;
    background: var(--dark-fill-color-transparent);
    margin: 20px;
    padding-bottom: 0px;
    box-sizing: border-box;
    color: var(--dark-content-color);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 22px;
    max-height: calc(100% - 40px);
    overflow-y: auto;
    pointer-events: all;
    
    border: 1px solid var(--dark-shadow-edge-color);
    outline: 1px solid var(--dark-highlight-color);
    outline-offset: -2px;
    
    box-shadow: 0px 10px 30px 0px var(--dark-shadow-color);
    
    display: flex;
    flex-direction: column;
    
    width: -webkit-fill-available;
    width: fill-available;
}

body > .alert > .panel > .title {
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    white-space: pre-line;
    margin: 20px 20px 18px;
}

body > .alert > .panel > .message {
    font-size: 14px; 
    text-align: center;
    white-space: pre-line; 
    text-wrap: balance;
    margin: -8px 20px 18px;
}

body > .alert > .panel > .content {
    position: relative;
    height: max-content;
    width: 100%;
    padding: 0px 16px 16px 16px;
    box-sizing: border-box;
    
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body > .alert > .panel > .content > input {
    border: 0px;
    border-radius: 6px;
    height: 36px;
    font-size: 14px;
    font-weight: 500;
    padding: 2px 8px;
}

body > .alert > .panel > .content > progress {
    align-self: center;
    width: 60%;
}

body > .alert > .panel > .buttons {
    position: relative;
    height: max-content;
    min-height: 52px;
    width: 100%;
    flex-shrink: 1;
    overflow-y: auto;
    padding-bottom: 16px;
    
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body > .alert > .panel > .buttons.compact {
    flex-direction: row;
    gap: 16px;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

body > .alert > .panel > .buttons > button {
    position: relative;
    border: 0px;
    border-radius: 6px;
    height: 36px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 500;
    color: inherit;
    background-color: var(--alert-button-fill);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px 16px;
    margin: 0px 16px;
    cursor: pointer;
}

body > .alert > .panel > .buttons.compact > button {
    flex-grow: 1;
    flex-basis: 20px;
    margin: 0px;
}

body > .alert > .panel > .buttons.disabled > button {
    opacity: 0.6;
    pointer-events: none;
}

body > .alert > .panel:has(input:invalid) > .buttons > button.requiresValidInputs {
    opacity: 0.6;
    pointer-events: none;
}

body > .alert > .panel > .buttons > button[kind="cancel"] {
    background-color: var(--alert-button-fill-cancel);
}

body > .alert > .panel > .buttons > button:hover {
    background-color: var(--alert-button-fill-hover);
}

body > .alert > .panel > .buttons > button:active:hover {
    background-color: var(--alert-button-fill-pressed);
}

body > .alert > .panel > .buttons > button[kind="dangerous"] {
    background-color: var(--alert-button-fill-dangerous);
    color: var(--dark-content-color-opaque);
}

body > .alert > .panel > .buttons > button[kind="dangerous"]:hover {
    background-color: var(--alert-button-fill-dangerous-hover);
}

body > .alert > .panel > .buttons > button[kind="dangerous"]:active:hover {
    background-color: var(--alert-button-fill-dangerous-pressed);
}

body > .alert > .panel > .buttons > button[kind="default"] {
    color: var(--dark-content-color-opaque);
    font-weight: 700;
}

/* Seasons */

.spring,
.seasonNNN {
    --light-season-primary-rgb: var(--light-season-spring-primary-rgb);
    --dark-season-primary-rgb: var(--dark-season-spring-primary-rgb);
    --light-season-primary-color: var(--light-season-spring-primary-color);
    --dark-season-primary-color: var(--dark-season-spring-primary-color);
    --light-season-bright-rgb: var(--light-season-spring-bright-rgb);
    --dark-season-bright-rgb: var(--dark-season-spring-bright-rgb);
    --light-season-bright-color: var(--light-season-spring-bright-color);
    --dark-season-bright-color: var(--dark-season-spring-bright-color);
    
    --light-season-content-image: var(--light-season-spring-content-image);
    --dark-season-content-image: var(--dark-season-spring-content-image);
    --light-season-content-rgb: var(--light-season-spring-content-rgb);
    --dark-season-content-rgb: var(--dark-season-spring-content-rgb);
    --light-season-content-color: var(--light-season-spring-content-color);
    --dark-season-content-color: var(--dark-season-spring-content-color);
    
    --light-season-header-image: var(--light-season-spring-header-image);
    --dark-season-header-image: var(--dark-season-spring-header-image);
    --light-season-header-rgb: var(--light-season-spring-header-rgb);
    --dark-season-header-rgb: var(--dark-season-spring-header-rgb);
    --light-season-header-color: var(--light-season-spring-header-color);
    --dark-season-header-color: var(--dark-season-spring-header-color);
    
    --light-season-shadow-rgb: var(--light-season-spring-shadow-rgb);
    --light-season-shadow-color: var(--light-season-spring-shadow-color);
    --dark-season-shadow-rgb: var(--dark-season-spring-shadow-rgb);
    --dark-season-shadow-color: var(--dark-season-spring-shadow-color);
    --light-season-header-shadow-top-image: var(--light-season-spring-header-shadow-top-image);
    --light-season-header-shadow-bottom-image: var(--light-season-spring-header-shadow-bottom-image);
    --dark-season-header-shadow-top-image: var(--dark-season-spring-header-shadow-top-image);
    --dark-season-header-shadow-bottom-image: var(--dark-season-spring-header-shadow-bottom-image);
    
    --season-petals-image: url("images/petals-spring.png");
    --light-season-head-image: url("images/jiiiii-chan-spring.png");
    --dark-season-head-image: url("images/jiiiii-chan-spring-dark.png");
    --light-season-small-head-image: url("images/jiiiii-chan-small-spring.png");
    --dark-season-small-head-image: url("images/jiiiii-chan-small-spring-dark.png");
    --light-season-hand-image: url("images/jiiiii-chan-hand-spring.png");
    --dark-season-hand-image: url("images/jiiiii-chan-hand-spring-dark.png");
    --light-season-small-hand-image: url("images/jiiiii-chan-small-hand-spring.png");
    --dark-season-small-hand-image: url("images/jiiiii-chan-small-hand-spring-dark.png");
}

.summer,
:root,
:root.light {
    --light-season-primary-rgb: var(--light-season-summer-primary-rgb);
    --dark-season-primary-rgb: var(--dark-season-summer-primary-rgb);
    --light-season-primary-color: var(--light-season-summer-primary-color);
    --dark-season-primary-color: var(--dark-season-summer-primary-color);
    --light-season-bright-rgb: var(--light-season-summer-bright-rgb);
    --dark-season-bright-rgb: var(--dark-season-summer-bright-rgb);
    --light-season-bright-color: var(--light-season-summer-bright-color);
    --dark-season-bright-color: var(--dark-season-summer-bright-color);
    
    --light-season-content-image: var(--light-season-summer-content-image);
    --dark-season-content-image: var(--dark-season-summer-content-image);
    --light-season-content-rgb: var(--light-season-summer-content-rgb);
    --dark-season-content-rgb: var(--dark-season-summer-content-rgb);
    --light-season-content-color: var(--light-season-summer-content-color);
    --dark-season-content-color: var(--dark-season-summer-content-color);
    
    --light-season-header-image: var(--light-season-summer-header-image);
    --dark-season-header-image: var(--dark-season-summer-header-image);
    --light-season-header-rgb: var(--light-season-summer-header-rgb);
    --dark-season-header-rgb: var(--dark-season-summer-header-rgb);
    --light-season-header-color: var(--light-season-summer-header-color);
    --dark-season-header-color: var(--dark-season-summer-header-color);
    
    --light-season-shadow-rgb: var(--light-season-summer-shadow-rgb);
    --light-season-shadow-color: var(--light-season-summer-shadow-color);
    --dark-season-shadow-rgb: var(--dark-season-summer-shadow-rgb);
    --dark-season-shadow-color: var(--dark-season-summer-shadow-color);
    --light-season-header-shadow-top-image: var(--light-season-summer-header-shadow-top-image);
    --light-season-header-shadow-bottom-image: var(--light-season-summer-header-shadow-bottom-image);
    --dark-season-header-shadow-top-image: var(--dark-season-summer-header-shadow-top-image);
    --dark-season-header-shadow-bottom-image: var(--dark-season-summer-header-shadow-bottom-image);
    
    --season-petals-image: url("images/petals-summer.png");
    --light-season-head-image: url("images/jiiiii-chan-summer.png");
    --dark-season-head-image: url("images/jiiiii-chan-summer-dark.png");
    --light-season-small-head-image: url("images/jiiiii-chan-small-summer.png");
    --dark-season-small-head-image: url("images/jiiiii-chan-small-summer-dark.png");
    --light-season-hand-image: url("images/jiiiii-chan-hand-summer.png");
    --dark-season-hand-image: url("images/jiiiii-chan-hand-summer-dark.png");
    --light-season-small-hand-image: url("images/jiiiii-chan-small-hand-summer.png");
    --dark-season-small-hand-image: url("images/jiiiii-chan-small-hand-summer-dark.png");
}

.fall,
.seasonN {
    --light-season-primary-rgb: var(--light-season-fall-primary-rgb);
    --dark-season-primary-rgb: var(--dark-season-fall-primary-rgb);
    --light-season-primary-color: var(--light-season-fall-primary-color);
    --dark-season-primary-color: var(--dark-season-fall-primary-color);
    --light-season-bright-rgb: var(--light-season-fall-bright-rgb);
    --dark-season-bright-rgb: var(--dark-season-fall-bright-rgb);
    --light-season-bright-color: var(--light-season-fall-bright-color);
    --dark-season-bright-color: var(--dark-season-fall-bright-color);
    
    --light-season-content-image: var(--light-season-fall-content-image);
    --dark-season-content-image: var(--dark-season-fall-content-image);
    --light-season-content-rgb: var(--light-season-fall-content-rgb);
    --dark-season-content-rgb: var(--dark-season-fall-content-rgb);
    --light-season-content-color: var(--light-season-fall-content-color);
    --dark-season-content-color: var(--dark-season-fall-content-color);
    
    --light-season-header-image: var(--light-season-fall-header-image);
    --dark-season-header-image: var(--dark-season-fall-header-image);
    --light-season-header-rgb: var(--light-season-fall-header-rgb);
    --dark-season-header-rgb: var(--dark-season-fall-header-rgb);
    --light-season-header-color: var(--light-season-fall-header-color);
    --dark-season-header-color: var(--dark-season-fall-header-color);
    
    --light-season-shadow-rgb: var(--light-season-fall-shadow-rgb);
    --light-season-shadow-color: var(--light-season-fall-shadow-color);
    --dark-season-shadow-rgb: var(--dark-season-fall-shadow-rgb);
    --dark-season-shadow-color: var(--dark-season-fall-shadow-color);
    --light-season-header-shadow-top-image: var(--light-season-fall-header-shadow-top-image);
    --light-season-header-shadow-bottom-image: var(--light-season-fall-header-shadow-bottom-image);
    --dark-season-header-shadow-top-image: var(--dark-season-fall-header-shadow-top-image);
    --dark-season-header-shadow-bottom-image: var(--dark-season-fall-header-shadow-bottom-image);
    
    --season-petals-image: url("images/petals-fall.png");
    --light-season-head-image: url("images/jiiiii-chan-fall.png");
    --dark-season-head-image: url("images/jiiiii-chan-fall-dark.png");
    --light-season-small-head-image: url("images/jiiiii-chan-small-fall.png");
    --dark-season-small-head-image: url("images/jiiiii-chan-small-fall-dark.png");
    --light-season-hand-image: url("images/jiiiii-chan-hand-fall.png");
    --dark-season-hand-image: url("images/jiiiii-chan-hand-fall-dark.png");
    --light-season-small-hand-image: url("images/jiiiii-chan-small-hand-fall.png");
    --dark-season-small-hand-image: url("images/jiiiii-chan-small-hand-fall-dark.png");
}

.winter,
.seasonNN {
    --light-season-primary-rgb: var(--light-season-winter-primary-rgb);
    --dark-season-primary-rgb: var(--dark-season-winter-primary-rgb);
    --light-season-primary-color: var(--light-season-winter-primary-color);
    --dark-season-primary-color: var(--dark-season-winter-primary-color);
    --light-season-bright-rgb: var(--light-season-winter-bright-rgb);
    --dark-season-bright-rgb: var(--dark-season-winter-bright-rgb);
    --light-season-bright-color: var(--light-season-winter-bright-color);
    --dark-season-bright-color: var(--dark-season-winter-bright-color);
    
    --light-season-content-image: var(--light-season-winter-content-image);
    --dark-season-content-image: var(--dark-season-winter-content-image);
    --light-season-content-rgb: var(--light-season-winter-content-rgb);
    --dark-season-content-rgb: var(--dark-season-winter-content-rgb);
    --light-season-content-color: var(--light-season-winter-content-color);
    --dark-season-content-color: var(--dark-season-winter-content-color);
    
    --light-season-header-image: var(--light-season-winter-header-image);
    --dark-season-header-image: var(--dark-season-winter-header-image);
    --light-season-header-rgb: var(--light-season-winter-header-rgb);
    --dark-season-header-rgb: var(--dark-season-winter-header-rgb);
    --light-season-header-color: var(--light-season-winter-header-color);
    --dark-season-header-color: var(--dark-season-winter-header-color);
    
    --light-season-shadow-rgb: var(--light-season-winter-shadow-rgb);
    --light-season-shadow-color: var(--light-season-winter-shadow-color);
    --dark-season-shadow-rgb: var(--dark-season-winter-shadow-rgb);
    --dark-season-shadow-color: var(--dark-season-winter-shadow-color);
    --light-season-header-shadow-top-image: var(--light-season-winter-header-shadow-top-image);
    --light-season-header-shadow-bottom-image: var(--light-season-winter-header-shadow-bottom-image);
    --dark-season-header-shadow-top-image: var(--dark-season-winter-header-shadow-top-image);
    --dark-season-header-shadow-bottom-image: var(--dark-season-winter-header-shadow-bottom-image);
    
    --season-petals-image: url("images/petals-winter.png");
    --light-season-head-image: url("images/jiiiii-chan-winter.png");
    --dark-season-head-image: url("images/jiiiii-chan-winter-dark.png");
    --light-season-small-head-image: url("images/jiiiii-chan-small-winter.png");
    --dark-season-small-head-image: url("images/jiiiii-chan-small-winter-dark.png");
    --light-season-hand-image: url("images/jiiiii-chan-hand-winter.png");
    --dark-season-hand-image: url("images/jiiiii-chan-hand-winter-dark.png");
    --light-season-small-hand-image: url("images/jiiiii-chan-small-hand-winter.png");
    --dark-season-small-hand-image: url("images/jiiiii-chan-small-hand-winter-dark.png");
}

/* Main Section */

#main.section {
    padding: 0px;
}

.pages {
    margin-right: 40px;
}
.pages a {
    padding: 0px 0px 0px 20px;
    text-decoration: none;
    font-size: 1.375rem;
}
.pages a:hover {
    text-decoration: underline;
}
.pages a.current {
    font-weight: bold;
}


#main > .content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#main .wallpaper-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 768px;
    height: 420px;
    margin-top: 100px;
    margin-bottom: 429px;
    font-size: 24px;
    gap: 30px;
}

#main .wallpaper-box .appStore {
    margin-bottom: -16px;
}

#main .wallpaper-box:has(.pwaButton.hidden) .appStore {
    margin-bottom: 0px;
}

#main .wallpaper-box button {
    position: relative;
    border: 0px;
    border-radius: 8px;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--bright-button-content-color);
    background-color: rgb(var(--season-bright-rgb));
    background-color: color(var(--season-bright-color));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 11px 20px;
    cursor: pointer;
}

#main .wallpaper-box button:active:hover {
    background-color: rgb(var(--light-season-shadow-rgb));
    background-color: color(var(--light-season-shadow-color));
}

#main .wallpaper-box .wallpaper-top {
    position: absolute;
    display: block;
    width: 1152px;
    height: 543px;
    bottom: 100%;
    right: 0.5%;
    background-size: 100% 100%;
    background-image: url("images/wallpaper-top.png");
}

#main .wallpaper-box .wallpaper-right {
    position: absolute;
    display: block;
    width: 548px;
    height: 627px;
    left: 100%;
    bottom: 0.5%;
    background-size: 100% 100%;
    background-image: url("images/wallpaper-right.png");
}

#main .wallpaper-box .wallpaper-bottom {
    position: absolute;
    display: block;
    width: 1153px;
    height: 429px;
    top: 100%;
    left: 1%;
    background-size: 100% 100%;
    background-image: url("images/wallpaper-bottom.png");
}

#main .wallpaper-box .wallpaper-left {
    position: absolute;
    display: block;
    width: 533px;
    height: 829px;
    top: 3%;
    right: 100%;
    background-size: 100% 100%;
    background-image: url("images/wallpaper-left.png");
}

#main .wallpaper-box h1 {
    font-size: 2.5em;
    text-align: center;
    line-height: 0.95;
    padding: 0;
}

#main > .content p {
    text-align: center;
    font-size: 1em;
    margin: 0;
}

@media screen and (max-width: 960px) {
    #main .wallpaper-box {
        width: calc(100vw * (768/960));
        height: calc(100vw * (420/960));
        margin-top: calc(100vw * (100/960));
        margin-bottom: calc(100vw * (429/960));
        gap: calc(100vw * (30/960));
        font-size: calc(100vw * (24/960));
    }
    
    #main .wallpaper-box .wallpaper-top {
        width: calc(100vw * (1152/960));
        height: calc(100vw * (543/960));
    }
    
    #main .wallpaper-box .wallpaper-right {
        width: calc(100vw * (548/960));
        height: calc(100vw * (627/960));
    }
    
    #main .wallpaper-box .wallpaper-bottom {
        width: calc(100vw * (1153/960));
        height: calc(100vw * (429/960));
    }
    
    #main .wallpaper-box .wallpaper-left {
        width: calc(100vw * (533/960));
        height: calc(100vw * (829/960));
    }
}

@media screen and (max-width: 600px) {
    #main .wallpaper-box {
        height: calc(100vw * (280/600));
        gap: calc(100vw * (30/600));
        font-size: calc(100vw * (20/600));
    }
    
    #main .wallpaper-box h1 {
        font-size: 1.8em
    }
    
    #main .wallpaper-box .wallpaper-left {
        top: 9%
    }
}

.appStore a {
    position: relative;
    display: block;
    width: 120px;
    height: 40px;
    background-size: 120px 40px;
    background-image: url("images/app_store_download_badge.svg");
    color: transparent;
}


/* Big Screen Section */

#big-screen .header img {
    position: relative;
    width: 1177px;
    height: 160px;
    margin-top: -30px;
}

@media screen and (max-width: 960px) {
    #big-screen .header img {
        position: relative;
        width: calc(100vw * (1177/960));
        height: calc(100vw * (160/960));
        margin-top: calc(100vw * (-30/960));
    }
}


/* Virtual Theater Section */

#virtual-theater .header img {
    position: relative;
    width: 960px;
    height: 160px;
    margin-top: -30px;
}

@media screen and (max-width: 960px) {
    #virtual-theater .header img {
        position: relative;
        width: calc(100vw * (960/960));
        height: calc(100vw * (160/960));
        margin-top: calc(100vw * (-30/960));
    }
}


/* At Work Section */

#at-work .header img {
    position: relative;
    width: 1123px;
    height: 160px;
    left: -163px;
    margin-top: -30px;
}

@media screen and (max-width: 960px) {
    #at-work .header img {
        position: relative;
        width: calc(100vw * (1123/960));
        height: calc(100vw * (160/960));
        left: calc(100vw * (-163/960));
        margin-top: calc(100vw * (-30/960));
    }
}


/* On the Go Section */

#on-the-go .header img {
    position: relative;
    width: 1015px;
    height: 160px;
    margin-top: -30px;
}

@media screen and (max-width: 960px) {
    #on-the-go .header img {
        position: relative;
        width: calc(100vw * (1015/960));
        height: calc(100vw * (160/960));
        margin-top: calc(100vw * (-30/960));
    }
}


/* Membership Section */

#membership .card-collection {
    gap: 28px;
    margin: 0px 0px;
}

#membership h1 {
    padding-bottom: 0px;
}

#membership > .content h1 {
    text-align: left;
    margin-top: 40px;
    margin-left: 40px;
}

#membership .header p {
    text-align: left;
    font-size: 1.438rem;
    margin: 30px 40px;
    margin-top: 0px;
}

.membership-card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 10px 0px;
    width: 426px;
    height: auto;
    font-size: 16px;
    gap: 0.875em;
}

@media screen and (max-width: 960px) {
    .membership-card {
        font-size: calc(max((100vw - 80px) * (16/(960 - 80)), 12px));
    }
}

@media screen and (max-width: 600px) {
    .membership-card {
        font-size: calc(max((100vw - 80px) * (18/(600 - 80)), 12px));
    }
}

.membership-card img {
    width: 140px;
    height: 90px;
}

.membership-card .label {
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    font-size: 1em;
}

.membership-card .label h2 {
    font-size: 1.25em;
    margin: 0;
}

.membership-card .label p {
    margin: 0px;
    font-size: 1em;
    margin-bottom: 0px;
}


/* Download Section */

#download .header h1 {
    text-align: center;
}

#download .card-grid {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 40px;
    margin: 0px 40px;
}

#download .card-collection {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 40px;
    margin: 0px 0px;
}

#download .card {
    align-items: center;
    width: 190px;
    height: 281px;
}

#download .card::after {
    display: none;
}

#download .card img {
    width: unset;
    aspect-ratio: unset;
}

#download .icon {
    position: relative;
    display: block;
    background-color: rgb(var(--season-bright-rgb));
    background-color: color(var(--season-bright-color));
    margin-top: 23px;
    -webkit-mask-size: 100%;
    mask-size: 100%;
}

#download .icon.tv {
    width: 106px;
    height: 84px;
    -webkit-mask-image: url(/images/tv-icon.png);
    mask-image: url(/images/tv-icon.png);
}

#download .icon.mac {
    width: 120px;
    height: 84px;
    -webkit-mask-image: url(/images/mac-icon.png);
    mask-image: url(/images/mac-icon.png);
}

#download .icon.mobile {
    width: 106px;
    height: 84px;
    -webkit-mask-image: url(/images/mobile-icon.png);
    mask-image: url(/images/mobile-icon.png);
}

#download .icon.vision {
    width: 120px;
    height: 84px;
    -webkit-mask-image: url(/images/vision-icon.png);
    mask-image: url(/images/vision-icon.png);
}

#download .label h2 {
    text-align: center;
    margin: 0px;
}

#download .label p {
    text-align: center;
    margin: 6px 0px 0px 0px;
}

#download .label {
    margin: 20px 0px 0px 0px;
    padding: 0px;
}

#download img {
    margin-top: 23px;
}

#download a {
    margin: 30px auto;
}

#tv-download a {
    width: 113px;
    height: 40px;
    background-size: 113px 40px;
    background-image: url("images/apple_tv_download_badge.svg");
}

#mac-download a {
    width: 156px;
    height: 40px;
    background-size: 156px 40px;
    background-image: url("images/mac_download_badge.svg");
}

#download .pwa-card.card {
    margin-left: 40px;
    margin-right: 40px;
    width: auto;
    height: auto;
    padding: 20px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

#download .pwa-card.card.hidden {
    display: none;
}

#download .pwa-card.card .label {
    margin: 0px;
    display: flex;
    flex-direction: column;
    align-items: start;
}

@media screen and (max-width: 500px) {
    #download .pwa-card.card {
        flex-direction: column;
    }
    
    #download .pwa-card.card .label {
        align-items: center;
    }
}

.pwa-card button {
    position: relative;
    border: 0px;
    border-radius: 8px;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--bright-button-content-color);
    background-color: rgb(var(--season-bright-rgb));
    background-color: color(var(--season-bright-color));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 11px 20px;
    cursor: pointer;
}

.pwa-card button:active:hover {
    background-color: rgb(var(--light-season-shadow-rgb));
    background-color: color(var(--light-season-shadow-color));
}

/* Feedback Section */

#feedback > .content h1 {
    padding: 30px 150px;
    text-align: center;
}

#feedback > .content p {
    text-align: center;
    font-size: 1.438rem;
    margin: 0px 0px;
    padding: 0px 100px 30px 100px;
}

#feedback > .content {
    padding-top: 30px;
    padding-bottom: 40px;
}

#support-button {
    position: relative;
    display: block;
    margin: 0px auto 0px auto;
    padding: 14px 0px;
    width: 260px;
    text-align: center;
    text-decoration: none;
    color: var(--bright-button-content-color);
    border-radius: 7px;
    font-weight: 500;
    font-size: 1.063rem;
    background-color: rgb(var(--season-bright-rgb));
    background-color: color(var(--season-bright-color));
}


/* Privacy Section */
/* Terms Section */
/* Press Section */

#privacy > .content,
#terms > .content,
#press > .content {
    max-width: 600px;
    padding: 30px 20px 30px 20px;
}

#privacy > .content h1,
#terms > .content h1,
#press > .content h1 {
    text-align: left;
    font-size: 1.6rem;
    margin: 20px 0px;
    padding: 0px;
    line-height: 1;
    line-height: 1;
}

#privacy > .content h2,
#terms > .content h2,
#press > .content h2 {
    text-align: left;
    font-size: 1.2rem;
    margin: 22px 0px 16px;
    padding: 0px;
    line-height: 1;
}

#privacy > .content p,
#terms > .content p,
#press > .content p {
    text-align: left;
    font-size: 1.1rem;
    margin: 16px 0px;
    line-height: 1.3;
}

#press .gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

#press .gallery:has(.break) {
    row-gap: 4px;
}

#press .gallery .break {
    flex-basis: 100%;
    height: 0px;
}

@media screen and (max-width: 640px) {
    #press .gallery:has(.break) {
        row-gap: 9px;
    }
    
    #press .gallery .break {
        display: none;
    }
}

#press .gallery img {
    display: block;
    border-radius: 8px;
}

#press ul {
    padding-inline-start: 20px;
    font-size: 0.8em;
}

#press li {
    margin-top: 4px;
    line-height: 1.5;
}

#press li code {
    font-size: 0.8em;
    border: 1px solid rgba(var(--season-primary-rgb), 0.2);
    border-radius: 3px;
    background: rgba(var(--season-primary-rgb), 0.1);
    padding: 1px 4px;
    user-select: all;
}

/* Footer Section */

.section#footer::after {
    display: none;
}

#footer .header {
    border-radius: 0px;
    padding-top: 0px;
}

#footer::after,
#footer .header::after {
    /* Hide the shadow at the bottom of the page */
    display: none;
}

.footer {
    text-align: center;
    font-size: 1rem;
    padding: 6px;
}

.footer a {
    text-decoration: none;
    padding: 0px 20px;
    color: currentcolor;
    font-weight: 600;
    opacity: 0.5;
    display: inline-block;
}

.footer a:hover,
.footer a.current {
    opacity: 1;
}

.footer p {
    margin: 14px;
}

.footer .segmentedControl {
    width: fit-content;
    margin: 16px auto 0px;
    font-size: 13px;
    z-index: 1;
}

.footer .segmentedControl a {
    opacity: 1;
}

.copyright {
    font-size: 0.8em;
}


@media all and (display-mode: standalone) {
  #footer {
      display: none;
  }
}


/* Follow Us Section */

#follow > .header h1 {
    font-size: 2.5rem;
    line-height: 2.5rem;
}

p a {
    color: currentcolor;
    opacity: 0.6;
    text-decoration: none;
}

p a:hover {
    opacity: 1;
}

.bio {
    position: relative;
    margin: 0px 40px;
}

.bio .card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-items: center;
    width: auto;
    padding: 12px 20px;
    gap: 12px;
    margin: 50px 0px 40px;
}

.bio .card p {
    margin-block: 0px;
    flex-grow: 1;
    flex-basis: 10px;
}

.bio .profile {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background-size: 100% 100%;
    background-image: url("images/profile.jpg");
    pointer-events: all;
}

.bio .profile:hover {
    background-image: url("images/profile-hover.jpg")
}

@media screen and (max-width: 600px) {
    .bio .card {
        flex-direction: column;
        text-align: center;
    }
}

iframe {
    position: relative;
    display: block;
    border: 0px;
    margin: 12px auto;
    border-radius: 8px;
}

@media screen and (max-width: 700px) {
    iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 560 / 315;
    }
}

/* Credits Section */

#members > .header h1 {
    font-size: 2.5rem;
    line-height: 2.5rem;
}

.credits {
    position: relative;
    margin: 20px 40px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.credits h3, .credits h4 {
    display: block;
    font-size: 1.3em;
    margin-block-start: 16px;
    margin-block-end: 8px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    text-align: center;
}

.credits h4 {
    opacity: 0.5;
}

.credits .entry {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: center;
    gap: 20px;
    opacity: 0.5;
}

.credits .entry:hover, .credits .entry.isMe {
    font-weight: bold;
    opacity: 1;
}

.credits .entry .name {
    position: relative;
    display: block;
    text-align: right;
    flex-grow: 2;
    max-width: 200px;
    line-clamp: 3;
}

.credits .entry .duration {
    position: relative;
    display: block;
    text-align: left;
    flex-grow: 1;
    max-width: 90px;
}

/* Schedule Page */

#schedule > .content h1 {
    font-size: 18px;
    padding-bottom: 0px;
    margin-top: 20px;
    text-align: left;
    margin: 40px 20px 20px;
    color: var(--content-color);
    scroll-margin-top: 80px;
    line-height: 1;
}

#schedule .headerSection {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0px 20px 12px;
    padding-top: 20px;
    gap: 12px;
}

#schedule .headerSection hr {
    border: 0px;
    border-top: 1px solid rgba(var(--season-primary-rgb), 0.5);
    border-top: 1px solid color(var(--season-primary-color) / 0.5);
    flex-grow: 1;
    flex-basis: 10px;
}

#schedule .segmentedControl a {
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    scroll-margin-top: 100px;
}

.segmentedControl {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
    padding: 3px 7px;
    
    border-radius: 7px;
    background-color: rgba(var(--season-shadow-rgb), var(--segmented-control-background-color-alpha));
    background-color: color(var(--season-shadow-color) / var(--segmented-control-background-color-alpha));
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    outline: 1px solid rgba(var(--season-shadow-rgb), var(--segmented-control-shadow-edge-alpha));
    outline: 1px solid color(var(--season-shadow-color) / var(--segmented-control-shadow-edge-alpha));
    outline-offset: -1px;
    box-shadow: inset 0px 1px 5px 0px rgba(var(--season-shadow-rgb), var(--segmented-control-shadow-alpha));
    box-shadow: inset 0px 1px 5px 0px color(var(--season-shadow-color) / var(--segmented-control-shadow-alpha));
}

.segmentedControl::before {
    content: "";
    position: absolute;
    inset: 0px;
    border-radius: inherit;
    outline: 1.5px solid rgba(var(--season-primary-rgb), var(--segmented-control-highlight-edge-alpha));
    outline: 1.5px solid color(var(--season-primary-color) / var(--segmented-control-highlight-edge-alpha));
    outline-offset: 0px;
}

.segmentedControl :not(.selection) {
    padding: 1px 16px;
    margin: 0px -4px;
    color: rgb(var(--season-primary-rgb));
    color: color(var(--season-primary-color));
    border-radius: 4px; 
    outline-offset: -2px;
    outline: none;
    z-index: 1;
    transition: color 0.2s ease-in-out;
}

.segmentedControl :not(.selection)[data-is-selected="true"] {
    color: rgb(var(--light-season-primary-rgb));
    color: color(var(--light-season-primary-color));
}

.segmentedControl .selection {
    position: absolute;
    border-radius: 4px;
    background-color: white;
    outline: 1px solid rgba(var(--season-shadow-rgb), var(--segmented-control-shadow-edge-alpha));
    outline: 1px solid color(var(--season-shadow-color) / var(--segmented-control-shadow-edge-alpha));
    box-shadow: 0px 2px 10px 0px rgba(var(--season-shadow-rgb), var(--segmented-control-dimple-shadow-alpha));
    box-shadow: 0px 2px 10px 0px color(var(--season-shadow-color) / var(--segmented-control-dimple-shadow-alpha));
    transition: top 0.2s ease-in-out, left 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out;
}

.horizontalEpisodeContainer {
    position: relative;
    display: flex;
    overflow-x: scroll;
    gap: 20px;
    padding: 0px 20px;
    min-height: 130px;
    margin-bottom: -20px;
}

.horizontalEpisodeContainer::-webkit-scrollbar {
    height: 26px;
    width: 0px;
    background: transparent;
}

.horizontalEpisodeContainer::-webkit-scrollbar-thumb {
    background: rgba(var(--season-primary-rgb), 0.65);
    opacity: 0.4;
    transition: opacity 0.2s ease-in-out;
    border-radius: 13px;
    border: 10px solid transparent;
    background-clip: padding-box;
}

.horizontalEpisodeContainer::-webkit-scrollbar-thumb:hover {
    opacity: 1;
}

.horizontalEpisodeContainer .info {
    max-width: 400px;
    align-self: center;
    margin: 0px auto;
    text-align: center;
    font-size: 0.9em;
}

.horizontalEpisodeContainer .info p {
    margin: 0px 0px 8px;
}

.horizontalEpisodeContainer .info button {
    position: relative;
    border: 0px;
    border-radius: 6px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--bright-button-content-color);
    background-color: rgb(var(--season-bright-rgb));
    background-color: color(var(--season-bright-color));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px 16px;
}

.horizontalEpisodeContainer .info button:active:hover {
    background-color: rgb(var(--light-season-shadow-rgb));
    background-color: color(var(--light-season-shadow-color));
}

.episodeThumbnailButton {
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 200px;
    text-decoration: none;
    color: var(--content-color);
    font-weight: bold;
    text-align: center;
    font-size: 10px;
}

.episodeThumbnailButton .thumbnail {
    height: 70px;
    aspect-ratio: 16 / 9;
    margin-bottom: 4px;
}

.thumbnail {
    display: block;
    position: relative;
    border-radius: 8px;
}

.thumbnail::after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    border-radius: inherit;
    outline: 1px solid var(--thumbnail-shadow-edge-color);
    outline-offset: -1px;
}

.thumbnail .image {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    outline: 1px solid var(--thumbnail-highlight-color);
    outline-offset: -2px;
    background-color: var(--thumbnail-loading-color);
}

.thumbnail .queueStatus {
    display: block;
    position: absolute;
    width: 28px;
    height: 28px;
    left: 0px;
    top: 0px;
    background-size: 28px 28px;
    filter: drop-shadow(0px 1px 4px var(--thumbnail-badge-shadow-color));
    background-image: url("images/queueStatus.png");
}

.thumbnail .queueStatus.hidden {
    display: none;
}

.thumbnail .queueStatus.small {
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
    background-image: url("images/queueStatus-small.png");
}

.thumbnail .watchStatus {
    display: flex;
    position: absolute;
    height: 16px;
    left: 5px;
    bottom: 5px;
    border-radius: 8px;
    filter: drop-shadow(0px 1px 4px var(--thumbnail-badge-shadow-color));
}

.thumbnail .watchStatus.multiple {
    background-color: rgba(217, 217, 217, 0.8);
    outline: 0.5px solid rgba(255, 255, 255, 0.75);
    outline-offset: -0.5px;
    align-items: center;
}

.thumbnail .watchStatus .icon {
    position: relative;
    margin: -5px;
    width: 26px;
    height: 26px;
    background-size: 26px 26px;
}

.thumbnail .watchStatus .icon.skipped {
    background-image: url("images/watchStatus-skipped.png");
}

.thumbnail .watchStatus .icon.watchedBefore {
    background-image: url("images/watchStatus-watchedBefore.png");
}

.thumbnail .watchStatus .icon.watched {
    background-image: url("images/watchStatus-watched.png");
}

.thumbnail .watchStatus .icon.opened {
    background-image: url("images/watchStatus-opened.png");
}

.thumbnail .watchStatus .icon.openedAgain {
    background-image: url("images/watchStatus-openedAgain.png");
}

.thumbnail .watchStatus .icon.unwatched {
    background-image: url("images/watchStatus-unwatched.png");
}

.thumbnail .watchStatus .multiple {
    position: relative;
    font-style: italic;
    font-size: 11px;
    font-weight: 500;
    padding: 0px 7px 0px 3px;
    color: var(--thumbnail-badge-content-color);
    top: -0.5px;
}

.episodeThumbnailButton .seriesTitle {
    color: var(--content-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.episodeThumbnailButton .episodeTitle {
    color: var(--content-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timelineContainer {
    position: relative;
    display: block;
    width: 100%;
    overflow-x: clip;
    overflow-y: visible;
    margin: -20px 0px -30px;
    padding: 20px 0px;
    /* -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.1) 0px, black 36px, black calc(100% - 36px), rgba(0, 0, 0, 0.1) 100%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.1) 0px, black 36px, black calc(100% - 36px), rgba(0, 0, 0, 0.1) 100%); */
    color: rgba(var(--season-primary-rgb), var(--schedule-hour-ticks-alpha));
    color: color(var(--season-primary-color) / var(--schedule-hour-ticks-alpha));
}

.innerPadding {
    position: relative;
    margin: 0px 40px;
}

.timelineContainer .dimple {
    position: absolute;
    color: rgb(var(--dimple-rgb));
    color: color(var(--dimple-color));
    top: -4px;
    width: 0px;
    bottom: -4px;
    box-shadow: 0px 4px 6px 1px rgba(var(--season-shadow-rgb), var(--season-shadow-alpha));
    box-shadow: 0px 4px 6px 1px color(var(--season-shadow-color) / var(--season-shadow-alpha));
}

.timelineContainer .dimple .circle {
    position: absolute;
    display: block;
    height: 6px;
    width: 6px;
    background-color: currentcolor;
    border-radius: 3px;
    left: -3px;
}

.timelineContainer .dimple .line {
    position: relative;
    display: block;
    height: 100%;
    width: 2px;
    background-color: currentcolor;
    border-radius: 2px;
    left: -1px;
}

.timelineContainer .episodes {
    position: absolute;
    display: block;
    width: 100%;
    height: 50px;
    bottom: 0px;
    left: 0px;
}

.timelineContainer .hourIndicators {
    position: relative;
    display: flex;
    gap: 0px;
    pointer-events: none;
}

.timelineContainer .hourIndicators .hour {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: calc(100% / 12);
    flex-shrink: 0;
}

.timelineContainer .hourIndicators .hour .hourLabel {
    position: relative;
    font-size: 10px;
    font-weight: 550;
    font-variant: small-caps;
    left: -3px;
    width: 100px;
    margin-right: -100px;
}

.timelineContainer .hourIndicators .hour .hourLines {
    display: flex;
    height: 50px;
    width: 100%;
    gap: calc(100% / 6);
}

.timelineContainer .hourIndicators .hour.secondary .hourLabel {
    opacity: 0.4;
}

.timelineContainer .hourIndicators .hour.secondary.first .hourLabel {
    opacity: 1;
}

.timelineContainer .hourIndicators .hour.secondary.first .hourLines .hourLine.min60 {
    opacity: 0.8;
}

.timelineContainer .hourIndicators .hour .hourLines .hourLine {
    position: relative;
    display: block;
    height: 100%;
    width: 2px;
    background-color: currentcolor;
    border-radius: 2px;
}

.timelineContainer .hourIndicators .hour .hourLines .hourLine.min60 {
    width: 2px;
    margin-right: -2px;
    left: -1px;
    opacity: 0.8;
    border-radius: 1px;
}

.timelineContainer .hourIndicators .hour.secondary .hourLines .hourLine.min60 {
    opacity: 0.32;
}

.timelineContainer .hourIndicators .hour .hourLines .hourLine.min30 {
    width: 1px;
    margin-right: -1px;
    left: -0.5px;
    opacity: 0.5;
    border-radius: 0.5px;
}

.timelineContainer .hourIndicators .hour.secondary .hourLines .hourLine.min30 {
    opacity: 0.2;
}
 
.timelineContainer .hourIndicators .hour .hourLines .hourLine.min15 {
    width: 1px;
    margin-right: -1px;
    left: -0.5px;
    opacity: 0.25;
    border-radius: 0.5px;
    display: none;
}

.timelineContainer .hourIndicators .hour.secondary .hourLines .hourLine.min15 {
    opacity: 0.1;
}

.timelineContainer .hourIndicators .hour .hourLines .hourLine.min10 {
    width: 1px;
    margin-right: -1px;
    left: -0.5px;
    opacity: 0.25;
    border-radius: 0.5px;
}

.timelineContainer .hourIndicators .hour.secondary .hourLines .hourLine.min10 {
    opacity: 0.1;
}

.timelineContainer .seriesThumbnailButton {
    position: absolute;
    height: 50px;
    width: auto;
    aspect-ratio: 2 / 3;
}

.timelineContainer .seriesThumbnailButton:hover {
    z-index: 1;
}

.timelineContainer .seriesThumbnailButton .thumbnail {
    height: 100%;
    width: auto;
    position: absolute;
    border-radius: 6px;
}

.timelineContainer .seriesThumbnailButton:hover .thumbnail {
    /* This is currently broken on Safari only due to the mark-image and hover shifting this element up by 1px */
    /* -webkit-transform: translate(0px, 1px); */
}

.timelineContainer .seriesThumbnailButton .infoBox {
    display: none;
    position: absolute;
    top: -3px;
    padding: 3px;
    flex-direction: row;
    gap: 0px;
    background-color: var(--schedule-hover-background-color);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 9px;
    pointer-events: none;
    /* outline: 1px solid var(--schedule-shadow-edge-color); */
    /* box-shadow: 0px 1px 20px var(--schedule-shadow-color); */
    /* background-color: rgba(var(--season-shadow-rgb), var(--segmented-control-background-color-alpha));
    background-color: color(var(--season-shadow-color) / var(--segmented-control-background-color-alpha)); */
    
    outline: 1px solid rgba(var(--season-primary-rgb), var(--schedule-highlight-edge-alpha));
    outline: 1px solid color(var(--season-primary-color) / var(--schedule-highlight-edge-alpha));
    outline-offset: -1px;
    
    box-shadow: 0px 1px 20px rgba(var(--season-shadow-rgb), var(--season-shadow-alpha)), 0px 0px 0px 1px rgba(var(--season-shadow-rgb), var(--season-shadow-edge-alpha));
    box-shadow: 0px 1px 20px color(var(--season-shadow-color) / var(--season-shadow-alpha)), 0px 0px 0px 1px color(var(--season-shadow-color) / var(--season-shadow-edge-alpha));
}

.timelineContainer .seriesThumbnailButton .infoBox:not(.flipped) {
    left: -3px;
}

.timelineContainer .seriesThumbnailButton .infoBox.flipped {
    right: -3px;
    flex-direction: row-reverse;
}

.timelineContainer .seriesThumbnailButton .infoBox .thumbnailPlaceholder {
    height: 50px;
    width: auto;
    aspect-ratio: 2 / 3;
}

.timelineContainer .seriesThumbnailButton .infoBox .details {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-items: stretch;
    padding: 2px 8px;
    text-wrap: nowrap;
}

.timelineContainer .seriesThumbnailButton .infoBox.flipped .details {
    align-items: end;
}

.timelineContainer .seriesThumbnailButton .infoBox .details .releaseTime {
    display: flex;
    flex-direction: row;
    gap: 4px; 
    font-size: 8px;
    font-weight: 600;
}

.timelineContainer .seriesThumbnailButton .infoBox .details .releaseTime .absoluteTime {
    font-variant: small-caps;
}

.timelineContainer .seriesThumbnailButton .infoBox .details .seriesName {
    font-size: 12px;
    font-weight: 500;
}

.timelineContainer .seriesThumbnailButton .infoBox .details .spacer {
    flex-grow: 1;
}

.timelineContainer .seriesThumbnailButton .infoBox .details .episodeName {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.5;
}

.timelineContainer .seriesThumbnailButton:hover .infoBox {
    display: flex;
}

@media screen and (max-width: 520px) {
    .timelineContainer .hourIndicators .hour:nth-child(2n) .hourLabel {
        visibility: hidden;
    }
    
    .timelineContainer .hourIndicators .hour .hourLines {
        gap: calc(100% / 4);
    }
    
    .timelineContainer .hourIndicators .hour:nth-child(2n) .hourLines .hourLine.min60 {
        opacity: 0.5;
    }
     
    .timelineContainer .hourIndicators .hour .hourLines .hourLine.min15 {
        display: block;
    }
    
    .timelineContainer .hourIndicators .hour .hourLines .hourLine.min10 {
        display: none;
    }
}

.seriesGridContainer {
    position: relative;
    display: grid; /* 1 */
    grid-template-columns: repeat(auto-fill, 100px);
    grid-gap: 20px;
    padding: 0px 20px;
    justify-content: space-between;
}

.seriesThumbnailButton {
    display: flex;
    flex-direction: column;
    position: relative;
    text-decoration: none;
    color: var(--content-color);
    font-weight: bold;
    text-align: center;
    font-size: 10px;
    width: 100px;
    gap: 4px;
    scroll-margin-top: 200px;
    scroll-margin-top: 50vh;
}

.seriesThumbnailButton .thumbnail {
    width: 100%;
    aspect-ratio: 2 / 3;
}

.seriesThumbnailButton .seriesTitle {
    color: var(--content-color);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    line-height: 1.2em;
    max-height: 2.4em;
}

/* Seasons Page */

#seasonSelector {
    position: relative;
    overflow-x: scroll;
    display: flex;
    flex-direction: row;
    padding: 30px 20px 20px;
    margin-bottom: -30px;
    gap: 26px;
}

#seasonSelector .seasonYearGroup {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 4px;
}

#seasonSelector .seasonYearGroup::after {
    content: "";
    height: 2px;
    background-color: rgb(var(--season-primary-rgb));
    background-color: color(var(--season-primary-color));
    width: 100%;
    border-radius: 2px;
    opacity: 0.3;
}

#seasonSelector .seasonYearGroup:hover::after {
    opacity: 1;
}

#seasonSelector .seasonYearGroup.hidden {
    display: none;
}

#seasonSelector .seasonYearGroup .seasonYear {
    position: relative;
    font-size: 13px;
    font-weight: 550;
    font-variant: all-small-caps;
    color: rgb(var(--season-primary-rgb));
    color: color(var(--season-primary-color));
    opacity: 0.3;
}

#seasonSelector .seasonYearGroup:hover .seasonYear {
    opacity: 1;
}

#seasonSelector .seasonYearGroup.currentSeason .seasonYear,
#seasonSelector .seasonYearGroup.currentSeason:hover .seasonYear {
    color: rgb(var(--season-bright-rgb));
    color: color(var(--season-bright-color));
    opacity: 1;
}

#seasonSelector .seasonYearGroup.currentSeason::after,
#seasonSelector .seasonYearGroup.currentSeason:hover::after {
    background-color: rgb(var(--season-bright-rgb));
    background-color: color(var(--season-bright-color));
    opacity: 1;
}

#seasonSelector .seasonYearGroup .seasonQuarters {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 6px;
}

#seasonSelector .seasonYearGroup .seasonQuarters .seasonQuarter {
    position: relative;
    width: 26px;
    height: 26px;
    opacity: 0.3;
}

#seasonSelector .seasonYearGroup .seasonQuarters .seasonQuarter.seasonAnnounced {
    background-color: rgb(var(--season-announced-primary-rgb));
    background-color: color(var(--season-announced-primary-color));
    -webkit-mask-image: url("/images/Season-announced.svg");
    mask-image: url("/images/Season-announced.svg");
}

#seasonSelector .seasonYearGroup .seasonQuarters .seasonQuarter.seasonWinter {
    background-color: rgb(var(--season-winter-primary-rgb));
    background-color: color(var(--season-winter-primary-color));
    -webkit-mask-image: url("/images/Season-winter.svg");
    mask-image: url("/images/Season-winter.svg");
}

#seasonSelector .seasonYearGroup .seasonQuarters .seasonQuarter.seasonSpring {
    background-color: rgb(var(--season-spring-primary-rgb));
    background-color: color(var(--season-spring-primary-color));
    -webkit-mask-image: url("/images/Season-spring.svg");
    mask-image: url("/images/Season-spring.svg");
}

#seasonSelector .seasonYearGroup .seasonQuarters .seasonQuarter.seasonSummer {
    background-color: rgb(var(--season-summer-primary-rgb));
    background-color: color(var(--season-summer-primary-color));
    -webkit-mask-image: url("/images/Season-summer.svg");
    mask-image: url("/images/Season-summer.svg");
}

#seasonSelector .seasonYearGroup .seasonQuarters .seasonQuarter.seasonFall {
    background-color: rgb(var(--season-fall-primary-rgb));
    background-color: color(var(--season-fall-primary-color));
    -webkit-mask-image: url("/images/Season-fall.svg");
    mask-image: url("/images/Season-fall.svg");
}

#seasonSelector .seasonYearGroup .seasonQuarters .seasonQuarter.seasonAnnounced.currentSeason,
#seasonSelector .seasonYearGroup .seasonQuarters .seasonQuarter.seasonAnnounced:hover {
    background-color: rgb(var(--season-announced-bright-rgb));
    background-color: color(var(--season-announced-bright-color));
    opacity: 1;
}

#seasonSelector .seasonYearGroup .seasonQuarters .seasonQuarter.seasonWinter.currentSeason,
#seasonSelector .seasonYearGroup .seasonQuarters .seasonQuarter.seasonWinter:hover {
    background-color: rgb(var(--season-winter-bright-rgb));
    background-color: color(var(--season-winter-bright-color));
    opacity: 1;
}

#seasonSelector .seasonYearGroup .seasonQuarters .seasonQuarter.seasonSpring.currentSeason,
#seasonSelector .seasonYearGroup .seasonQuarters .seasonQuarter.seasonSpring:hover {
    background-color: rgb(var(--season-spring-bright-rgb));
    background-color: color(var(--season-spring-bright-color));
    opacity: 1;
}

#seasonSelector .seasonYearGroup .seasonQuarters .seasonQuarter.seasonSummer.currentSeason,
#seasonSelector .seasonYearGroup .seasonQuarters .seasonQuarter.seasonSummer:hover {
    background-color: rgb(var(--season-summer-bright-rgb));
    background-color: color(var(--season-summer-bright-color));
    opacity: 1;
}

#seasonSelector .seasonYearGroup .seasonQuarters .seasonQuarter.seasonFall.currentSeason,
#seasonSelector .seasonYearGroup .seasonQuarters .seasonQuarter.seasonFall:hover {
    background-color: rgb(var(--season-fall-bright-rgb));
    background-color: color(var(--season-fall-bright-color));
    opacity: 1;
}

#seasons > .content h1 {
    font-size: 22px;
    padding-bottom: 0px;
    margin-top: 20px;
    text-align: left;
    margin: 40px 20px 20px;
    color: var(--content-color);
    scroll-margin-top: 80px;
    line-height: 1;
}

#seasons .infoText {
    font-size: 0.8rem;
    padding: 20px 20px;
    opacity: 0.8;
    text-align: center;
}

/* Lists Page */

#lists > .content {
    padding-top: 20px;
}

#lists > .content h1 {
    font-size: 22px;
    padding-bottom: 0px;
    text-align: left;
    margin: 0px 20px 20px;
    color: var(--content-color);
    scroll-margin-top: 80px;
    line-height: 1;
}

#notSignedIn.info {
    max-width: 400px;
    align-self: center;
    margin: 0px auto;
    text-align: center;
    font-size: 0.9em;
    padding: 0px 20px;
}

#notSignedIn.info p {
    margin: 0px 0px 8px;
}

#notSignedIn.info button {
    position: relative;
    border: 0px;
    border-radius: 6px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--bright-button-content-color);
    background-color: rgb(var(--season-bright-rgb));
    background-color: color(var(--season-bright-color));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px 16px;
}

#notSignedIn.info button:active:hover {
    background-color: rgb(var(--light-season-shadow-rgb));
    background-color: color(var(--light-season-shadow-color));
}

#historyContainer:not(:has(> a)) {
    display: flex;
    text-align: center;
    justify-content: center;
    font-size: 14px;
}

.episodeGridContainer {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, 160px);
    grid-gap: 20px;
    padding: 0px 20px;
    justify-content: space-between;
}

.episodeGridContainer .episodeThumbnailButton .thumbnail {
    max-height: 90px;
    width: 160px;
    height: auto;
}

/* Search Page */

#search > .content {
    padding-top: 20px;
}

#search > .content h1 {
    font-size: 28px;
    padding-bottom: 0px;
    text-align: left;
    margin: 0px 20px 20px;
    color: var(--content-color);
    scroll-margin-top: 80px;
    line-height: 1;
}

#search > .content h2 {
    font-size: 22px;
    padding-bottom: 0px;
    text-align: left;
    margin: 30px 20px 20px;
    color: var(--content-color);
    scroll-margin-top: 80px;
    line-height: 1;
}

#searchField {
    width: calc(100% - 8px);
    border: 1px solid rgba(var(--season-primary-rgb), 0.2);
    border-radius: 10px;
    padding: 4px 4px 4px 16px;
    margin: 0px 4px;
    font-size: 16px;
}

@media screen and (max-width: 960px) {
    #searchField {
        width: calc(100% - 40px);
        margin: 0px 20px;
    }
}

#search #notSignedIn {
    padding-top: 30px
}

#seriesSearchResults:not(:has(> a)) {
    display: flex;
    text-align: center;
    justify-content: center;
    font-size: 14px;
}

#episodeSearchResults:not(:has(> a)) {
    display: flex;
    text-align: center;
    justify-content: center;
    font-size: 14px;
}

/* Content Pages */

.showBackground {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-position: center;
    background-size: cover;
    margin: -100px;
    filter: saturate(1.5) brightness(0.4) blur(50px);
    opacity: 0.75;
}

@media all and (display-mode: standalone) {
    .showBackground {
        position:fixed;
        margin: -50px;
    }
}

svg.glyph polyline, 
svg.glyph path {
    stroke: currentcolor;
}

.distributor .content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.distributor .content .thumbnail {
    height: 28px;
    aspect-ratio: 1;
    border-radius: 6px;
}

.synopsis .attribution {
    opacity: 0.5;
    font-size: 0.8em;
    font-style: italic;
    white-space: nowrap;
    font-family: ui-serif, ui-rounded, system-ui, sans-serif;
}

.synopsis .attribution a {
    color: inherit;
}

.episodeDetails,
.seriesDetails {
    user-select: text;
    -webkit-user-select: text;
}

/* Release Page */

#release > .content {
    color: var(--dark-content-color);
}

#release .container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 15% 20px 200px;
}

#release .seriesButton,
#episode .seriesButton {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: var(--dark-button-fill);
    -webkit-backdrop-filter: contrast(1.2);
    backdrop-filter: contrast(1.2);
    border-radius: 10px;
    width: fit-content;
    gap: 16px;
    
    color: inherit;
    text-decoration: none;
}

#release .seriesButton:hover,
#episode .seriesButton:hover {
    background-color: var(--dark-button-fill-hover);
}

#release .seriesButton:active:hover,
#episode .seriesButton:active:hover {
    background-color: var(--dark-button-fill-pressed);
}

#release .seriesButton .text,
#episode .seriesButton .text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#release .seriesButton h1,
#episode .seriesButton h1 {
    font-size: 24px;
    padding: 0px;
    line-height: 1.1;
    font-weight: 600;
    text-align: left;
}

#release .seriesButton h3 {
    font-size: 12px;
    padding: 0px;
    margin: 0px;
    opacity: 0.5;
    font-weight: 700;
}

#release .seriesButton .glyph,
#episode .seriesButton .glyph {
    flex-shrink: 0;
}

#release .episodeDetailsContainer {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 20px;
}

#release .episodeThumbnail {
    width: 30%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#release .distributor {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    color: inherit;
    text-decoration: none;
    padding: 4px;
    padding-right: 12px;
    background-color: var(--dark-button-fill);
    -webkit-backdrop-filter: contrast(1.2);
    backdrop-filter: contrast(1.2);
    border-radius: 10px;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
}

#release .distributor:hover {
    background-color: var(--dark-button-fill-hover);
}

#release .distributor:active:hover {
    background-color: var(--dark-button-fill-pressed);
}

#release .episodeDetails {
    width: 70%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#release .episodeDetails h2 {
    margin: 0px;
    line-height: 1.1;
    font-size: 24px;
    font-weight: 600;
}

#release .episodeDetails h3 {
    font-size: 14px;
    padding: 0px;
    margin: 0px;
    font-weight: 600;
    text-align: left;
    padding-bottom: 10px;
    
    display: flex;
    gap: 8px;
}

#release .episodeDetails h3 > span {
    opacity: 0.5;
}

#release .episodeDetails h3 .languages {
    flex-shrink: 1;
    flex-grow: 1;
    display: flex;
    overflow-x: hidden;
    gap: 12px;
}

#release .episodeDetails h3 .languages.large {
    gap: 22px;
}

span.time {
    font-variant: small-caps;
}

#release .spacer {
    flex-grow: 1;
}

#release .actions,
#series .actions,
#episode .actions {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-top: 10px;
    justify-content: stretch;
}

#release .actions .statusContainer,
#series .actions .statusContainer,
#episode .actions .statusContainer {
    position: relative;
    flex-shrink: 0;
    color: inherit;
    flex-grow: 1;
    flex-basis: 100px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 36px;
    overflow: visible;
}

#series .actions .statusContainer {
    height: auto;
}

.statusContainer p {
    margin: 0px;
    text-align: center;
    font-weight: 600;
    font-size: 11px;
    color: var(--dark-content-secondary-color);
    white-space: preserve-breaks;
}

#release .actions button,
#series .actions button,
#episode .actions button {
    position: relative;
    flex-shrink: 0;
    border: 0px;
    border-radius: 8px;
    height: 36px;
    font-size: 15px;
    font-weight: 500;
    color: inherit;
    background-color: var(--dark-button-fill);
    -webkit-backdrop-filter: contrast(1.2);
    backdrop-filter: contrast(1.2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px 16px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.actions #queueButton::before,
.actions #watchButton::before {
    position: relative;
    display: block;
    content: "";
    width: 26px;
    height: 26px;
    background-size: 26px 26px;
}

.actions #queueButton::before {
    background-image: url("/images/manageQueue-excluded.png");
}

.actions #queueButton[status="included"]::before {
    background-image: url("/images/manageQueue-included.png");
}

.actions #watchButton::before {
    background-image: url("/images/markAsWatched-unwatched.png");
}

.actions #watchButton[status="watched"]::before {
    background-image: url("/images/markAsWatched-watched.png");
}

.actions #watchButton[status="rewatched"]::before {
    background-image: url("/images/markAsWatched-rewatched.png");
}

.actions #watchButton[status="opened"]::before {
    background-image: url("/images/markAsWatched-opened.png");
}

#release .actions button:hover,
#series .actions button:hover,
#episode .actions button:hover {
    background-color: var(--dark-button-fill-hover);
}

#release .actions button:active:hover,
#series .actions button:active:hover,
#episode .actions button:active:hover {
    background-color: var(--dark-button-fill-pressed);
}

#release .actions button:disabled,
#series .actions button:disabled,
#episode .actions button:disabled {
    background-color: var(-dark-button-fill-disabled) !important;
    opacity: 0.5;
}

@media screen and (max-width: 640px) {
    #release .container {
        padding: 20px;
    }
    
    #release .seriesButton,
    #episode .seriesButton {
        width: auto; 
    }
    
    #release .episodeDetailsContainer {
        flex-direction: column;
        align-items: center;
    }
    
    #release .episodeThumbnail {
        width: 400px;
        max-width: 100%;
    }
    
    #release .episodeDetails {
        width: 100%
    }
    
    #release .episodeDetails h3 {
        text-align: left;
    }
}

@media screen and (max-width: 550px) {
    #release .actions,
    #series .actions,
    #episode .actions {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    
    #release .actions .statusContainer,
    #series .actions .statusContainer,
    #episode .actions .statusContainer {
        width: 250px;
        flex-basis: auto;
        height: auto;
    }
}

/* Series Page */

#series > .content {
    color: var(--dark-content-color);
}

#series .container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 20px 200px;
}

#series .seriesDetailsContainer {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 20px;
}

#series .seriesPoster {
    width: 25%;
    min-width: 180px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-weight: 500;
    font-size: 10px;
    text-align: center;
}

#series .seriesDetails {
    width: 70%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#series .seriesDetails h2 {
    margin: 0px 0px 20px;
    line-height: 1.1;
    font-size: 26px;
    font-weight: 600;
}

#series .seriesDetails h3 {
    font-size: 14px;
    padding: 0px;
    margin: 0px;
    opacity: 0.5;
    font-weight: 600;
    text-align: left;
    padding-bottom: 10px;
}

#series .container h3 {
    margin: 20px 0px 0px;
    line-height: 1.1;
    font-size: 22px;
    font-weight: 600;
}

#series .coursListContainer {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#series .coursListContainer .coursGroupRow {
    display: flex;
    flex-direction: row;
    gap: 6px;
}

#series .coursGroupRow a {
    position: relative;
    display: flex;
    width: 50px;
    background-color: var(--dark-button-fill);
    -webkit-backdrop-filter: contrast(1.2);
    backdrop-filter: contrast(1.2);
    border-radius: 8px;
    aspect-ratio: 1;
    color: inherit;
    text-decoration: none;
    align-items: center;
    justify-content: center;
}

#series .coursGroup {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 4px;
    padding-right: 12px;
    background-color: var(--dark-button-fill);
    -webkit-backdrop-filter: contrast(1.2);
    backdrop-filter: contrast(1.2);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: inherit;
    text-decoration: none;
    scroll-margin-top: 200px;
    scroll-margin-top: 50vh;
    border: 0;
    cursor: pointer;
    text-align: start;
    flex-grow: 1;
}

#series .coursGroup:hover,
#series .coursGroupRow a:hover {
    background-color: var(--dark-button-fill-hover);
}

#series .coursGroup:active:hover,
#series .coursGroupRow a:active:hover {
    background-color: var(--dark-button-fill-pressed);
}

#series .coursGroup .radioIndicator {
    display: block;
    width: 14px;
    height: 14px;
    margin-left: 14px;
    margin-right: 6px;
    background-color: transparent;
    border-radius: 7px;
    outline: 2px solid currentcolor;
    outline-offset: 2px;
}

#series .coursGroup[state="selected"] .radioIndicator {
    background-color: currentcolor;
}

#series .coursGroup:active:hover .radioIndicator {
    background-color: rgba(255, 255, 255, 0.5);
}

#series .coursGroup .thumbnail {
    aspect-ratio: 1 / 1;
    height: 42px;
    border-radius: 4px;
    flex-shrink: 0;
}

#series .coursGroup .thumbnail img {
    object-fit: contain;
    background-color: var(--dark-thumbnail-badge-content-color);
}

#series .coursGroup .distributorInfo {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    gap: 4px;
    width: 0px;
}

#series .coursGroup .distributorInfo .row1,
#series .coursGroup .distributorInfo .row2 {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: baseline;
}

#series .coursGroup .distributorInfo .row2 {
    align-items: center;
}

#series .coursGroup .distributorInfo .distributor {
    flex-shrink: 1;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

#series .coursGroup .distributorInfo .languages {
    flex-shrink: 1;
    flex-grow: 1;
    width: 100%;
    display: flex;
    overflow-x: hidden;
    gap: 12px;
}

#series .coursGroup .distributorInfo .languages.large {
    gap: 22px;
}

#series .coursGroup .distributorInfo .seasons {
    flex-shrink: 0;
}

#series .coursGroup .glyph {
    flex-shrink: 0;
    opacity: 0.5;
}

@media screen and (max-width: 500px) {
    #series .coursGroup .distributorInfo .row1,
    #series .coursGroup .distributorInfo .row2 {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }
    
    #series .coursGroup .distributorInfo .distributor {
        opacity: 0.5;
        font-size: 10px;
    }
}

#series .episodeListContainer {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#series .episode {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 4px;
    padding-right: 12px;
    background-color: var(--dark-button-fill);
    -webkit-backdrop-filter: contrast(1.2);
    backdrop-filter: contrast(1.2);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: inherit;
    text-decoration: none;
    scroll-margin-top: 200px;
    scroll-margin-top: 50vh;
}

#series .episode:hover {
    background-color: var(--dark-button-fill-hover);
}

#series .episode:active:hover {
    background-color: var(--dark-button-fill-pressed);
}

#series .episode .thumbnail {
    aspect-ratio: 16 / 9;
    height: 42px;
    border-radius: 4px;
    flex-shrink: 0;
}

#series .episode .thumbnail img {
    object-fit: contain;
    background-color: var(--dark-thumbnail-badge-content-color);
}

#series .episode .episodeInfo {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    gap: 1px;
    width: 0px;
}

#series .episode .episodeInfo .row1 {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: baseline;
}

#series .episode .episodeInfo .title {
    flex-shrink: 1;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

#series .episode .episodeInfo .releaseInfo {
    flex-shrink: 0;
    opacity: 0.5;
    font-size: 10px;
}

#series .episode .episodeInfo .synopsis {
    flex-grow: 0;
    max-width: min-content;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
    min-height: 11px;
}

#series .episode .glyph {
    flex-shrink: 0;
    opacity: 0.5;
}

@media screen and (max-width: 640px) {
    #series .container {
        padding: 20px;
    }
    
    #series .seriesButton {
        width: auto; 
    }
    
    #series .seriesDetailsContainer {
        flex-direction: column;
        align-items: center;
    }
    
    #series .seriesPoster {
        width: 200px;
        max-width: 100%;
    }
    
    #series .seriesDetails {
        width: 100%
    }
    
    #series .seriesDetails h3 {
        text-align: left;
    }
}

@media screen and (max-width: 500px) {
    #series .episode .episodeInfo .row1 {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    
    #series .episode .episodeInfo .title {
        order: 2;
    }
    
    #series .episode .episodeInfo .releaseInfo {
        order: 1;
    }
}

/* Episode Page */

#episode > .content {
    color: var(--dark-content-color);
}

#episode .container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 20px 200px;
}

#episode .episodeDetailsContainer {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 20px;
}

#episode .episodeThumbnail {
    width: 30%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#episode .episodeDetails {
    width: 70%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#episode .episodeDetails h2 {
    margin: 0px;
    line-height: 1.1;
    font-size: 24px;
    font-weight: 600;
}

#episode .container h3 {
    margin: 20px 0px 0px;
    line-height: 1.1;
    font-size: 22px;
    font-weight: 600;
}

#episode .releaseListContainer {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#episode .release {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 4px;
    padding-right: 12px;
    background-color: var(--dark-button-fill);
    -webkit-backdrop-filter: contrast(1.2);
    backdrop-filter: contrast(1.2);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: inherit;
    text-decoration: none;
    scroll-margin-top: 200px;
    scroll-margin-top: 50vh;
}

#episode .release:hover {
    background-color: var(--dark-button-fill-hover);
}

#episode .release:active:hover {
    background-color: var(--dark-button-fill-pressed);
}

#episode .release .thumbnail {
    aspect-ratio: 1 / 1;
    height: 42px;
    border-radius: 4px;
    flex-shrink: 0;
}

#episode .release .thumbnail img {
    object-fit: contain;
    background-color: var(--dark-thumbnail-badge-content-color);
}

#episode .release .releaseInfo {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    gap: 4px;
    width: 0px;
}

#episode .release .releaseInfo .row1,
#episode .release .releaseInfo .row2 {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: baseline;
}

#episode .release .releaseInfo .row2 {
    align-items: center;
}

#episode .release .releaseInfo .row1 .availability {
    display: none;
}

#episode .release .releaseInfo .cours {
    flex-shrink: 1;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

#episode .release .releaseInfo .languages {
    flex-shrink: 1;
    flex-grow: 1;
    width: 100%;
    display: flex;
    overflow-x: hidden;
    gap: 12px;
}

#episode .release .releaseInfo .languages.large {
    gap: 22px;
}

.languages .languageList {
    display: flex;
    gap: 4px;
    z-index: 0;
}

.languages.large .languageList {
    gap: 6px;
}

.languages .languageList .label {
    display: inline;
    width: 25px;
    height: 15px;
    background-size: 25px 15px;
    margin: 0;
    padding: 0;
}

.languages.large .languageList .label {
    width: 38px;
    height: 21px;
    background-size: 38px 21px;
}

.languages .languageList.dubLanguages .label {
    background-image: url("images/DubLabelSmall.png");
}

.languages.large .languageList.dubLanguages .label {
    background-image: url("images/DubLabelLarge.png");
}

.languages .languageList.subLanguages .label {
    background-image: url("images/SubLabelSmall.png");
}

.languages.large .languageList.subLanguages .label {
    background-image: url("images/SubLabelLarge.png");
}

.languages .languageList .language {
    position: relative;
    text-align: center;
    text-transform: uppercase;
    align-content: center;
    color: white;
    
    width: 20px;
    height: 15px;
    background-size: 43px 15px;
    background-image: url("images/LanguageTagSmall.png");
    padding-left: 22px;
    padding-right: 1px;
    font-size: 9px;
}

.languages.large .languageList .language {
    width: 29px;
    height: 21px;
    background-size: 61px 21px;
    background-image: url("images/LanguageTagLarge.png");
    padding-left: 31px;
    padding-right: 1px;
    font-size: 13px;
}

.languages .languageList .language::before {
    position: absolute;
    content: "";
    left: 0px;
    top: 0px;
    z-index: -1;
    
    width: 22px;
    height: 15px;
    background-size: 22px 15px;
    background-image: url("images/RegionSmall-001.png");
    mask-size: 22px 15px;
    mask-image: url("images/LanguageTagRegionMaskSmall.png");
}

.languages.large .languageList .language::before {
    width: 31px;
    height: 21px;
    background-size: 31px 21px;
    background-image: url("images/RegionLarge-001.png");
    mask-size: 31px 21px;
    mask-image: url("images/LanguageTagRegionMaskLarge.png");
}

.languages .languageList .language[data-region="001"]::before {
    background-image: url("images/RegionSmall-001.png");
}

.languages.large .languageList .language[data-region="001"]::before {
    background-image: url("images/RegionLarge-001.png");
}

.languages .languageList .language[data-region="419"]::before {
    background-image: url("images/RegionSmall-419.png");
}

.languages.large .languageList .language[data-region="419"]::before {
    background-image: url("images/RegionLarge-419.png");
}

.languages .languageList .language[data-region="BR"]::before {
    background-image: url("images/RegionSmall-BR.png");
}

.languages.large .languageList .language[data-region="BR"]::before {
    background-image: url("images/RegionLarge-BR.png");
}

.languages .languageList .language[data-region="CA"]::before {
    background-image: url("images/RegionSmall-CA.png");
}

.languages.large .languageList .language[data-region="CA"]::before {
    background-image: url("images/RegionLarge-CA.png");
}

.languages .languageList .language[data-region="CN"]::before {
    background-image: url("images/RegionSmall-CN.png");
}

.languages.large .languageList .language[data-region="CN"]::before {
    background-image: url("images/RegionLarge-CN.png");
}

.languages .languageList .language[data-region="DE"]::before {
    background-image: url("images/RegionSmall-DE.png");
}

.languages.large .languageList .language[data-region="DE"]::before {
    background-image: url("images/RegionLarge-DE.png");
}

.languages .languageList .language[data-region="ES"]::before {
    background-image: url("images/RegionSmall-ES.png");
}

.languages.large .languageList .language[data-region="ES"]::before {
    background-image: url("images/RegionLarge-ES.png");
}

.languages .languageList .language[data-region="FR"]::before {
    background-image: url("images/RegionSmall-FR.png");
}

.languages.large .languageList .language[data-region="FR"]::before {
    background-image: url("images/RegionLarge-FR.png");
}

.languages .languageList .language[data-region="Hans"]::before {
    background-image: url("images/RegionSmall-Hans.png");
}

.languages.large .languageList .language[data-region="Hans"]::before {
    background-image: url("images/RegionLarge-Hans.png");
}

.languages .languageList .language[data-region="Hant"]::before {
    background-image: url("images/RegionSmall-Hant.png");
}

.languages.large .languageList .language[data-region="Hant"]::before {
    background-image: url("images/RegionLarge-Hant.png");
}

.languages .languageList .language[data-region="IT"]::before {
    background-image: url("images/RegionSmall-IT.png");
}

.languages.large .languageList .language[data-region="IT"]::before {
    background-image: url("images/RegionLarge-IT.png");
}

.languages .languageList .language[data-region="JP"]::before {
    background-image: url("images/RegionSmall-JP.png");
}

.languages.large .languageList .language[data-region="JP"]::before {
    background-image: url("images/RegionLarge-JP.png");
}

.languages .languageList .language[data-region="KP"]::before {
    background-image: url("images/RegionSmall-KP.png");
}

.languages.large .languageList .language[data-region="KP"]::before {
    background-image: url("images/RegionLarge-KP.png");
}

.languages .languageList .language[data-region="TW"]::before {
    background-image: url("images/RegionSmall-TW.png");
}

.languages.large .languageList .language[data-region="TW"]::before {
    background-image: url("images/RegionLarge-TW.png");
}

.languages .languageList .language[data-region="US"]::before {
    background-image: url("images/RegionSmall-US.png");
}

.languages.large .languageList .language[data-region="US"]::before {
    background-image: url("images/RegionLarge-US.png");
}

#episode .release .releaseInfo .distributor {
    flex-shrink: 0;
}

#episode .release .releaseInfo .availability {
    flex-shrink: 0;
    opacity: 0.5;
    font-size: 10px;
}

#episode .release .glyph {
    flex-shrink: 0;
    opacity: 0.5;
}

@media screen and (max-width: 640px) {
    #episode .container {
        padding: 20px;
    }
    
    #episode .episodeDetailsContainer {
        flex-direction: column;
        align-items: center;
    }
    
    #episode .episodeThumbnail {
        width: 400px;
        max-width: 100%;
    }
    
    #episode .episodeDetails {
        width: 100%
    }
    
    #episode .episodeDetails h3 {
        text-align: left;
    }
}

@media screen and (max-width: 500px) {
    #episode .release .releaseInfo .row1,
    #episode .release .releaseInfo .row2 {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }
    
    #episode .release .releaseInfo .row1 .availability {
        display: block;
    }
    
    #episode .release .releaseInfo .row2 .availability {
        display: none;
    }
    
    #episode .release .releaseInfo .cours {
        display: none;
    }
    
    /* #episode .release .releaseInfo .title {
        order: 2;
    }
    
    #episode .release .releaseInfo .releaseInfo {
        order: 1;
    } */
}

#account > .content {
    max-width: 760px;
    padding: 30px 20px;
}

#account h1 {
    font-size: 3rem;
    line-height: 3rem;
    font-weight: 700;
    text-align: left;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#account h2 {
    margin-bottom: 0.5em;
    display: flex;
    flex-direction: row;
    align-self: start;
}

#account h2 .tag {
    position: relative;
    top: 1px;
    font-size: 0.6em;
    background-color: rgb(var(--season-bright-rgb));
    background-color: color(var(--season-bright-color));
    color: var(--bright-button-content-color);
    margin-left: 12px;
    border-radius: 4px;
    padding: 3px 10px;
    align-self: center;
    min-width: fit-content;
}

#account .comingSoon {
    opacity: 0.5;
}

#account .horizontalSettings {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

#account .settingsGroup {
    background-color: rgba(var(--season-primary-rgb), 0.1);
    background-color: color(var(--season-primary-color) / 0.1);
    border-radius: 12px;
    padding: 8px 12px 12px;
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#account .settingsGroupContents {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%
}

@media screen and (max-width: 800px) {
    #account .horizontalSettings {
        flex-direction: column;
    }
    
    #account .settingsGroupContents {
        width: calc(min(420px, 100%));
    }
}

#account .settingsGroup h3 {
    margin: 0px 0px 12px 0px;
    display: flex;
    flex-direction: row;
    align-self: start;
}

#account .settingsGroup h3.notificationsHeader {
    align-self: center;
    gap: 20px;
}

#account .settingsGroup h3.notificationsHeader input {
    position: relative;
    top: 1px;
    align-self: center;
    max-height: 18px;
}

#account .settingsGroup p.info {
    margin-top: 8px;
    margin-bottom: 0px;
    font-size: 0.8em;
}

#account .devices {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

#account #devices {
    margin-bottom: 8px;
}

#account .devices .device {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 6px 10px;
    border-radius: 6px;
    background-color: rgba(var(--season-primary-rgb), 0.1);
    background-color: color(var(--season-primary-color) / 0.1);
    width: 100%;
    font-size: 0.9em;
    gap: 4px;
}

#account .devices .device .topRow,
#account .devices .device .bottomRow {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

#account .devices .device .topRow img {
    filter: drop-shadow(0px 0px 1px rgba(var(--season-primary-rgb), 0.5));
    filter: drop-shadow(0px 0px 1px color(var(--season-primary-color) / 0.5));
}

#account .devices .device .bottomRow {
    opacity: 0.6;
}

#account .devices .device .name {
    flex-grow: 1;
    word-break: break-word;
}

#account .devices .device .icon {
    margin-left: -1px;
    margin-right: -1px;
}

#account .devices .device .tag {
    position: relative;
    top: -1px;
    font-size: 0.8em;
    font-weight: 600;
    background-color: rgb(var(--season-bright-rgb));
    background-color: color(var(--season-bright-color));
    color: var(--bright-button-content-color);
    border-radius: 4px;
    padding: 0px 8px;
    min-width: fit-content;
    height: 18px;
    align-content: center;
    box-sizing: border-box;
}

#account .devices .device button {
    background: none;
    padding: 0px;
    border: none;
    border-radius: 4px;
    width: 18px;
    height: 18px;
}

#account .devices .device button:hover {
    background-color: rgba(var(--season-primary-rgb), 0.3);
    background-color: color(var(--season-primary-color) / 0.3);
}

#account .devices .device button:active:hover {
    background-color: rgba(var(--season-primary-rgb), 1);
    background-color: color(var(--season-primary-color) / 1);
}

#account .devices .device button:disabled,
#account .devices .device button:disabled:hover,
#account .devices .device button:disabled:active:hover {
    opacity: 0.5;
    background-color: unset;
}

#account .devices .device button::before {
    content: "";
    position: absolute;
    inset: 0px 0px 0px 0px;
    background-color: rgb(var(--season-primary-rgb));
    background-color: color(var(--season-primary-color));
    border-radius: 6px;
}

#account .devices .device button:hover::before {
    background-color: var(--inline-button-content-hover);
}

#account .devices .device button:active:hover::before {
    background-color: var(--inline-button-content-pressed);
}

#account .devices .device button:disabled::before,
#account .devices .device button:disabled:hover::before,
#account .devices .device button:disabled:active:hover::before {
    background-color: rgb(var(--season-primary-rgb));
    background-color: color(var(--season-primary-color));
}

#account .devices .device button.remove::before {
    -webkit-mask-image: url("/images/DeviceRemove.svg");
    mask-image: url("/images/DeviceRemove.svg");
}

#account .devices .device button.rename::before {
    -webkit-mask-image: url("/images/DeviceRename.svg");
    mask-image: url("/images/DeviceRename.svg");
}

#account .devices .device button.resend::before {
    -webkit-mask-image: url("/images/DeviceResend.svg");
    mask-image: url("/images/DeviceResend.svg");
}

#account .devices .device button.sent::before {
    -webkit-mask-image: url("/images/DeviceSent.svg");
    mask-image: url("/images/DeviceSent.svg");
}

#account .settingsGroup .credentialButtons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
    width: 100%;
}

#account .settingsGroup .credentialButtons button {
    flex-grow: 1;
}

#account .settingsGrid {
    display: grid;
    grid-template-columns: [labels] auto [controls] auto;
    row-gap: 6px;
    column-gap: 8px;
    align-items: baseline;
    /* width: max-content; */
}

#account .settingsGrid :nth-child(2n-1) {
    text-align: right;
}

@media screen and (max-width: 560px) {
    #account .notificationsGroup .settingsGrid {
        grid-template-columns: [unified] auto;
        row-gap: 4px;
    }
    
    #account .notificationsGroup .settingsGrid :nth-child(2n-1) {
        text-align: left;
        font-size: 13px;
    }
    
    #account .notificationsGroup .settingsGrid :nth-child(2n) {
        margin-bottom: 8px;
    }
}

#account .settingsGrid select {
    font-size: medium;
}

#account .settingsGrid label {
    font-size: 15px;
}

#account .settingsGrid #accountID {
    font-size: 13px;
    font-family: ui-monospace, Menlo, Monaco, monospace;
}

#account button {
    position: relative;
    border: 0px;
    border-radius: 8px;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--bright-button-content-color);
    background-color: rgb(var(--season-bright-rgb));
    background-color: color(var(--season-bright-color));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 8px 20px;
}

#account button.small {
    border-radius: 6px;
    font-size: 14px;
    padding: 4px 16px;
}

#account button:active:hover {
    background-color: rgb(var(--light-season-shadow-rgb));
    background-color: color(var(--light-season-shadow-color));
}

#account h3 {
    text-align: left;
    font-weight: 500;
}

#account h3 .tag {
    position: relative;
    top: 1px;
    font-size: 0.6em;
    background-color: rgb(var(--season-bright-rgb));
    background-color: color(var(--season-bright-color));
    color: var(--bright-button-content-color);
    margin-left: 12px;
    border-radius: 4px;
    padding: 3px 10px;
    align-self: center;
    min-width: fit-content;
}

#account .buttons {
    position: relative;
    height: max-content;
    width: 100%;
    margin: 60px 0px 40px;
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 30px;
}

#account .buttons.solo {
    margin: 60px 0px 66px;
}

#account #mergeButtons {
    margin: 30px 0px 36px;
}

#account .secondaryButtons {
    position: relative;
    height: max-content;
    width: 100%;
    margin: 40px 0px;
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 30px;
}

#account .buttons > button {
    position: relative;
    width: 240px;
    border: 0px;
    border-radius: 12px;
    height: 42px;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 600;
    color: rgb(var(--light-season-primary-color));
    color: color(var(--light-season-primary-color));
    background-color: rgba(var(--dark-season-primary-rgb), var(--glass-button-fill-alpha));
    background-color: color(var(--dark-season-primary-color) / var(--glass-button-fill-alpha));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px 16px;
    box-shadow: 0px 10px 30px rgba(var(--season-shadow-rgb), 0.4), 0 0 20px 15px var(--glass-button-inner-shadow-color) inset;
    box-shadow: 0px 10px 30px color(var(--season-shadow-color) / 0.4), 0 0 20px 15px var(--glass-button-inner-shadow-color) inset;
    outline: 1px solid rgba(var(--season-primary-rgb), 0.1);
    outline: 1px solid color(var(--season-primary-color) / 0.1);
}

#account .secondaryButtons > button {
    position: relative;
    width: 240px;
    border: 0px;
    border-radius: 12px;
    height: 36px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: rgb(var(--light-season-primary-color));
    color: color(var(--light-season-primary-color));
    background-color: rgba(var(--dark-season-primary-rgb), var(--glass-button-fill-alpha));
    background-color: color(var(--dark-season-primary-color) / var(--glass-button-fill-alpha));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px 16px;
    box-shadow: 0px 10px 30px rgba(var(--season-shadow-rgb), 0.2), 0 0 20px 15px var(--glass-button-inner-shadow-color) inset;
    box-shadow: 0px 10px 30px color(var(--season-shadow-color) / 0.2), 0 0 20px 15px var(--glass-button-inner-shadow-color) inset;
    outline: 1px solid rgba(var(--season-primary-rgb), 0.1);
    outline: 1px solid color(var(--season-primary-color) / 0.1);
}

@media screen and (max-width: 560px) {
    #account .buttons,
    #account .secondaryButtons {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin: 40px 0px;
    }
    
    #account .buttons > button,
    #account .secondaryButtons > button {
        width: 90%;
    }
}

#account .buttons.disabled > button,
#account .secondaryButtons.disabled > button,
#account .buttons > button:disabled,
#account .secondaryButtons > button:disabled {
    opacity: 0.6;
    pointer-events: none;
}

#account .buttons > button:hover,
#account .secondaryButtons > button:hover {
    background-color: var(--glass-button-fill-hover);
}

#account .buttons > button:active:hover,
#account .secondaryButtons > button:active:hover {
    color: rgba(var(--dark-season-shadow-rgb), 0.8);
    color: color(var(--dark-season-shadow-rgb) / 0.8);
    background-color: rgba(var(--dark-season-primary-rgb), 0.5);
    background-color: color(var(--dark-season-primary-color) / 0.5);
    box-shadow: 0px 6px 20px rgba(var(--season-shadow-rgb), 0.2), 0 2px 30px 10px rgba(var(--dark-season-shadow-rgb), 0.4) inset;
    box-shadow: 0px 6px 20px color(var(--season-shadow-color) / 0.2), 0 2px 30px 10px color(var(--dark-season-shadow-color) / 0.4) inset;
    padding: 3px 16px 1px;
}

#account .infoText {
    opacity: 0.8;
    font-size: 0.8em;
}

#account .membershipGroup #neverSubscribed {
    margin-top: 4px;
}

#account .membershipGroup #neverSubscribed,
#account .membershipGroup #hasMembership {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#account .membershipGroup #hasMembership {
    gap: 8px;
}

#account .membershipGroup #hasMembership h3 {
    text-align: center;
    margin: 0px;
    text-wrap: balance;
}

#account .membershipGroup #hasMembership p {
    margin: 0px;
    text-align: center;
}

#account .membershipGroup .row {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: center;
}

.hidden {
    display: none;
}

@media screen and (max-width: 800px) {
    #account .membershipGroup .row.membershipButtons {
        flex-direction: column;
        align-items: center;
    }
}

@media screen and (max-width: 400px) {
    #account .membershipGroup .row.membershipButtons button {
        font-size: 12px;
    }
}

#account .membershipGroup .row input {
    border-radius: 4px;
    width: 180px;
    border: 0px;
    outline: 1px solid rgba(var(--season-primary-rgb), 0.1);
    padding: 2px 10px;
    box-shadow: 0 1px 1px rgba(var(--season-primary-rgb), 0.5);
    box-shadow: 0 1px 1px color(var(--season-primary-color) / 0.5);
    outline-offset: 0px;
}

#account .membershipGroup .row a {
    text-decoration: none;
    font-weight: bold;
    font-size: 0.8em;
    color: rgb(var(--season-primary-rgb));
    color: color(var(--season-primary-color));
    flex-shrink: 0;
}

#account .membershipGroup .row a:hover {
    opacity: 1;
}

#account .membershipGroup .row input:focus {
    outline: 3px solid rgba(var(--season-bright-rgb), 0.6);
}

#account .membershipGroup #verifiedIcon {
    position: relative;
    width: 18px;
    height: 18px;
    background-color: rgb(var(--season-primary-rgb));
    background-color: color(var(--season-primary-color));
    bottom: -4.5px;
    flex-shrink: 0;
}

#account .membershipGroup #verifiedIcon.editing {
    -webkit-mask-image: url("/images/verification-unverified.svg");
    mask-image: url("/images/verification-unverified.svg");
    opacity: 0.5;
}

#account .membershipGroup #verifiedIcon.pending {
    -webkit-mask-image: url("/images/verification-unverified.svg");
    mask-image: url("/images/verification-unverified.svg");
    opacity: 0.75;
}

#account .membershipGroup #verifiedIcon.modified {
    -webkit-mask-image: url("/images/verification-modified.svg");
    mask-image: url("/images/verification-modified.svg");
}

#account .membershipGroup #verifiedIcon.accepted {
    -webkit-mask-image: url("/images/verification-accepted.svg");
    mask-image: url("/images/verification-accepted.svg");
}

#account #subscriptions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

#account #subscriptions .subscription {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 4px 10px;
    border-radius: 10px;
    background-color: rgba(var(--season-primary-rgb), 0.1);
    background-color: color(var(--season-primary-color) / 0.1);
    width: 100%;
    font-size: 0.9em;
    gap: 4px;
}

#account #subscriptions .subscription h4 {
    font-size: 15px;
    font-weight: 500;
    margin: 0;
    word-break: break-word;
}

#account #subscriptions .subscription h5 {
    font-size: 14.5px;
    font-weight: 400;
    opacity: 0.6;
    margin: 0;
    word-break: break-word;
    margin-top: -2px;
}

#account #subscriptions .subscription h5 strong {
    font-weight: 550;
}

#account #subscriptions .options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#account #subscriptions .options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: stretch;
    margin: 6px -4px 2px;
}

#account #subscriptions .options button {
    flex-grow: 1;
    border-radius: 6px;
}

#account #subscriptions .subscription .infoText {
    margin-top: -2px;
    margin-bottom: 2px;
}

#membership.section.top > .content {
    padding: 30px 20px 100px;
}

#membership.section > .content {
    padding: 0px 20px 100px;
}

#membership.section.top h1 {
    font-size: 3rem;
    line-height: 3rem;
    font-weight: 700;
    text-align: left;
    padding-bottom: 10px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#membership h1 button {
    position: relative;
    border: 0px;
    border-radius: 8px;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--bright-button-content-color);
    background-color: rgb(var(--season-bright-rgb));
    background-color: color(var(--season-bright-color));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 8px 20px;
}

#membership h1 button:active:hover {
    background-color: rgb(var(--light-season-shadow-rgb));
    background-color: color(var(--light-season-shadow-color));
}

#membership .content > h2 {
    font-size: 2rem;
    line-height: 2rem;
    text-align: left;
    font-weight: 700;
    margin: 40px 0px 16px;
}

#membership.section.top .content > h3 {
    text-align: left;
    font-weight: 500;
    margin-bottom: 40px;
}

#priceTable {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-items: stretch;
    justify-content: center;
    flex-flow: wrap;
    margin: 20px 0px;
    gap: 20px;
}

#priceTable.hidden,
#appStoreCheckout.hidden {
    display: none;
}

#priceTable .subscription,
#appStoreCheckout {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-items: stretch;
    min-width: 300px;
    width: 300px;
    max-width: 500px;
    flex-grow: 1;
    border-radius: 22px;
    padding: 20px;
    gap: 8px;
    background: var(--fill-color-transparent);
    backdrop-filter: blur(6px);
    outline: 2px solid rgba(var(--season-primary-rgb), 0.15);
    outline: 2px solid color(var(--season-primary-color) / 0.15);
    outline-offset: -1px;
}

#appStoreCheckout {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: auto;
    max-width: none;
    margin: 20px auto;
    padding: 15px 20px;
}

#appStoreCheckout div {
    position: relative;
    display: flex;
    gap: 8px;
    flex-direction: column;
}

@media screen and (max-width: 740px) {
    #appStoreCheckout {
        max-width: 500px;
        flex-direction: column;
        align-items: stretch;
        justify-content: stretch;
        gap: 18px;
        padding: 15px 20px 20px;
    }
}

#priceTable .subscription:hover,
#priceTable .subscription.dono,
#appStoreCheckout:hover {
    background: var(--fill-color-transparent-hover);
    outline: 2px solid rgba(var(--season-primary-rgb), 0.75);
    outline: 2px solid color(var(--season-primary-color) / 0.75);
}

#membership #priceTable .subscription h3,
#appStoreCheckout h3 {
    display: flex;
    margin: 0px;
    gap: 8px;
    font-size: 1.2rem;
    font-weight: 650;
    align-items: baseline;
    justify-content: space-between;
    color: rgb(var(--season-primary-rgb));
    color: color(var(--season-primary-color));
}

#priceTable .subscription h3 .tag {
    color: var(--bright-button-content-color);
    gap: 8px;
    font-size: 0.8em;
    border-radius: 6px;
    padding: 2px 10px;
    background: rgb(var(--season-bright-rgb));
    background: color(var(--season-bright-color));
}

#priceTable .subscription .price {
    font-size: 2.4rem;
    font-weight: 600;
    margin-top: -4px;
    color: rgb(var(--season-primary-rgb));
    color: color(var(--season-primary-color));
}

#priceTable .subscription .price span {
    font-size: 1.2rem;
    font-weight: 750;
    color: var(--content-color);
}

@media screen and (max-width: 380px) {
    #priceTable .subscription,
    #appStoreCheckout {
        min-width: 220px;
        width: 220px;
    }
    
    #priceTable .subscription .price {
        font-size: 2.2rem;
    }
    
    #priceTable .subscription .price span {
        font-size: 1.0rem;
    }
}

#priceTable .subscription .description,
#appStoreCheckout .description {
    font-size: 1rem;
    color: var(--content-color);
    opacity: 0.9;
}

#priceTable .subscription hr {
    width: auto;
    margin: 8px 0px;
    height: 1.5px;
    border: none;
    background: rgb(var(--season-primary-rgb));
    background: color(var(--season-primary-color));
    border-radius: 0.75px;
    opacity: 0.1;
}

#priceTable .subscription .features {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--content-color);
    font-size: 0.9rem;
    font-weight: 450;
}

#priceTable .subscription .features .icon {
    display: flex;
    gap: 4px;
}

#priceTable .subscription .features .icon::before {
    display: block;
    content: "";
    width: 18px;
    height: 18px;
    background: rgb(var(--season-primary-rgb));
    background: color(var(--season-primary-color));
}

#priceTable .subscription .features .icon.personalizedQueue::before {
    mask-image: url("/images/feature-personalizedQueue.svg");
}

#priceTable .subscription .features .icon.pastSeasons::before {
    mask-image: url("/images/feature-pastSeasons.svg");
}

#priceTable .subscription .features .icon.seasonSneakPeek::before {
    mask-image: url("/images/feature-seasonSneakPeek.svg");
}

#priceTable .subscription .features .icon.episodeNotifications::before {
    mask-image: url("/images/feature-episodeNotifications.svg");
}

#priceTable .subscription .features .icon.expandedSearch::before {
    mask-image: url("/images/feature-expandedSearch.svg");
}

#priceTable .subscription .features .icon.creditsName::before {
    mask-image: url("/images/feature-creditsName.svg");
}

#priceTable .subscription .features .icon.donoFeatures::before {
    mask-image: url("/images/feature-donoFeatures.svg");
}

#priceTable .subscription .features .icon.directSupporter::before {
    mask-image: url("/images/feature-directSupporter.svg");
}

#priceTable .subscription .features .icon.seasonNotifications::before {
    mask-image: url("/images/feature-seasonNotifications.svg");
}

#priceTable .subscription .features .icon.futureSeasonEarlyAccess::before {
    mask-image: url("/images/feature-futureSeasonEarlyAccess.svg");
}

#priceTable .subscription .features .icon.bestSeasonLists::before {
    mask-image: url("/images/feature-bestSeasonLists.svg");
}

#priceTable .subscription .details {
    width: auto;
    margin-top: auto;
    padding-top: 10px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.8;
}

#priceTable .subscription button,
#appStoreCheckout button {
    position: relative;
    border: 0px;
    border-radius: 8px;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--bright-button-content-color);
    background-color: rgb(var(--season-bright-rgb));
    background-color: color(var(--season-bright-color));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 8px 20px;
    cursor: pointer;
}

#priceTable .subscription button:active:hover,
#appStoreCheckout button:active:hover {
    background-color: rgb(var(--light-season-shadow-rgb));
    background-color: color(var(--light-season-shadow-color));
}

#membership .buttons {
    position: relative;
    height: max-content;
    width: 100%;
    margin: 40px 0px 0px;
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 30px;
}

#membership .buttons > button {
    position: relative;
    width: 240px;
    border: 0px;
    border-radius: 12px;
    height: 42px;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 600;
    color: rgb(var(--light-season-primary-color));
    color: color(var(--light-season-primary-color));
    background-color: rgba(var(--dark-season-primary-rgb), var(--glass-button-fill-alpha));
    background-color: color(var(--dark-season-primary-color) / var(--glass-button-fill-alpha));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px 16px;
    box-shadow: 0px 10px 30px rgba(var(--season-shadow-rgb), 0.4), 0 0 20px 15px var(--glass-button-inner-shadow-color) inset;
    box-shadow: 0px 10px 30px color(var(--season-shadow-color) / 0.4), 0 0 20px 15px var(--glass-button-inner-shadow-color) inset;
    outline: 1px solid rgba(var(--season-primary-rgb), 0.1);
    outline: 1px solid color(var(--season-primary-color) / 0.1);
}

@media screen and (max-width: 560px) {
    #membership .buttons {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin: 40px 0px;
    }
    
    #membership .buttons > button {
        width: 90%;
    }
}

#membership .buttons.disabled > button {
    opacity: 0.6;
    pointer-events: none;
}

#membership .buttons > button:hover {
    background-color: var(--glass-button-fill-hover);
}

#membership .buttons > button:active:hover {
    color: rgba(var(--dark-season-shadow-rgb), 0.8);
    color: color(var(--dark-season-shadow-color) / 0.8);
    background-color: rgba(var(--dark-season-primary-rgb), 0.5);
    background-color: color(var(--dark-season-primary-color) / 0.5);
    box-shadow: 0px 6px 20px rgba(var(--season-shadow-rgb), 0.2), 0 2px 30px 10px rgba(var(--dark-season-shadow-rgb), 0.4) inset;
    box-shadow: 0px 6px 20px color(var(--season-shadow-color) / 0.2), 0 2px 30px 10px color(var(--dark-season-shadow-color) / 0.4) inset;
    padding: 3px 16px 1px;
}

#membership.section.top .infoText {
    opacity: 0.8;
    font-size: 0.8em;
}

/* --- when the screen is less than ???px --- */

@media screen and (max-width: 960px) {
    .header h1 {
        font-size: calc(100vw * (58/960));
        line-height: calc(100vw * (57/960));
        margin: calc(100vw * (30/960)) calc(100vw * (40/960));
    }
    
    .section > .content h1 {
        font-size: calc(100vw * (58/960));
    }
    
    #download .card-grid {
        flex-direction: column;
        gap: 0px;
    }
    
    #download .card {
        width: 100%;
    }    
    
    
    #download .card-collection {
        justify-content: space-evenly;
    }
    
    /* info cards */
    
    .card-collection {
        justify-content: space-evenly;
        gap: calc(100vw * (40/960));
        margin: 0px calc(100vw * (40/960));
    }
    
    .card {
        width: calc(100vw * (420/960));
        height: auto;
        /* aspect-ratio: 420 / 346; */
        margin-top: calc(100vw * (40/960));
        border-radius: calc(100vw * (16/960));
    }
    
    .card img {
        border-radius: calc(100vw * (16/960)) calc(100vw * (16/960)) 0px 0px;
    }
    
    .label {
        margin-top: calc(100vw * (6/960));
        padding-left: calc(100vw * (16/960));
        padding-right: calc(100vw * (8/960));
    }
    
    .label h2 {
        font-size: calc(100vw * (22/960));
    }
    
    .label p {
        font-size: calc(100vw * (18/960));
        margin: calc(100vw * (10/960)) 0px;
    }
    
    .label .tag {
        padding: calc(100vw * (2/960)) calc(100vw * (4/960));
        color: var(--bright-button-content-color);
        border-radius: calc(100vw * (6/960));
        font-size: calc(100vw * (16/960))
    }
    
    #membership .card-collection {
        gap: calc(100vw * (25/960));
    }
    
    #membership .header p {
        font-size: calc(100vw * (23/960));
        margin: calc(100vw * (30/960)) calc(100vw * (40/960));
        margin-top: 0px;
    }
    
    .membership-card img {
        width: calc(100vw * (140/960));
        height: calc(100vw * (90/960));
    }
    
    #membership > .content h1 {
        margin-top: 30px;
    }
    
    #feedback > .content h1 {
        padding: calc(100vw * (30/960)) calc(100vw * (150/960));
    }
    
    #feedback > .content p {
        font-size: calc(100vw * (23/960));
    }
    
    #feedback > .content a {
        font-size: calc(100vw * (17/960));
        width: calc(100vw * (260/960));
    }
    
    #support-button {
        padding: calc(100vw * (14/960)) 0px;
        width: calc(100vw * (260/960));
        border-radius: 7px;
        font-weight: calc(100vw * (500/960));
        font-size: calc(100vw * (17/960));
    }
}

@media screen and (max-width: 800px) {
    #membership .header p {
        font-size: calc(100vw * (18/800));
    }
}

@media screen and (max-width: 600px) {
    .header {
        flex-direction: column;
    }
    
    .pages {
        margin: 20px auto;
    }
    
    .membership-card {
        width: auto;
    }
    
    #membership .card-collection {
        gap: 0px;
        flex-direction: column;
        align-items: center;
    }
    
    #membership > .content h1 {
        margin-top: 30px;
        margin-left: 30px;
    }
    
    #membership .header p {
        font-size: calc(100vw * (17/600));
    }
    
    .membership-card img {
        width: calc(100vw * (140/600));
        height: calc(100vw * (90/600));
    }
    
    .membership-card.flip {
        flex-flow: row-reverse;
    }
    
    .membership-card.flip .label {
        padding-right: calc(100vw * (16/600));
        padding-left: 0px;
    }
}

@media screen and (max-width: 500px) {
    .label h2 {
        margin-right: 20px;
    }
    
    #download .card-collection {
        flex-direction: column;
        gap: 0px;
    }
    
    #download .card {
        width: 100%;
    }
    
    .card-collection {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    
    .card {
        width: calc(100vw * (420/500));
        margin-top: calc(100vw * (40/500));
        border-radius: calc(100vw * (16/500));
    }
    
    .card img {
        border-radius: calc(100vw * (16/500)) calc(100vw * (16/500)) 0px 0px;
    }
    
    .label {
        margin-top: calc(100vw * (6/500));
        padding-left: calc(100vw * (16/500));
        padding-right: calc(100vw * (8/500));
    }
    
    .label h2 {
        font-size: calc(100vw * (22/500));
    }
    
    .label p {
        font-size: calc(100vw * (18/500));
        margin: calc(100vw * (10/500)) 0px;
    }
    
    .label .tag {
        padding: calc(100vw * (2/500)) calc(100vw * (4/500));
        color: var(--bright-button-content-color);
        border-radius: calc(100vw * (6/500));
        font-size: calc(100vw * (16/500));
    }
    
    .footer a {
        padding: 0px 5px;
    }
}

@media screen and (max-width: 400px) {
    #membership .header p {
        font-size: calc(100vw * (12/400));
    }
}

@media screen and (max-width: 375px) {
    .footer a {
        padding: 0px 5px;
    }
}