@font-face { font-family: font; src: url("font.woff2") format("woff2"); }
* {
  box-sizing: border-box;
  text-align: center;
  border-radius: 4px;
}
html {
  font-family: font, Helvetica, sans-serif;
  font-variant-ligatures: none;
  height: calc(100% - .5rem);
}
body {
  color: #333;
  background: #eee;
  padding: .25rem;
  min-height: calc(100% - .5rem);
}
h1 { margin: 0 0 .5rem  0 }
textarea {
  width: 100%;
  resize: none;
  text-align: left;
  padding: .25rem;
  border: 1px solid #ccc;
}
textarea:focus { border-color: #27b }
/* compare button */
.compare {
  color: #fff;
  background: #27b;
  border: none;
  padding: .5rem 3rem;
  margin-bottom: 1rem;
  cursor: pointer;
}
.compare:hover {
  background: #16a;
}
@keyframes spin {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to { transform: translate(-50%,-50%) rotate(359deg); }
}
button.loading {
  color: transparent;
  pointer-events: none;
  position: relative;
}
button.loading:after {
  border-color: transparent transparent #fff #fff;
  border-width: 2px;
  border-style: solid;
  animation: spin 500ms infinite linear;
  border-radius: 100%;
  content: "";
  height: 1em; width: 1em;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
}
/* diff results */
.row { padding: .5rem 0 }
.box {
  background: #fff;
  border: 1px solid #ccc;
  padding: .5rem 1rem;
}
.box + .box { margin-top: 1rem }
.result p {
  margin: 0;
  line-height: 3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
}
.link { font-size: 1rem }
.diff { font-size: 1.5rem }
a {
  color: #333;
  text-decoration: none;
}
a:hover {
  color: #27b;
  text-decoration: underline;
}
img {
  box-shadow: 0 0 1rem rgba(0,0,0,.25);
  width: 100%;
}