html, body { margin: 0; padding: 0; }
   body { background: #fff; color: #111; font-family: sans-serif; line-height: 1.5; font-size: 18px; }
   img { border: none; vertical-align: middle; }
   section { padding: 2em 1em; }
   section > div { max-width: 36em; margin: 0 auto; }

   a { color: inherit; text-decoration: underline; }
   a:focus, a:hover { text-decoration: none; }
   .meta { opacity: .7; line-height: 1; }
    .meta small { font-size: 70%; }
   .conference h2 { margin-top: 0; }
   @media (min-width: 30em) {
   .conference > div { box-sizing: border-box; position: relative; padding-left: 230px; }
    .conference h2 { position: absolute; top: 0; left: 0; }
   }
   .video { 
		position: relative; margin: 1em 0; height: 0; padding-bottom: 56.25%; overflow: hidden; 
   	}
    .video > iframe { display: block; height: 100%; width: 100%; position: absolute; border: none; }
    
	
   #intro p:first-of-type { margin-top: -1em; }
   #performance-now { background: #e7e5fb; }
    #performance-now .intro { font-family: Changa, sans-serif; font-weight: 600; }
   #cssday { background: #e3e2db; }
    #cssday .intro { position: relative; margin: 1em 0; background: #fff; color: #222; font-family: 'Source Code Pro', Inconsolata, Menlo, monospace; padding: 1em; }
    #cssday .intro p:first-child { margin-top: 0; }
    #cssday .intro p:last-child { margin-bottom: 0; }
    #cssday .intro > span { position: absolute; right: 0; bottom: 0; left: 0; display: flex; height: 1em; gap: 2px; }
     #cssday .intro > span > span { flex: 1; }
   #dsgnday { background: #252213; color: silver; }
    #dsgnday .intro { font-family: Merriweather, Georgia, serif; }
   #mobilism { background: #e9e1d6; background-image: linear-gradient(#dbcdb8, #e9e1d6); color: #3e374a; }
   #phonegap-day { color: #878b94; }
    #phonegap-day .intro { font-family: 'HelveticaNeue-Light', Helvetica, Arial, sans-serif; }
   #speakers { background: #333; background-image: linear-gradient(#333, #111); color: silver; }
    #speakers > div { max-width: none; }
    #speakers h2, #speakers p { max-width: 24em; margin: 0 auto; text-align: center; font-size: 1em; font-weight: normal; }
    #speakers ul { margin: 2em -.5em 2em; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; }
     #speakers li { position: relative; border: 2px solid #fff; transform: rotate(var(--r, 5deg)) translateX(var(--x, 0)) translateY(var(--y, 0)); transition: 3s ease-out; }
     #speakers li:hover { transform: rotate(0) scale(1.8); z-index: 1; transition: .2s ease-out; }
   #info img { float: right; margin: 0 0 0 5px; transform: rotate(var(--r, 5deg)); border:  2px solid #000; transition: 3s ease-out; position: relative; }
   #info a:hover > img, #info a:focus > img { transform: rotate(0) scale(1.8); z-index: 1; transition: .2s ease-out; }