/**
 * The first commented line is your dabblet’s title
 */

body {
	background: #f06;
	background: linear-gradient(90deg, #f06, yellow);
	min-height: 100%;
}

button {
	padding: .3em .8em;
	border: 1px solid rgba(0,0,0,0.1);
	background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
	border-radius: .2em;
	box-shadow: 0 .05em .25em rgba(0,0,0,.5);
	color: white;
	text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
	font-size: 125%;
	line-height: 1.5;
	
	margin: 1em 1em;
	/*transform: translateX(1em) translateY(1em) skew(0deg) rotate(0deg);*/
}

button.danger {
	background-color: #c00;
}

button.success {
	background-color: #6b0;
}

button hr {
	height: 0.1em;
	background: currentColor;
}

div.container {
	padding: 1em;
	margin: 4em;
}

div.multiple-borders {
	border: 15px solid hsla(0,0%,100%,.5);
	border-radius: 0.1em;
	background: yellowgreen;
	background-clip: padding-box;
	
	/* Multi borders! */
	box-shadow: 0 0 0 10px #655,
				0 0 0 20px deeppink,
				0px 2px 5px 25px rgba(0,0,0,.6);
}

div.stitched-border {
	color: white;
	background: #655;
	border: 10px solid #655;
	border-radius: 0.5em;
	outline: 4px dashed white;
	outline-offset: -1em;
}