* {
    box-sizing: border-box;
}

:root {
    font-family: system-ui;
}

body {
    background: white;
    margin: auto;
    transition: background .5s;
}

a {
    color: black;
    text-decoration: none;
    transition: border .2s, color .2s, transform .2s, background .5s;
}

a:hover {
    color: dodgerblue;
}

a, button, span {
    -webkit-tap-highlight-color: transparent;
}

button, input, select {
    background: initial;
    border: 1px solid gold;
    border-radius: .25rem;
    color: black;
    font-size: 1rem;
    height: 2.5rem;
    padding: .5rem;
    transition: box-shadow .2s, color .2s, background .5s, border .5s;
}

button:hover {
    background-color: gold;
    cursor: pointer;
}

button:focus, input:focus, select:focus {
    border-color: black;
    box-shadow: 0 0 0 .25rem rgba(0 0 0 / .25);
    outline: 0;
    z-index: 1;
}

option {
    all: initial;
}

.active {
    color: red;
}

nav {
    backdrop-filter: blur(.25rem);
    background: rgba(0 0 0 / .02);
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    max-width: 1440px;
    position: sticky;
    top: 0;
    transition: background .5s;
}

nav > a {
    height: 2.5rem;
    line-height: 1.5rem;
    padding: .5rem;
}

nav > button {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid gold;
    border-radius: 1.25rem;
    height: 2.5rem;
    position: absolute;
    right: 0.5rem;
    width: 2.5rem;
}

nav > button:hover {
    background-color: gold;
}

header, section {
    background: rgba(0 0 0 / .02);
    margin: auto;
    max-width: 1440px;
    transition:color .2s, background .5s;
}

header {
    padding: 0 .5rem;
}

section {
    padding: .5rem;
}

#clock {
    font-size: 2.5rem;
    text-align: center;
}

#search {
    background: rgba(0 0 0 / .04);
    border-radius: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    margin: auto auto .5rem;
    max-width: 720px;
    transition: .5s;
}

#search .dropdown {

}

#search .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

#search .dropdown > img {
    border-radius: 0.75rem;
    display: block;
    height: 1.5rem;
    margin: 0.5rem;
    width: 1.5rem;
}

#search .dropdown-menu {
    backdrop-filter: blur(4px);
    background: rgba(255 255 255 / .5);
    border-radius: .5rem;
    box-shadow: 0 0 8px .25rem rgba(0 0 0 / .08);
    display: flex;
    flex-wrap: wrap;
    opacity: 0;
    padding: .25rem;
    position: absolute;
    transition: .5s;
    visibility: hidden;
    z-index: 1;
}

#search .dropdown-menu > div {
    display: flex;
    flex-flow: column;
}

#search .dropdown-menu > div > span {
    line-height: 1.5rem;
    margin: .25rem;
    text-align: center;
}

#search .dropdown-menu > div > div {
    border: 1px solid aqua;
    border-radius: 1.25rem;
    display: flex;
    height: 2.5rem;
    padding: 7px;
    margin: .25rem;
    transition: background .5s;
    width: 9rem;
}

#search .dropdown-menu > div > div:hover {
    background: aqua;
    cursor: pointer;
}

#search .dropdown-menu > div > div > img {
    border-radius: .75rem;
    height: 1.5rem;
    width: 1.5rem;
}

#search .dropdown-menu > div > div > span {
    flex: auto;
    line-height: 1.5rem;
    text-align: center;
}

#search .suggestion {
    flex: auto;
    position: relative;
}

#search .suggestion > input {
    border: initial;
    border-radius: initial;
    width: 100%;
}

#search .suggestion > div {
    backdrop-filter: blur(4px);
    background: rgba(255 255 255 / .5);
    border-radius: .5rem;
    box-shadow: 0 0 8px .25rem rgba(0 0 0 / .08);
    display: none;
    position: absolute;
    width: 100%;
}

#search .suggestion > div > li {
    display: flex;
    list-style-type: none;
    transition: background .5s;
}

#search .suggestion > div > li:first-child {
    border-radius: .5rem .5rem 0 0;
}

#search .suggestion > div > li:last-child {
    border-radius: 0 0 .5rem .5rem;
}

