/**
 * Base Typography
 * Copyright 2022, Robert Wolff. All rights reserved.
 */
body { font: 1em/1.5 'Open Sans', sans-serif; color: #111; }
h1 { font-size: 2.0em; }
h2 { font-size: 1.2em; font-weight: 800; }
h3 { font-size: 1.2em; font-weight: 600;}
h4, h5, h6 { font-size: 1.0em; }

nav { font-size: 0.85em; }
.user-login { font-size: 0.8em; }

/* Body */
body { background-color: #fff; }

/* Menus */
.menu { list-style: none; }
.menu a { text-decoration: none; display: block; padding: 1em; }

/* Top */
.top { background-color: #ddd; }
.top-0 { background-color: #ddd; }
.top-1 { background-color: #ddd; }

/* Header */
header { background-color: #eee; }
header h1 { position: absolute; text-indent: -9999px; }
.header-img { max-width: 100%; }
.user-login { display: flex; padding: 0.5em; }
.user-login label { color: #333; font-weight: 600; }
.user-login input { height: 28px; }
.user-login-submit { align-self: flex-end; background-color: #333; color: #fff; 
                border-radius: 10px; padding: 0 15px; }
.user-welcome { padding: 0.5em; }

/* Nav */
nav { background-color: #251f47; color: #fff; border-bottom: 1px solid #fff;}
/** @todo set background image relative to a text */ 
nav .active a { background: url('../i/chevron.png') 5% center no-repeat; } 
nav a:link, nav a:visited { color: #fff; }

/* Banner */
.banner { background: url('../i/banner.jpg') 50% 67%; background-size: cover; height: 380px; }
.banner-overlay { background-color: rgba(64, 64, 64, 0.667); max-width: 450px; padding: 2em; }
.banner-overlay h2 { color: #fff; font-size: 2.4em; font-weight: 200; line-height: 1.2; }
.banner-overlay p { color: #fff; margin-top: 1em; }

/* Tasks */
.task-item { text-align: center; padding: 1em; }
.task-item img { margin: -40px auto 0 auto; border: 8px solid #fff; }
.task-item h3 { text-align: left; }
.task-item p { text-align: left; color: #333; font-size: 0.8em; }

.task-0 h3 { color: #942911; }
.task-1 h3 { color: #71b48d; }
.task-2 h3 { color: #404e7c; }
.task-3 h3 { color: #251f47; }

/* Audiences */
.audience-item { padding: 1em; }
.audience-item h2 { color : #fff; text-transform: uppercase; 
                    margin: 1em 0 0.5em 0; padding: 5px 0 5px 10px; }
.audience-item p { font-size: 0.8em; }
.for-audience-0 h2 { background-color: #71b48d; }
.for-audience-1 h2 { background-color: #251f47; }

/* Footer */
footer { background-color: #333; color: #fff; }
footer .menu { margin: 3em auto; padding: 14px 0; text-align: center; }
footer a:link, footer a:visited { color: #fff; text-decoration: none; }