.skip-link {display:none; }
html {-webkit-text-size-adjust: 104%;  /* Prevent font scaling in landscape while allowing user zoom */}

@media only screen {
	body { 
		font-family: -apple-system, BlinkMacSystemFont, "Open Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
		line-height: 1.4;
		margin: 0;
		background: hsl(220,15%,99%);
		color:#555;
	}
}

@media only print {
	body { 
		line-height: 1.2;
		font-size: 12pt;
	}
}

body > img { width: 1px; }

.entry-content a {
	color: hsl(220,20%,40%);
	text-decoration-style: dotted;
	text-decoration-color: hsl(220,40%,70%)
}

.entry-content a:hover {
	color: hsl(220,20%,20%);
	text-decoration-color: hsl(220,40%,50%)
}

.content a:not(h2)[href^="http://"]:before{content:"➚ "}
.content a:not(h2)[href^="https://"]:before{content:"➚ "}
.content a[href^="//"]:before{content:"➚ "}

.entry-content a:not(h2)[href^="http://"]:before{content:"➚ "}
.entry-content a:not(h2)[href^="https://"]:before{content:"➚ "}
.entry-content a[href^="//"]:before{content:"➚ "}

h1, h2, h3, h4, h5, h6 { font-weight: 500;}
h1 { font-size: 1.4em; margin-top: 0}
h2, h3{
	font-size: 1.1em;
	margin-top: 2em;
	color: hsl(12,50%,45%);
	border-bottom: 2px solid hsl(12,50%,45%);
	max-width: 98%;
}

h3 {display: inline-block}
h4 b { color: hsl(12,80%,45%); font-weight: normal; letter-spacing: 1px; }

figure { margin-left: 0; margin-right: 0; text-align: center; margin-top: 2em; margin-bottom: 2em; }
figcaption { font-size: 90%; font-style: italic; }
img { max-width: 100%; height: auto; }
svg { width: 100%; height: auto; }
dl {margin-bottom: 2em}
dt { font-weight:400}
dd { margin-left: 20px; margin-right: 20px;}

dl.refer {
   display: grid;gap: 10px;grid-template-columns: 120px calc(100% - 120px);
}

@media (min-width:600px) {
	dl.refer {grid-template-columns: 240px calc(100% - 240px);}
}

.refer dt, .refer dd {margin-left: 0;padding: 6px 4px}
.refer dt:nth-child(4n -1),
.refer dd:nth-child(4n) {background-color: #efefef}

strong {font-weight: 500;}

blockquote {
	background-color: hsl(190,60%,95%);
	border-left: 8px solid hsl(190,60%,80%);
	padding: 0.5rem 1rem;
}

blockquote cite {
	font-weight: 400;
	color: navy;
	font-style: italic;
	font-size: 0.9em;
}

@media (min-width: 680px) {
	h1{font-size: 1.6em}
	h2{font-size: 1.3em}
}

@media (min-width:980px) {
	h1{font-size: 1.8em}
	h2{font-size: 1.5em}
	h2,h3{margin-top: 2.5em}
}


.top-menu {
	background-color: hsl(220,15%,35%);
	padding-top: 0.5rem;
	padding-bottom: 0;
	margin-bottom: 1em;
	max-width:100vw;
	overflow:hidden;
}

.top-menu ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style-type: none;
	padding: 0;
	margin: 0 auto;
	max-width:1440px; 
}

.top-menu li {width:47%;font-size:0.9rem;margin-bottom:0.5em}
.top-menu li:nth-child(odd) {margin-right:1rem;}

@media (min-width: 720px) {
	.top-menu li {width:24%;max-width: 246px;}
	.top-menu ul {justify-content: flex-start}
}

.top-menu a {
	padding: 1.5em;
	text-transform: uppercase;
	color: white;
	letter-spacing: 1px;
	text-decoration:none;
}
.hiding.cat-css,
.hiding.cat-html,
.hiding.cat-js,
.hiding.cat-js-basis,
.hiding.cat-tut,
.hiding.cat-svg { display: none}
.cat-css .hiding.cat-css {display:block}

