@font-face { font-family:spoon; src: url('Spoon-Regular.otf') format('opentype'); }
body { font-family:spoon,Calibri,Verdana,sans-serif; }

:root {
  --bjorn-geel:#ffed00;
  --bjorn-blauw:#009fe3;
  --bjorn-groen:#01a74f;
  --bjorn-inactive:#009fe34f;
}

a { text-decoration:none; }
a:hover { text-decoration:underline; }
a.smalllink { font-size:.7em; }

section, header { width:80vw; margin:auto; color:var(--bjorn-blauw); }
header { display:flex; align-items:center; }
header img { width:10vw; padding:0 5vw; }
footer p { text-align:center; }
footer img { width:80vw; }

h1 { text-align:center; font-weight:bold; font-weight:bold; font-size:1.8rem; }

#selector h1.timeline { display:inline; padding:0 4vw; }
#selector h1.inactive { color:var(--bjorn-inactive); cursor:pointer; }
#selector h1.inactive:hover { color:var(--bjorn-groen); }
#selector h1.active { cursor:default; color:var(--bjorn-blauw); }

#introduction { display:flex; flex-direction:column; align-items:center; }
#introduction div:first-of-type { width:60%; }
#introduction img { width: 80vw; height:40vh; border-radius:15px; }

#acclaims { height:40vh; }
#acclaims-content { width:100%; overflow-y:scroll; }


#selector { width:80vw; display:flex; overflow-y:scroll; }

#timeline { margin-top:5vh; overflow-y:hidden; }
#timeline ul { margin: 30px 0 0 0; padding: 0; list-style: none; position: relative; }
#timeline ul::before { content: ''; position: absolute; top: 0; bottom: 0; width: 10px; background:var(--bjorn-groen); left: 20%; margin-left: -10px; }
#timeline li { box-sizing:border-box; display:flex; flex-direction:row; align-items:center; }
#timeline div.time { display: block; padding-top: 100px; position: absolute; font-size: 1.5rem; transform:rotate(90deg); }
#timeline div.content {
    width:100%;
 margin: 0 0 15px 25%;
 background: var(--bjorn-blauw);
 color:var(--bjorn-geel);
 padding: .8em;
 font-size: 1.2em;
 font-weight: 300;
 position: relative;
 border-radius: 5px;
}

#lessons { display:none; }

#gmaps-canvas { width:100%; }



@media (min-width:500px) and (orientation:landscape) {

  #introduction img { width: 50vw; }
  #timeline div.time { display: block; padding-right:100px; position:absolute; font-size:1.5rem; transform:none; }
    
  #acclaims { height:30vh; overflow-x:scroll; }
}