@import url(https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Material+Icons);

html, body {
    --background: #111;
    --theme: #fc0;
    --lighttheme: color-mix(in srgb, var(--theme), #fff 40%);
    background: var(--background);
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: white;
	height: 100%;
	width: 100%;
	overflow: hidden;
	touch-action: manipulation;
	font-smoothing: antialiased;
	font-size: 20px;
	overflow: hidden;
	position: relative;
}
body {
    position: relative;
	padding: 0.5em 1em 1em 1em;
	box-sizing: border-box;
	user-select: none;
}
body::-webkit-scrollbar, #results::-webkit-scrollbar, #things::-webkit-scrollbar {
	display: none;
}
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	line-height: 1em;
}
#splash {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vw;
    max-height: 60vh;
    container-type: inline-size;
}
#splash:before {
    content: '';
    display: block;
    background: url(/assets/images/silvaire.png);
    background-size: contain;
    background-repeat: no-repeat;
    aspect-ratio: 2866/1245;
    margin-bottom: 1em;
}
header {
    position: relative;
    margin-bottom: 0.5em;
    height: 4em;
}
header img {
    height: 70%;
    max-width: 70%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
header #logout {
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    display: inline-block;
    height: 1em;
    width: 1em;
    cursor: pointer;
    outline: none;
    color: var(--theme);
}
header #logout:before {
    font-family: 'Material Icons';
    content: '\e9ba';
}
header #logout:focus, header #logout:hover, header #logout:active {
    color: var(--lighttheme);
}
main {
    display: flex;
    flex-direction: column;
    height: calc(100% - 6.5em);
    gap: 1em;
}
a, a:visited, a:focus, a:active {
    color: var(--theme);
    text-decoration: none;
}