html {
  width: 100%;
  height: 100%;
  background-color: #001E4F;
}

body {
  font-family: 'Inter', sans-serif;
  background-image: linear-gradient(to bottom, #001E4F, #111827);
  /* Gradient background */
  background-color: #001E4F;
  /* background: linear-gradient(to bottom, #ff7e5f, #feb47b); Gradient background */
  overflow-x: hidden;
  /* Prevents horizontal scroll */
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.scroll-hide {
  scrollbar-width: none !important;
  overflow: -moz-scrollbars-none !important;
  -ms-overflow-style: none !important;

  &::-webkit-scrollbar {
    width: 0px !important;
  }
}

/* Increase button size when hovering */
.theoplayer-skin .vjs-big-play-button:hover {
  background: none;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
  transform: translate(-50%, -50%) scale(1.1);
  transition: transform 0.2s;
}

/* Set other image */
.theoplayer-skin .vjs-big-play-button:before {
  content: "";
  background: url("./img/play-video-1.svg") no-repeat 0 0;
  background-size: 50%;
  background-position: center;
  display: block;
}

/* Remove default THEOplayer image */
.theo-big-play-button-svg-container svg {
  display: none;
}

/* Remove default spotlight around button on focus */
.theoplayer-skin:hover .vjs-big-play-button:after,
.theoplayer-skin .vjs-big-play-button:focus:after {
  opacity: 0;
}