@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap");

html, body {
  /* background: #000;  /* fallback for old browsers */
  background: #061c30;  /* fallback for old browsers */
  font-family: 'Lato', sans-serif;
  color: white;
}

p {
	margin: auto;
}
#container {
  font-size: 15em;
  font-weight: 100;
  position: relative;
  left: 50%;
  transform: translate(-50%, 50%);
  text-align: center;
  height: 100%;
  top: 50%;
}

.pump {
  animation: color-pump 3s;
}

.dump {
  animation: color-dump 3s;
}

@keyframes color-pump {
  0% { color: #19ff9f; }
  100% { color: #fff; }
}

@keyframes color-dump {
  0% { color: #ff00ad; }
  100% { color: #fff; }
}

#diffUp, #diffDown {
	font-size: .3em;
}

#diffUp {
	color: #19ff9f;
}

#diffDown {
	color: #ff00ad;
}

[v-cloak] {
  display: none;
}

#currency-label {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  font-size: 1.5em;
  color: #fff;
}

@media (orientation: landscape) {
  #currency-label {
    display: block;
  }
}

#reconnecting {
  font-size: .1em;
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffc107;
}

#settings-icon {
  position: fixed;
  top: 10px;
  right: 10px;
  font-size: 1.5em;
  cursor: pointer;
  color: #fff;
  z-index: 1000;
}

#currency-selector {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #061c30;
  border: 1px solid #333;
  padding: 5px 0;
  min-width: 80px;
  text-align: center;
}

.currency-option {
  padding: 5px 10px;
  cursor: pointer;
}

.currency-option:hover {
  background-color: #333;
}