:root {
    --clr-bg: #fef;
    --clr-txt: black;
    --clr-thm: lightblue;
    --time: 300ms;
}
html {
    line-height: 1.5;
    color-scheme: light dark;
}
h1, p {
    margin: 0;
    text-align: center;
}
nav {
    user-select: none;
    position: relative;
}
nav label, nav input, nav svg, #settings-menu {
    float: right;
}
nav input {
    aspect-ratio: 1;
    width: 1ch;
}
nav input:active + label, 
nav input:active + svg {
    box-shadow: 0 .5ch 1rem var(--clr-txt);
}
nav input, nav label span {
    color: var(--clr-bg);
    opacity: 0;
    transition: opacity var(--time) ease-in-out, box-shadow var(--time) ease-in-out;
}
#settings-menu {
    max-height: 0px;
    pointer-events: none;
    overflow-y: hidden;
    transition: max-height var(--time) ease-in-out;
    z-index: 1;
    position: relative;
}
#settings-menu.open {
    pointer-events: initial;
    max-height: 50svh;
    z-index: 2;
}
body {
    --grad-orient: -135deg;
    background: linear-gradient(var(--grad-orient), var(--clr-bg) 10%, var(--clr-thm) 95%, var(--clr-txt));
    color: var(--clr-txt);
    transition: background-color var(--time) ease-in-out;
}
menu, ul, ol {
    list-style: none;
}
.top {
    align-self: end;
}
#profile-wrap {
    place-self: center;
    transition: box-shadow var(--time) ease-in-out;
}
#profile-wrap picture img {
    --border-width: 1ch;
    border-radius: 50%;
    border: var(--border-width) solid var(--clr-thm);
    width: calc(100% - (2 * var(--border-width)));
    aspect-ratio: 1;
    margin: auto;
    object-fit: cover;
}
#profile-wrap:focus-within {
    box-shadow: 0 .5ch 1ch var(--clr-bg);
}
#profile-wrap a:active {
    box-shadow: 0 .5ch 1ch hsl(from var(--clr-bg) h s calc(l + 20));
}
.top, .bottom {
    justify-self: center;
}
.bottom {
    align-self: start;
}
footer {
    text-align: center;
}
@supports(display: grid) {
    main, body, #profile-wrap {
        display: grid;
    }
    body {
        height: calc(100svh - 1rem);
        grid-template-rows: 4ch 1fr 4ch;
    }
    header footer {
        margin: auto;
        width: 100%;
    }
}
nav input:focus-within, nav input:focus-within + label span {
    opacity: 1;
    text-decoration: underline;
}
@media(hover:hover) {
    button, input, input + label {
        cursor: pointer;
    }
    nav input:hover, nav input:hover + label span {
        opacity: 1;
	text-decoration: underline;
    }
	#profile-wrap:hover {
		box-shadow: 0 .5ch 1ch var(--clr-bg);
	}
}
.dark-mode {
    --clr-bg: #122;
    --clr-txt: white;
    color-scheme: dark;
}
@media(prefers-color-scheme: dark) {
    :root {
        --clr-bg: #112;
        --clr-txt: white;
    }
    html {
    color-scheme: dark;
    }
}