.md-content {
	max-width: none;
	--distance-to-top-of-page: 4.8rem;
}

@media screen and (max-width: 76.25rem) {
	.md-content {
		--distance-to-top-of-page: 2.4rem;
	}
}

.md-content__inner {
	padding-top: 0;
}

.md-main__inner {
	margin-top: 0;
}

#numluau-home-main {
    position: relative;
    min-height: calc(100vh - 5rem - var(--distance-to-top-of-page));
    padding-bottom: var(--distance-to-top-of-page);
    font-size: 1.2em;
    margin-left: auto;
    margin-right: auto;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

[data-md-color-scheme="numluau-dark"] #numluau-home-main::before{
    background-image: url("../numluau-hero-dark.svg");
}

[data-md-color-scheme="numluau-light"] #numluau-home-main::before{
    background-image: url("../numluau-hero-light.svg");
}

#numluau-home-main::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    background-repeat: no-repeat;
    background-size: 177vh 100vh;
    background-position: center right;

    animation: home-fade-in-bg 0.5s ease 0.5s;
    animation-fill-mode: forwards;
}

@keyframes home-fade-in-bg {
    0%{
        transform: translateY(-0.8rem);
    }
    100%{
        transform: translateY(0rem);
    }
}

#numluau-home-inner {
    max-width: 50rem;
    translate: calc(min(0px,25rem - 50vw) * 0.8) 0;
}

@media screen and (max-aspect-ratio: 16/9){
    #numluau-home-inner{
        translate: 0;
    }
    #numluau-home-main::before{
        filter: blur(2rem);
		opacity: 0.5;
    }
}

#numluau-home-inner > h1 {
    margin-bottom: 1rem;
}

#numluau-home-inner > nav {
    display: flex;
    gap: 0.5em
}

#numluau-home-inner > nav > a {
    display: flex;
    padding: 0.25rem 0.75rem;
    background-color: var(--doc-accent);
    color: var(--doc-text);

    font-weight: 600;
    border-radius: 0.25rem;
    transition: color 0s;
    transition: background-color 125ms;
}

#numluau-home-inner > nav > a:is(:hover, :focus) {
    background-color: var(--doc-accent-light)
}

#numluau-home-scroll {
    position: relative;
    margin-left: auto;
    margin-right: auto;

    min-height: 4.75;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: max-content;
    padding: 0.7em;

    animation: home-scroll-entry 0.5s ease 1s both;

    background-color: var(--doc-bg-dark);
    font-weight: 700;
    font-size: calc(clamp(0.8em,3vw,1.25em));
    overflow: hidden;
}

#numluau-home-scroll::before {
    content: "v";
    display: inline-block;

    margin-right: 0.5em;

    animation: home-scroll-move 2s ease-in infinite;
}

#numluau-home-scroll::after {
    content: "";
    position: relative;
    top: 0;
	bottom: 0;
	left: -200%;
	right: -200%;
	height: 100%;

    background: linear-gradient(to right, var(--doc-bg-dark) 40%, transparent 45%, transparent 55%, var(--doc-bg-dark) 60%);
    opacity: 0.4;
}

@keyframes home-scroll-entry{
    0%{
        opacity:0;
        translate: 0 1em;
    }
    100%{
        opacity:1;
        translate: 0 0;
    }
}

@keyframes home-scroll-move{
    0%{
        opacity:1;
        transform: translateY(-0.5rem);
    }
    100%{
        opacity:0;
        transform: translateY(0.5rem);
    }
}

#numluau-home-below {
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
}

#numluau-home-below > h2.first::before,
#numluau-home-below > h2.second::before,
#numluau-home-below > h2.third::before{
	content: "1";
	display: inline flex;
	align-items: center;
	justify-content: center;
	width: 2.2em;
	height: 2em;

    border-radius: 50%;

    background-color: var(--doc-bg);
	color: var(--doc-text);
	margin-right: 1rem;
	vertical-align: middle;
}

@media screen and (min-width: 80em){
    #numluau-home-below > h2.first::before,
    #numluau-home-below > h2.second::before,
    #numluau-home-below > h2.third::before{
        margin-left: -3.5rem;
		margin-top: -1rem;
		margin-bottom: -1rem;
    }
}

#numluau-home-below > h2.second::before{
    content: "2";
}

#numluau-home-below > h2.third::before{
    content: "3";
}

#numluau-home {
	animation: home-fade-in 0.5s ease 0.5s;
	animation-fill-mode: forwards;
    opacity: 0;
    transform: translateY(-1rem);
}

@keyframes home-fade-in {
    0%{
        transform: translateY(1rem);
        opacity: 0;
    }
    100%{
        transform: translateY(0rem);
        opacity: 1;
    }
}