body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #000000;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

@-moz-keyframes antispin { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes antispin { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes antispin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }


#svg-container {
  display: flex;
  height: calc(100% + -80px);
  justify-content: center;
  align-items: center;
  color: #ffffff;
}

#svg-container svg g {
  transform-origin: center;
}

/* #svg-container > svg {
  max-width: 90%;
  max-height: 90%;
} */

#settings {
  display: flex;
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

#settings button {
  border: none;
  outline: none;
  background: none;
}

#settings > * {
  display: flex;
  align-items: center;
  padding: 0 8px;
}

#settings svg{
  color: white;
  height: 35px;
}