body{margin:0;background-color:#f0f0f0;}
h1,h2,h3{margin:1em 0;font-size:2.25rem;line-height:1;}
h2{font-size:1.5rem;}
h3{font-size:1.25rem;}
a,a:hover{color:#006af9;text-decoration:none;}

.wrap{box-sizing:border-box;max-width:800px;margin:0 auto;}
.main .wrap{padding:20px 40px;background-color:#fff;}

header{background-color:#2d2d2d;color:#fff;}
header .wrap{padding:30px 0;}
header h1{margin:0;}

nav{display:flex;flex-wrap:wrap;text-align:center;
gap:0.5em 1em;
}
nav a{flex:none;position:relative;padding:0.5em 1em;border-radius:5px;background-color:#eee;
transition:background-color 0.2s;
}
nav a:hover{background-color:#e0e0e0;}
nav a.active{background-color:#ddd;color:#333;}

fieldset{margin:1em 0;border-color:#ddd;}
fieldset legend{color:#888;font-size:1rem;line-height:2;}
fieldset section + section{margin-top:1em;}
fieldset input,
fieldset select,
fieldset button{padding:0.5em;}

.about{display:flex;}
.about section{flex:1;}
.about section h2{margin-bottom:0;}
.about a:hover{opacity:0.8;}

.acts{font-size:0.875rem;}
.acts a{display:inline-block;padding:0.5em 1em;border-radius:3px;background-color:#eee;color:#555;
transition-property:background-color, color;
transition-duration:0.2s;
}
.acts a:hover{color:#333;background-color:#ddd;}
.acts .group + .group{margin-top:0.5em;}


.demo_form{padding:10px;}
.demo_form .setvalue input[type='text']{box-sizing:border-box;display:block;width:100%;height:40px;}
.demo_form .setvalue input[type='radio'],
.demo_form .setvalue input[type='checkbox']{display:none;}

.demo_form .setvalue label + input + label{border-top:1px dashed rgba(0,0,0,0.1);}

.demo_form .setvalue label{display:block;position:relative;padding-left:40px;line-height:40px;cursor:pointer;}
.demo_form .setvalue label:before{content:'';position:absolute;top:50%;left:20px;width:16px;height:16px;margin:-9px 0 0 -9px;border:1px solid rgba(0,0,0,0.1);border-radius:50%;
transition-property:border-color;
transition-duration:0.2s;
}
.demo_form .setvalue label:after{content:'';position:absolute;top:50%;left:20px;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background-color:transparent;
transition-property:background-color;
transition-duration:0.2s;
}

.demo_form .setvalue input[type='checkbox'] + label:before{border-radius:3px;}
.demo_form .setvalue input[type='checkbox'] + label:after{width:8px;height:3px;margin:-3px 0 0 -5px;border-left:2px solid transparent;border-bottom:2px solid transparent;border-radius:0;
transform:rotate(-45deg);
transition-property:border-color;
}

.demo_form .setvalue input:checked + label:before{border-color:#4a89dc;}
.demo_form .setvalue input[type='radio']:checked + label:after{background-color:#4a89dc;}
.demo_form .setvalue input[type='checkbox']:checked + label:after{border-color:#4a89dc;}