:root {
    color-scheme: light dark;

    --color-light: #fdfdfd;
    --color-dark: black;
    --color-accent: #dddddd;


    --color-main-background: var(--color-light);

    --color-section-background: var(--color-light);
    --color-section: var(--color-dark);
    --color-section-border: #282828;
    --color-section-box-shadow: #888888;

    --color-header-background: var(--color-light);
    --color-header-border: var(--color-accent);
    --color-header: var(--color-dark);

    --color-footer: #444444;
    --color-footer-border: var(--color-accent);

    --color-popup-background: var(--color-light);
    --color-popup-border: var(--color-dark);
    --color-popup: var(--color-dark);

    --color-disable: #7f7f7f;

    --radius: 6px;
    --radius-small: 3px;


    --color-checkbox-background: var(--color-light);
    --color-checkbox-background-hover: #f0f0f0;
    --color-checkbox-border: #7f7f7f;
    --color-checkbox: var(--color-dark);
    --color-checkbox-check: var(--color-dark);

    --color-symbols-row-background: var(--color-light);
    --color-symbols-row-border: var(--color-light);
    --color-symbols-row-input-underline: var(--color-dark);
    --color-symbols: var(--color-dark);

    --color-range-number-border: var(--color-dark);
    --color-range-number: var(--color-dark);
    --color-range-label: var(--color-dark);
    --color-range-track: #7f7f7f;
    --color-range-track-outline: var(--color-light);
    --color-range-track-progress: var(--color-dark);
    --color-range-track-focus-visible: var(--color-dark);
    --color-slider-thumb-border: var(--color-dark);
    --color-slider-thumb-background: var(--color-light);
    --color-slider-thumb-background-hover: #f0f0f0;

    --color-buttons-background: #333333;
    --color-button-border: var(--color-dark);
    --color-button-border-focus-visible: var(--color-light);
    --color-button-background: #0d0d0d;
    --color-button-background-hover: #303030;
    --color-button: var(--color-light);

    --color-output: var(--color-dark);


    --color-email-link: var(--color-dark);
    --color-copy-email: var(--color-dark);
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-light: #e6e6e6;
        --color-accent: #11BF1A;

        
        --color-header-background: var(--color-dark);
        --color-header-border: var(--color-accent);
        --color-header: var(--color-light);

        --color-footer: var(--color-light);

        --color-popup-background: #191919;
        --color-popup-border: var(--color-accent);
        --color-popup: var(--color-light);

        --color-main-background: #171717;

        --color-section-background: #191919;
        --color-section: var(--color-light);

        
    --color-checkbox-background: #191919;
    --color-checkbox-background-hover: var(--color-accent);
    --color-checkbox-border: var(--color-light);
    --color-checkbox: var(--color-dark);
    --color-checkbox-check: var(--color-light);
        --color-checkbox: var(--color-light);

        --color-symbols: var(--color-light);
        --color-symbols-row-input-underline: var(--color-light);

        --color-range-number-border: var(--color-light);
        --color-range-number: var(--color-light);
        --color-range-track-outline: #191919;
        --color-range-track-focus-visible: var(--color-light);
        --color-slider-thumb-border: var(--color-accent);
        --color-slider-thumb-background: var(--color-dark);
        --color-slider-thumb-background-hover: var(--color-accent);

        --color-button-background-hover: #043306;

        --color-output: var(--color-light);

        --color-email-link: var(--color-light);
        --color-copy-email: var(--color-light);
    }
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}




body {
    font-family: Arial, sans-serif;
    background-color: var(--color-main-background);
}

.header {
    background-color: var(--color-header-background);
    color: var(--color-header);
    cursor: pointer;
    border-bottom: 1px solid var(--color-header-border);
}

h1 {
    font-size: 1.8rem;
    font-weight: 300;
}

p {
    margin-bottom: 10px;
}

.footer {
    border-top: 1px solid var(--color-footer-border);
}

.footer-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.3em;
    list-style: none;
    font-size: 0.8rem;
    color: var(--color-footer);
}

.footer-list a {
    padding: 2px 5px;
    text-decoration: none;
    color: var(--color-footer);
}

.footer-list a:hover,
.footer-list a:active,
.footer-list a:focus,
.footer-list a:focus-visible {
    outline: 0;
    color: var(--color-footer);
    text-decoration: underline;
}

.footer-list a:visited {
    color: var(--color-footer);
}

#popup-info {
    position: fixed;
    display: none;
    min-width: 10rem;
    padding: 0.5rem 1rem;
    word-break: normal;
    transform: translate(-50%, -1rem);
    font-size: 0.9rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-popup-border);
    background-color: var(--color-popup-background);
    color: var(--color-popup);
    outline: 5px solid var(--color-popup-background);
}

#popup-info.visible {
    display: block;
}

.main-container {
    background-image: url("/images/back_light.svg");
    background-repeat: no-repeat;
    background-size: 850px;
    background-position: center;
}

@media (prefers-color-scheme: dark) {
    .main-container {
        background-image: url("/images/back_dark.svg");
    }

    .header {
        background-image: none;
    }
}

@media (max-width:768px) {
    h1 {
        font-size: 1.7rem;
    }

    .footer-list {
        gap: 0.3em;
        font-size: 0.75rem;
        word-spacing: -.05em;
    }
}

@media (max-width:480px) {
    .main-container {
        background-size: 500px;
    }
}

@media (max-width:480px) or (max-height:500px) {
    h1 {
        font-size: 1.6rem;
    }

    .footer-list {
        gap: 0.3em;
        font-size: 0.7rem;
    }
}