body {
   color: black;
   background: black;
   padding: 1em;
   font-family: serif;
}

#page {
   black: white;
   background: white;
   margin: 0.5em;
   padding: 1em;
   border-radius: 0.5em;
   font-size: 1.1em;
}

#logo {
   width: 40%;
   min-width: 25em;
}

#tagline-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

#tagline {
   font-size: 1.3em;
   font-style: italic;
   padding: 0.5em;
}

h1, h2, h3, h4, h5, h6 {
   font-family: Helvetica, sans-serif;
   font-weight: bold
}

div.audience {
   padding: 0.5em;
   margin: 1em 0.5em;
   border-radius: 0.5em;
   background: #005B97;
   background: linear-gradient(90deg,rgba(0, 91, 151, 1) 0%, rgba(0, 91, 151, 0.10) 0.5em);
   padding-left: 1em;
}

div.audience-name {
   font-family: Helvetica, sans-serif;
   font-size: 1.2em;
   font-weight: bold;
   padding-bottom: 0.25em;
   padding-top: 0.25em;
   color: #004c7e;
}

div.audience-inner {
   display: flex;
   width: 100%;
}

div.audience div.left,
div.audience div.right {
   width: 50%;
   padding: 0.3em 0.5em;
}

div.quotes {
   padding: 0.5em;
   margin: 1em 0.5em;
   border-radius: 0.5em;
   background: #005B97;
   background: linear-gradient(90deg,rgba(0, 91, 151, 1) 0%, rgba(0, 91, 151, 0.10) 1.5em);
   padding-left: 1em;
}

div.quotes-name {
   font-family: Helvetica, sans-serif;
   font-size: 1.2em;
   font-weight: bold;
   padding-bottom: 0.25em;
   padding-top: 0.25em;
   color: #004c7e;
}

div.quotes-inner {
   display: flex;
}

div.quotes div.quote {
   width: 33%;
   padding: 0.3em 0.5em;
}


/* For small screens, flex the audience down in a column not in a row */
@media only screen and (max-width: 768px) {
   div.audience-inner {
      flex-direction: column;
   }

   div.audience div.left,
   div.audience div.right {
      width: auto;
   }

   div.audience div.left {
      padding: 0.3em 1em 1em 1em;
   }

   div.audience div.right {
      padding: 1em 1em 0.3em 1em;
      border-top: solid thin gray;
   }
}

/* For even smaller screens, change the logo */
@media only screen and (max-width: 600px) {
   #logo {
      width: 100%;
   }
}

/*
a:link       { color: #98BCB3; text-decoration: none }
a:visited    { color: #344c46; text-decoration: none }
*/
hr           { color: #FFFFFF }