@import url('https://fonts.googleapis.com/css?family=Overlock&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

body {
 font-family: 'Lato', Helvetica, Arial, sans-sans-serif;
 font-size: 1.1em;
 margin: 0;
 background-color: #8cd19c;
 background-image: linear-gradient(#9dd8ad,#7aca8a);
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
}

div#wrapper{
 position: relative;
 max-width: 75%;
 margin: 10px auto;
border-radius: 10px;
box-shadow: 0 0 10px #777;
}

div.headings{
 position: relative;
 z-index: 1;
 background-color: #57b147;
 background-image: linear-gradient(#59bc49,#55a645);
 padding: 5px 10px;
 flex-shrink: 0;
border-radius: 10px 10px 0 0;
border-bottom: 1px solid #777;
}

h1{
 font-size: 2.1em;
 margin: 0;
 color: #0e3530;
}

h2{margin-top: 0;}

h2.top{
 font-style: italic;
 font-size: 1.5em;
 font-weight: normal;
 line-height: 90%;
 margin-bottom: .3em;
 color: #103d37;
}

h1,h2.top{text-align: center; font-family: 'Overlock', sans-serif;}

div#maintext{
 background-color: #fff;
 padding: 10px 20px 15px;
border-radius: 0 0 10px 10px;
}

p {line-height: 150%;}

span.asterisk {font-size: 130%; line-height: 100%;}

a {color: #1b735a;}

ol {padding-left: 1.7em;}
li {margin: 0.5em 0; line-height: 135%;}

h3{
 font-family: 'Overlock', sans-serif;
 font-size: 1.3em;
 margin: 0;
}

h3 + p {margin-top: 0.2em;}

h3 + ol {margin-top: -0.2em; padding-top: 0;}

div#maintext *:last-of-type {margin-bottom: 0;}

span.nw{
white-space: nowrap;
}

hr {border-color: #fee;}

p#note {font-size: 105%;}

p.foot{
 width: 100%;
 margin: 0;
 text-align:center;
 color: #182614;
 font-size: .78em;
}
p.foot span.dbc {
font-size: 120%;
text-shadow: 0 0 .01em #eee;
}

/*----------RESPONSIVE DESIGN STARTS HERE----------*/
@media only screen and (max-width: 450px) {
 div#wrapper{max-width: 95%;}
 h1 {font-size: 9vw;}
 h2.top {font-size: 7vw;}
}