html {min-width: 364px; font: normal 14px 'Open Sans',Arial,Helvetica,sans-serif; background-color: #E8EAEA; box-sizing: border-box;}
body {margin: 0 auto; display: flex; gap: 1px; flex-direction: column; min-height: 100vh; overflow-wrap: break-word;}
body > * {background-color: white; margin-bottom: 1px;}
header {display: flex; flex-direction: row; align-items: center;}
header img {width: 130px;}
header a {display: flex;}
nav.breadcrumb {padding: 10px;}
nav.breadcrumb ul {list-style: none; padding: 0; margin: 0; font-size: 1.1em;}
nav.breadcrumb ul li {display: inline-block; padding: 0; margin: 0;}
nav.breadcrumb ul li+li:before {color: black; font-weight: bold; content: "/\00a0";}
nav.breadcrumb ul li a {display: inline-block; text-decoration: none; padding: 0.3em;}
main {flex-grow: 1; padding: 10px;}
footer {padding: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4em;}
@media (min-width: 768px) {
    header img {width: 200px;}
    body > * {margin-left: 10px; margin-right: 10px;}
    nav, main, footer {padding: 15px;}
}
@media (min-width: 1084px) {
    body > * {margin-left: 15px; margin-right: 15px;}
}
@media (min-width: 1084px) {
    body {max-width: 1400px;}
}

h1 {text-align: center; flex-grow: 1; margin: 0 10px; font-size: 15px;}
@media (min-width: 768px) {
    h1 {font-size: 24px;}
}
@media (min-width: 1084px) {
    h1 {font-size: 26px;}
}

a, a:visited {color: #1676d0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-decoration: underline; transition: color .3s;}
a:focus, a:hover {color: #125ea6;}
a.btn {display: inline-block; margin: 0 auto; padding: 10px 25px; text-decoration: none; color: white; background-color: #1676d0; transition: background-color .3s;}
a.btn:hover {background-color: #125ea6;}