html {
    width: 100%;
    height: 100%;
    font-family: 'Calibri', sans-serif;
    color: #2d2d2d;
    background: url("../backgrounds/day/fondo.webp");
    background-size: cover;

    display: flex;
    align-items: center;

    --gap-big: 3ex;
    --gap-small: 1ex;
}

html.dark {
    background-image: url("../backgrounds/night/fondo_noche.webp");
    color: white;
}

html.flash {
    background: white;
}

html.flash * {
    visibility: hidden;
    pointer-events: none;
}

html.flash #flashlight,
html.flash #flashlight * {
    visibility: visible !important;
    pointer-events: auto !important;
}

* {
    cursor: url("../cursors/wii/Normal Select.cur"), auto;
}

*:active {
    cursor: url("../cursors/wii/Link Select.cur"), auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
}

h1 {
    margin-bottom: 3ex;
}

body {
    height: 100%;
    width: 100%;
    margin: auto;
    border: 1ex;
    display: flex;
    flex-direction: column;
}

body > div * {
    border-radius: var(--gap-small);
}

#header {
    display: flex;
    align-items: end;
    justify-content: space-between;
}

#header > pre {
    color: white;
    font-size: 1.2ex;
    margin: 0 0 20px 150px;
    text-shadow: 0 0 20px black;
}

#frame {
    display: flex;
    min-height: 0;
    border-radius: var(--gap-big);
    padding: 2ex;
    gap: 2ex;
    background: #ffffff33;
}

#nav {
    background: #ffffff80;
    border-radius: var(--gap-small);
    flex-grow: 0;
    flex-shrink: 1;
}

#nav > menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#nav > menu > li > menu {
    list-style-type: none;
    padding-left: 5ex;
}

#nav > menu > li.selected > a {
    background: #3e98dd;
    font-weight: bold;
}

#nav > menu > li:hover > a {
    transform: scale(120%);
    transition: transform 0.1s ease-out;
}

#nav > menu > li > a {
    color: white;
    text-decoration: none;
    padding: 1ex 2ex;
    background: #142b32;
    border-radius: 8px;
    margin: 2ex 2ex 1ex;
    display: block;
}

#nav > menu > li > menu > li > a {
    color: #142b32;
    text-decoration: none;
    display: block;
    padding: 0.2ex 2ex;
    margin: 0 2ex;
}

#main {
    flex: 1;
    overflow: auto;
    border-radius: 1ex;
}

#main > footer {
    border-radius: 14px;
    padding: 12px;
    background: #142b322e;
    clear: both;
}

#circles {
    padding: 1ex;
    word-spacing: 0.25ex;
}

#circles > * {
    width: 2ex;
    height: 2ex;
    border-radius: 1ex;
    display: inline-block;
}

#back {
    position: absolute;
    bottom: 2ex;
    right: 2ex;
}

#toolbar { text-align: right; }
#toolbar > * { margin: 2ex 0 0 2ex; }

#mii {
    pointer-events: none;
    z-index: 1;
}

.glass {
    /* Robada masiva de https://css.glass */
    box-shadow: 0 4px 30px #0000001a;
    backdrop-filter: blur(5px) brightness(0.9);
    border: 1px solid #ffffff4d;
}

.button {
    background: #ffffff80;
    padding: 1ex;
    border-radius: 14px;
    text-decoration: none;
    display: inline-block;
}

.button > img {
    width: 4ex;
    display: block;
}

@media (min-width: 120ex) { body { width: 100ex; } }
@media (min-width: 170ex) { body { width: 150ex; } }

@media (min-height: 120ex) { body { height: 100ex; } }
@media (min-height: 170ex) { body { height: 150ex; } }

@media (max-width: 100ex) {
    #webamp,
    body > main > header {
        display: none;
    }

    body > main > section {
        flex-direction: column;
    }
}