@font-face {
    font-display: swap;
    font-family: CircularSp-Hebr;
    font-weight: 400;
    src: url(https://encore.scdn.co/fonts/CircularSp-Hebr-Book-414f88babad55bb44c9552d9b92504f7.woff2) format("woff2"),url(https://encore.scdn.co/fonts/CircularSp-Hebr-Book-d8209975eafc81a9499df8401a339ddd.woff) format("woff");
    unicode-range: u+0000,u+000d,u+0020,u+0030-0039,u+00a0,u+00a4,u+00b6-00b7,u+01c4-01c6,u+01f1-01f3,u+02bb-02bc,u+05b0-05c4,u+05d0-05ea,u+05f0-05f4,u+200e-200f,u+20aa,u+fb2a-fb36,u+fb38-fb3c,u+fb3e,u+fb40-fb41,u+fb43-fb44,u+fb46-fb4f,u+ffff
}

:root {
  --button-height: 20px;
  --playlist-row-height: 8vh; 
  --playlist-row-width: 20vw;
  --element-spacing: 10vw;
  --main-area-width: 60vw;
  --playlist-border-radius: 10px;
}

*, *:before, *:after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

h1 {
  margin-top: -5vh;
  word-wrap: break-word;
}

body {
    padding: 0;
    font-family: 'CircularSp', sans-serif;
    font-size: 16px;
    display: flex;
    justify-content: center;
    background-color: rgb(0, 0, 0);
}

div {
    color: white;
    max-width: 65vw;
}

path {
    stroke: pink;
}

.wrapper {
    height: 100%;
    padding: 10% 0 0 0;
}

.controls {
    width: var(--main-area-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

#frequency-select {
    height: auto;
    margin: 10px 0;
}

.controls label {
  margin-left: 10px;
}

.controls label span {
  display: block;
  text-align: center;
}

.disabled{
  opacity: 0.1;
  pointer-events: none;
}

#no-worklet {
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
}

.music-player {
  margin-left: var(--element-spacing);
}

.playlist-container {
  position: absolute;
  top: 0;
  left: 0;

  margin-top: 0.5%;
  margin-left: 0.5%;
  margin-right: var(--element-spacing);
  height: 80vh;
  width: calc( var(--playlist-row-width) + 2vw);
  overflow: hidden; /* Add this line */
  border: 1px solid white; /* Add your desired color here */
  background-color: #ff84d0;
  border-radius: var(--playlist-border-radius);
}

.playlist {
  overflow-y: auto;
  max-height: 100%;
  padding-bottom: calc(var(--playlist-row-height) / 2); /* Add this line */

  margin-left: 1vw;
  margin-right: 1vw;
}
.playlist-text {
  margin-top: 1.5%;
  margin-bottom: 1.5%;
  margin-left: 1vw;
  margin-right: 1vw;

}

.playlist-row {
  display: block;
  margin: 1vh 0;
  background-color: #FF0099;
  border-radius: var(--playlist-border-radius);
  padding: 1vh;

  position: relative; /* This is needed for absolute positioning of child elements */
  transition: height 0.3s ease; 
  height: var(--playlist-row-height);
  cursor: pointer;
  overflow-wrap: break-word; 
  overflow: hidden; 
  width: var(--playlist-row-width);
  max-width: 500px;
  margin-bottom: 2px;
}

.delete-button, .repeat-button {
  position: absolute;
  bottom: 0;
  height: var(--button-height);
  display: none;
  border: none;
  background-color: #67003e;
  color: white;
  
}
.delete-button {
  left: 0;
}
.repeat-button {
  right: 0;
}

.playlist-row:hover {
  font-weight: bold;
  height: calc(var(--button-height) + var(--playlist-row-height)); /* This is the height of the row when hovered */
  white-space: normal;
}

.playlist-row:hover .delete-button,
.playlist-row:hover .repeat-button {
    display: inline-block;
}

/* webkit */

input[type=range]{
    -webkit-appearance: none;
    width: 25vw;
    display: block;
}

input[type=range]::-webkit-slider-runnable-track {
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: pink;
    margin-top: -4px;
}

input[type=range]:focus {
    outline: none;
}

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

/* firefox */


input[type=range]::-moz-range-track {
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}

input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: pink;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]:focus::-moz-range-track {
    background: #ccc;
}

.delete-button, .repeat-button {
    display: none;
}

/* Amplitide Spectrum */

body .sound-wave {
  height: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8vh;
  width: var(--main-area-width);
}

body .bar {
  animation-name: wave-lg;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  
   transition: height 0.1s ease-in-out;
  animation-direction: alternate;
  background: pink;
  margin: 0 1.5px;
  height: 5vh;
  width: 2%;
}