/* styles.css */
button {
    margin: 0;
}

body.dark {
    --primary: #78dc77;
    --on-primary: #00390a;
    --primary-container: #005313;
    --on-primary-container: #94f990;
    --secondary: #baccb3;
    --on-secondary: #253423;
    --secondary-container: #3b4b38;
    --on-secondary-container: #d5e8cf;
    --tertiary: #a0cfd4;
    --on-tertiary: #00363b;
    --tertiary-container: #1f4d52;
    --on-tertiary-container: #bcebf0;
    --error: #ffb4ab;
    --on-error: #690005;
    --error-container: #93000a;
    --on-error-container: #ffb4ab;
    --background: #1a1c19;
    --on-background: #e2e3dd;
    --surface: #121411;
    --on-surface: #e2e3dd;
    --surface-variant: #424940;
    --on-surface-variant: #c2c9bd;
    --outline: #8c9388;
    --outline-variant: #424940;
    --shadow: #000000;
    --scrim: #000000;
    --inverse-surface: #e2e3dd;
    --inverse-on-surface: #2f312d;
    --inverse-primary: #006e1c;
    --surface-dim: #121411;
    --surface-bright: #383a36;
    --surface-container-lowest: #0c0f0c;
    --surface-container-low: #1a1c19;
    --surface-container: #1e201d;
    --surface-container-high: #282b27;
    --surface-container-highest: #333531;
}

body.light {
    --primary: #006493;
    --on-primary: #ffffff;
    --primary-container: #cae6ff;
    --on-primary-container: #001e30;
    --secondary: #50606e;
    --on-secondary: #ffffff;
    --secondary-container: #d3e5f5;
    --on-secondary-container: #0c1d29;
    --tertiary: #65587b;
    --on-tertiary: #ffffff;
    --tertiary-container: #ebddff;
    --on-tertiary-container: #201634;
    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #410002;
    --background: #fcfcff;
    --on-background: #1a1c1e;
    --surface: #f9f9fc;
    --on-surface: #1a1c1e;
    --surface-variant: #dde3ea;
    --on-surface-variant: #41474d;
    --outline: #72787e;
    --outline-variant: #c1c7ce;
    --shadow: #000000;
    --scrim: #000000;
    --inverse-surface: #2e3133;
    --inverse-on-surface: #f0f0f3;
    --inverse-primary: #8dcdff;
    --surface-dim: #d9dadd;
    --surface-bright: #f9f9fc;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f3f3f6;
    --surface-container: #edeef1;
    --surface-container-high: #e8e8eb;
    --surface-container-highest: #e2e2e5;
}


body {
    font-family: "Roboto Mono", monospace, Arial, sans-serif;
    font-weight: 600;
    margin: 0;
    padding: 0;
    width: 100dvw;
}

#sid_progress {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 10;
    animation: stupidScale 500ms ease 0s infinite forwards;
}

progress.circle {
    animation: 0.3s to-circular linear infinite;
}

.privacylink:hover {
    color: blue;
}

.privacylink {
    position: absolute;
    left: 0;
    top: -5px;
    z-index: 5;
    text-decoration: underline;
    opacity: 0.5;
}

#sid_words {
    display: contents;
}

main {
    padding: 0px;
}

section {
    margin-bottom: 40px;
}

form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
    margin: auto;
}

label {
    font-weight: bold;
}

input,
select {
    padding: 10px;
    font-size: 1em;
}

.chart-container {
    max-width: 600px;
    margin: auto;
    margin-bottom: 20px;
}

.log {
    display: flex;
    gap: 1em;
    color: white;
    padding: 1em;
    width: fit-content;
    border-radius: 1em;
    margin: 1em;
    background-color: #368356;
}

h1 {
    font-size: 20px !important;
}

h2 {
    font-size: 20px !important;
}

/* Responsive design */
@media (max-width: 600px) {
    .chart-container {
        width: 100%;
    }
}

li {
    justify-content: space-between !important;
    padding-right: 2.5em !important;
    cursor: auto !important;
}

::-webkit-scrollbar {
    display: none;
}

@keyframes stupidScale {
    0% {
        transform: scale(1, 1);
    }

    10% {
        transform: scale(2.5, 1);
    }

    20% {
        transform: scale(1, 1.5);
    }

    30% {
        transform: scale(1.8, 1.3);
    }

    40% {
        transform: scale(1, 1.9);
    }

    50% {
        transform: scale(1.7, 0.4);
    }

    60% {
        transform: scale(0.7, 1.8);
    }

    70% {
        transform: scale(2, 2);
    }

    80% {
        transform: scale(0.4, 1.5);
    }

    90% {
        transform: scale(1.6, 0.3);
    }

    100% {
        transform: scale(1, 1);
    }
}

@media (max-width: 841px) {
    .hzvl {
        flex-direction: column;
    }

    .ththiuejr {
        min-width: 100% !important;
    }

    #recordList {
        width: 100% !important;
    }
}