*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6,button,input,label{line-height:1.1}h1,h2,h3,h4,h5,h6{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}}ul{list-style: none;}a{text-decoration: none;}

*, *:before, *:after {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

:root {
	--gradit: linear-gradient(-45deg, #ccc, #fff);
}

html {scroll-behavior: smooth;}

body {
	font: normal normal 400 10pt/normal 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-optical-sizing: auto;
	color: #000;
	background-color: #eee;
	min-height: 100vh;
}

a {
	color: #933;
	transition: all 0.5s ease-in-out;
}

a:hover {
	color: #c63;
	transition: all 0.5s ease-in-out;
}

contain {
	width: 100%;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-content: center;
	align-items: center;
}

content {
	width: 100%;
	order: 0;
	flex: 0 1 auto;
	align-self: auto;
}

content .ins {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

content .ins img {
	max-width: 100%;
}

/*************************************** FORM ***************************************/

.xform {
	max-width: 100%;
}

.xform .input {
	display: block;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
	font: normal normal 400 12pt/normal 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	padding: 8px;
	width: 100%;
	max-width: 700px;
	color: #000;
	margin: 0 auto 36px auto;
	border: none;
	transition: all 0.5s ease-in-out;
}

.xform .input:focus {
	outline: none;
	box-shadow: 0 0 0 0 rgba(0,0,0,0);
	transition: all 0.5s ease-in-out;
}

/*************************************** PENCIL ***************************************/

.flexit {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	align-items: flex-start;
}

.flexit .inx {
	margin: 10px;
	text-align: center;
	max-width: 100px;
	order: 0;
	flex: 0 1 auto;
	align-self: auto;
}

.flexit .inx img {
	max-width: 70px;
	padding: 10px;
	margin: 0 auto;
	border: 1px solid #ccc;
	border-radius: 10px;
	background-color: #fff;
}

.gridit {
	display: grid;
	/* grid-template-columns: repeat(8, 1fr); */
	grid-template-columns: repeat(auto-fill, minmax(max(100px, calc((100% - 70px) / 8)), 1fr));
	gap: 10px;
}

.gridit .ing {
	text-align: center;
	max-width: 100px;
}

.gridit .ing img {
	display: block;
	max-width: 70px;
	padding: 10px;
	margin: 0 auto;
	border: 1px solid #ccc;
	border-radius: 10px;
	background-color: #fff;
}