.svginside {position:relative;margin: 2em auto;width:100%}
.svginside canvas {display:block;width:100%;visibility:hidden;}
.svginside svg {position:absolute;top:0;left:0;width:100%;}

pre, .grayframe {
	width:99%;
	box-sizing:border-box;
	padding:22px 4px;
	overflow:auto;
	margin-top:2em; margin-bottom: 2em;
	border-top:6px solid hsl(215,30%,90%);
	border-bottom:6px solid hsl(215,30%,90%);
	background-image: repeating-linear-gradient(#efefef,#efefef 22px, white 22px, white 44px);
	font-size:0.9rem;
	line-height:22px;
	font-family: Menlo, 'Roboto Mono', 'Andale Mono', "Lucida Console",monospace;
	color: hsl(200,20%,20%);
	tab-size:3;
	-moz-tab-size:3
}

pre.conso {background:#666;color:white;border-top: 6px solid hsl(180,50%,80%); border-bottom: 6px solid hsl(180,50%,80%);}

.codebox{width:99%}
.codebox h6,
.codebox p {background:hsl(215,30%,50%);box-sizing:border-box;color:white;margin-bottom:0;padding:5px 10px;font-size:0.9em;font-weight:300;border-top-left-radius:4px;border-top-right-radius:4px}
.codebox pre{width:100%;margin-top:0;border-top-right-radius:0;border-top-left-radius:0;border-top:0}

.secondary {
	margin-top: 2em;
	padding-bottom: 1em;
	margin-left:auto;
	margin-right:auto
}

.secondary #nav_menu {
	max-width:300px;
	margin-left:auto;
	margin-right:auto
}

@media (min-width: 410px) {
	.secondary #nav_menu {
		max-width: 400px;
	}
}

@media (min-width: 700px) {
	.secondary #nav_menu {
		max-width: 420px;
	}
}

@media (min-width: 1380px) {
	.secondary,
	.secondary #nav_menu {
		max-width: 420px;
	}
}

.secondary header { margin-bottom: 2em; text-align: center}
.secondary h4 {margin-top: 4px; margin-bottom: 4px; cursor: pointer; font-size: 1rem; border-bottom: 1px solid hsl(350,60%,50%); padding-left: 6px; padding-right: 6px; box-sizing:border-box; }
.secondary h4:before { content: " ▸ "; color: hsl(12,80%,45%) }
.secondary ul { padding-left: 0; }
.secondary li { font-size: 0.9rem; padding-top: 0; margin-bottom: 0.2em; padding-left: 6px; padding-right: 6px; box-sizing: border-box;}
.secondary li a { color: #333; display: block; text-decoration: none; padding-top: 2px; padding-bottom: 2px; padding-left: 5px; margin:0; border-left: 6px solid #efefef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.secondary li a i { color: hsl(12,40%,45%); font-style: normal; font-weight: normal}
.acco {
	height: 0;
	overflow: hidden;
	transition: height 1s;
	padding-left: 0;
	margin-left: 0;
	margin-top: 0;
}

/*search scout*/
.cf:before,.cf:after{content:"";display:table}.cf:after{clear:both}.cf{zoom:1}
.scout{padding-top:20px;padding-bottom: 10px;}

.scout input{width:210px;height:40px;padding-left:5px;box-sizing:border-box;float:left;font-weight:400;font-size:15px;border:1px solid gainsboro;background-color:#fff;border-radius:3px 0 0 3px}

.scout input::-webkit-input-placeholder{color:#999}.scout input:-moz-placeholder{color:#999}.scout input:-ms-input-placeholder{color:#999}
.scout button{overflow:visible;position:relative;float:right;border:0;padding:0;cursor:pointer;height:40px;width:30%;font-weight:400;font-size:15px;line-height:40px;color:#fff;text-transform:uppercase;background-color:hsl(12,85%,55%);border-radius:0 3px 3px 0;text-shadow:0 -1px 0 rgba(0, 0 ,0, .3)}
.scout button:hover{background-color:hsl(350,60%,70%)}
.scout button:active,.scout button:focus{background-color:hsl(350,60%,40%)}
.scout button:before{content:'';position:absolute;border-width:8px 8px 8px 0;border-style:solid solid solid none;border-color:transparent hsl( 12, 85%, 55%);top:12px;left:-6px}
.scout button:hover:before{border-right-color:hsl(350,60%,40%)}
.scout button::-moz-focus-inner{border:0;padding:0}
.assistive-text,.ankers{display:none}

.svghide { display: none}

.rangeslider input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 100%;
}
.rangeslider input[type=range]:focus {
  outline: none;
}
.rangeslider input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  background-color: silver;
  border-radius: 5px;
}
.rangeslider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 8px solid gray;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  background-color: #ffffff;
  cursor: pointer;
  margin-top: -14px;
}

.rangeslider input[type=range]::-moz-range-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  background-color: silver;
  border-radius: 5px;
}

