@font-face {
    font-family: 'Ambit';
    font-display: swap;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/ambit.woff2') format('woff2')
}

@font-face {
    font-family: 'Mabry Mono Pro';
    font-display: swap;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/mabry_mono_reg.woff2') format('woff2')
}

* { user-select: none; }

a {
    padding-top: 4px;
    display: inline-flex;
    color: inherit;
    text-decoration: none;
}

a:hover, a:focus, a:active {
    background: #f8fafc;
    color: #121314;
}

body {
    display: flex;
    margin: 32px;
    padding: 0;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-size: 1.0625rem;
    font-weight: 400;
    background-color: #121314;
    color: #f8fafc;
    height: calc(100vh - 64px);
    letter-spacing: -0.0125em;
    text-align: center;
	text-rendering: geometricPrecision;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: grayscale
}

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 2dppx) {
	body {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased
	}
}

h1 {
    margin: 0;
    font-family: 'Ambit', 'Instrument Sans', 'Inter', sans-serif;
    font-weight: inherit;
    font-size: 7rem;
}

.Mono { font-family: 'Mabry Mono Pro', 'JetBrains Mono', 'Roboto Mono', monospace; }

@media screen and (max-width: 768px) {
    h1 { font-size: 4rem; }
    a { margin-top: 8px; }

    .Mono {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
    }
}

@media screen and (min-width: 1440px) {
    h1 { font-size: 10rem; }
}

@supports (height: 100svh) {
    body { min-height: calc((100svh - 6rem) - 64px) }
}