/*
Based on this example from CodePen :
https://codepen.io/hermesgrau/pen/NWoqNae
*/
  
  
body, html {
  height:100%;
}

  /* ------------------ 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;
  }

  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';
  }

  ::-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;
  }

  a{
    color: var(--maincolor);
  }

  p{
    font-size: 20px;
    min-width: 25ch;
  }

/* ----------------- DESCRIPTIONS ------------------ */


#splashbox{
  position: fixed;
  margin: var(--spacing) calc(var(--spacing)*4) var(--spacing) calc(var(--spacing)*4);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: unset;
  width: unset;
  z-index: 999;
  overflow-y: scroll;
}

#splashback{
  position: fixed;
  z-index: 998;
  background-color: #ffffff;
  opacity: 70%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: pointer;
}

#exit{
  position: absolute;
  margin: var(--spacingsmall);
  top: 0;
  right: 0;
  cursor: pointer;
  font-size: 25px;
  color: var(--maincolor);
}

.description{
  margin-left: var(--spacing);
  margin-right: var(--spacing);
}

.imgs{
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
}

.description > *{
margin: 0 0 var(--spacing) 0 ;
}

.subdescription{
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--spacing);
}

hr{color:var(--maincolor)}

h2{
color: var(--maincolor);
font-size: 50px;
font-style: italic;
}

h3{
font-size: 20px;
}

/* ----------------- FRISE CHRONO ------------------ */

#firsttitle{
  margin-top: calc(var(--spacing)*2);
}

.box{
  background: rgba(255, 255, 255, 1);
  box-shadow: rgba(30, 0, 255, 0.2) 0px 5px 15px;
  border: 2px solid var(--maincolor);
  padding: var(--spacingsmall);
}

section {
	display: flex;
	align-items: flex-start;
	gap: var(--spacingsmall);
}

#frise{
  flex-direction: column;
  margin: var(--spacing);
  gap: 0;
  padding-bottom: calc(var(--spacing)*2);
  margin-top: calc(var(--spacing));
}

/* .section-title {
	position: sticky;
	top: var(--spacing);
} */

.section-content {
	display: flex;
	flex-direction: column;
  width: 100%;
  height: 15vh;
}

article:not(.description) {
	display: flex;
	gap: var(--spacingsmall);
	width: 100%;
  height: 100%;
}
	
aside {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.dot {
	--size: .5rem;
	width: var(--spacingsmall);
	height: var(--spacingsmall);
	margin: calc((1rem - var(--spacingsmall))/2);
	border-radius: 50%;
	background-color: var(--maincolor);
	flex-grow: 0;
}

.line {
	flex-grow: 1;
	margin: var(--spacingsmall) 0;
	width: 2px;
	background-color: var(--maincolor);
}

.date{
  display: grid;
  grid-template-columns: 1fr 24fr;
  width: 100%;
}

.boxes{
  width: 100%;
  border-top: 2px dashed rgba(30, 0, 255, 0.2);
  position: relative;
}

.marker{
  position: absolute;
  top: var(--spacingsmall);
  box-shadow: none;
  border: 2px solid black;
}

.active{
  box-shadow: rgba(30, 0, 255, 0.2) 0px 5px 15px;
  border: 2px solid var(--maincolor);
  cursor: pointer;
}

#neuftrois{
  height: 30vh;
}
#neufneuf{
  height: 22vh;
}
#zerotrois{
  height: 18vh;
}
#zerosept{
  height: 30vh;
}
#perso-websites{
  right: 0%;
}
#iuma{
  left: 60%;
}
#napster{
  left: 90%;
  /* top: calc(var(--spacing)*2); */
}
#mp3blog{
  left: 78%
}
#lastfm{
  left: 65%;
}
#emule{
  left: 90%;
}
#dogmazic{
  left: 80%;
}
#myspace{
  left: 55%;
  /* top: calc(var(--spacing)*2); */
}
#itunes{
  left: 10%;
}
#spotify{
  left: 5%;
}
#youtube{
  left: 35%;
}
#deezer{
  left: 18%;
}
#amazon{
  left: 1%;
}
#qobuz{
  left:28%
}
#soundcloud{
  left: 40%;
}
#bandcamp{
  left: 55%;
}
#tidal{
  left: 20%;
}
#applemusic{
  left: 10%;
}
#youtubemusic{
  left: 25%;
}
#funkwhale{
  left: 85%;
}
#mirlo{
  left: 85%;
}
#subvert{
  left: 70%;
}
#faircamp{
  left: 80%;
}
#alternatives{
  left: 5%;
}
#alternativeslibres{
  left: 75%;
}
#finalline{
  width: 0px;
  background-color:transparent;
  border-left: 3px dashed var(--maincolor) ;
}
/* -----------------MEDIA QUERIES ------------------ */

.mobile{
  display: none;
}

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

  h3{
    font-size: 15px;
  }

  .boxes{
  display: flex;
  flex-direction: row;
  gap: calc(var(--spacing));
  margin-right: var(--spacing);
  width: 95%;
  }

  .marker{
    position: initial;
    height: max-content;
    width: max-content;
    margin-top: var(--spacingsmall);
  }

  .date{
    display: flex;
    flex-direction: column;
    gap: var(--spacingsmall);
    width: auto;
  }

  section{
    display: block;
    align-items: normal;
  }

  #splashbox{
    margin-top: var(--spacingsmall);
    margin-bottom: calc(var(--spacing)*4);
    margin-left: var(--spacingsmall);
    margin-right: var(--spacingsmall);
  }

  .description{
    margin-top: var(--spacingsmall);
  }

  .subdescription{
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
  }
    
  audio, img, iframe, video { max-width: 100%;}

  .mobile{
    display: block ;
  }

  .laptop{display: none;}

}