@import url("https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,400;0,700;1,400;1,700&family=Itim&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Righteous&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0");
@import url("https://fonts.googleapis.com/css2?family=Marhey:wght@700&display=swap");
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
ul,
ol,
dl,
dd {
  margin: 0 0 1.5rem;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

html {
  line-height: 1.5;
  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  margin: 0;
}

/* A elements that don't have a class get default styles */
a {
  text-decoration-skip-ink: auto;
  color: #36bf7f;
}

a:hover,
a:focus {
  color: #d96666;
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}

svg {
  fill: currentColor;
}

svg:not(:root) {
  overflow: hidden;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ################# */
/* CSS  */

/*
Inspiration for colors and icons: 

1) https://dribbble.com/shots/15103813-Music-playe-Light-mood 
2) https://dribbble.com/shots/15097345-Music-playe-Dark-mood

by R Min Max
*/

:root {
  --font-family: "Chivo", Roboto, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif !important;

  --breakpoint-1: 45rem;
  --breakpoint-2: 60rem;

  /* Major second */
  --font-h1: 1.802rem;
  --font-h2: 1.602rem;
  --font-h3: 1.424rem;
  --font-h4: 1.266rem;
  --font-h5: 1.125rem;
  --font-small: 0.889rem;
  --font-xs: 0.75rem;
  --note-size: 1.3rem;
  --control-icon-size: 2.9rem;
  --control-icon-size-small: 2rem;

  --header-font-color: hsl(8, 69%, 28%);
  --header-font-color-hover: hsl(8, 69%, 58%);

  --bg-white-1: #fbf8f9;
  --bg-color-1: #fbf8f9;
  --font-color-1: #150228;
  --font-color-2: #aca1b0;
  --fill-color-1: #ee3f82;

  /* Used for buttons and fills */
  --primary-color-dark: hsl(17, 60%, 41%);
  --primary-color: hsl(17, 60%, 51%);
  --primary-color-light: hsl(17, 60%, 61%);
  --primary-color-lighter: hsl(17, 60%, 81%);

  --color: hsl(7, 100%, 57%);

  /* It is orange over white background */
  --bg-color-dark: hsl(26, 37%, 88%);
  --bg-color: hsl(0, 0%, 97%);
  --bg-color: white;
  --bg-color-light: hsl(10, 17%, 100%);

  /* text and buttons will have black filling */
  --accent-color: #121212;

  --text-color: #121212;
  --text-color-light: hsl(0, 0%, 33%);

  /*component variables*/
  /* body */
  --background-color: ghostwhite;
  --font-color: #150228;

  /* global  */
  --gradient-1: linear-gradient(306deg, #0f4053 0%, #9face6 100%);

  --gradient-2: linear-gradient(306deg, #4b6483 0%, #9face6 100%);

  /* track */
  --track-thumbnail-border-color: "";
  --track-artist-color: "";
  --track-name-color: "";
  --track-duration-color: "";
  --track-border-color: "";

  --track-hover-background-color: "";
  --track-hover-artist-color: "";
  --track-hover-name-color: "";
  --track-hover-duration-color: "";
  --track-hover-border-color: "";

  --track-gap: "";
  /* end of track */

  /* header section */
  --header-main-bg: #0f4053;
  /* --header-background-gradient: var(--gradient-2); */
  --header-background-color: ghostwhite;

  --header-font-style: Marhey, "Itim", sans-serif;
  --header-text-color: #534e7b;
  --header-text-color: ghostwhite;
  --header-text-hover-color: #393556;
  --header-border-radius: 1rem;
  --header-border-color: #534e7b;
  --header-border-width: 0.44rem;

  /* header section ends */

  /* preview section */
  /* Linear gradient by https://cssgradient.io/ */
  --preview-background: #0f4053;
  --preview-background-gradient: var(--gradient-1);
  --preview-track-size: var(--font-h4);
  --preview-track-color: #120e0d;
  --preview-artist-color: #dbd9de;
  --preview-artist-size: var(--font-h6);
  --preview-image-border-radius: 0.33rem;
  /* end of preview section */

  /* control section */
  --progress-background-color: #aca1b0;

  --progress-color: #fae24c;
  --progress-button-color: "";
  --progress-button-size: "";
  --progress-button-hover-color: "";
  --progress-remaining-time-color: "";
  --progress-remaining-time-size: "";
  --controls-background-color: var(--header-main-bg);
  --controls-color: #ffeee3;
  --controls-hover-color: #fae24c;
  --controls-hover-scale: 1.17;
  /* end of control section */

  /* track styling */

  --track-bg-color: ghostwhite;
  --track-border-bottom: 0.0625rem solid rgb(225, 223, 223);
  --track-hover-color: hsl(52, 86%, 84%);
  --track-playing-item-highlight: hsl(52, 99%, 73%);

  --track-bg-color-2: #fbf8f9;
  --track-bg-color-1: #ffc3d7;
  --track-hover-bg-color-2: #fbf8f9;
  --track-hover-bg-color-1: #ffc3d7;
  --track-hover-bg-color-2: #c7b5bb;
  --track-hover-bg-color-1: #715a61;
  --track-name-text-color: var(--font-color-1);
  --track-artist-text-color: var(--font-color-2);
}

.dark-mode {
  --bg-color-1: #000128;
  --font-color-1: #f1eafa;
  --fill-color-1: #ee3f82;
}

html {
  font-family: var(--font-family);
}

.small-text {
  font-size: var(--font-small);
}

h1 {
  font-size: var(--font-h1);
}

h2 {
  font-size: var(--font-h2);
}

h3 {
  font-size: var(--font-h3);
}

h4 {
  font-size: var(--font-h4);
}

h5 {
  font-size: var(--font-h5);
}

.player-container {
  /* max-width: 50%; */
  /* margin: 0 auto; */
}

div {
  /* border: 4px solid green; */
}

/* Copied from https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */
input[type="range"] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type="range"]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type="range"]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent;
  border-color: transparent;
  color: transparent;
}

/* Special styling for WebKit/Blink */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #000000;
  height: 18px;
  width: 18px;
  border-radius: 300px;
  background: #ffffff;
  cursor: pointer;
  margin-top: -5px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type="range"]:hover::-webkit-slider-thumb {
  background-color: var(--controls-hover-color);
}

