Untitled

* { box-sizing:border-box; }

body { display:box; box-orient:horizontal; background:#333; }
aside { width:360px; margin:0 0 15px 15px; }
aside div {
  padding:10px;
  border-bottom:1px solid #888;
  border-top:1px solid #bbb;
  transition:background 0.3s ease;
  background:#aaa;
}
aside div:first-child { padding-top:20px; }
.sepia { border-radius:0 0 5px 5px;  }
aside div:hover { background:#bbb; }

label { display:block; font:13px "Helvetica", sans-serif; color:#222; }
strong { font-weight:bold; padding:0 3px; user-select:none; }
code { display:inline-block; font:12px "Courier new"; float:right; color:#444; }

input { appearance:none!important; background:#777;  width:100%; border-radius:3px; height:20px; }
input::-webkit-slider-thumb {
  appearance:none!important; width:32px; height:20px;  background:#111; border-radius:3px;
}

section { box-flex:1; padding:15px; background:#333; }

video { width:100%; height:auto; background:#ccc; }

.twitter {
  display:block;
  background:#3a3a3a;
  border-radius:5px;
  font:bold italic 15px "Helvetica" italic;
  text-align:center;
  margin:10px 0 0;
  padding:15px 0;
  color:#5a5a5a;
  text-decoration:none;
  transition:0.3s ease;
}
.twitter:hover { background:#414141; color:#4099FF; }