@charset "utf-8";
/* CSS Document */

/* This is a comment */

body {
	padding: 0;
	margin: 0;
}

h1 {
	font-family: 'Nunito Sans', sans-serif;
	color: azure;

}
h2, h3 {
	font-family: 'Nunito Sans', sans-serif;
	color: black
}

p, footer {
	font-family: 'Quicksand', sans-serif;
	color: darkblue;
	word-wrap: break-word;
	gap: 10%;
	line-height: 1.5
}

.container {
	width: 90%;
	margin: 0 auto;
	padding: 0;
	box-shadow: 0px 0px 10px;
}

.container2 {
	position: relative;
  	color: white;
}

.top-left {
	position: absolute;
	top: 8px;
	left: 16px;
	color: white;
	padding-left: 4%;
	font-size: 1.5em
}

.container h2, h3 {
	text-align: center;
}

.container p {
	text-align: center;
}


.row {
	padding: 10px;
	display: flex;
	gap: 2%;
	justify-content: center;
	
}
.column {
	width: 30%;
	min-height: 20%;
	padding: 1% 2%;
	box-sizing: border-box;
	justify-content: center
}

.column h3, p {
	text-align: center;
}

.sccolumn {
	min-height: 250px;
	padding:5% 5% 8%;
	background-color:#EFCCFF;
	box-sizing: border-box;
	

}


.sccolumn h3 {
	text-align: left;
	
}

.sccolumn p {
	text-align: left;
}


.emphasis-text h3 {
	padding: 3% 5% 5%;
	text-align: left;

}

.emphasis-text p {
	padding: 0% 5% 5%;
	text-align: left
	
}
.com-text h3 {
	padding: 5% 5% 5%;
	margin-top: auto
}

.com-text p {
	padding: 0% 5% 5%;
	margin-top: auto;
	
}

.navi {
	min-height: 90px;
	list-style: none;
	display: flex;
	gap: 3%;
	justify-content: center;
	align-items: center;
	column-gap: 5rem;
	font-family: 'Nunito Sans', sans-serif;
}

.navi a:link, a:active{ 
	color: black;
	text-decoration: none;
	font-size: 1.2em;
}

.navi a:hover {
	color: coral;
	text-decoration: underline;
}

footer {
	min-height: 150px;
	padding: 5%;
	margin: 10px auto;
	background-color: white;
	text-align: center
}

footer p {
	text-align: center
}



.img {
	margin: auto;
	display: block;
	padding: 3%;
	
}

.img1 {
	width: 100%
}


@media (max-width:800px) {
	.row {
		display:block
	}
	
	.main {
		display: block
	}
	
	.column {
		width: 30%;
		margin: 10px 10px;
		min-height: 30%;
		overflow: auto;
	}
	
	.sccolumn {
		width: 100%;
		min-height: 30%;
		overflow: auto;
	}
	

	
}