/* general layout */
html {
   margin: 0;
   padding: 0;
   background-color: #ffea00;
   height:100%;
   width:100%;
}

/* source: https://fonts.google.com/specimen/Roboto+Condensed?selection.family=Roboto+Condensed:700 */
@font-face {
   font-family: RobotoCondensedBold;
   src: url(RobotoCondensed-Bold.ttf);
}

div.container {
}

div.column {
  float:left;
  margin-right:20px;
}

/* buttons layout */
#buttons {
  display : flex;
  align-items : center;
  margin-top:10px;
  margin-bottom:10px;
}

#buttons button {
  font-size:14px;
  padding:6px;
  padding-left:20px;
  padding-right:20px;
  border: 0.1px solid;
  background: #fff;
  outline: none;
}
#buttons button:enabled:hover  {
  background:#626;
  color:#fff;
}

#downloadButtons {
  border: 1px solid #000;
  display: inherit;
  align-items: inherit;
  padding:5px;
  margin-left:5px;
}

#downloadText {
  margin-right:5px;
}

#buttons * {
  float:left;
}

/* other unique elements layout */
#instructions {
   font-family: sans-serif;
   line-height: 2;
}

#inputText {
  font-family: RobotoCondensedBold;
  width:100%;
  height:300px;
  font-size:20px;
  resize:none;
}

#slogan {
  border:1px solid #000;
  max-width: 100vh;
  max-height: 97vh;
  background-color: #fff;
}