/* *********************************************************************** */
/* layout below: positions, sizes, floats, width, height
/* *********************************************************************** */
#header,
#main,
#features,
#latest{
	margin: auto;
	width: 1200px;
	max-width: 95%;
}



#main{
  display: flex;
  gap: 30px;
}
#form{
  width: calc(60% - 15px); /* Subtracts half the gap */
}
#image{
  width: calc(40% - 15px); /* Subtracts half the gap */
}
/* Small resolution version */
@media screen and (max-width: 920px){
#main{
	flex-direction: column; /* Stacks children vertically */
}	
#main > div{
	width: 100%;
}
#main #image{
	display: none
}
}







.features-inner{
	display: flex;
	gap: 20px;       /* Sets 20px space between children */
}
.features-inner > div{
	flex: 1;         /* Shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
	min-width: 0;    /* Prevents large text or long words from distorting the equal widths */
}
@media screen and (max-width: 920px){
.features-inner{
	flex-wrap: wrap;     /* Allows items to move to a new row */
}
.features-inner > div{
	flex: 0 0 calc( 50% - 10px ); /* Calculates exactly half width minus half of the 20px gap */
	box-sizing: border-box; /* Ensures padding/borders don't break layout */
}
}





.latest-inner{
	display: flex;
	flex-wrap: wrap;
	gap: 50px 20px; /* row-gap: 30px, column-gap: 20px */
}
.latest-inner > .latest-site{
	width: calc((100% - (20px * 3)) / 4);
}
@media screen and (max-width: 920px){
.latest-inner{
	flex-wrap: wrap;     /* Allows items to move to a new row */
}
.latest-inner > .latest-site{
	flex: 0 0 calc( 50% - 10px ); /* Calculates exactly half width minus half of the 20px gap */
	box-sizing: border-box; /* Ensures padding/borders don't break layout */
}
}
.latest-inner > .latest-site a img{
	max-width: 100%;
}





















/* *********************************************************************** */
/* special blocks
/* *********************************************************************** */



/* ********* */
/* main form */
/* ********* */
#form form label{
	display: inline-block;
	width: 100%
}
#form form input:not([type=submit]),
#form form textarea,
#form form select{
	width: 100%;
	box-sizing: border-box
}

#form form label,
#form form input,
#form form textarea,
#form form select{ 
	font-size: 18px
}
#form form input:not([type="submit"]),
#form form textarea,
#form form select{
	border: 1px solid #d0d0d0;
}
#form form label{
	margin-bottom: 5px
}
#form form > div{
	margin-bottom: 20px
}
#form form > div:has( input[type="submit"] ){
	text-align: center
}
#form form input,
#form form textarea,
#form form select{ 
	padding: 5px 10px;
}
#form form input[type="submit"]{
	padding: 10px 20px;
	display: inline-block;
	
	font-size: 24px;
	background-color: #3F940A;
	color: #ffffff;
	
	border: none;
}
#form form input[type="submit"]:hover{
	background-color: #282828
}
/* ********* */
/* [end]main form */
/* ********* */




/* ******** */
/* response */
/* ******** */
.response{
	padding: 20px;
	background: #F1F1F1;
	box-sizing: border-box
}
.response img{
	max-width: 100%;
}

.response{
	display: flex;
	gap: 10px;
	width: 100%;
}
.response > div:first-child{
	flex: 0 0 30%;
}
.response > div:last-child{
	flex: 0 0 60%;
}
@media (max-width: 919px) {
	.response{
		flex-direction: column;
	}
	.response > div{
		flex-basis: 100% !important;
	}
}

.response .welcome{
}
.response .intro{
}
.response .button{
}
.response .links{
	display: flex;
	gap: 20px;       /* Sets 20px space between children */
	width: 300px;
	max-width: 100%;
	margin: auto;
}
.response .links > a{
	flex: 1;         /* Shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
	min-width: 0;    /* Prevents large text or long words from distorting the equal widths */
}
.response .welcome,
.response .intro,
.response .button,
.response .links a{
	text-align: center
}

.response .button a{
	padding: 10px 20px;
	display: inline-block;
	
	font-size: 24px;
	background: #3F940A;
	color: #ffffff;
}
.response .button a:hover{
	background: #282828
}
.response > .info > div:not(:last-child){
	margin-bottom: 10px;
}
.response .links a{
	color: #25367C;
	color: #F37C22;
}
.response .links a:hover{
	color: #282828
}
/* ******** */
/* [end]response */
/* ******** */













/* *********************************************************************** */
/* distances below: paddings and margins
/* *********************************************************************** */


#header{
	margin-top: 20px;
}



#header,
#main,
#features{
	margin-bottom: 30px;
}


#main #form,
#features,
#latest{
	padding: 30px;
	box-sizing: border-box
}





#form > div.title,
.section > div.title{
	margin-bottom: 20px;
}




.feature-icon,
.site-screenshot{
	margin-bottom: 10px;
}





.latest-inner > .latest-site{
	padding: 10px;
	box-sizing: border-box; /* Ensures padding/borders don't break layout */
}












/* *********************************************************************** */
/* style below: colors, fonts, backgrounds, borders,...
/* *********************************************************************** */




body{
	background: #F9F9F9;
	font-family: "Roboto", sans-serif;	
}



body a{
	text-decoration: none
}




#main #form,
#features,
#latest{
	border: 1px solid #e5e5e5;
	background: white;
	border-radius: 15px;
}





#form > div.title,
.section > div.title{
	font-family: "Oswald", sans-serif;
	font-size: 32px
}


#header,
.latest-site,
.latest-site > div,
.feature > div{
	text-align: center
}







#features .feature-icon{
	font-size: 36px;
	color: #3F940A;
}
#features .feature-name,
.latest-site > :nth-child(2){
	font-size: 20px
}



.latest-inner > .latest-site{
	background: #f9f9f9;
	border: 1px solid #e5e5e5;
}
.latest-inner > .latest-site:hover{
	background: #f3f3f3;
}
.response .thumb .latest-site a,
.latest-inner > .latest-site a{
	color: #25367C;
}