* { box-sizing: border-box; }

html {
	font-size: 62.5%;
}

body {
	font-size: 1.6rem;
	padding: 50px;
}

.wrapper {
	max-width: 700px;
	margin: 0 auto;
}

.wrapper--mini {
	max-width: 550px;
	margin: 0 auto;
}

h1 {
	margin-top: 0;
}

img {
	display: block;
	max-width: 100%;
	-webkit-filter:
		grayscale(var(--grayscale, 0%))
		sepia(var(--sepia, 0%))
		saturate(var(--saturate, 100%))
		hue-rotate(var(--hue-rotate, 0deg))
		invert(var(--invert, 0%))
		opacity(var(--opacity, 100%))
		brightness(var(--brightness, 100%))
		contrast(var(--contrast, 100%))
		blur(var(--blur, 0px));
	        filter:
		grayscale(var(--grayscale, 0%))
		sepia(var(--sepia, 0%))
		saturate(var(--saturate, 100%))
		hue-rotate(var(--hue-rotate, 0deg))
		invert(var(--invert, 0%))
		opacity(var(--opacity, 100%))
		brightness(var(--brightness, 100%))
		contrast(var(--contrast, 100%))
		blur(var(--blur, 0px));
}

.reset {
	margin: 0;
	padding: 0;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #eee;
	background: #fff;
}

.reset:hover {
	box-shadow: 0 0 5px 5px rgba(0,0,0,0.05);
	cursor: pointer;
}

.editor, pre {
	box-shadow: 0 0 20px 20px rgba(0,0,0,0.05);
	margin-top: 25px;
	margin-bottom: 25px;
	border-radius: 25px;
	padding: 20px;
}

fieldset {
	margin: 0;
	display: grid;
	grid-template-columns: 80px 1fr 60px 20px;
	grid-gap: 15px;
	border: none;
	align-items: center;
	padding: 5px 10px;
	border-radius: 20px;
	margin-bottom: 5px;
	transition: all 0.2s;
}
fieldset.active {
	box-shadow: 0 0 10px 10px rgba(0,0,0,0.05);
}

pre {
	background: #2D2D2D;
	color: #9FF8F1;
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}