/* ! normalize.css v8.0.1 (selected) */
html { line-height: 1.15; -webkit-text-size-adjust: 100% }
body { margin: 0 }
main { display: block }
h1 { font-size: 2em; margin: 0.67em 0 }
a { background-color: transparent }
b, strong { font-weight: bolder }
img { border-style: none; display: block }
*, *::before, *::after { box-sizing: border-box }


/*//////////////////////////// Variables */
:root {
	--color_txt: #333;
	--color_back: #dadada;
	--color_focus: #0bf;
}

/*//////////////////////////// Basics */

html {
	font-family: -apple-system, BlinkMacSystemFont, 'Droid Sans', 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	font-feature-settings: "kern" on, "liga" on, "calt" off;
}

body {
	position: relative;
	/*padding: 1rem 2rem;*/

	color: var(--color_txt);
	background-color: var(--color_back);
	
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	align-items: center;
	justify-content: center;
}

a {
	color: inherit;
}

input {
	font: inherit;
	font-size: inherit;
	/*line-height: inherit;*/
	/*margin: 0;*/
	/*padding: 0;*/

	display: block;
	width: 100%;
	border: none;
	padding: 0 0 0 .5rem;
	margin: 0 0 1rem 0;

	/*height: 1.5rem;*/
	line-height: 1.75rem;
}

input:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--color_focus);
}

main {
	border: 2px solid;
	width: 14rem;
	height: 13rem;
	border-radius: 5px;
	margin: 0 0 13vh 0;
	padding: 1rem;
}

p {
	margin: .5rem 0;
}

nav {
	position: absolute;
	top: 0;
	left: 0;
	padding: .5rem 1.25rem;
	opacity: .3;
}