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



#main{
	display: flex;
	/*gap: 30px;*/ /* no need for gap because children have padding */
	align-items: flex-start; /* Prevents stretching to equal heights */
}
#main > div{
	width: 50%;
}
/* Small resolution version */
@media screen and (max-width: 920px){
#main{
	gap: 0px;
	flex-direction: column; /* Stacks children vertically */
}	
#main > div{
	width: 100%;
}
}
/* hide all element on init. Display being handled by jquery */
#right > 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 */
/* ****** */




/* ********************* */
/* CSS Text Blink Effect: Just add class "blink-it" */
/* ********************* */
.blink-it {
    animation: blink-it 1s infinite;
}
@keyframes blink-it {
    from { opacity: 1.0; }
    50% { opacity: 0.5; }
    to { opacity: 1.0; }
}
/* ********************* */
/* [END] CSS Text Blink Effect */
/* ********************* */




/* ********* */
/* 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 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 */
/* ******** */








/* Laptop & Desktop Styles (Screens wider than 768px) */
@media (min-width: 769px) {
  .toggle-button {
    display: none !important; /* Completely hides the button */
  }
  .toggle-text {
    display: block !important; /* Forces all text to remain visible */
  }
}
/* Mobile & Tablet Styles (Screens 768px and smaller) */
@media (max-width: 768px) {
  .toggle-button {
    display: inline-block;
  }
  .toggle-text {
    display: none; /* Hides the extra text until clicked */
  }
}











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


#header{
	margin-top: 20px;
}



#footer{
	margin-bottom: 20px;
}



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


#left,
#right,
#form,
#working,
#response,
#features,
#latest{
	padding: 30px;
	box-sizing: border-box
}
@media (max-width: 919px){
#right{
	padding: 0px;
}
}





#left > .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,
#features,
#latest{
	border: 1px solid #e5e5e5;
	background: white;
	border-radius: 15px;
}
#main,
#features,
#latest{
	box-shadow: 0 20px 25px -10px rgba(0, 0, 0, 0.1), 0 10px 10px -10px rgba(0, 0, 0, 0.04);
}






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


#form,
#response{
	border: 1px solid #e5e5e5;
	background: #f8f8f8;
	border-radius: 10px;
}


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




#left .description{
	line-height: 1.4
}




#working .description{
	color: #ff0000;
	font-size: 24px
}





#features .feature-icon{
	font-size: 36px;
	color: #3F940A;
}
#features .feature-icon img{
	width: 108px
}
#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	
}