a {
	text-decoration: none;
	color: lightblue;
	outline: none;
}

a:hover {
	text-decoration: underline;
}

body {
	margin: 0;
	font-family: arial;
	min-height: 100vh;
	display: flex;
	flex-direction: column; /** To make the footer "sticky" **/
    background-color: #0B8F79;
    background-image: 
		repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 27px,
            rgba(255,255,255,.1) 27px,
            rgba(255,255,255,.1) 28px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 27px,
            rgba(255,255,255,.1) 27px,
            rgba(255,255,255,.1) 28px
        );
}

h1 {
	text-align: center;
}

div[header] {
	background-color: #1EC9A6;
	position: fixed;
	padding: 8px 3%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	top: 0;
	left: 0;
	right: 0;
	line-height: 1;
	z-index: 2;
}

div[header] a {
	color: white;
	font-weight: bold;
}

div[padding] {
	height: 48px;
}

div[header] input[type="search"] {
	background-color: rgba(255,255,255,0.25);
	border: 1px solid rgba(255,255,255,0.5);
	border-radius: 5px;
	width: 300px;
	box-sizing: border-box;
}

div[main] {
	margin: 32px auto 2em auto;
	padding: 32px 5%;
	max-width: calc(700px + 6%);
	width: fit-content;
	background-color: rgba(7,92,78,0.25);
	border: 1px solid rgba(255,255,255,0.5);
	border-radius: 8px;
	color: white;
	z-index: 1;
}

div[footer] {
	background-color: #075C4E;
	padding: 16px 3%;
	text-align: center;
	margin-top: auto;
	color: white;
}

div[footer] a {
	color: white;
	margin: 0 8px;
}

div[footer] a:hover {
	opacity: 0.8;
}

div[footer] div[links] {
	margin-bottom: 8px;
}

div[footer] div[copyright] {
	font-size: 11px;
	color: rgba(255,255,255,0.75);
}



/** Mobile header: keep Home + Login/Register on one row, wrap search below **/
@media (max-width: 768px) {
	div[header] {
		flex-wrap: wrap;
		row-gap: 10px;
	}

	/** Sends the search span to the end of the row and forces it to
	    take the full width, which pushes it onto its own line. Home
	    and Login/Register share order:0 (the default) so they keep
	    their normal source order on the first line. **/
	div[header] span[search] {
		order: 1;
		flex-basis: 100%;
	}

	div[header] input[type="search"] {
		width: 100%;
		padding: 0.6rem 0.75rem;
		font-size: 1rem;
	}

	/** Header is 2 lines tall here instead of 1, so the spacer that
	    keeps page content clear of the fixed header has to grow too.
	    This is an estimate based on the rendered sizes above - nudge
	    it a few px if you see a gap or slight overlap on a real device. **/
	div[padding] {
		height: 84px;
	}
}