:root{
	&.light{--white:#fff;--white-trans:rgba(255,255,255,.95);--black:#000;--grey:#ddd;--grey-dark:#999;--yellow:#ff0;--orange:#f44336}
	&.dark{--white:#000;--white-trans:rgba(0,0,0,.8);--black:#fff;--grey:#666;--grey-dark:#999;--yellow:#999;--orange:#aaa}
}

*{
	color:var(--black);background:0;margin:0;padding:0;border:0;outline:0;border-radius:0;font-family:monospace;font-size:12px;appearance:none;text-decoration:none;list-style:none;resize:none;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)
	&:-webkit-placeholder{color:var(--black)}
	&::-moz-placeholder{color:var(--black)}
	&::-webkit-input-placeholder{color:var(--black)}
	&:-ms-input-placeholder{color:var(--black)}
	&:-webkit-autofill,
	&:-webkit-autofill:hover,
	&:-webkit-autofill:focus{box-shadow:inset 0 0 0 1000px var(--white)}
}

/* BODY */
body,html{margin:auto;width:100%}
body{
	background:var(--white);padding:30px;max-width:1000px;display:grid;grid-template-columns:100px auto;gap:0 30px;align-items:start;
	&.act{overflow:hidden}
}

/* NAV */
nav{
	position:sticky;top:30px;display:grid;gap:20px;
	a:first-child{background:var(--yellow);margin:0 auto 0 0;font-weight:bold}
	a{user-select:none;cursor:pointer}
	a[aria-current=page]:not([data-pop]){font-weight:bold;text-decoration:underline 4px solid var(--yellow);pointer-events:none}
	a[data-pop]{text-decoration:underline 1px dotted var(--orange);color:var(--orange);font-weight:bold}
	hr{border-bottom:1px dashed var(--grey)}
}
[data-nav]{box-shadow:inset 0 0 0 6px var(--yellow),inset 0 0 0 7px var(--black);background:var(--yellow);width:48px;height:48px;font-size:20px;position:fixed;display:none;place-content:center;user-select:none;cursor:pointer}
[data-nav]:before{content:'\2261'}

article{
	display:grid;gap:20px;

	/* HEADER */
	header{
		margin:0 0 0 auto;display:grid;grid-auto-flow:column;gap:25px;user-select:none;
		a:not(.act){cursor:pointer}
		a.act{box-shadow:0 4px 0 0 var(--yellow);font-weight:bold;pointer-events:none}
	}

	/* SECTION */
	section{
		display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
		img{width:100%;height:200px;object-fit:cover;object-position:50% 0;vertical-align:top;cursor:pointer;image-rendering:-webkit-optimize-contrast}
		img[src='./src/img/error.png']{background:var(--grey);object-fit:scale-down;object-position:50%}
		figcaption{padding:15px 0;border-bottom:1px dashed var(--grey);user-select:none;display:grid;gap:5px}
		figure[data-category=pdf] figcaption{padding:0 0 30px}
		b{text-transform:uppercase}
		i{font-style:normal}
		u{background:var(--yellow);margin:0 auto 0 0}
		b,i,u{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
		a{text-decoration:underline 1px dotted var(--black)}
	}

	/* FOOTER */
	footer{
		&:before{content:'\00a9'}
		a{font-weight:bold;text-decoration:underline 4px solid var(--yellow)}
		b{font-weight:normal;float:right}
		p{margin:25px 0 0;padding:20px 0 0;border-top:1px dashed var(--grey);font-size:10px;line-height:20px;letter-spacing:1px}
	}
}

/* DIALOG */
dialog{
	background:var(--white-trans);width:100%;height:100%;position:fixed;top:0;overflow:auto;
	&[open]{display:grid;align-items:center}
	[data-close]{margin:0 0 0 auto;user-select:none;cursor:pointer}
	[data-close]:before{content:'[\00d7]'}
	[data-wrap]{margin:auto;padding:30px;max-width:660px;width:100%;display:grid;gap:10px}
	
	/* PREVIEW */
	[data-preview]{
		line-height:18px;user-select:none;
		img{margin:30px 0 0;width:100%}
		img[src='./src/img/error.png']{background:var(--grey);object-fit:scale-down;object-position:50%}
		img[src$='.gif']{margin:30px auto 0;max-width:100%;width:auto;display:table}
		b{background:var(--yellow);font-weight:normal}
	}

	/* ABOUT */
	[data-about]{
		user-select:none;display:grid;grid-template-columns:repeat(2,1fr);
		img{background:var(--grey);width:100%;height:100%;object-fit:cover;object-position:0;grid-area:3/auto/1/auto;image-rendering:-webkit-optimize-contrast}
		img[src='./src/img/error.png']{object-fit:scale-down;object-position:50%}
		b{background:var(--yellow);height:200px;text-align:center;place-content:center}
		p{background:var(--white);padding:0 40px;height:200px;line-height:20px;word-break:break-word;place-content:center}
	}

	/* CONTACT */
	[data-contact]{
		form{
			display:grid;grid-template-columns:232px auto;
			[data-left]{
				background:var(--yellow);padding:30px;line-height:20px;word-break:break-all;user-select:none;display:grid;
				img{margin:0 0 30px}
			}
			[data-right]{
				background:var(--white);padding:30px;display:grid;gap:0 15px;grid-template-columns:repeat(2,1fr);
				textarea{grid-area:auto/-1/auto/1}
				textarea, input{width:100%;border-bottom:1px dashed var(--grey)}
				div{
					display:grid;gap:15px;align-items:end;grid-template-columns:1fr auto auto;grid-area:auto/-1/auto/1;
					input{border-bottom:4px solid var(--white);cursor:pointer}
					input[type=submit]{border-bottom-color:var(--yellow)}
					label{color:var(--grey-dark);border-bottom:4px solid var(--white)}
				}
			}
		}
	}
}

/* MOBILE */
@media all and (max-width:730px){
	article{
		section{grid-template-columns:repeat(2,1fr)}
	}

	dialog{
		[data-about]{
			grid-template-columns:unset;
			img{grid-area:unset}
			p,b{padding:50px;height:auto;grid-area:unset}
		}
		[data-contact]{
			form{
				grid-template-columns:unset;
				[data-right]{height:300px;grid-template-columns:unset}
				[data-left]{height:auto}
			}
		}
	}
}

@media all and (max-width:565px){
	article{
		section{grid-template-columns:unset}
		footer{
			line-height:20px;
			b{float:none}
		}
	}
}

@media all and (max-width:417px){
	body{gap:0;grid-template-columns:unset}
	[data-nav]{display:grid}

	nav{
		background:var(--white);padding:20px 0;width:100%;height:100%;text-align:center;position:fixed;top:0;left:0;overflow:auto;transition:.2s transform;transform:translate3d(-100%,0,0);will-change:transform;
		a:first-child{margin:auto}
		&.act{display:grid;transform:none}
	}

	dialog{
		[data-contact]{
			form{
				[data-right]{
					div{
						grid-template-columns:unset;gap:0;grid-area:unset;
						input{background:var(--black);color:var(--white);padding:10px 0;border:0}
					}
				}
			}
		}
	}

	article{
		footer{grid-area:unset}
	}
}