:root {
    --dir-0: row;
    --dir-1: column;
    --dir-2: column;
    --align-0: left;
    --logo-font-size: 1rem + 4.5vh;
}

@media only screen and (min-width: 1200px) {
    :root {
        --dir-0: column;
        --dir-1: row;
        --dir-2: column;
        --align-0: center;
        --logo-font-size: 1rem + 5.5vw;
    }
}

@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: fade 0.05s linear step-end;
}

@keyframes fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

* {
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

html {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    scroll-behavior: smooth;
}

body {
    background-color: #00ffee;
    color: #111114;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow-y: scroll;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Clear Sans Medium';
    font-weight: 500;
    padding: 1rem 1rem .25rem 0;
}

nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    background-color: #f8ffd1;
}

#c {
    display: none;
}

#ph {
    display: inline;
}

@media only screen and (min-width: 1200px) {
    #c {
        display: flex;
        height: 160px;
    }

    #ph {
        display: none;
    }
}



nav ul {
    display: flex;
    flex-direction: var(--dir-1);
    align-items: var(--align-0);
    margin-bottom: .2rem;
}

nav ul>a {
    margin-right: 1.8rem;
}

span.breadcrumbs {
    margin-right: .5vw;
}

span.breadcrumbs>a,
span.breadcrumbs>p {
    display: inline;
    font-size: 1rem;
}

header.expand-container {
    margin-bottom: 5dvw;
    margin-bottom: 5vw;
}

main,
p.lyrics {
    padding-top: 2em;
    min-height: 30dvh;
    min-height: 30vh;
}

main ul>li {
    margin: 1rem 0;
}

article.song {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "a"
        "b"
        "c";
    margin-bottom: 4rem;
    gap: 0 1rem;
}

article.song>header {
    grid-area: a;
}

article.song>header p {
    margin-bottom: 0;
}

article.song>main {
    grid-area: b;
    max-width: 40ch;
}

article.song>aside {
    grid-area: c;
    position: sticky;
    top: 0;
    display: flex;
    justify-content: center;
}

@media only screen and (min-width: 1200px) {
    article.song {
        display: grid;
        grid-template-areas:
            "a c"
            "b c";
        align-items: start;
        gap: 0 2rem;
        min-width: max(1000px, 55dvw);
        min-width: max(1000px, 55vw);
        margin-left: 15ch;
    }

    article.song>main {
        min-width: 55ch;
    }

    article.song>aside {
        justify-content: end;
    }
}


p,
ul,
ol {
    font-size: clamp(1em, 0.909em + 0.45vmin, 1.25em);
    line-height: 1.75;
    max-width: 70ch;
    font-family: sans-serif;
}

p,
ul,
ol,
table {
    margin-bottom: 2em;
}

p.lyrics {
    margin-bottom: 4em;
}

q {
    font-style: italic;
}

ul {
    list-style: none;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table {
    font-size: clamp(.5rem, .8rem + 1vw, 1.1rem);
    text-align: left;
    min-width: 80vw;
    max-width: 100ch;
}

tr {
    padding: .2rem auto;
}

tr+tr:nth-child(even) {
    background-color: rgba(0, 0, 0, .15);
}

tr>td:first-child {
    color: #335e72;
}

table th {
    font-weight: 700;
}

thead,
th {
    margin-bottom: .75rem;
}

a {
    color: #0011ff;
    text-decoration: underline;
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 300;
}

a:hover {
    text-decoration: none;
    color: #6c73ce;
}

main a,
section.song a {
    font-family: 'Clear Sans Medium', sans-serif;
    font-weight: 500;
}

footer a {
    color: #00aeff;
}

footer a:hover {
    color: #0a4864;
}

footer {
    margin-top: auto;
    padding-top: .5rem;
    background-color: #152031;
    color: #d1fcff;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.content {
    display: flex;
    flex-direction: var(--dir-2);
}

.expand-container {
    display: flex;
    flex-direction: var(--dir-0);
}

.expand-container h1,
.sun,
.moon {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
}

.expand-container h1 {
    font-size: clamp(.75rem, var(--logo-font-size), 10rem);
}

.expand-content {
    display: flex;
    flex-direction: var(--dir-1);
    cursor: default;
    align-items: var(--align-0);
}

.stack {
    display: inline-grid;
    vertical-align: baseline;
    line-height: 0;
}

.stack>.sun,
.stack>.moon {
    grid-area: 1 / 1;
    transition: opacity 0.05s ease-in-out;
}

.sun {
    opacity: 1;
    width: calc(clamp(.75rem, var(--logo-font-size), 10rem)*.74);
}

.moon {
    opacity: 0;
    width: calc(clamp(.75rem, var(--logo-font-size), 10rem)*.79);
}

.stack:hover .sun {
    opacity: 1;
}

.stack:hover .moon {
    opacity: 0;
}

.footer-content {
    display: flex;
    flex-direction: var(--dir-1);
    justify-content: space-evenly;
    align-items: var(--align-0);
}