@import 'cards.css';

@media screen {
	*, *::before, *::after {
		box-sizing: border-box;
	}

	nav#siteNav {
		z-index: 1;
	}

	h1 {
		font-size: 1.5rem;
	}

	div.hero {
		display: flex;
		flex-direction: column;
	}

	div.hero-image {
		background-image: url("/images/mountain_lake.jpg");
		background-position: center 50%;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		display: flex;
		width: 100%;
		height: 20rem;
	}
	div.hero-overlay {
		background-color: rgb(0, 32, 64);
		color: var(--white);
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 2rem;
	}

	div.hero-overlay :is(p, h1) {
		margin-bottom: 1.5rem;
		margin-top: 0;
	}

	div.intro {
		width: 100%;
	}

	div.training {
		display: flex;
		justify-content: center;
		color: var(--white);
		background-color: var(--light-byu-blue);
		padding: 0 2rem;
	}

	div.getting-started {
		display: flex;
		justify-content: center;
	}

	div.training a {
		text-decoration: underline;
	}

	div.content {
		font-family: var(--headline-font);
		color: var(--byu-blue);
		margin: 0 auto;
		max-width: 32rem;
	}

	div.content div a {
		display: block;
	}

	div.content > div {
		padding: 3rem 0;
	}

	div.content h1, div.content h2 {
		color: var(--byu-blue);
	}

	div.content p, div.content code {
		color: var(--font-black);
	}

	section.index {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	div.intro a, div.intro a:visited {
		color: var(--white);
	}

	section.index * {
		font-family: var(--headline-font);
	}

	a.more-documentation:any-link, a.more-documentation:hover, a.more-documentation:focus {
		color: var(--white);
		display: flex;
		justify-content: center;
		margin: auto;
		width: 15rem;
	}

	a:visited {
		color: var(--link-blue);
	}

	section#content {
		display: none;
	}

	#spotlight {
		margin-bottom: 3rem;
	}
}

@media only screen and (min-width: 801px) {
	div.hero {
		flex-flow: column wrap;
		height: auto;
	}

	div.hero-image {
		height: 30rem;
	}

	div.content {
		max-width: 52rem;
	}
}

@media only screen and (min-width: 1261px) {
	div.hero {
		flex-direction: row;
		width: 100%;
	}

	div.hero-image {
		justify-content: left;
		width: 60%;
		height: auto;
	}

	div.hero-overlay {
		padding: 5rem;
		width: 40%;
	}

	div.content {
		max-width: 100rem;
	}
}

@media print {
    .spotlightImage {display:none}
	.spotlightDescription {display:block;padding:1em 0;margin:0;float:none}
}