@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
html,body,div,span,applet,object,iframe,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,label,legend,p,blockquote,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}body{line-height:1;color:black;background:white;}:focus{outline:0;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}abbr,acronym{border:0;}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body {font-family: "Outfit", sans-serif;}
header {max-width:1200px; margin: 0 auto; padding: 1em;}
header img {border-bottom:1px solid #000;}
h2 {color:#484; margin: 1em 0 8px; font-size:1.75em;}
#main {max-width:60em; margin: 0 auto; padding: 1em;}
#main p {margin: 0.5em 0.5em 0.5em; font-size:1.25em;}
#main ul, ol, dl {margin: 1em 5%;}

.graybg {background:#f2f2f2; border:1px solid #999; padding:0.5em; margin:1em 0;}

ul li, ol li {margin: 0.5em 0 0.5em;}
ul {list-style-type:square;}
ol {list-style-type: decimal;}

dl {
display: flex;
flex-flow: row wrap;
}
dt {
flex-basis: 20%;
padding: 6px;
background: #f0f0f0;
text-align: right;
font-weight:bold;
color: #007050;
}
dd {
flex-basis: 70%;
flex-grow: 1;
margin: 0;
padding: 6px 4px;
border-bottom: 1px solid #ccc;
}

#msg {
float:right;
width: 222px;
max-width:48%;
margin: 1em;
background: #fff;
border:1px solid #075;
box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}
#msg h2 {margin:0; padding: 2px 4px; font-size:1.333em;}
#msg p {font-style:oblique;}

a div.bttn {
	display:block;
	padding: 10px;
	background:#484;
	color:#fff;
	text-align:center;
	text-decoration:none;
	border-radius: 8px;
	position:relative;		
}
a div.bttn:hover {background:#678; color:#fff;}
a div.bttn:active {position:relative; top:1px; left:1px;}
/*
a.bttn:before {content:'\2766'; color:#fff; padding-right:8px; vertical-align: middle;}
a.bttn:hover:before{color:#f80;  transform:scale(1.2,1.2);}
a.bttn:active:before {color:#ff0; }
*/

footer {background:#eee;text-align:center;padding:1em; line-height: 1.5em;}

.ctr {text-align:center;}
img {max-width:100%; height:auto;}
b, strong {font-weight:bold;}
i, em {font-style:oblique;}