/* All the same stuff for Firefox */
input[type="range"]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 18px;
  width: 18px;
  border-radius: 300px;
  background: #ffffff;
  cursor: pointer;
}
input[type="range"]:hover::-moz-range-thumb {
  background-color: var(--controls-hover-color);
}

/* All the same stuff for IE */
input[type="range"]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 18px;
  width: 18px;
  border-radius: 300px;
  background: #ffffff;
  cursor: pointer;
}
input[type="range"]:hover::-ms-thumb {
  background-color: var(--controls-hover-color);
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

input[type="range"]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type="range"]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type="range"]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type="range"]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type="range"]:focus::-ms-fill-upper {
  background: #367ebd;
}

/* End of input styling */

/* @media only screen and (min-width: var(--breakpoint-1)) { */
@media only screen and (min-width: 45rem) {
  :root {
    /* minor third */
    --font-h1: 2.488rem;
    --font-h2: 2.074rem;
    --font-h3: 1.728rem;
    --font-h4: 1.44rem;
    --font-h5: 1.2rem;
    --font-small: 0.833rem;
    --note-size: 2rem;
    --control-icon-size: 3.4rem;
    --control-icon-size-small: 2.5rem;
  }
}

@media only screen and (min-width: 60rem) {
  :root {
    /* major third */
    --font-h1: 3.052rem;
    --font-h2: 2.441rem;
    --font-h3: 1.953rem;
    --font-h4: 1.563rem;
    --font-h5: 1.25rem;
    --font-small: 0.8rem;
    --note-size: 3rem;
    --control-icon-size: 3.89rem;
    --control-icon-size-small: 2.9rem;
  }
}