* {
  box-sizing: border-box;
  font-family: 'Inconsolata';
}

html, body {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  border-bottom: 1px solid #ddd;
  background: #eee;
  font-size: 20px;
  padding: 12px;
}
header .version {
  float: right;
}

section#inputs {
  display: flex;
  flex: horizontal;
}
section#inputs > * {
  padding: 12px;
}

section#outputs {
  display: flex;
  flex: horizontal;
  flex-wrap: wrap;
}
section#outputs > * {
  width: 50%;
  overflow: hidden;
}
.embed section#outputs > * {
  width: 100%;
}

#equation {
  flex-grow: 1;
  text-align: center;
}
#equation-input {
  font-family: 'Inconsolata', monospace;
  font-size: 1em;
  border: 0;
  padding: 8px;
  width: 100%;
  resize: none;
}
#equation-render {
  padding: 8px;
  font-size: 1.5em;
}

#transfer-function {
  width: 640px;
  height: 480px;
}
#visualizer {
  width: 640px;
  height: 480px;
}

.view {
  display: none;
}

input {
  width: 60px;
}

#pole-zero {
  position: relative;
}
#pole-zero .buttons {
  position: absolute;
  bottom: 0;
}
select#plot-type {
  position: absolute;
  bottom: 0;
}

footer {
  margin-top: 3em;
  width: 100%;
  border-top: 1px solid #ddd;
  background: #eee;
  padding: 12px;
}

footer .about {
  float: right;
}

footer a {
  color: #333;
}