header #left a:last-child p{
	text-decoration: underline;
}

.socials a{
	color: var(--random-color);
}
main{
padding-top: 8em;
}

main > div{
	margin-bottom: 2rem;
}

.description{
	grid-column: 1/span 12;
}

.photographie{
	grid-column: 16/span 10;
}
.photographie img{
	width: 100%;
}
.socials{
	grid-column: 1/span 25;
}

.socials a svg{
	max-height: 2rem;
	max-width: 2rem;
	fill: var(--random-color);
	margin-right: 0.5rem;
}

.collaborateurs{
	grid-column: 1/span 12;
}


.collaborateurs a:hover{
	text-decoration: underline;
}

.collaborateurs .liste-collaborateurs{
	column-count: 2;
}

.liste-collaborateurs p{
	margin:  0;
}

.collaborateurs .liste-collaborateurs a{
	display: block;
}

.recrutement{
	grid-column: 16 /span 10;
}

.recrutement div p a:hover{text-decoration: underline;}

#credits{
	grid-column: 1/span 4;
}


#design{
	grid-column: 6/span 4;
}

#developpement{
	grid-column: 10/span 4;
}

#credits a:hover,
#design a:hover,
#developpement a:hover{
 text-decoration: underline;
}

#developpement,
#credits,
#mail,
#adresse,
#design,
#developpement{
	color: var(--random-color);
}


@media (max-width: 1000px){

.description,
.photographie,
.socials,
.collaborateurs,
.recrutement{
	grid-column: 1/span 25;
}
@media (max-width: 700px){

.description,
.photographie,
.socials,
.collaborateurs,
.recrutement{
	grid-column: 2/span 23;
}
#credits,
#design,
#developpement{
	grid-column: 2/span 23;
}



}