h1 {
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 28px;
    margin-bottom: 0.5em;
    color: #3f4b44;
}

.annsym-wrap {
    max-width: 800px;
    margin: 0 auto;
}

.pie-part {
    display: flex;
    width: 200%;
}

#symchart, #symchart_alt {
    display: flex;
    width: 100%;
    justify-content: center;

    svg {
        overflow: visible;
        height: auto;
    }
}

.pie-container {
    overflow: hidden;
    background-image: url("klick.svg");
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: min(600px, 100%) 250px;

    .pie-part {
        margin-left: 0;
        transition: margin 0.3s ease;
    }

    .label-list#main_labels {
        display: grid;
    }

    .label-list#alt_labels {
        display: none;
    }

    &.alt {
        .pie-part {
            margin-left: -100%;
        }

        .label-list#main_labels {
            display: none;
        }

        .label-list#alt_labels {
            display: grid;
        }
    }
}

.label-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5em 1.5em;
    align-items: center;
    margin-top: 1em;
    font-family: 'Ubuntu Mono', monospace;
}

.pie-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4em 0.7em 0.5em;
    background: #f7f7f7;
    border-radius: 6px;
    font-size: 13px;
    letter-spacing: 0.03rem;

    &.omit {
        display: none;
    }
}

#lbl_so-plus-w, #lbl_swam-ocean {
    border-left: 6px solid hsl(197, 48%, 52%);
}
#lbl_all-bilat {
    border-left: 6px solid hsl(39, 79%, 62%);
}
#lbl_weekly {
    border-left: 6px solid hsl(143, 29%, 72%);
}
#lbl_bilat-wio {
    border-left: 6px solid hsl(22, 80%, 63%);
}
#lbl_bilat-east {
    border-left: 6px solid hsl(10, 80%, 63%);
}
#lbl_bilat-sa {
    border-left: 6px solid hsl(277, 13%, 60%);
}
#lbl_bilat-other {
    border-left: 6px solid hsl(277, 13%, 60%);
}

.click-tip {
    position: fixed;
    text-align: center;
    width: 100vw;
    left: 0;
    bottom: 0;
    font-size: 16px;
    color: #666;
    margin: 0 0 13vh;
    font-style: italic;
}

@media (min-width: 800px) {
    h1 {
        margin-top: 2.5em;
        font-size: 36px;
    }

    .pie-container {
        background-image: none;
    }

    .pie-labels-part {
        max-width: 500px;
        margin: 2em auto 0 auto;
    }

    .pie-label {
        font-size: 14px;
    }
}

@media (max-height: 510px) {
    h1 {
        font-size: 17px;
    }

    .click-tip {
        margin-bottom: 8px;
    }
}