/* CSS reset */

@import url('reset.css');


/* Fonts */



/* Variables */

:root {
	--rm34-red: #f9423a;
	--rm34-blue: #74d1ea;
	--rm34-process-blue: #0285ca;
	--rm34-black: #252a36;
	--rm34-green: #00ab84;
	--rm34-yellow: #ffd602;
	--rm34-gray: #dbd7d2;
	--rm34-gray-transparent: rgba(219,215,210,0.25);
	--rm34-black-transparent: rgba(0,0,0,0.167);
	--rm34-almost-white: #f9f9f9;
}


/* Standard HTML */

body {
	background: var(--rm34-almost-white);
	color: var(--rm34-black);
	background-position: fixed;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	font-size: 90%;
	font-weight: 300;
	line-height: 1.5em;
}

a {
	color: var(--rm34-process-blue);
	cursor: pointer;
	font-weight: bold;
}
a.button {
	background-color: var(--rm34-red);
	border-radius: 1.5em;
	color: white;
	display: inline-block;
	margin: 0.25em;
	padding: 0.25em 0.75em;
}

a:hover, a:focus {
	color: var(--rm34-red);
}
a.button:hover, a.button:focus {
	background-color: var(--rm34-blue);
	color: white;
}

b, strong { font-weight: 600; }

blockquote {
	background-color: var(--rm34-gray-transparent);
	border: 1px solid var(--rm34-gray);
	margin: 1.5rem 0;
	padding: 1.5rem;
}

	blockquote > *:first-child { margin-top: 0; }
	blockquote > *:last-child { margin-bottom: 0; }

code {
	color: var(--rm34-green);
	font-family: Consolas, Menlo, Monaco, 'SF Mono', 'DejaVu Sans Mono', 'Roboto Mono', 'Courier New', Courier, monospace;
}

em, i { font-style: italic; }

h1, h2, h3, h4, h5, h6 {
	color: var(--rm34-red);
	font-weight: 600;
	line-height: 1.1em;
	margin: 1.5rem 0 0.75rem 0;
}

h1 { font-size: 225%; margin-top: 0; }

h2 { font-size: 175%; }

h3 { font-size: 150%; }

h4 {
	font-size: 125%;
	margin-bottom: 1em;
}

h5, h6 { font-size: 100%; }

h6 {
	font-style: italic;
	font-weight: 300;
}

hr {
	background: var(--rm34-gray);
	color: var(--rm34-gray);
	height: 1px;
	margin: 1.5rem 0;
	width: 100%;
}

img {
	display: inline-block;
	height: auto;
	max-width: 100%;
}

nav {
	white-space: nowrap;
}

	nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	nav li {
		display: inline-block;
		margin: 0.25em 0.25em 0 0.25em;
	}
	
	nav a {
		background: white;
		border: 1px solid var(--rm34-process-blue);
		border-radius: 4px;
		color: var(--rm34-process-blue);
		display: block;
		padding: 0.333rem 0.667rem;
	}
	
	nav a:hover, nav a:focus {
		background: var(--rm34-red);
		border-color: var(--rm34-red);
		color: white;
	}
	
	nav a.current {
		background: var(--rm34-process-blue);
		border-color: var(--rm34-process-blue) !important;
		color: white !important;
	}

ol {
	list-style: decimal;
	padding-left: 2rem;
}

p, ol, ul { margin: 0 0 1.5rem 0; }

ul {
	list-style: disc;
	padding-left: 2rem;
}

li { margin: 0 0 0.75rem 0; }

small {
	display: inline-block;
	font-size: 85%;
	line-height: 1.5em;
}

/* CSS classes */

.beta {
	background: var(--rm34-red);
	border-radius: 5px;
	color: white;
	display: inline-block;
	font-size: 0.7rem;
	font-style: italic;
	font-weight: bold;
	margin-left: 0.25rem;
	padding: 0 0.5em;
	text-transform: uppercase;
}

.large {
	font-size: 120%;
	line-height: 1.5em;
}

.list-note {
	font-size: 85%;
	font-style: italic;
	margin-left: 0.75rem;
}

.new {
	background: var(--rm34-yellow);
	border-radius: 5px;
	color: var(--rm34-black);
	display: inline-block;
	font-size: 0.7rem;
	font-style: italic;
	font-weight: bold;
	margin-left: 0.25rem;
	padding: 0 0.5em;
	text-transform: uppercase;
}


/* DOM elements */

#masthead {
	background: white;
	box-shadow: 0 0 5px var(--rm34-black-transparent);
	align-items: center;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: space-between;
	margin: 0 0 3rem 0;
	padding: 2rem 5%;
	text-align: center;
	width: 100%;
}

	#masthead h1 {
		margin: 0;
		max-width: 50%;
		min-width: 400px;
	}
	
#wrapper {
	align-items: start;
	display: grid;
	grid-gap: 3rem;
	grid-template-columns: 66.667% calc(33.333% - 3rem);
	margin: 0 auto;
	max-width: 1100px;
	padding: 0;
	width: 90%;
}

	#download {
		position: sticky;
		text-align: center;
		top: 1.5rem;
	}

#copyright {
	background: var(--rm34-gray-transparent);
	box-shadow: inset 0 0 5px var(--rm34-black-transparent);
	font-size: 85%;
	line-height: 1.5em;
	margin: 3rem 0 0 0;
	padding: 2rem 5%;
	width: 100%;
}

/* Media queries */

@media screen and (max-width: 800px) {

	nav {
		white-space: initial;
	}

	#masthead {
		display: block;
		padding: 1.5rem;
		text-align: center;
	}

		#masthead h1 {
			margin: 0 auto 1rem auto;
			max-width: 400px;
			min-width: 240px;
		}

	#wrapper {
		display: block;
		padding: 0 1.5rem;
		width: 100%;
	}
	
	#copyright {
		padding: 1.5rem;
		text-align: center;
	}

}