*         { box-sizing: border-box; }

body      { background-color: #8db5d8;                 /* light blue */
            margin-left: 10%;
            margin-right: 10%; }

h1,h2     { color: #222b82;                            /* dark blue */
            font: 1.8em "Trebuchet MS", sans-serif;
            margin-top: 50px; }
h1        { text-align: center; }

p         { font: 1.2em "Trebuchet MS", sans-serif;
            color: #000000;
            clear: none; }

.btn      { display: inline-block;
            padding: 10px;
            border: 3px solid #5089be;                 /* medium blue */
            border-radius: 12px;                       /* rounded corners */
            background-color: white;
            text-decoration: none;
            min-width: 60px; 
            text-align: center; }
.btn:hover { background-color: #5089be;
             border: 3px solid #222b82; }              /* medium blue */

img       { max-width: 100%; 
            height: auto;
            border: none; }

.main     { width: auto; 
            padding: 0em;
            margin: 0 auto; }

.note     { border-left: 5px solid #222b82;            /* dark blue */
            background-color: white;                 /* pale blue */
            padding: 15px; }

.mid      { text-align: center; }
.sec      { margin-top: 50px; }
.foot     { font-size: 1.0em; }

hr        { border: thin ridge #222b82;               /* dark blue */
            width: 75%;
            margin-top: 50px;
            margin-bottom: 50px; }

a:link    { color: #222b82; }                         /* dark blue */
a:visited { color: #5089be; }                         /* medium blue */
a:hover   { color: white; }
a:active  { color: white; }