html {
  font-family: system-ui, sans-serif;
  font-size: 1.4rem;
  color: white;
}

body {
  background-color: #372a79;
}

div.tools {
    font-size: 0.7rem;
}

div.range {
    display: inline-block;
    background-color: #4732b3;
    color: white;
    border: 1px solid #7a60ff;
    border-radius: 3px;
    padding: 8px;
    margin: 10px;
}

div.range input {
    background: none;
    border: none;
    color: white;
    width: 40px;
    text-align: center;
}

div.range input:first-child {
    text-align: right;
}
div.range input:last-child {
    text-align: left;
}

div.genome div, div.genome a {
  display: inline-block;
  border-radius: 7px;
  margin: 1px;
  padding: 4px;
  color: #372a79;
  background-color: #5646a4;
  text-transform: uppercase;
  width: 0.8rem;
  text-align: center;
}
  
div.genome div.A {
  background-color: #37ad7b;
}

div.genome div.C {
  background-color: #f1dd30;
}

div.genome div.T {
  background-color: #7ac0f7;
}

div.genome div.G {
  background-color: #de4a56;
}

div.genome div.A.muted {
  background-color: #3a755c;
}

div.genome div.C.muted {
  background-color: #8a8342;
}

div.genome div.T.muted {
  background-color: #7d9ab1;
}

div.genome div.G.muted {
  background-color: #884e53;
}

button.action, input.entry {
    background-color: #4732b3;
    color: white;
    border: 1px solid #7a60ff;
    border-radius: 3px;
    padding: 8px;
    margin: 10px;
}

a.more {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

a.more:hover {
    cursor: pointer;
    background-color: #6d5cbf;
}