@font-face {
  font-family: "BBB-OpenSans-Regular";
  src: url("../fonts/BBB-OpenSans-Regular.woff") format("woff")
}

/* Réinitialisation des styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Mise en page */
body {
    display: flex;
    height: 100vh;
}

p{
  font-family: "BBB-OpenSans-Regular";
}

a {
 text-decoration: none;
 color: black;
}
/* img */
img{
  width : 100%;
  padding-bottom: 5px;
  margin-right: auto;
  margin-left: auto;
}

iframe{
  width : 100%;
  height : 70vh;
  padding-bottom: 5px;
  margin-right: auto;
  margin-left: auto;
}

.header a{
  font-size: 1.88vh;
  text-decoration: none;
  color: black;
}

.menu2 {
  display: none;
}

/* Menu fixe à gauche */
.menu {
    width: 50vh;
    background: #f4f4f4;
    color: black;
    padding: 20px;
    position: fixed;
    height: 100vh;
    border-right: 2px black solid;
    font-family:sans-serif;
  }

  .projet {
    color:  black;
    position: fixed;
    top: 200px;
  }

  .name {
    color: black;
    width: 45vh;
    position: fixed;
    display: flex;
    justify-content: space-between;
    top: 530px;
  }

.footer{
  position: fixed;
  bottom: 20px;
  right:20px;
  left : 20px;
}

.footer a{
  text-decoration: none;
  color: black;
}

.copyright{
  color: black;
  font-size: 12px;
  text-align: right;
  margin-top: 90px;
}

/* Contenu avec scroll */
.contenu {
    margin-left: 50vh; /* Compense la largeur du menu */
    padding: 20px;
    width: calc(100% - 250px);
    overflow-y: auto;
    overflow-x: none;
    height: 100vh;
    background: #f4f4f4;
    font-family:sans-serif;
}

.photo{
  margin-bottom: 20px;
}

.date{
  font-size: calc(20px+0,5vh);
  border-bottom: 1px black solid;
  padding-bottom: 5px;
  margin-right: auto;
}

/* .note{
  padding-top: 20px;
  padding-bottom: 10px;
  color: magenta;
  margin-left: clamp(0vh, 50vh, 50vh);
  transition: margin-top 0.5s ease-out;
} */

.note {
  padding-top: 20px;
  padding-bottom: 20px;
  color: black;
  text-align: justify;
  margin-left: clamp(0vw, 50vh, 50vh);
  transition: margin-left 1s ease-out;
}

@media (max-width: 1200px) {
  .note {
    margin-left: 0vw;
  }
}

.projet1 p:hover{text-shadow:0px 0px 20px black;}
.projet2 p:hover{text-shadow:0px 0px 20px black;}
.projet3 p:hover{text-shadow:0px 0px 20px black;}
.projet4 p:hover{text-shadow:0px 0px 20px black;}
.projet5 p:hover{text-shadow:0px 0px 20px black;}