/* CSS Document */
/** Palette **/
/**#AEDEF5 #B5FAFF #B2E9DD #B5FFDA #AEF5BD
#F7DFDC #D6BFC0 #ECDEE6 #D5BFD6 #EFDCF7**/

@import url('https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&family=Itim&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&family=Itim&family=Just+Another+Hand&display=swap');

/******************************************Default Styles**********************************************/
body{
	margin: 0;
	padding: 0;
	/******remove and enter your own body font******/
	font-family: "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"
}


/******************************************Masthead**********************************************/
body, html {
    height: 100%;
}


#masthead{
	min-height: 500px;
}

#masthead h1{
	margin-top: 0px;
	padding-top: 280px;
}

#background{
	margin: 0;
	background-image: url("../images/masthead.svg");
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	padding: 140px;
}



/******************************************Row Flex Box*****************************************/

.ico {
	font-size: 50px;
}
.row {  
	display: flex;
	background-color: #FFFFFF;
	color: #000000;
	text-align: center;
	letter-spacing: 2px;
}

.row h3{
	padding: 80px;
	text-align: center;
	font-family: 'Hachi Maru Pop', cursive;
	letter-spacing: 5px;
	text-transform: uppercase;
	font-size: 25px;
}


.col {
	flex: 33%;
	background-color: #F7EDFB;
	color: #191919;
	padding: 20px;
	margin-top: 20px;
	min-height: 200px;
	text-align: justify;
	line-height: 25px;
}
.colExpl{ 
	flex:33%;
	background-color: #D7E1EF;
	color: #191919;
	padding: 20px;
	
}

.colExpl h4 {
	font-family: 'Itim', cursive;
	font-size: 18px;
}


.rowFoot {  
	display: flex;
	background-image: linear-gradient(to bottom, #e3d6ea, #e0d8ec, #dddaee, #dbdbf0, #d8ddf1, #d5e0f3, #d3e3f3, #d2e6f3, #d3eaf1, #d7eeef, #ddf1ed, #e5f3ec);
	color: #EEEEEE;
	text-align: center;
	min-height: 400px;
}
.colFoot{
	font-size: 35px;
	/*explain the problem and then this centers vertically two*/
	/* There's only one column div, so it only generated the whole thing in one column and centered it*/
  	margin: auto;
	/*then change the word and it remains centered*/
	/* I don't understand what you mean.... */
	color: #000000;
	font-family: 'Hachi Maru Pop', cursive;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
	  
  }
	#masthead h1 {
		padding-top: 100px;
	}
	#background {
		background-image: url("../images/mastHeadSmol.svg");
	}
	.rowFoot { 
		min-height: 200px;
	}
	.colFoot{
	font-size: 25px;
	}
}