@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root{
	--header-opacity:0;
	--bg:#F9F7F5; 
	--font-family:'Nunito', serif;
	--font-family-heading:'Nunito', serif;
	--color-text:#2A2A2A;
	--color-accent-text:#EC6341;
	--color-text-light:#7C7C7C;
	--grad: linear-gradient(135deg, rgba(254,140,0,1) 0%, rgba(248,54,0,1) 100%);
	--color-btn-color:#fff;
	--trs:all .2s ease-in-out;
	--font-size:16px;
	--font-heading-size:48px;
	--padding-sides:40px;
	--width-xl:min(1300px,100% - var(--padding-sides));
	--width-xs:min(820px,100% - var(--padding-sides)*2);
	--width:min(1220px,100% - var(--padding-sides)*2);
}
*{
	box-sizing:border-box;text-size-adjust:100%;
}
img{
	max-width:100%;
}
html{
	margin:0;padding:0;height:100%;background-color:var(--bg);
	body{
		min-height:100%;display:flex;flex-flow:column;padding:0;margin:0;font-family:var(--font-family);font-size:var(--font-size);background-color:var(--bg);color:var(--color-text);line-height:1.3;overflow-y:auto!important;overflow-x: hidden;
		a{
			color:inherit;text-decoration:none;
		}
		main{
			flex:1 1 auto;padding:0 0 50px;
		}
	}
}
::selection {
    background-color:var(--color-accent-text);
    color:var(--color-btn-color);
}
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}
/*HEADER*/
header{
	width:var(--width);margin-inline:auto;padding:20px 0;display:flex;align-items:center;justify-content:space-between;
	.logo{
		img{
			width:150px;height:auto;display:block;
		}
	}
	.link{
		&:hover{
			opacity:1;
		}
		display:grid;grid-template-columns:28px 1fr;align-items:center;gap:10px;transition:all .5s ease;opacity:.4;
		svg{
			width:100%;height:auto;
		}
	}
}
/*BODY*/
.index-title{
	margin:0 0 3rem;text-align:center;font-size: clamp(1.75rem, 0.7536rem + 2.0785vw, 2.3125rem);font-weight:700;
}
.index-nav{
	width:var(--width-xs);display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-gap:20px;padding:0;margin:0 auto;list-style-type:none;
	li{
		a{
			&:hover{
				transform:scale(1.05)
			}
			background-color:#fff;border-radius:16px;padding:22px;display:flex;align-items:center;justify-content:center;text-align:center;font-size: clamp(1.125rem, 0.7929rem + 0.6928vw, 1.3125rem);font-weight:600;height:100%;aspect-ratio:1.7;box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;transition:transform .5s ease;
		}
	}
}
.title{
	width:var(--width-xs);margin:0 auto 1.8rem;text-align:center;font-size: clamp(1.75rem, 0.7536rem + 2.0785vw, 2.3125rem);font-weight:700;
}
.list{
	margin:0 auto;list-style-type:none;width:var(--width-xs);display:flex;flex-flow:column;gap:20px;padding:0;
	li{
		a{
			&:hover{
				transform:scale(1.03);box-shadow: rgba(0, 0, 0, 0.05) 0px 20px 25px -5px, rgba(0, 0, 0, 0.02) 0px 10px 10px -5px;color:#3eb4ff;
				svg{
					opacity:1;
				}
			}
			display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:center;box-shadow: rgba(0, 0, 0, 0.05) 0px 20px 10px -5px, rgba(0, 0, 0, 0.02) 0px 10px 0px -5px;background-color:#fff;border-radius:16px;padding:10px 16px;transition:all .5s ease;font-size:18px;font-weight:500;
			svg{
				width:100%;height:auto;opacity:0.5;transition:all .5s ease;
			}
		}
	} 
} 
.bread{
	width:var(--width-xs);margin:-10px auto 0;padding:0 20px 30px;color:#999;
	a{
		&:hover{color:#000;}
		transition:all .5s ease;
	}
}
.content-post{
	background-color:#fff;padding:40px 20px;box-shadow: rgba(0, 0, 0, 0.05) 0px 20px 10px -5px, rgba(0, 0, 0, 0.02) 0px 10px 0px -5px;border-radius:16px;width:var(--width-xs);margin-inline:auto;
	.static-text{
		> *:first-child{
			margin-top:0;
		}
		> *:last-child{
			margin-bottom:0;
		}
		min-height:400px; 
	}
	.hdq_quiz{
		max-width:100%;
	}
	.hdq_question{
		padding:0 0 1rem;margin:0;background-color:transparent;border-bottom:1px solid #ddd;
	}
	.hdq_wrong{
		border:none!important;
		.hdq-options-check input[type="checkbox"]:checked + .hdq_toggle:before{
			background-color:#ff0000;
		}
	}
	.hdq_correct{
		border:none!important;
		.hdq-options-check input[type="checkbox"]:checked + .hdq_toggle:before{
			background-color:#3fb400;
		}
	}
	.hdq_row{
		margin:0 0 1rem;background:transparent!important;
	}
	.hdq_label_answer{
		padding:0;background-color:transparent!important;margin:0;font-size:1rem;
	}
	.nav{
		&.hide{display:none;}
		display:grid;grid-template-columns:1fr max-content 1fr;gap:16px;align-items:center;border-top:1px solid #ddd;padding:20px 0 0;margin:20px 0 0;
		.prev{
			display:flex;
			a{
				&:hover{
					color:var(--color-text);
				}
				border:1px solid #ddd;color:#ddd;border-radius:4px;padding:6px 14px;transition:all .5s ease;
			}
		}
		.pagination{
			display:flex;gap:10px;
			.post-page-numbers{
				&.current{
					&:before{
						top:2px;right:2px;bottom:2px;left:2px;
					}
					border-color:#3eb4ff;
				}
				&:before{
					content:'';position:absolute;top:10px;right:10px;bottom:10px;left:10px;border-radius:50%;background-color:#3eb4ff;
				}
				font-size:0;width:14px;height:14px;border-radius:50%;border:1px solid #ddd;position:relative;
			}
		}
		.next{
			display:flex;justify-content:flex-end;
			a{
				border:1px solid #3eb4ff;border-radius:4px;padding:6px 14px;display:inline-block;transition:all .5s ease;
			}
		}
	}
}
@media (width < 850px){
	:root{
		--padding-sides:15px;
	}
	.index-nav{
		li{
			a{
				aspect-ratio:2.2;gap:16px;
			}
		}
	}
	.list{
		li{
			a{
				grid-template-columns:28px 1fr;font-size:16px;align-items:flex-star;padding:10px;border-radius:10px;
			}
		}
	}
}
@media (width < 480px){
	header{
		gap:20px;
		.logo{
			img{
				width:110px;
			}
		}
	} 
	.index-title{
		margin-bottom:1.8rem;
	}
	.index-nav{
		grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;
		li{
			a{
				border-radius:10px;aspect-ratio:3;
			}
		}
	}
	.list{
		gap:16px;
	}
	.bread{
		padding:0 0 20px;font-size:14px;
	}
	.content-post{
		width:100%;padding:25px 20px;
	}
}
/*FOOTER*/