:root,
body.frydlant {
    --primary: #556500;
    --on-primary: #ffffff;
    --primary-container: #adbf52;
    --on-primary-container: #ffffff;

    --secondary: #60c3e1;
    --on-secondary: #ffffff;
    --secondary-container: #60c3e1;
    --on-secondary-container: #ffffff;

    --tertiary: #3a665c;
    --on-tertiary: #ffffff;
    --tertiary-container: #bdecdf;
    --on-tertiary-container: #00201a;
    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #410002;
    --background: #fffcf4;
    --on-background: #1b1c17;
    --surface: #fcf9f1;
    --on-surface: #1b1c17;
    --surface-variant: #e4e3d3;
    --on-surface-variant: #46483b;
    --outline: #77786a;
    --outline-variant: #c7c7b7;
    --shadow: #000000;
    --scrim: #000000;
    --inverse-surface: #30312b;
    --inverse-on-surface: #f3f1e8;
    --inverse-primary: #bcd063;
    --surface-dim: #dcdad2;
    --surface-bright: #fcf9f1;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f6f4eb;
    --surface-container: #f0eee5;
    --surface-container-high: #eae8e0;
    --surface-container-highest: #e5e2da;
}

.dot {
    height: 2em;
    width: 2em;
    border-radius: 50%;
    display: inline-block;
    margin-right: -0.5em;
    margin-left: -0.5em;
}

.legend-dot {
    height: 1em;
    width: 1em;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.75ex;
}

/*header {*/
/*    mask: conic-gradient(from -70deg at bottom, #0000, #000 1deg 139deg, #0000 140deg) 50%/10.99em 100%;*/
/*    padding-bottom: 1.5em;*/
/*    margin-bottom: 2em;*/
/*}*/

/*main {*/
/*    padding-top: 1.2em;*/
/*}*/

/*footer {*/
/*    mask:*/
/*            radial-gradient(6.71em at 50% 9em,#000 99%,#0000 101%) calc(50% - 6em) 0/12em 100%,*/
/*            radial-gradient(6.71em at 50% -6em,#0000 99%,#000 101%) 50% 3em/12em 100% repeat-x;*/
/*    padding-top: 4em;*/
/*}*/