@font-face {
  font-family: 'Fredoka One';
  font-style: normal;
  font-weight: 400;
  src: local('Fredoka One'), local('FredokaOne-Regular'),
    url(https://fonts.gstatic.com/s/fredokaone/v6/k3kUo8kEI-tA1RRcTZGmTlHGCaen8wf-.woff2)
      format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  --warmPink: #ff5077;
}

.clickable {
  cursor: pointer;
}

.left {
  float: left;
}

.right {
  float: right;
}

.splash,
.splash .play,
.spinner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.splash {
  background: black;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.3s ease;
}

.splash .title {
  user-select: none;
  color: white;
  padding: 5px 20px 0;
}

.splash .title {
  font-size: 24px;
  font-family: 'Fredoka One';
}

.splash .play {
  display: none;
  margin: auto;
  width: 100px;
  height: 100px;
}

.spinner {
  display: none;
  width: 100px;
  height: 100px;
  margin: auto;
  animation: spin 2s linear infinite;
}

.spinner svg {
  fill: white;
}

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

[data-buffering='on'] .spinner,
[data-played='false'] .splash .play {
  display: block;
}

.control {
  user-select: none;
  background: rgba(0, 0, 0, 0.8);
  will-change: opacity;
  opacity: 0;
  transition: opacity 0.3s ease;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

[data-hover='true'] .control,
[data-hover='true'] .splash,
[data-hover='false'][data-playing='false'] .splash,
[data-played='true'][data-hover='false'][data-playing='false'] .control {
  opacity: 1;
}

[data-hover='true'][data-idle='true'] .control,
[data-hover='true'][data-idle='true'] .splash {
  opacity: 0;
  cursor: none;
}

[data-played='false'] .control,
[data-buffering='on'] .control {
  display: none;
}

[data-played='false'] .splash .title,
[data-played='true'] [data-buffering='on'] .splash .title {
  display: none;
}

.control .progress {
  width: 0;
  background: white;
  height: 6px;
  position: relative;
  border-radius: 20px;
}

.control .button svg {
  fill: white;
}

.control .button {
  margin-left: 5px;
  cursor: pointer;
}
` .control .button,
.control .button svg {
  width: 32px;
  height: 32px;
}

[data-playing='true'] .control .paused,
[data-playing='false'] .control .playing,
[data-fullscreen='false'] .control .fullscreen .on,
[data-fullscreen='true'] .control .fullscreen .off {
  display: none;
}

[data-fullscreen='false'] .splash > .title {
  display: none;
}

.control .time {
  display: block;
}

.control .time .text {
  color: white;
  line-height: 24px;
  font-size: 16px;
  font-family: 'Fredoka One';
}

.control .timeline:hover .progress {
  cursor: pointer;
}

.control .timeline {
  margin: 0.6em 1em;
  background: rgba(204, 204, 204, 0.2);
  border-radius: 4px;
}

.control .timeline:hover {
  cursor: pointer;
}

.anv-scroll-button {
  padding: 0;
  margin: 0;
  right: -4px;
  top: -7px;
  cursor: pointer;
}

.anv-scroll-button-circle {
  border: 4px solid var(--warmPink);
  border-radius: 50%;
  width: 9px;
  height: 9px;
}

.anv-scroll-button-circle:hover {
  border-radius: 50%;
  width: 14px;
  height: 14px;
}

.anv-volume-slider-btn {
  width: 100px;
}

.anv-no-touch .anv-volume-icon-btn[data-level='mute'] {
  background-position: -160px -1px;
}

.anv-no-touch .anv-volume-icon-btn[data-level='mute']:hover {
  background-position: -160px -33px;
}

.anv-no-touch .anv-volume-icon-btn[data-level='low'] {
  background-position: -131px -1px;
}

.anv-no-touch .anv-volume-icon-btn[data-level='low']:hover {
  background-position: -131px -33px;
}

.anv-no-touch .anv-volume-icon-btn[data-level='mid'] {
  background-position: -100px -1px;
}

.anv-no-touch .anv-volume-icon-btn[data-level='mid']:hover {
  background-position: -100px -33px;
}

.anv-no-touch .anv-volume-icon-high-btn[data-level='high'] {
  background-position: -70px 0px;
}

.anv-no-touch .anv-volume-icon-high-btn[data-level='high']:hover {
  background-position: -70px -32px;
}

.anv-volume-active {
  background-color: white;
  width: calc(98% - 3px);
}

.anv-volume-slider-scrubber {
  background-color: var(--warmPink);
  left: calc(98% - 3px);
}

.anv-control-btn {
  margin-right: 0;
  user-select: none;
}

.anv-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.anv-controls-item-wrapper {
  display: flex;
  align-items: center;
}

.anv-volume-icon-btn {
  margin-left: 0;
}

.anv-volume-slider-flat-bar {
  width: 95px;
}

#anvato-player-ad-content,
#anvato-player-ad-tracker {
  pointer-events: none;
}

@media screen and (min-width: 768px) {
  .splash .title {
    font-size: 30px;
  }

  .control .progress {
    height: 8px;
  }

  .control .button,
  .control .button svg {
    width: 64px;
    height: 64px;
  }

  .control .time .text {
    line-height: 64px;
    font-size: 24px;
  }

  .anv-scroll-button-circle {
    width: 12px;
    height: 12px;
    border-width: 5px;
  }

  .anv-volume-icon-btn {
    margin-left: 10px;
  }
}

.anv-custom-controller-container {
  left: 0;
}