:root {
    --color-blue: #053268;
    --color-light: #D6D5DA;
    --color-yellow: #F9BE48;
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('fonts/open-sans-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v17-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/open-sans-v17-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
       url('fonts/open-sans-v17-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v17-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v17-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v17-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v17-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/open-sans-v17-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('fonts/open-sans-v17-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v17-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v17-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v17-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v17-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}

html {
    font-size: 18px;
}
@media only screen and (min-width: 640px) {
    html {
        font-size: 20px;
    }
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-weight: 700;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    min-height: 100vh;
    font-family: 'Open Sans', Arial, Helvetica;
    color: var(--color-blue);
}

header {
    flex: none;
    background-color: var(--color-yellow);
    background: linear-gradient(to bottom, #FBD079 0%, var(--color-yellow) 34%);
}

.container {
    min-width: 360px;
}

header > .container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

header .logo {
    flex: none;
    padding: 1rem 0 1rem 0;
}

header .logo img {
    width: 5rem;
    height: auto;
    margin-bottom: -.8rem;
}

header .name {
    flex: 1;
    padding: 1rem 1rem 1.5rem 1.5rem;
}

header .name p {
    margin: 0;
}

header .name .h3 {
    line-height: 1.2em;
}

header a:link, header a:active, header a:hover, header a:visited {
    color: var(--color-blue);
    text-decoration: none;
}
header a:hover {
    text-decoration: underline;
}

main {
    flex: 1;
    background-color: #F1F1F2;
    padding-top: 3em;
    padding-bottom: 3em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url(114781018.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.card {
    border: 3px solid var(--color-blue);
    padding-top: .75em;
    padding-bottom: .75em;
    padding-left: .5em;
    padding-right: .5em;
    backdrop-filter: blur(10px);
    background-color: rgba(255,255,255,.7);
}

footer {
    flex: none;
    background-color: var(--color-blue);
    color: var(--color-light);
    line-height: 1.8em;
}

footer > .container {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    text-align: right;
}

footer a:link, footer a:active, footer a:hover, footer a:visited {
    color: var(--color-light);
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
}