#search .suggestion > div > li:hover {
    background: rgba(0 0 0 / .08);
}

#search .suggestion > div > li > :nth-child(1) {
    flex: auto;
    line-height: 1.5rem;
    padding: .5rem;
}

#search .suggestion > div > li > :nth-child(2) {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z'/><path d='M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066 0 0 1-.415-.492 1.988 1.988 0 0 1-.94.31z'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
    padding: .5rem;
    width: 2.5rem;
}

#search > button {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
    border: initial;
    border-radius: 1.25rem;
    height: 2.5rem;
    width: 2.5rem;
}

.input-group {
    display: flex;
    flex-wrap: wrap;
    /*margin: 0 0 .5rem;*/
}

.input-group > * {
    background: rgba(0 0 0 / .04);
    border: initial;
    border-radius: initial;
    line-height: 1.5rem;
    padding: .5rem;
    transition: box-shadow .2s, color .2s, background .5s;
    white-space: nowrap;
}

.input-group > input, .input-group > select {
    flex: auto;
}

.input-group > label {
    background: rgba(0 0 0 / .12);
}

.input-group > :first-child {
    border-radius: .25rem 0 0 .25rem;
}

.input-group > :last-child {
    border-radius: 0 .25rem .25rem 0;
}

.nav-site-bar {
    display: flex;
    flex-wrap: wrap;
}

.nav-site-bar > span {
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 2.5rem;
    width: 100%;
}

.nav-site-bar > a {
    background: rgba(0 0 0 / .04);
    border-radius: 1.25rem;
    display: flex;
    width: 10rem;
    height: 2.5rem;
    margin: .25rem;
    padding: .5rem;
}

.nav-site-bar > a:active {
    transform: scale(.9);
}

.nav-site-bar > a > img {
    border-radius: .75rem;
    width: 1.5rem;
    height: 1.5rem;
}

.nav-site-bar > a > span {
    flex: auto;
    line-height: 1.5rem;
    text-align: center;
    white-space: nowrap;
}

.dark {
    color: gainsboro;
}

.dark a {
    color: gainsboro;
}

.dark a:hover {
    color: dodgerblue;
}

.dark body {
    background: black;
}

.dark button, .dark input, .dark select {
    border-color: hotpink;
    color: white;
}

.dark button:hover {
    background-color: hotpink;
}

.dark button:focus, .dark input:focus, .dark select:focus {
    border-color: white;
    box-shadow: 0 0 0 .25rem rgba(255 255 255 / .25);
}

.dark .active {
    color: red;
}

.dark nav {
    background: rgba(255 255 255 / .08);
}

.dark nav > button {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='gainsboro' viewBox='0 0 16 16'><path d='M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z'/></svg>");
    border-color: hotpink;
}

.dark nav > button:hover {
    background-color: hotpink;
}

.dark option {
    background: black;
    color: inherit;
}

.dark header, .dark section {
    background: rgba(255 255 255 / .08);
}

.dark #search {
    background: rgba(255 255 255 / .08);
}

.dark #search .dropdown-menu {
    background: rgba(0 0 0 / .5);
    box-shadow: 0 0 8px .25rem rgba(255 255 255 / .08);
}

.dark #search .dropdown-menu > div > div {
    border: 1px solid indianred;
}

.dark #search .dropdown-menu > div > div:hover {
    background: indianred;
}

.dark #search .suggestion > div {
    background: rgba(0 0 0 / .5);
    box-shadow: 0 0 8px .25rem rgba(255 255 255 / .08);
}

.dark #search .suggestion > div > li:hover {
    background: rgba(255 255 255 / .12);
}

.dark #search .suggestion > div > li > :nth-child(2) {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='gainsboro' viewBox='0 0 16 16'><path d='M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z'/><path d='M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066 0 0 1-.415-.492 1.988 1.988 0 0 1-.94.31z'/></svg>");
}

.dark #search > button {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='gainsboro' viewBox='0 0 16 16'> <path d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/></svg>");
}

.dark .input-group > * {
    color: gainsboro;
    background: rgba(255 255 255 / .08);
}

.dark .input-group > label {
    background: rgba(255 255 255 / .16);
}

.dark .nav-site-bar > a {
    background: rgba(255 255 255 / .08);
}