/* Boiler plate code below */
html, body, ul {
	margin:0;
  padding:0;
}

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

/* Makes images behave normally as a box */
img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* Make headers grow with viewport width */
h1, h2, h3 {
	font-size: clamp(1.3rem, 2.4vw , 1.55rem);
}

/* -------------------------- */

a {
	color: white;
}
section, footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(1em, 5%, 2%);
	padding-top: 1%;
	padding-bottom: 1%;
}


header, footer {
	background-color: #08732e;
}

main {
	background-color: lightgray;
}
	

.container {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 36rem;
	align-items: center;
	border: 1px solid blue;
	background-color: white;
}



.textbox {
	display: flex;
	flex-direction: column;
	align-content: center;
	text-align: center;
	width: 100%;
	max-width: 60rem;
}

.testbox {
	width: 100%;
}

.cards-10 {
	display: grid;
	width: 100%;
	list-style: none;
	grid-template-columns: repeat(12, [col-start] 1fr);
	background-color: lightblue;
}

.card-10-item {
	grid-column: span 12;
	background-color: darkblue;

}

.emblems-10 {
display: flex;
flex-start: row;
flex-wrap: wrap;
justify-content: center;
width: 100%;
list-style: none;
}

.emblem-10-item {
text-align: center;
width: 100%;
max-width: 36rem;
border:1px dashed green;
}

.footer-container {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	color: white;
	background-color: inherit;
	column-gap: clamp(1rem, 3%, 3rem);
}

.bottom-container {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	background-color: inherit;
	text-align: center;
	color: white;
}

.privacy-container {
	display: flex;
	column-gap: 1rem;
}

.footer-logo-container {
	width: 100%;

}

.footer-logo-image {
	height: auto;
	width: 20rem;
}

.footer-links-container {

}

.footer-contact-container {
}


.list-wrapper {
	display: flex;
	list-style: none;
}

.listwrapper li {

}

hr {
	width: 100%;
}

.testbox {
	background-color: darkred;
}

@media (min-width: 50rem) {
	.card-10-item {
		grid-column: span 4;
	}

	.container {
		width: 100%;
		max-width: 80rem;
	}

	.emblem-10-item {
		width: 46%;
	}

	.bottom-container {
		flex-wrap: nowrap;
		justify-content: space-between;
	}



	
}

@media (min-width: 1020px) {
	.emblems-10 {
		flex-wrap: nowrap;
	}

	.footer-logo-container {
		width: 30%;
		max-width: 26rem;
		margin-right: auto;
	}
}