body, html {
  height:100%;
}
#image-map {
  width: 100%;
  height: 100%;
  margin: 0 auto 10px auto;
  border: 1px solid #ccc;
  background: #252a2e;
}

/* ------------------ CSS RESET ---------------------- */

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

img,
picture,
video,
canvas,
svg {
  display: block;
  height: auto;
  max-width: 100%;
}

html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6 {
  margin: 0;
  padding: 0;
}

h1,h2,h3,h4,h5,h6 {
  font-size: 100%;
  font-weight: normal;
  word-wrap: break-word;
}

input,button,textarea,select {
  font: inherit;
  margin: 0;
}

iframe {
  border: 0;
}

html {
  width: 100%; height: 100%;
  scroll-behavior: smooth;
    box-sizing: border-box;
  --spacing:2rem;
  --spacingsmall:1rem;
  --maincolor: #2600ff;
  font-family: 'Terminal-Grotesque';
      overflow-x: hidden;
}

::-moz-selection {
  /* Code for Firefox */
  color: var(--maincolor);
  background: var(--maincolor);
}

::selection {
  color: #ffffff;
  background: var(--maincolor);
}


/* styles utiles pour le filtrage */
.hidden {
  display: none;
}

@font-face {
  font-family: 'Terminal-Grotesque' ;
  src: url(fonts/terminal-grotesque.ttf);
}

@font-face {
  font-family: 'Terminal-Grotesque' ;
  src: url(fonts/terminal-grotesque_open.otf);
  font-style: italic;
}

/* ------------------ LAYOUT ---------------------- */

p{
  max-width: 75ch;
  margin-bottom: 0.5rem;
}


hr{color:var(--maincolor)}

h2{
color: var(--maincolor);
font-size: 50px;
font-style: italic;
/* margin-bottom: var(--spacingsmall); */
}

h3{
font-size: 20px;
}

.main{
    width: 100vw;
    margin: var(--spacing);
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    align-items: center;
    padding-bottom: var(--spacing);
}

.track {
    width: 70vw;
    display: flex;
    flex-direction: row;
    gap: var(--spacing);
    padding: var(--spacing);
    background: rgba(255, 255, 255, 1);
    box-shadow: rgba(30, 0, 255, 0.2) 0px 5px 15px;
    border: 2px solid var(--maincolor);
}

.info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.cover{
    max-width:30%;
}

.play{
    display: flex;
    flex-direction: row;
    gap: var(--spacing);
    align-items: center;
}


progress.amplitude-song-played-progress{
    background-color: #ffffff;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px;
    display: block;
    cursor: pointer;
    border: none;
    box-shadow: rgba(30, 0, 255, 0.2) 0px 5px 15px;
}


progress[value]::-moz-progress-bar {
  background-color: var(--maincolor); }

progress[value]::-webkit-progress-value {
  background-color: var(--maincolor); }

div.control{
    cursor: pointer;
    width: 40px;
    height: 40px;
 }


div.amplitude-play-pause.amplitude-paused {
    background: var(--maincolor);
    background-position: center;
    mask-image: url(img/play.svg);
    mask-position: center;
    mask-repeat: no-repeat;
}

div.amplitude-play-pause.amplitude-playing {
    background: var(--maincolor);
    background-position: center;
    mask-image: url(img/pause.svg);
    mask-position: center;
    mask-repeat: no-repeat;
 }



 @media screen and (max-width:600px) {

    h2{
        font-size: 40px;
    }

    h3{
        font-size: 17px;
    }

    .main{
        width: auto;
    }

    .track{
        width: auto;
        display: block;
    }

    .cover{
        max-width: 100% ;
        margin-bottom: var(--spacingsmall);
    }

    .info{
        gap: var(--spacingsmall);
    }

}