index.css

body {
    margin: 0;
    font-family: Roboto, sans-serif;
    transition: opacity ease-in 0.2s;
}

a {
    text-decoration: none;
}

[slot="title"] {
    font-family: "Roboto Mono", monospace;
    -webkit-font-smoothing: antialiased;
    font-size: 1.25rem;
    line-height: 2rem;
    letter-spacing: 0.4px;
}

.white {
    --mdc-theme-primary: white;
    --mdc-button-outline-color: white;
    color: white;
}

mwc-switch {
    --mdc-switch-selected-handle-color: teal;
    --mdc-switch-selected-track-color: lightseagreen;
    /* ... additional states (hover/focus/pressed) + state-layer element */
    --mdc-switch-unselected-handle-color: goldenrod;
    --mdc-switch-unselected-track-color: palegoldenrod;
    --mdc-switch-unselected-icon-color: black;
    /* ... additional states (hover/focus/pressed) + state-layer element */
}

.fancy2 {
    color: #9fe079;
    --mdc-icon-size: 32px;
}

mwc-icon-button-toggle {
    --mdc-icon-size: 64px
}

.tab-container {
    padding: 20px;
    display: none;
}

.tab-container-active {
    display: block;
}