@import 'meyer-reset.css';
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh; /* for the footer */
} 

/* explained here: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer */

main {
	flex-grow:  1; /* push the footer down */
}

inner-column {
	display:  block;
	max-width: 1000px; /* could be a variable in settings */
	margin-right: auto;
	margin-left: auto;
	padding: 45px 20px;
}

outer-column {
	display:  block;
	max-width: 1200px; /* could be a variable in settings */
	margin-right: auto;
	margin-left: auto;
	padding: 45px 20px;
}

section {

}

.logo {
	width: 150px;
}

p,h1,h2,a,h4 {
	font-family: 'Open Sans', sans-serif;	
}

p {
	line-height: 1.5;
}

h1 span {
	color: #f34f51;
}

.calm-voice {

}

.medium-voice {
	font-weight: 700;
}

.loud-voice {

}

.attention-voice {
	font-size: 35px;
	font-weight: bold;
}

.button {
	display: inline-block;
	background-color: #f34f51;
	color: white;
	padding: 17px 85px;
	text-decoration: none;
	border-radius: 10px;
}

.landing {
	display: grid;
	grid-template-columns: 1fr;
	gap: 50px;
}

.landing text-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.landing text-content h1, .landing text-content p {
	text-align: center;
}

@media(min-width: 900px) {
	.landing {
		grid-template-columns: 1fr 1fr;
	}
	.landing text-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
	.landing text-content h1, .landing text-content p {
		text-align: left;
	}
}

@media(min-width:600px) {
	.landing .landing-img {
		width: clamp(300px, 400px, 500px);
	}
}

.landing-img {
	border-radius: 10px;
	width: clamp(250px, 300px, 500px);
	margin: auto;
}

.landing text-content h1, .landing text-content p {
	margin-bottom: 20px;
}

.info h1 {
	text-align: center;
	margin-bottom: 40px;
}

.info-card-grid {
	display: grid;
	grid-template-columns: 1fr;
}

@media(min-width: 900px) {
	.info-card-grid {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

.info-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 50px;
	margin-left: 20px;
}

.info-card img {
	width: 70px;
	margin-bottom: 10px;
}

.info-card h4 {
	margin-bottom: 10px;
}

.info-card p {
	text-align: center;
	font-weight: 300;
	font-size: 13px;
	margin-bottom: 20px;
	max-width: 50ch;
}

.info-card a {
	text-decoration: none;
	color: #f34f51;
	font-weight: 700;
	font-size: 12px;
	margin-top: auto;
}

.blog-background {
	background-color: #eeeeee;
}

.blog h1 {
	text-align: center;
	margin-bottom: 30px;
}

.blog .header-p {
	text-align: center;
	margin-bottom: 40px;
	max-width: 80ch;
	margin-left: auto;
	margin-right: auto;
}

.blog-grid {
	display: grid;
	grid-template-columns: 1fr;
}

@media(min-width: 600px) {
	.blog-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

@media(min-width: 900px) {
	.blog-grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

blog-card {
	display: block;
	background-color: white;
	margin: 20px;
}

blog-card img {
	width: 100%;
}

blog-card text-content{
	display: block;
	padding: 20px;
	height: 200px;
}

blog-card text-content h4 {
	margin-bottom: 25px;
}

blog-card text-content p {
	font-size: 80%;
}

.blog-center {
	text-align: center;
	margin-top: 60px;
}

.blog-background iframe {
	width: 90%;
	height: 500px;
}

.cta {
	display: flex;
	flex-direction: column;
	text-align: center;
}

.cta img {
	width: 100px;
}

.cta text-content {
	margin: 40px;
}

.cta text-content h1 {
	margin-bottom: 20px;
}

.cta text-content p {
	margin-bottom: 20px;
}

footer {
	background-color: #212121;
	min-height: 20vh;
	color: white;
}

footer inner-column {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 30px;
}

a {
	color: white;
	text-decoration: none;
}

footer a {
	margin: 10px 0;
}

footer inner-column {
	display: flex;
	flex-direction: column;
}

@media(min-width: 700px) {
	footer inner-column {
		flex-direction: row;
	}
	.footer2 {
	border-right: 1px solid white;
	padding-right: 20px;
	margin-left: 30px;
}
}

.footer1 {
	display: flex;
	flex-direction: column;
}

.footer1 h4 {
	margin-bottom: 10px;
}

.footer1 div {
	flex-direction: row;
}

.footer2, .footer3 {
	display: flex;
	flex-direction: column;
}



.footer1 div a {
	color: #f34f51;
}