/* Layout */

html { padding:2vw; }

body { 
  display:flex;
  flex-direction:column;
  justify-content:space-between; 
  margin:0;
  border: 2px solid;
  border-radius: 2vw;
  min-height:92vh;
}

nav, footer { flex-grow:0; }
main { display:flex; flex-wrap:wrap; justify-content:space-between; }
nav, header, article, section, footer { padding: 0 2vw; }

nav { padding-top:0.5em; padding-bottom:0.2em; display:flex; align-items:center; }
nav { border-bottom: 2px solid; }

nav img { width:4em; margin-right:0.5em; }
nav ul, footer ul { margin:0; padding-left:0; }
nav li, footer li { display:inline-block; margin-right:0.3em; }
nav li:after, footer li:after { content:'•'; margin-left:0.5em; }
nav li:last-child:after, footer li:last-child:after { display:none; }

footer { margin-top:2em; border-top: 2px solid; padding-top:1em; padding-bottom:0.5em; }

h1 { margin-bottom:0;}
header { margin-bottom:1em; }
h2 { margin:1em 0 0.5em 0;}

table { border-collapse:collapse; margin-bottom:1em; }
table, th, td { border-width: 1px 0; border-style:dashed;; }
th, td { padding:0.4em 0.5em 0.4em 0; }

.columns, p, li { max-width:36em; }

li:before { margin-right:0.2em; }
li { margin-bottom:0.5em;}

.columns { display:flex; justify-content:space-between; }

.diagram { text-align:center; }
.diagram img { max-width:100%; }

.boxed { display:flex;  flex-wrap: wrap; justify-content:space-around; }
.box { margin:0 1em; }

.info .text { display:none; position:absolute; max-width:36em; padding:0.5em; border: 2px solid; border-radius:0.5em; }
.info:hover .text { display:block; }

body.index main { justify-content:space-around; }
body.index main p { max-width:inherit; }
body.index main article { max-width:10em; }
body.index header { margin:3em 0; width:inherit; }
body.index header svg { height:15em; width:18em; }
body.index .sponsors p { max-width:100%; }
body.index .sponsors img { width:20vw; vertical-align: middle; margin:1vw; }

@media (max-width: 640px) and (orientation: portrait) {
  nav, header, article, section, footer { padding: auto 3vw; }
  header, h1, h2 { margin-bottom:0; }
  body.index .sponsors img { width:40vw;}
}

/* Text */

@font-face {
  font-family: "din";
  src: url(din1451alt.ttf);
}
@font-face {
  font-family: "Dosis";
  src: url(Dosis-ExtraLight.ttf);
	font-weight: 200;
}
@font-face {
  font-family: "Dosis";
  src: url(Dosis-Light.ttf);
	font-weight: 300;
}
body { font-family: "din", sans-serif; font-weight:500; }

h1, h2 { font-family: "Dosis" }
h1 { font-size:360%; font-weight:200; }
h2 { font-size:240%; font-weight:300; }

nav a, footer a { text-decoration:none; }
nav a:hover, footer a:hover { text-decoration:underline; }
nav li:first-child:before { display:none; }

p, li { line-height:1.5em; }
address { font-style:normal; margin-left: 2em; }
th {text-align: left; }
body.index header { text-align:center;}
body.index .sponsors { text-align:center; }
body.sponsorship th { text-align:center; }

.box { text-align:center; }
.diagram { font-family:"Dosis", sans-serif; }
.big { font-family: "Dosis"; font-size:240%; }

body.index article { font-family: "Dosis"; font-size:240%; font-weight:300; }

@media (max-width: 640px) and (orientation: portrait) {
  h1 { font-size:200%; font-weight:300; }
  h2 { font-size:150%; }
  p, li { line-height:inherit; }
  body.index article { font-size:200%; }
}


/* Colour */

body { color:#080; border-color:#080; }

a { color:inherit; }
a:hover, .diagram a:hover { color:#04c; }
.diagram a { color:inherit; }

.info .text { background-color:#080; color:white; }