@font-face {
  font-family: Arial;
  src: url(/src/fonts/arial.ttf);
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}

a{
    color:white;
}

/*PAGE D'ACCUEIL*/
#homepage{
    height: 100%;
    background-color: white;
}

#nom-homepage p{
  margin-top: 1.5vw;
  margin-left: 1.5vw;
  font-size: 4vw;
}

/*BOUTONS LANGUES*/
.language-switcher {
    position: fixed;
    bottom: 1.5vw;
    right: 1.5vw;
    z-index: 10;
    mix-blend-mode: difference;
  }
  
  .language-switcher button {
    margin: .5px; 
    padding: 10px 1px;
    background: none;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1vw;
  }
  
  .language-switcher button:hover {
    cursor: pointer;
    transform: scale(1.1);
    transition: transform 0.3s ease;
  }

/*CONTENANT DES TITRES*/
#title-container {
    position: fixed;
    top: 1.5vw;
    left: 1.5vw;
    z-index: 10;
    color: white;
    mix-blend-mode: difference;
}
/*TITRES*/
#title-container h1 {
    margin: 0;
    font-size: 4vw;
    font-weight:normal;
}
/*DESCRIPTION SOUS TITRE*/
#title-container p {
    margin: 5px 0;
    font-size: 2vw;
    font-weight: normal;
}

/*LISTE DES PROJETS*/
#project-list {
    position: fixed;
    top: 1.5vw;
    right: 1.5vw;
    z-index: 10;
    max-width: 600px;
    overflow-x: auto;
    color: white;
    mix-blend-mode: difference;
    font-size: .8vw;
}
/*TABLEAU DES PROJETS*/
#project-list table {
    width: 100%;
    border-collapse: collapse;
}
/*TEXTE DU TABLEAU*/
#project-list td {
    padding: .5vh;
    text-align: left;
}
/*EFFETS DE HOVER*/
#project-list tr:hover {
    cursor: pointer;
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

.content{
    position:relative;
}

/*REGLES D'IMAGES / VIDEOS*/
.myVideo, .image {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
} 

/*CONTENANT DES MEDIAS*/


/*TEXTES DESCRIPTIFS*/
.custom-text {
    position: absolute;
    width:75%;
    color: white;
    mix-blend-mode: difference;
    text-align: center;
    font-size: 1vw;
    z-index: 10;

    left: 50%;
    transform: translateX(-50%);
  }
  
  /*TEXTES INDIVIDUELS*/

  /*COURONNE VERTÉBRALE*/
  .intro{
    width:65vw;
    top: 70%;
    text-align: center;
  }
  .text1 {
    top: 95%;
  }
  /*NEURO JAVA*/
  .text2 {
    top: 31%;
  }
  /*NEURO JAVA LIEN*/
  .text13 {
    font-size: 4vw;
    top: 35%;
  }
  /*DIMANCHE 10:30*/
  .text3 {
    top: 29%;
  }
  /*SEEKING BOREDOM*/
  .text5 {
    top: 28.5%;
  }
  /*SIMILARITIES IN SOUND*/
  .text6 {
    top: 45%;
  }
  /*SIMILARITIES IN SOUNDS LIEN*/
  .text12 {
    font-size: 4vw;
    top: 73%;
  }
  /*10 ANS D'ESPORT*/
  .text7 {
    top: 50%;
  }
  /*MERCEDES 300SL*/
  .text8 {
    top: 31.5%;
  }
  /*FROM KENNEWICK WITH LOVE*/
  .text9 {
    top: 16.5%;
  }
  /*FROM KENNEWICK WITH LOVE PT.2*/
  .text10 {
    top: 38%;
  }
 /*AIR YEEZY 2*/
 .text11 {
    top: 80%;
  }

/*RESPONSIVE*/
@media screen and (max-width: 844px) {

  #nom-homepage p{
    margin-top: 2vw;
    margin-left: 2vw;
    font-size: 6vw;
  }
  /*LISTE DES PROJETS*/
  #project-list td {
    padding: .15vh;
    text-align: left;
  }

  /*CONTENANT DES TITRES*/
  #title-container {
    position: fixed;
    top: 2vw;
    left: 2vw;
    z-index: 10;
    color: white;
    mix-blend-mode: difference;
  }
  /*TITRES*/
  #title-container h1 {
    margin: 0;
    font-size: 6vw;
    font-weight:normal;
  }

/*DESCRIPTION SOUS TITRE*/
  #title-container p {
    margin: 2px 0;
    font-size: 3vw;
    font-weight: normal;
  }

  /*LISTE DES PROJETS*/
  #project-list {
    position: fixed;
    top: 1.5vw;
    right: 1.5vw;
    z-index: 10;
    max-width: 600px;
    overflow-x: auto;
    color: white;
    mix-blend-mode: difference;
    font-size: 1vw;
  }

  /*BOUTONS LANGUES*/
  .language-switcher {
    position: fixed;
    bottom: 2vw;
    right: 2vw;
    z-index: 10;
    mix-blend-mode: difference;
  }

  .language-switcher button {
    padding: .25px;
    background: none;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 4vw;
  }
}