/* Global Reset */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

html { background: #0a0a0a; }

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main, site-module { width: 100%; }
main { flex: 1 0 auto; }
site-module { display: block; }

site-module[name="navigation"] {
    position: sticky;
    top: 0;
    z-index: 10000;
    display: block;
    width: 100%;
    flex: 0 0 auto;
}

site-module[name="navigation"],
site-module[name="footer"] { flex: 0 0 auto; }

img {
    display: block;
    max-width: 100%;
}

button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }

/* Global Flip */

:is(
    .site-logo,
    .main-navigation li,
    #flipToggle,
    #themeToggle,
    footer > .social,
    footer > .footer-bottom
) {
    transform-origin: center;
    transition: transform 0.5s ease;
}

html.page-flipped :is(
    .site-logo,
    .main-navigation li,
    #flipToggle,
    #themeToggle,
    footer > .social,
    footer > .footer-bottom
) {
    transform: rotate(180deg);
}