@font-face {
  font-family: 'Moche-Regular';
  src: url('Moche-Regular.woff2') format('woff2'),
       url('Moche-Regular.woff') format('woff');
}

body {
  font-family: 'Moche-Regular', sans-serif;
  font-weight: normal; 
  box-sizing: border-box;
  margin: 0;
  padding:0;
}

.conteneur {
  display: flex;
  height: 100vh;
}

.contenugauche {
  background-color: #333 ;
  width: 20vw;
  display: flex;
  flex-direction: column;
  color:white;
}

.gif {
  height: 15vh;
  padding:13px;
  margin-top:5px;
  }

.gif img {
margin-top:5px;
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.infos {
  font-size: 15px;
  font-weight: bold; 
  margin-left: 2vw;
  margin-top: 10px;
}

a:link {
  color: white;
  text-decoration: none;
}

a:visited {
color: white;}

a:hover {
  color: pink;
}

.projets {
  padding: 10px;
  margin-left: 1vw;
  margin-right: 1vw;
  height:65%;
}

.liens {
border-top: solid 2px grey;
padding:10px;
line-height:2;
}

.CV {
  color:pink;
  padding: 10px;
  margin-left: 2vw;
  margin-right: 1vw;
 bottom:0;
}

.contenudroit {
  width:80vw;
  overflow: scroll;
  background: linear-gradient(255deg,#ff5858,#ffc8c8,#ff5858);
  background-size: 180% 180%;
  animation: gradient-animation 9s ease infinite;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}  
  
.accueil img {
    width: 100%;
    height: auto;
display:block;
}

.bandeaux {
  animation: fadeInUp 1.5s ease-in-out forwards;
  }

.bandeaux img {
    width: 100%;
    height: auto;
display:block;
-webkit-box-shadow: 0px 20px 20px 0px rgba(0,0,0,0.65); 
box-shadow: 0px 20px 20px 0px rgba(0,0,0,0.65);

}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}  

.projet {
  width: 80vw;
  margin-top: 5vh;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  gap: 1px;
  animation: fadeInUp 2s ease-in-out forwards;
}


.photo {
  flex: 1;
  }
  
.photo img {
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
  transition: filter 0.5s ease;
}

  @keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


.texte {
padding: 2vh;
margin:5vh;
}

.titres {
  font-weight: bold; 
  font-size: 24px;
  margin-top: 10px;
}

.remerciement {
  margin-top: 25vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-weight: bold; 
  font-size: 80px;
  text-align: center;
  background-image: linear-gradient(#ff5858 0.5px, transparent 0.5px), linear-gradient(to right, #ff5858 0.5px, transparent 0.5px);
  background-size: 38px 38px;
  background-color: #333333;
  color: white;
  height: 30vh;
}



.footer {
position:fixed;
padding:1rem;
display: none;
background-color: #333;
width:100vw;
align-items:center;
bottom:0;
box-sizing: border-box;
	height: 10vh;
}

  .fish {
  width:10vw;
  height:10vh;
  }
  
  



#maisonedition:hover img,
#cinematheque:hover img,
#modeaupois:hover img,
#photo:hover img,
#clara:hover img,
#dolmamomo:hover img {
  filter: grayscale(0%); 
  }


/* Styles pour les tablettes */
@media screen and (max-width: 815px) {

.contenugauche {
	display: none;
}

.contenudroit {
    width: 100vw; 
    margin:0;
  }

  .projet {
    width: 100%;
  }
  
#maisonedition img,
#cinematheque img,
#modeaupois img,
#photo img,
#clara img,
#dolmamomo img {
  filter: grayscale(0%); 
  }




.modeaupois {
margin-bottom:15vh;}

  .titres {
    font-size: 15px;
    margin-top: 10px; 
  }
  
   .texte {
    font-size: 12px;
    margin-left:  5px;
}

	.footer {
	display:flex;
	height:10vh;
}

.fish {
width: 24vw;
height:auto;
box-sizing: border-box;
padding:5px;
}

.footer img {
  width: 100%;
  height: auto;
  max-height:9vh;

  }

  .coordonnes {
  width:72vw;
    font-size: 12px;
    padding-left: 3px;
    align-items: left;
    color:white;
        }
        
.remerciement {
padding-bottom:10vh;
  margin-top: 5vh;
  height:20vh;
    font-size: 60px;

}
        
}

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

  .contenugauche {
    display: none; 
  }
 
  .contenudroit {
width:100%;
  }
  
    .titres {
    font-size: 12px;
  }

  .texte {
    font-size: 10px; 
    padding: 2vh; 
    margin-right: 5px; 
  }
  
  .remerciement {
padding-bottom:10vh;
  margin-top: 5vh;
  height:15vh;
    font-size: 50px;
}