:root {
    --bg: #ffffff;
    --nav: #e3e3e3;
    --text: #e3e3e3;
    --outline: #c1c1c1;
    --bubble: #f0f0f0;
    font-family: serif;
}

[data-theme="light"] {
    --bg: #ffffff;
    --nav: #e3e3e3;
    --text: #3e3e3e;
    --outline: #c1c1c1;
    --bubble: #f0f0f0;
}

[data-theme="dark"] {
    --bg: #3e3e3e;
    --nav: #232323;
    --text: #ababab;
    --outline: #6f6f6f;
    --bubble: #303030;
}

[data-theme="lavender"] {
    --bg: #f3ecf8;
    --nav: #d7ccdf;
    --text: #493663;
    --outline: #b3a6c6;
    --bubble: #e1d8e8;
}

[data-theme="waves"] {
    --bg: #a3cac6;
    --nav: #8fb3b0;
    --text: #2c3637;
    --outline: #607875;
    --bubble: #9dbfbc;
}

[data-theme="dark-lavender"] {
    --bg: #59406a;
    --nav: #443351;
    --text: #aea1bf;
    --outline: #765f8a;
    --bubble: #4c375b;
}

body {
    background-color: var(--bg);
}

ul {
    list-style-type: none;
    padding: 0;
    overflow: hidden;
    background-color: var(--nav);
    border: solid 0.2em var(--outline);
    border-radius: 0.5em;
    user-select: none;
}


ul li a {
    display: flex;
    list-style-type: none;
    padding: 0.5em;
    font-size: 1.25em;
    background-color: var(--nav);
    color: var(--text);
    user-select: none;
    font-weight: bold;
}

ul li select {
    display: flex;
    list-style-type: none;
    padding: 0.5em;
    font-size: 1.25em;
    background-color: var(--nav);
    color: var(--text);
    border: none;
    font-weight: bold;
    font-family: serif;
}

ul li select option {
    display: flex;
    list-style-type: none;
    padding: 0.5em;
    font-size: 1em;
    background-color: var(--nav);
    color: var(--text);
    font-weight: bold;
    font-family: serif;
}

h1  {
    text-align: center;
    z-index: 1;
    overflow: hidden;
    font-size: 1.25em;
    color: var(--text);
    user-select: none;
}
    
p {
    padding: 0.1em;
    text-align: center;
    font-weight: bold;
    z-index: 1;
    overflow: hidden;
    font-size: 1.25em;
    color: var(--text);
    user-select: none;
} 

div {
    padding: 0.4em;
    text-align: left;
    font-weight: bold;
    z-index: 1;
    font-size: 1.25em;
    border: solid 0.2em var(--outline);
    border-radius: 0.5em;
    color: var(--text);
    user-select: none;
    overflow-y: scroll;
    margin-right: 20%;
    margin-left: 20%;
    background-color: var(--bubble);
}

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