body {
  font-family: 'Karla', sans-serif;
  font-weight: 400;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  background-color: #CDD4D2;
}

h1 {
    position: fixed;
    top: 8px;
    left: 16px;
    margin: 0;
    font-size: 22px;
    color: #BEC4C2;
    font-weight: 400;
}

::selection {
    background-color: #2ae0c8;
    color: #fff;
}

/*** Mozilla based browsers ***/
::-moz-selection {
    background-color: #2ae0c8;
    color: #fff;
}

/***For Other Browsers ***/
::-o-selection {
    background-color: #2ae0c8;
    color: #fff;
}

::-ms-selection {
    background-color: #2ae0c8;
    color: #fff;
}

/*** For Webkit ***/
::-webkit-selection {
    background-color: #2ae0c8;
    color: #fff;
}

/*canvas {
  width: 100vw !important;
  height: 100vh !important;
}*/

#responsive-warning {
  display: none;
  position: fixed;
  width: 300px;
  top: calc(50% - 20px);
  left: calc(50% - 150px);
  text-align: center;
  z-index: 100;
}

.twitter-wrapper {
  position: fixed;
  right: 20px;
  bottom: 26px;
}

.twitter-wrapper a {
  text-decoration: none;
  color: white;
}

.twitter-wrapper a:hover {
  color: #7c827f;
}

#share-wrapper {
  position: fixed;
  left: 20px;
  bottom: 20px;
}

#share-wrapper p {
  color: #7c827f;
  margin-bottom: 8px;
  font-style: italic;
}

#share-input {
  padding: 6px 8px;
  width: 240px;
  background-color: #BEC4C2;
  color: white;
  border: none;
}

#share-input:focus {
  outline: none;
}

input#share-input::selection, input#share-input::-moz-selection {
  color: yellow !important;
  /*#4adead*/
}

.mdl-slider__container {
  position: fixed;
  bottom: 26px;
  width: 300px;
  left: calc(50% - 150px);
  z-index: 100;
}

.mdl-slider__background-flex {
  /*background-color: #BEC4C2 !important;*/
}

.mdl-slider__background-lower {
  background-color: white !important;
}

input[type='range']::-webkit-slider-thumb {
	background-color: white !important;
	border: none !important;
}

.mdl-slider:active::-webkit-slider-thumb, .mdl-slider::-webkit-slider-thumb {
  background: white !important;
}

.mdl-slider:active::-moz-range-thumb, .mdl-slider::-moz-range-thumb {
  background: white !important;
}

.mdl-slider:active::-ms-thumb, .mdl-slider::-ms-thumb {
    background: white !important;
}

.mdl-slider__background-upper {
  background: #BEC4C2 !important;
}

.overlay {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  background-color: rgba(205, 212, 210, 0.3);
  top: 0;
  left: 0;
  pointer-events: none;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s linear;
}

.overlay--hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.5s, opacity 0.5s linear;
    pointer-events: none !important; /* overwrite playBtn rule */
}

.play-button-bg-circle {
  --inner-circle-r: 233px;
  width: var(--inner-circle-r);
  height: var(--inner-circle-r);
  background-color: #cdd4d2;
  border-radius: 50%;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.play-button {
  width: 80px;
  height: 80px;
  color: white;
  pointer-events: all;
}

.play-button:hover {
  color: #e6ecea;
}