:root {
	--main: #f44336;
	--border: #e5e5e5;
	--colorLink: #999;
	--archiveHeaderBg: rgba(255, 255, 255, 0.95);

	@media (prefers-color-scheme: dark) {
		--border: #191919;
		--archiveHeaderBg: rgba(41, 41, 41, 0.95);
	}
}

@header-height: 60px;
@screen-sm-max: 600px;
@screen-sm-header-height: 50px;

body {
	padding: 0;
	margin: 0;
}

* {
	box-sizing: border-box;
}

body.archive {
	display: grid;
	grid-template-rows: minmax(1px, auto) 1fr;
	height: 100vh;
	width: 100vw;

	.header {
		display: flex;
		flex-flow: row wrap;
		height: @header-height;
		box-sizing: border-box;
		padding: 0 16px;
		align-items: center;
		font-size: 16px;
		border-bottom: 1px solid var(--border);
		background-color: var(--archiveHeaderBg);

		* {
			border-width: 0;
			box-sizing: border-box;
			font-family: "Source Sans Pro", sans-serif;
			margin: 0;
			padding: 0;
		}

		> *:not(:last-child) {
			margin-right: 8px;
		}

		> .spacer {
			flex: 1;
		}

		#shiori-logo {
			font-size: 2em;
			font-weight: 100;
			color: var(--main);

			span {
				margin-right: 8px;
			}
		}

		a {
			display: block;
			color: var(--colorLink);
			text-decoration: underline;

			&:hover,
			&:focus {
				color: var(--main);
			}
		}

		@media (max-width: @screen-sm-max) {
			font-size: 14px;
			height: @screen-sm-header-height;

			#shiori-logo {
				font-size: 1.5em;
			}
		}
	}

	iframe {
		width: 100%;
		height: 100%;
	}
}
