@font-face {
  font-family: "Proxima Soft";
  font-style: normal;
  src: url('fonts/ProximaSoft-Regular.eot');
  src: url('fonts/ProximaSoft-Regular.eot?#iefix') format('embedded-opentype'),
    url('fonts/ProximaSoft-Regular.woff2') format('woff2'),
    url('fonts/ProximaSoft-Regular.woff') format('woff'),
    url('fonts/ProximaSoft-Regular.ttf') format('truetype');
}

@font-face {
  font-family: "Proxima Soft";
  font-weight: bold;
  src: url('fonts/ProximaSoft-Bold.eot');
  src: url('fonts/ProximaSoft-Bold.eot?#iefix') format('embedded-opentype'),
    url('fonts/ProximaSoft-Bold.woff2') format('woff2'),
    url('fonts/ProximaSoft-Bold.woff') format('woff'),
    url('fonts/ProximaSoft-Bold.ttf') format('truetype');
}

* {
  font-family: "Proxima Soft",sans-serif;
}

header {
  padding: 16px;
}

header img {
  border-radius: 16px;
}

.title img {
  margin-right: 16px;
  border-radius: 0;
}

.title h1 {
  display: inline;
}

.border {
  border: 2px solid #d3d3d3;
  border-radius: 16px;
  padding: 16px;
  margin: 32px 16px;
}

button {
  color: #000000;
  background: #ff9800;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-family: "Proxima Soft",sans-serif;
  font-weight: bold;
  opacity: 1;
}

button:disabled {
  opacity: 0.7;
}

button:hover:not([disabled]) {
  cursor: pointer;
}

input, textarea {
  font-family: monospace;
  border: 2px solid #d3d3d3;
  border-radius: 4px;
  padding: 8px;
  /*width: 600px;*/
}

.pre-formatted {
  font-family: monospace;
  white-space: pre;
  /*font-weight: bold;*/
  border: 2px solid #ff9800;
  border-radius: 4px;
  padding: 8px;
  /*width: 600px;*/
}