@font-face { font-family:'Apercu'; src:url('fonts/Apercu-Regular.otf') format('opentype'); font-weight:normal; font-style:normal;}
@font-face { font-family:'Apercu'; src:url('fonts/Apercu-Italic.otf') format('opentype'); font-weight:normal; font-style:italic;}
@font-face { font-family:'Apercu'; src:url('fonts/Apercu-Bold.otf') format('opentype'); font-weight:bold; font-style:normal;}
@font-face { font-family:'Apercu'; src:url('fonts/Apercu-Bold-Italic.otf') format('opentype'); font-weight:bold; font-style:italic;}
body { font-family:'Apercu', Arial, san-serif; background-color:#FFFFFF; margin:0; color:#333333; text-align:center;}
p { font-size:120%;}
header { width:100%; }
.logo { padding:0; margin:0; flex:0 0 200px;}
.logo img { width:180px; margin:40px 0;}

main { }

header, section, footer { border-bottom:5px solid #FFFFFF;}

section.blue { text-align:center; padding:40px 20px; background:#035daf; color:#FFFFFF;}
section.blue h1 { font-size:230%; margin-top:10px;}
section.blue img { width:200px; margin:0;}

section.gray { background:#F9F9F9 url('../images/people.png') repeat-x bottom; padding:40px 20px 160px 20px;  border-bottom:5px solid #F9F9F9;}
section.gray h2 { font-size:210%; margin:0;}
section.gray span { color:#035daf;}

section.red { max-width:1170px; margin:0 auto; padding:40px 20px;}
section.red h3 { font-size:190%; margin-top:10px; color:#de2929;}
section.red img { width:160px; margin:10px;}

footer { background:#F9F9F9; padding:40px 20px;}
footer p { font-size:90%;}

@media (prefers-color-scheme: dark) {
  body, section.blue, footer { background:#1F1F1F; color:#F1F1F1;}
  header, section, footer { border-bottom:5px solid #313335;}
  h1, h2, h3, p { color:#E0E0E0;}
  section.gray { background:#1F1F1F url('../images/people.png') repeat-x bottom; color: #F1F1F1; border-bottom:5px solid #313335;}
}