@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Overpass+Mono:wght@300..700&&display=swap');

:root {
	/*--font:'Inter', sans-serif;*/
	--font-heading:'Inter', sans-serif;
	--font-footer:'Inter', sans-serif;
	--font:'Overpass Mono', monospace;
	--color-gray-0:#eee;
	--color-gray-1:#ddd;
	--color-gray-2:#aaa;
	--color-gray-3:#888;
	--color-gray-4:#666;
	--color-gray-5:#444;
	--color-black:#000;
	--color-white:#fff;
	--text-primary:var(--color-black);
	--text-secondary:var(--color-gray-5);
	--text-tertiary:var(--color-gray-4);
	--text-link:var(--color-gray-2);
}

* { padding:0; margin:0; outline:0; border:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { position:relative; margin:0; padding:0; border:0; outline:0; font-family:var(--font); font-size:14px; }
a { text-decoration:none; color:var(--color-gray-2); }
a:hover { border-bottom:2px solid var(--color-gray-1); color:var(--color-gray-3); }
ul, ol { line-height:24px; }
li {  }
h1 { font-size:72px; font-family:var(--font-heading); }
h2 { font-size:48px; font-family:var(--font-heading); text-align:center; margin:28px 0; }
h3 { font-size:24px; letter-spacing:1px; margin:16px 0; }
h4 { font-size:16px; margin:28px 0 16px; }
h4.first { margin:16px 0; }
h5 { font-size:12px; font-weight:normal; }
code { background:var(--color-gray-0); color:var(--text-tertiary); border-radius:2px; padding:0 2px; }
hr { margin:40px 0; border-top:1px solid var(--color-gray-1); height:1px; height:100%; }



main { flex:1; display:flex; align-items:center; justify-content:center; }
section { max-width:800px; margin:0 auto; overflow:auto; display:flex; flex-direction:column; gap:16px; transition:all 0.3s ease; }
footer { height:60px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; font-size:12px; font-family:var(--font-footer); }
footer ul { color:var(--text-secondary); }
footer a { color:var(--color-gray-2); }
footer a:hover { border:none; }
footer span { color:var(--text-tertiary); }

form { position:relative; display:flex; flex-direction:column; align-items:flex-end; gap:16px; width:95%; margin:0 auto; }
form > div { display:flex; gap:16px; width:75%; }
form div input { flex:2; }
input, select, textarea { padding:16px; height:48px; border-radius:12px; border:2px solid transparent; outline:4px solid rgb(255 255 255 / 95%); background:rgb(245 245 245 / 95%); font-family:var(--font); font-size:14px; width:75%; transition:200ms; }
input:focus, select:focus, textarea:focus { transition:200ms; border-color:var(--color-black); background:var(--color-white); }
select { padding:12px; flex:1; }
textarea { min-height:200px; height:200px; max-height:320px; resize:vertical; }
button { background:var(--color-black); color:var(--color-white); border-radius:8px; font-size:14px; font-family:var(--font); width:140px; height:48px; cursor:pointer; }
blockquote { margin:24px 0; padding-left:16px; line-height:24px; border-left:4px solid var(--color-gray-0); border-radius:2px; }


.hover, .hover:hover { transition:all 0.3s ease; }
.container { width:100%; height:100%; display:flex; flex-direction:column; }

.flex { display:flex; gap:8px; list-style:none; flex-wrap:wrap; justify-content:center; }
footer .flex { row-gap:0; padding:0 2rem; }

.fjc { justify-content:center; }
.fac { align-items:center; }
.fas { align-items:flex-start; }


.links { display:flex; gap:8px; list-style:none; justify-content:center; }

.link { display:flex; align-items:center; gap:4px; font-family:var(--font-footer); }
.link a { position:relative; color:var(--color-gray-2); font-size:16px; }
.link a:hover { border:none; color:var(--text-secondary); }
.link a:before { display:none; position:absolute; content:''; bottom:2px; left:0; width:100%; height:8px; background:var(--color-gray-1); z-index:0; }
.link a:hover:before { display:block; }
.link a span { position:relative; z-index:1; }
.link img { margin:0 !important; width:16px; height:16px; }
.link sub { line-height:12px; padding-top:6px; }


.center { text-align:center !important; }
.center ul { justify-content:center; }

.content { padding:40px 0; }
.content p { margin-bottom:24px; line-height:24px; text-align:justify; }
.content ul p, .content ol p { margin:8px 0 0 0; }
.content .center { margin-bottom:40px; }
.content img { display:block; margin:20px auto; user-select:none; }
.content footer { margin-top:40px; }

.crisp { position:absolute; z-index:-1; top:0; left:0; width:440px; image-rendering:pixelated; pointer-events:none; user-select:none; filter:grayscale(0.75) opacity(0.5); }

.howto { margin:40px auto; width:75%; }

.badge { padding:2px 8px; border-radius:8px; background:var(--color-black); color:var(--color-white); font-size:12px; }
.badge--off { opacity:0.5; cursor:pointer; }
.badge--on { opacity:1; cursor:pointer; }

.footnote { margin:40px auto; width:75%; padding:8px 12px; font-size:14px; line-height:20px !important; border-radius:4px; border:1px solid var(--color-gray-1); background:rgb(238 238 238 / 20%); color:var(--text-secondary); }

.full { width:100%; height:100%; justify-content:center; }

.l { padding-left:24px; }
.l1 li { margin:16px 0; }
.l2 li { margin:8px 0; }
.l3 li { margin:8px 0; }


.grecaptcha-container { justify-content:flex-end; }
.grecaptcha-hint { margin-bottom:-8px; display:flex; flex-direction:column; gap:0; justify-content:flex-end; text-align:right; width:65%; font-size:8px; color:var(--text-tertiary); }



/* ------------------------------------ */
/*   SCREEN SIZES                       */
/* ------------------------------------ */

/* LARGE ------------------------------ */
@media (max-width:1280px) {
	.l-wrapper--webdev { width:64rem; }
	#theme.l-wrapper.l-wrapper--webdev.l-wrapper--1 { padding-bottom:68px; }
}

/* LARGE ------------------------------ */
@media (max-width:1024px) {
	section { max-width:100%; width:100%; padding:0 2rem; }
}

/* TABLET ----------------------------- */
@media (max-width:768px) {
}

/* LARGE SMARTPHONE ------------------- */
@media (max-width:600px) {
	h3 { font-size:20px; }
	input, select, textarea, form > div, .grecaptcha-hint { width:100%; }
	.crisp { display:none !important; }
	.footnote { width:90%; font-size:12px; }
}

/* SMALL SMARTPHONE ------------------- */
@media (max-width:480px) {
	h1 { font-size:48px; }
	h2 { font-size:40px; }
	form > div { flex-direction:column; }
	.links { flex-direction:column; align-items:center; gap:0px; }
	.grecaptcha-hint { display:inline; }
}