:root {
    --color-accent: yellow;

    --header-height: 80px;
    --padding: 20px;
    
    --transition-speed: 300ms;
    --transition: cubic-bezier(0,0,0,1) var(--transition-speed);
}

/* -- Cornerstones -- */

* {
    margin: 0;
    font-family: "Monaco", "Consolas", monospace, sans-serif;
    color: white;
    user-select: none;
}

::selection {
    background-color: white;
    color: black;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: black;
}

body {
    display: grid;
    grid-template-rows: var(--header-height) 1fr;
}

/* -- Content -- */

header {
    --border-color: #1e1e1e;
    text-align: right;
    font-size: 18px;
    display: grid;
    grid-template-columns: 1fr var(--header-height);
    justify-content: right;
    border-bottom: solid 1px var(--border-color);
}

header > div {
    display: grid;
    justify-items: center;
    align-items: center;
}

header > div:not(:first-child) {
    height: var(--header-height);
    border-left: solid 1px var(--border-color);
}

header #logo img {
    width: calc(100% - (var(--padding) * 2));
}

header #crumbs {
    justify-self: right;
    text-align: right;
    padding: 0 20px;
}

/* -- Page Constraints -- */

main {
    max-height: calc(100vh - var(--header-height));
}

/* -- Media Queries -- */

@media (pointer: fine) {

}

@media (max-width: 330px) {
    header {
        grid-template-columns: var(--header-height);
    }

    header #crumbs {
        display: none;
    }
}

@media (min-aspect-ratio: 14/9) and (min-height: 600px) {
    header #crumbs {
        justify-self: left;
        text-align: right;
    }
}