@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  background-color: black;
}

.background-pulse {
  animation: background-pulse 0.31s infinite;
  transition: background-color 0.2s ease-in-out;
}

@keyframes background-pulse {
  0% {
    background-color: rgb(3 7 18 / var(--tw-bg-opacity, 1));
  }
  50% {
    background-color: rgb(48, 15, 31)
  }
  100% {
    transform: rgb(3 7 18 / var(--tw-bg-opacity, 1));
  }
}

/* Infinite intense shaking */
.shake {
  animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  0% {
    transform: translate(2px, 2px) rotate(0deg);
  }
  10% {
    transform: translate(-2px, -4px) rotate(-1deg);
  }
  20% {
    transform: translate(-6px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(6px, 4px) rotate(0deg);
  }
  40% {
    transform: translate(2px, -2px) rotate(1deg);
  }
  50% {
    transform: translate(-2px, 4px) rotate(-1deg);
  }
  60% {
    transform: translate(-6px, 2px) rotate(0deg);
  }
  70% {
    transform: translate(6px, 2px) rotate(-1deg);
  }
  80% {
    transform: translate(-2px, -2px) rotate(1deg);
  }
  90% {
    transform: translate(2px, 4px) rotate(0deg);
  }
  100% {
    transform: translate(2px, -4px) rotate(-1deg);
  }
}

/* styling is done for the volume bar to match the rest of the miku theme. code was generated from: https://danielstern.ca/range.css/?ref=css-tricks#/ and background was replaced with linear-gradient */
input[type=range].volume_bar {
  width: 100%;
  margin: 5px 0;
  background-color: transparent;
  -webkit-appearance: none;
}
input[type=range].volume_bar:focus {
  outline: none;
}
input[type=range].volume_bar::-webkit-slider-runnable-track {
  background: linear-gradient(to bottom right, rgba(236, 72, 153, 1), rgba(59, 130, 246, 1));
  border: 0;
  border-radius: 25px;
  width: 100%;
  height: 5px;
  cursor: pointer;
}
input[type=range].volume_bar::-webkit-slider-thumb {
  margin-top: -5px;
  width: 20px;
  height: 15px;
  background: rgba(6, 182, 212, 0.93);
  border: 1px solid #0891b2;
  border-radius: 50px;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range].volume_bar:focus::-webkit-slider-runnable-track {
  background: linear-gradient(to bottom right, rgba(236, 72, 153, 1), rgba(59, 130, 246, 1));
}
input[type=range].volume_bar::-moz-range-track {
  background: linear-gradient(to bottom right, rgba(236, 72, 153, 1), rgba(59, 130, 246, 1));

  border: 0;
  border-radius: 25px;
  width: 100%;
  height: 5px;
  cursor: pointer;
}
input[type=range].volume_bar::-moz-range-thumb {
  width: 20px;
  height: 15px;
  background: rgba(6, 182, 212, 0.93);
  border: 1px solid #0891b2;
  border-radius: 50px;
  cursor: pointer;
}
input[type=range].volume_bar::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 6.8px 0;
  color: transparent;
  width: 100%;
  height: 5px;
  cursor: pointer;
}
input[type=range].volume_bar::-ms-fill-lower {
  background: linear-gradient(to bottom right, rgba(236, 72, 153, 1), rgba(59, 130, 246, 1));
  border: 0;
  border-radius: 50px;
}
input[type=range].volume_bar::-ms-fill-upper {
  background: linear-gradient(to bottom right, rgba(236, 72, 153, 1), rgba(59, 130, 246, 1));

  border: 0;
  border-radius: 50px;
}
input[type=range].volume_bar::-ms-thumb {
  width: 20px;
  height: 15px;
  background: rgba(6, 182, 212, 0.93);
  border: 1px solid #0891b2;
  border-radius: 50px;
  cursor: pointer;
  margin-top: 0px;
  /*Needed to keep the Edge thumb centred*/
}
input[type=range].volume_bar:focus::-ms-fill-lower {
  background: linear-gradient(to bottom right, rgba(236, 72, 153, 1), rgba(59, 130, 246, 1));

}
input[type=range].volume_bar:focus::-ms-fill-upper {
  background: linear-gradient(to bottom right, rgba(236, 72, 153, 1), rgba(59, 130, 246, 1));
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the vertical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
  /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
  input[type=range].volume_bar {
    margin: 0;
    /*Edge starts the margin from the thumb, not the track as other browsers do*/
  }
}
