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



#main{
	display: flex;
	gap: 30px;
	align-items: flex-start; /* Prevents stretching to equal heights */
}
#left{
	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
}
}
/* hide all element on init. Display being handled by jquery */
#left > div{
	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
/* *********************************************************************** */


/* ****** */
/* images */
/* ****** */
.img-bg{
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: cover; /* auto|length|cover|contain|initial|inherit|100% 100%|200px 200px; */	/**** if made "!important" it will break the zoom effect below */
}
.img-bg{
	min-height: 20px; /* just to be safe */
}
/* ****** */
/* [end]images */
/* ****** */




/* ********* */
/* main form */
/* ********* */
#form form label{
	display: inline-block;
	width: 100%
}
#form form label > span{
	padding: 0 2px;
	font-size: 14px;
	display: none;
	color: #ffffff;
	background: red;
}
#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 */
/* ********* */




/* ************* */
/* working block */
/* ************* */
#working .description{
	margin-bottom: 20px
}
#working .img-bg{	
	width: 200px; 
	aspect-ratio: 1/1; 
	margin: auto;
}
#working .img-bg span{
	display: inline-block;
	margin-top: 70px;
	
	font-size: 48px;
	font-weight: bold
}
/* ************* */
/* working block */
/* ************* */




/* ******** */
/* 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 calc(33.333% - 5px);
}
#response > div:last-child{
	flex: 0 0 calc(66.666% - 5px);
}
@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
}
#response .links.create-new a{
	font-size: 24px;
	color: #cc0000
}
/* ******** */
/* [end]response */
/* ******** */













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


#header{
	margin-top: 20px;
}



#footer{
	margin-bottom: 20px;
}



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


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





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




.intro-features li:not(:last-child) {
	margin-bottom: 12px;
}




.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, text align, backgrounds, borders,...
/* *********************************************************************** */




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



body a{
	text-decoration: none
}




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





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


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




#form .description{
	line-height: 1.4
}






#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;
}




#footer,
#footer a{
	color: #121212	
}