.rangeslider input[type=range]::-moz-range-thumb {
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background-color: #ffffff;
  border:8px solid gray;
  cursor: pointer;
  margin-top: -14px;
}

.rangeslider input[type=range]::-ms-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
.rangeslider input[type=range]::-ms-fill-lower {
  background-color: gray;
  border-radius: 5px;
}
.rangeslider input[type=range]::-ms-fill-upper {
  background-color: silver;
  border-radius: 5px;
}
.rangeslider input[type=range]::-ms-thumb {
  border: 8px solid silver;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background-color: #ffffff;
  cursor: pointer;
}

/** wp **/
@media (min-width: 1380px) {
	.entry-content .wp-block-group:nth-child(1) h2,
	.entry-content section:nth-child(1) h2 {margin-top: 0;}
	.secondary {margin-top:0;}
}

.entry-content is(nav, aside, .bottom, .secondary) {content-visibility: auto;}

.adds {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.topadds {
	width: 100%;
	min-width: 300px;
	min-height: 100px;
	max-height: 300px;
	margin-left: auto;
	margin-right: auto;
	overflow:hidden;
}


/**
@media (min-width: 1380px) {.topadds div {	width:300px;height:600px;}}
@media (min-width: 1500px) .topadds {width: 420px; max-width: 420px;  }
**/
.bottomadds {
	width: 100%;
	min-width: 300px;
	min-height: 100px;
	max-height: 300px;
	margin-top: 2rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	border-top: 2px solid lightslategray;
	border-bottom: 2px solid lightslategray
}

.underadds {
	width: 100%;
	max-width: 300px;
	overflow:hidden;
	margin: 2em auto;
	min-height: 250px;
	max-height: 300px;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

@media (min-width:410px) {
	.topadds {}
	.underadds {max-width: 99%}
}

@media (min-width:738px) {
	.underadds {max-width: 728px;}
}

@media (min-width:1024px) {
	.underadds {max-width: 980px;}
}

@media (min-width: 1380px) {
	.bottomadds,
	.topadds { 
		width: 420px;
		height: 600px;
		min-width: 360px;
		max-height: 600px;
	}
}



.sitemap { width: 240px; margin-left: auto; margin-right: auto; margin-top: 1rem; }
.search { min-height: 100px;  margin-top: 1rem; }
.search form { width: 300px;  margin-left: auto; margin-right: auto;}
.search input {border-bottom: 2px solid silver; }
.headsvg { max-width: 1000px; margin-left: auto; margin-right: auto; }
.headsvg img { width: 100%; }

@media only screen and (min-width:1380px) {
	.headsvg.new {
		width: 900px;
		max-width: 900px;
		margin-bottom: 40px;
		margin-left: 0px;
	}
}

.entry-content {background: white; }
.entry-content section, .entry-content .wp-block-group,
.entry-content nav,
.entry-content aside { max-width: 900px; margin-left: auto; margin-right: auto; }
.secondary { margin-left: auto; margin-right: auto; background: white; }
.secondary header svg { width: 240px; margin-left: auto; margin-right: auto; }
.excerpt { max-width: 1000px; margin-left: auto; margin-right: auto;}
.entry-header { max-width: 900px; margin-left: auto; margin-right: auto; }

@media (max-width: 1379px) {
	.excerpt { border-bottom: 6px solid lightslategray; margin-bottom: 1em; }
	.search { border-top: 6px solid lightslategray}
}

.block-group {
	background: ivory;
	margin-right: 0;
	padding-left:5%;
}

@media (min-width: 720px) {
	.block-columns {
		display: flex;
		justify-content: flex-end;
	}

	.block-columns.has-2-columns .block-column {
		width:49%
	}

	.block-columns.has-2-columns .block-column:nth-child(1) {
		margin-right: 26px;
	}
}

@media (min-width: 1008px) {
	.block-columns.has-4-columns .block-column { width: 24% }
}

.secondary {
	display: flex;
	flex-direction: column; 
}

.secondary h4 { padding-top: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.4rem }

@media (max-width: 1379px) {
	.secondary nav { order: 2}
	.secondary .bottomadds {order: 1}
	.secondary h4 { font-size: 1.2rem; }
}

@media (min-width: 1380px) {
	@supports not (-ms-high-contrast: none) {
		.secondary nav { order: 1}
		.secondary .bottomadds {order: 2}
		.secondary h4 { font-size: 1.1em;}
		.secondary li { font-size: 0.96em; }
	}
}

.scrollup {
	margin-top: 1em; 
	padding-top: 1em;
	padding-bottom: 1em;
	background: #efefef;
}
.scrollup svg { width: 90px; margin-left: auto; margin-right: auto; display: block; }

footer {
	background-color: hsl(220,15%,35%);
	padding: 1em;
	color: white;
	font-size: 0.9em;
	content-visibility: auto;
}

footer.colofon {
	background: hsl(220,15%,25%);
	padding-bottom: 110px;
}

footer a {
	color: white;
	text-decoration: none; 
}

footer .kocon {
	width: 280px; margin-left: auto; margin-right: auto; 
}

footer .kocon img {
	width: 280px;
	margin-top:1em; 
}

.branding .layout-row {
	display: flex; 
	padding:0.5rem;
	box-sizing: border-box;
	max-width: 1380px;
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
}

#top-logo { width: 68px }

.site-title {
	font-size: 1.2em;
	line-height: 1.5;
	margin-left: 0.5em;
	display: flex; flex-direction: column; justify-content: center; 
}

.site-title a {
	text-decoration: none;
	font-weight:500;
	color: hsl(12, 90%, 40%)
}

.topbar {margin-top: 1em}
.topbar ul { padding: 0em; list-style-type: none; }
.topbar .menu-css { background-color: hsl(12,75%,55%); border-bottom: 8px solid hsl(12,75%,55%);}
.topbar .menu-html { background-color: hsl(190,45%,60%);border-bottom: 8px solid hsl(190,45%,60%); }
.topbar .menu-javascript-basis { background-color: hsl(45,100%,65%);border-bottom: 8px solid hsl(45,100%,65%); }
.topbar .menu-javascript { background-color: hsl(50,100%,45%);border-bottom: 8px solid hsl(50,100%,45%); }
.topbar .menu-tutorials { background-color: hsl(220,15%,50%);border-bottom: 8px solid hsl(220,15%,50%); }
.topbar .menu-svg { background-color: hsl(220,15%,65%);border-bottom: 8px solid hsl(220,15%,65%); }

.cat-css      .topbar .menu-css {border-bottom: 8px solid hsl(12,85%,85%)}
.cat-html     .topbar .menu-html {border-bottom: 8px solid hsl(190,85%,85%)}
.cat-js-basis .topbar .menu-javascript-basis {border-bottom: 8px solid hsl(45,100%,85%)}
.cat-js-web   .topbar .menu-javascript { border-bottom: 8px solid hsl(50,100%,75%); }
.cat-tutorial .topbar .menu-tutorials { border-bottom: 8px solid hsl(220,15%,65%); }
.cat-svg      .topbar .menu-svg { background-color: hsl(220,15%,25%);border-bottom: 8px solid hsl(220,15%,65%); }

.topbar li { }
.topbar a {
	font-size: 1.1em;
	color: white;
	width: 100%;
	height: 100%;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
	display:flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 3em;
	box-sizing: border-box;
	font-weight:500;
	text-align:center;
}

input#hamburg {display: none; }

@media (max-width: 1008px) {
	.entry-header,
	time,
	.main-line .excerpt,
	.entry-content section,
	.entry-content .wp-block-group,
	.entry-content nav,
	.entry-content aside { 
		margin-left: 0.5rem; margin-right: 0.5rem
	}
}

@media (max-width: 1279px) {
	label.hamburg {
		display: block;
		background-color: #555;
		width: 80px;
		height: 56px;
		position: relative;
		margin-left: auto;
		margin-right: auto;
		border-radius: 4px;
		/**transition: border-radius .5s;**/
	}

	label.hamburg .hamburg-line1,
	label.hamburg .hamburg-line2,
	label.hamburg .hamburg-line3 {
		will-change: transform;
		position: absolute;
		left: 12px;
		height: 5px;
		width: 56px;
		background-color: #fff;
		border-radius: 2px;
		display: block;
		transition: transform 0.5s;
		transform-origin: center;
	}

	label.hamburg .hamburg-line1 {will-change: transform;top: 12px;}
	label.hamburg .hamburg-line2 {will-change: transform;top: 24px;}
	label.hamburg .hamburg-line3 {will-change: transform;top: 36px;}

	#hamburg:checked + .hamburg .hamburg-line1{transform: translateY(12px) rotate(-45deg);}
	#hamburg:checked + .hamburg .hamburg-line2{opacity:0;}
	#hamburg:checked + .hamburg .hamburg-line3{transform: translateY(-12px) rotate(45deg);}

	.topbar ul { 
		list-style-type: none;
		height: auto; 
		max-height: 0; 
		overflow: hidden; 
		transition: max-height 1s;
		background-color: #666;
		padding-left: 0
	}
	.topbar li { height: 4em;}
	#hamburg:checked ~ ul {max-height: 800px;}
	.entry-content .block-cover {  border-top: 4px solid gainsboro; border-bottom: 4px solid gainsboro; padding-top:1.5rem; padding-bottom: 1.5rem; }
}

@media (min-width: 520px) {
	.headsvg { max-width: 440px}
	.topbar ul { display: flex;flex-wrap: wrap;}
	.topbar li { width: 50%;}
	.topbar a { padding-left: 1.5rem;}
}

.socialicons {
	display:flex;width:160px;margin-left:auto;margin-right:auto;gap:12px;
}
.socialicons img {
	width: 31%;
	cursor:pointer;
}

@media only screen and (min-width: 800px)  {
	body { font-size: 120%; line-height: 1.5}

	#top-logo {width: 80px;}

	.site-title {font-size: 1.6em;line-height: 1.5;margin-left: 1em;}

	.topbar li { width: 33.33333%;height: 5rem;}
	.topbar a { padding-left: 0;align-items: center;}

	.footer-cols {display: flex;justify-content: center;}	

	.cols {
		width: 49%;
		max-width: 520px;
		padding-left: 1em;
		padding-right: 1em;
		box-sizing: border-box;
	}

	.excerpt {font-size: 1.2em}
}

/** WP **/
.home  .blog article header a {text-decoration:none;text-overflow: ellipsis;overflow:hidden;white-space:nowrap;color: #222;}
.home  .blog article .excerpt{border-bottom: none;background: none;}

ul.post-meta {list-style-type: none;}

@media (min-width: 920px) {
	.home .blog {display: flex;flex-wrap: wrap;justify-content: space-around;max-width: 1476px;margin-left: auto;margin-right: auto; }
	.home  .blog article {width: 40%;max-width:40%;background-color: white;margin-bottom: 2rem;box-shadow: 3px 3px 5px hsla(0,0%,0%,0.1);}
	.home .blog article header {margin-top:0;margin-left:0;width:100%;padding-top: 8px;font-weight: 300;}
	.home  .blog article .main-line {display:block;}
	.home  .blog article h2 {max-width:100%; overflow: hidden; text-overflow:ellipsis;text-align: left; font-size: 1.2em;margin-top:0;}
	.home  .blog article .excerpt p {font-size: 1rem;padding-right: 1rem;}
	.home .blog article .main-line .headsvg {max-width:50%;margin-left:auto;margin-right:auto}
	.home .excerpt p {max-width: 100%;margin-left: 0;}
}

/** WP **/
@media (min-width: 1260px) {	
	.home .blog article {width: 30%;}
}

@media (min-width: 1100px) {
	.headsvg { max-width: 640px}
}
.bottom {content-visibility: auto;}
@media only screen and (min-width: 1380px) {
	@supports not (-ms-high-contrast: none) {
	.topbar ul { 
		width:100%; list-style-type: none; padding-left: 0; justify-content: center;
	}
	.topbar li { 
		width: 16.66666%;
		max-width: 246px;
		padding-top:0.5em;
		padding-bottom:0.5em;
	}

	header.entry-header {
		max-width: 1440px;
		margin-top:0;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
		padding-left:0;
	}

	/** WP **/
	body.home header.entry-header {padding-left: 0;}

	.main-line {
		display:grid;
		grid-template-columns: 1fr 900px 380px 1fr;
		grid-template-areas: ".       headsvg topadds . "
							 "excerpt excerpt search  search";
		margin-top: 40px;
		margin-bottom: 80px;
	}

	/** WP **/
	body.home .main-line {margin-top: 0;margin-bottom: 40px;}

	main {
		display:grid;
		grid-template-columns: 1fr 900px 380px 1fr;
		grid-template-areas: "entry-content entry-content secondary . ";
		justify-content:center;
	}

	.headsvg {grid-area: headsvg; width:900px; max-width: 900px; margin-bottom: 40px;}
	.topadds {grid-area: topadds; }
	.excerpt {grid-area: excerpt; background-color: #efefef; max-width: 100%; width: 100%; margin-top: 1rem; }
	.search {grid-area: search; background-color: #efefef; width: 100%; padding-left: 3rem; box-sizing: border-box; }
	.search form { margin-left: 0}
	.sitemap {display:none}

	.entry-content {grid-area:entry-content;box-shadow:2px 0 4px -2px #ddd}
	.secondary {grid-area:secondary;}
	.secondary a {display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

	.entry-content section,
	.entry-content .wp-block-group,
	.entry-content nav, 
	.entry-content aside { margin-left: calc(100% - 900px) }
	.entry-content .block-cover { margin-right: 0; margin-left: auto; }

	.excerpt p { padding-left: 2rem}
	.excerpt ul,
	.excerpt ol { padding-left: 4rem}
	.bottom { margin-top: 4em}
	
	section p {margin-right: 2em}
}

/** WP **/

.home .blog {margin-top: 2rem;}

@media (min-width: 1100px) {
	.headsvg { max-width: 900px}
	.home .blog {margin-top: 4rem;}
}

@media (min-width: 1260px) {	
	.home .blog {margin-top: 5rem}
}

@media (min-width: 1500px) {
	@supports not (-ms-high-contrast: none) {
		.home .blog {justify-content: space-between;max-width: 1476px;}
		.home .blog {margin-top: 8rem;}
	}

	.excerpt p, .excerpt ol, .excerpt ul {max-width: 1000px;margin-left: calc(100% - 1000px)}
}

@media (min-width:1500px) {
@supports not (-ms-high-contrast: none) {
	.headsvg {width:1000px; max-width: 1000px; margin-bottom: 40px; margin-left: -100px;}
	.headsvg img {width: 1000px }
	.secondary { width: 420px; margin-left: 30px }
}
}
.demo-wrap { background-color: #efefef; padding: 4px 0; max-width: 864px;}
.demo { max-width: 300px; margin: 1em auto; text-align: center; background-color: #fff; padding: 0.5em;}
.demo input, .demo select, .demo button { font-size: 1em; padding: 2px 8px}
.demo textarea { width: 90%; margin: 1em auto; font-size: 1em;}
.demo .result { background-color:#efefef;padding:10px;margin: 10px auto;}
.demo button { height: 30px; font-size: 0.9em; border-radius: 15px; border: 1px solid silver; padding-left: 12px; padding-right: 12px; background-image: linear-gradient(#E3E3E3, white); display: inline-block; margin: 8px 0}