* { box-sizing: border-box; color: inherit; font-size: inherit; font-family: inherit; -webkit-tap-highlight-color: transparent }


button { border: none }
button:hover { cursor: pointer; filter: brightness(1.2) }


body { display: flex; margin: 0; width: 100vw; height: 100vh; background: var(--bg-body); color: var(--color); font-family: rubik, sans-serif; flex-direction: column }


header { display: flex; padding: .5em 1em; height: 3em; background: var(--bg-header); justify-content: space-between; align-items: center; gap: 1em }

header h1 a { display: flex; border-bottom: 1px solid transparent; font-weight: normal; text-transform: uppercase; align-items: center; gap: .3em; transition: .1s; filter: brightness(.8); text-decoration: none }
header h1 a:hover { border-bottom: 1px solid #F5B862; filter: brightness(1) }
header h1  svg { width: 1em; height: 1em; }
@media (max-width: 400px) { header h1 span { display: none } }
header .link-metw { padding: .2em; height: 100%; aspect-ratio: 1 }

header .toolbar { display: flex; background: inherit; gap: .75em } 
header .toolbar select { display: flex; padding: .5em 1em .5em .5em; width: 100%; background: inherit; border: none; border-radius: .5em; align-items: center; filter: brightness(1.1) }
header .toolbar button { padding: .5em; width: 2em; height: 2em; flex-shrink: 0; position: relative; background: inherit; border: none; border-radius: .5em; filter: brightness(1.1) }
header .toolbar button:hover { filter: brightness(1.2) }
header .toolbar button.active::before { display: block; content: ''; width: .2em; height: .2em; position: absolute; right: .3em; bottom: .3em; background: black }


main { display: grid; flex-grow: 1; place-items: center }
main > * { width: 100%; height: 100%; grid-area: 1 / 1 }
 iframe { border: none; user-select: none }
 #loading { display: flex; background: var(--bg-body); flex-direction: column; justify-content: center; align-items: center; z-index: 2; font-size: 1.5em; display: none }