body{
	margin:1vh;
	background-color: WHITE;
	cursor: url("images/cursor.png"), pointer;
	font-family: "Moche"
}
main{
	background-color: WHITE;
	display: flex;
	height:98vh;
	overflow: hidden;
	font-family: "Moche"

}

/* Styles pour les écrans de taille moyenne */
@media only screen and (max-width: 768px) {
    body {
        font-size: 30%;
    }
}

/* Styles pour les écrans étroits, comme les téléphones */
@media only screen and (max-width: 480px) {
    body {
        font-size: 20%;
    }
}


@font-face {
  font-family: "Moche";
  src:url("Moche-Regular.otf") format("opentype");
}
@font-face {
	font-family: "Moche";
	font-style: Light;
	src: url('Moche-Light.otf');
}
@font-face {
	font-family: "Moche";
	font-weight: bold;
	src: url('Moche-Bold.otf');
}

li a:link {
	text-decoration: none;
	color: black;
}
li a:visited {
	text-decoration: none;
	color: black;
}
li a:hover{
	color: #4B76FC;
}
li a:active{
	color: #4B76FC;
}
sup{
	opacity:0;
	font-size: 0.5em;
	transition-duration: 1s;
	transition-delay: 0.5s;
}
li a:hover > sup{
	opacity:1;
	transition-duration: 0.2s;
	transition-delay: 0s;
}

.gif img{
	padding:20%;
	width:60%;
}


h2{
	font-family: moche;
	font-style: normal;
		font-weight: bold;
    font-size: 200%;
    text-align: left ;
    display:flex;
    color: #4B76FC;
    gap: 40px;
		margin: 20px;
}

h3{
	font-family: moche;
	font-style: normal;
		font-weight: bold;
	font-size: 70%;
	display: absolute;
	margin: 20px;
	color: #4B76FC;
}


p{
	font-family: moche;
	font-size: 75%;
	text-align: left;
	color: #4B76FC;
	margin: 20px;
}

p2 a:link {
	text-decoration: none;
	color: #4B76FC;
}
p2 a:visited {
	text-decoration: none;
	color: #4B76FC ;
}
p2 a:hover{
	color: pink;
}
p2 a:active{
	color: #pink;
}

h4{
	font-family: moche;
	opacity: 80%;
	font-size: 60%;
	display: flex;
	margin: 20px;
	text-align: left;
	color: #4B76FC;

}

.boitemenue{
 background-color:white ;
 display:inline-block;
 vertical-align:top;
 margin-left:19%;
 padding:1%;
 width:40%;
	 font-size: 145%;
 font-weight: 390;
	 font-family: moche;
	 padding-left:10%;
	 padding-right:10%;
	 position:center;
	 text-align: center;
}

.colgauche {
    font-family: moche;
		font-size: 145%;
		flex:1 1 30%;
		overflow-y: scroll;
}

.coldroite img{
	width:100%;
}
.coldroite{
	background-color: WHITE;
	position:relative;
	flex:1 1 70%;
	overflow-y: scroll;

}
.conteneur-image-projet{
	opacity:1;
	line-height:0;
    overflow:hidden;
	filter: grayscale(0%);
}
.conteneur-image{
	opacity:1;
	line-height:0;
    border-radius: 10px;
    overflow:hidden;
	transition-duration:1s;
	transition-delay:0,5s;
	filter: grayscale(100%);
}
.conteneur-image:hover{
	opacity:1;
	transition-duration:0s;
	transition-delay:0s;
	filter: grayscale(0%);
}

.collages{
        width:80%;
        border-radius:0px;
				position:right;
				text-align: center;
        margin-left:auto;
				display: flex;

}

.gif1{
	width:50%;
	background-color:red;
	  margin-left:26%;
	}

	.logo{
		width:50%;
		background-color:red;
    margin-left:26%;
		}

.infos {
	font-family: moche;
	Font-style: black;
	color:#4B76FC;
	font-size: 20pt;
	text-align:center;
	margin-top:20px;
	background-color: white ;
	border-radius: 10px;
}