:root
{
	--color-bg : #faf8f5;
	--color-bg-alt : #f1ede6;
	--color-text : #241f1c;
	--color-text-soft : #726c64;
	--color-accent : #a9812f;
	--color-accent-dark : #8a6a22;
	--color-border : rgba(36, 31, 28, 0.1);
	--font-display : 'Cormorant Garamond', Georgia, serif;
	--font-body : 'Jost', 'Helvetica Neue', Arial, sans-serif;
	--transition : 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	--shadow-sm : 0 2px 14px rgba(36, 31, 28, 0.08);
	--shadow-md : 0 10px 30px rgba(36, 31, 28, 0.12);
	--shadow-lg : 0 22px 50px rgba(36, 31, 28, 0.2);
	--radius-sm : 6px;
	--radius-md : 5px;
}

html
{
	scroll-behavior : smooth;
}

/* Transition douce native entre les pages (navigateurs recents, ignore sinon) */
@view-transition
{
	navigation : auto;
}

::view-transition-old(root),
::view-transition-new(root)
{
	animation-duration : 0.5s;
	animation-timing-function : var(--transition);
}

 body
{
		position : relative;
		font-family: var(--font-body);
		background : var(--color-bg);
		color : var(--color-text);
		margin  : 0;
		padding : 0;
		font-size : 1.15em;
		line-height : 1.6;
		-webkit-font-smoothing : antialiased;
}

/* Grain tres discret pour casser l'aplat des couleurs unies */
body::before
{
	content : '';
	position : fixed;
	inset : 0;
	z-index : 2;
	pointer-events : none;
	opacity : 0.035;
	mix-blend-mode : overlay;
	background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.reveal
{
	opacity : 0;
	transform : translateY(24px);
	transition : opacity 0.8s ease, transform 0.8s ease;
}

.reveal.is-visible
{
	opacity : 1;
	transform : translateY(0);
}

h1, h3
{
	font-family : var(--font-display);
}

img
{
	max-width : 100%;
}

@media all and (min-width: 1250px)
{
	#Maman
	{
		font-size : 1.6em;
		width : 24%;
	}

	.Pages
	{
		padding: 17px;
		font-size : 1.1em;
	}
	.Galerie
	{
		width : 70%;
		column-count : 4;
	}
	.container
	{
		height: 45vh;
	}
	
	.container .box
	{
		line-height : 45vh;
	}
	#APropos
	{
	font-size : 1.4em;
	}
	
	.Description2
	{
	font-size : 1em;
	}
	
	.Actualite
	{
	font-size : 1em;
	}
	
	.Actu
	{	
		font-size : 1.3em;
	}
	
	.ActEnTete
	{
		font-size : 1em;
	}
}



@media all and (min-width: 950px) and (max-width: 1100px)
{
	#Maman
	{
		font-size : 1.4em;
		width : 30%;
	}

	.Pages
	{
		padding:10px;
		font-size : 1em;
	}
	.Galerie
	{
		width : 75%;
		column-count : 3;
	}
	.container
	{
		height: 33vh;
	}
		
	.container .box
	{
		line-height : 33vh;
	}
	
	#APropos
	{
	font-size : 1.2em;
	}
	
	.Description2
	{
	font-size : 0.9em;
	}
	
	.Actualite
	{
	font-size : 0.9em;
	}
	.Actu
	{	
		font-size : 1.2em;
	}
	
	.ActEnTete
	{
		font-size : 0.9em;
	}
}

@media all and (min-device-width: 480px) and (max-width: 950px)
{
	#Maman
	{
		font-size : 1.2em;
		width : 30%;
	}

	.Pages
	{
		padding:8px;
		font-size : 0.8em;
	}
	.Galerie
	{
		width : 85%;
		column-count : 2;
	}
	.container
	{
		height: 25vh;
	}
		
	.container .box
	{
		line-height : 25vh;
	}
	#APropos
	{
	font-size : 1em;
	}
	.Description2
	{
	font-size : 0.8em;
	}
	
	.Actualite
	{
	font-size : 0.8em;
	}
	
	.Actu
	{	
		font-size : 1.1em;
	}
	
	.ActEnTete
	{
		font-size : 0.8em;
	}
}

@media all and (min-width: 1100px) and (max-width: 1250px)
{
	#Maman
	{
		font-size : 1.6em;
		width : 30%;
	}

	.Pages
	{
		padding: 17px;
		font-size : 1.1em;
	}
	.Galerie
	{
		width : 70%;
		column-count : 3;
	}
	.container
	{
		height: 45vh;
	}
	
	.container .box
	{
		line-height : 45vh;
	}
	#APropos
	{
	font-size : 1.4em;
	}
	
	.Description2
	{
	font-size : 1em;
	}
	
	.Actualite
	{
	font-size : 1em;
	}
	
	.Actu
	{	
		font-size : 1.3em;
	}
	
	.ActEnTete
	{
		font-size : 1em;
	}
}

@media all and (max-device-width: 480px)
{
    	#Maman
	{
		font-size : 1.4em;
		width : 30%;
	}

	.Pages
	{
		padding:10px;
		font-size : 1em;
	}
	.Galerie
	{
		width : 90%;
		column-count : 1;
	}
	.container
	{
		height: 15vh;
	}
		
	.container .box
	{
		line-height : 15vh;
	}
	
	#APropos
	{
	font-size : 1.2em;
	}
	
	.Description2
	{
	font-size : 0.9em;
	}
	
	.Actualite
	{
	font-size : 0.9em;
	}
	.Actu
	{	
		font-size : 1.2em;
	}
	
	.ActEnTete
	{
		font-size : 0.9em;
	}
}

#Maman
	{
		padding-left : 1%;
		margin-right : 0.1%;
		padding-right : 0;
	}

#Maman span
	{
		font-size : 0.6em;
		padding-left : 1%;
		text-align: center;
	}

.Pages
	{
		margin:0px;
		text-align : center;
		height : 43px;
		line-height : 43px;
		position : relative;
	}

.Pages::after
{
	content : '';
	position : absolute;
	left : 50%;
	bottom : 6px;
	width : 0;
	height : 1px;
	background : var(--color-accent);
	transition : width var(--transition), left var(--transition);
}

.Pages:hover::after
{
	width : 60%;
	left : 20%;
}

.ActEnTete
	{
		margin-top : 0;
		text-decoration: none;
		font-weight : 500;
		font-family : var(--font-body);
		color : var(--color-bg);
		background : var(--color-text);
		padding : 0 22px;
		margin-left : 2%;
		height : 40px;
		line-height : 40px;
		border-radius : 999px;
		transition : background var(--transition), transform var(--transition), box-shadow var(--transition);
	}

.ActEnTete:hover
	{
		background : var(--color-accent-dark);
		transform : translateY(-2px);
		box-shadow : var(--shadow-sm);
	}

.container
{
	margin-top : 0px;
	width : 100%;
	display : flex;
	box-sizing : border-box;	
}


.container .box
{
	width : 25%;
	text-align : center;
	vertical-align : top ;
	flex-grow : 1;
	position : relative;
	overflow : hidden;
	transition : flex-grow var(--transition);
	margin : 0;
	padding : 0;
}

.container .box::before
{
	content : '';
	position : absolute;
	inset : 0;
	background-image : var(--tile-bg);
	background-size : cover;
	background-position : center;
	filter : saturate(0.85) brightness(0.92);
	transition : filter var(--transition);
	animation : ambientZoom 24s ease-in-out infinite alternate;
}

@keyframes ambientZoom
{
	from { transform : scale(1); }
	to { transform : scale(1.09); }
}

#APropos
{
	margin-top : 100px;
	text-align: center;	
	margin-bottom : 2em;
}
	
h3
{
	margin-left : 5%;
	font-size : 1em;
}

a
{
	display : block;
	color : inherit;
}

h2
{
	margin : 0;
	padding : 0;
	position : relative;
	z-index : 1;
	line-height : 15vh;
	font-size : 0.8em;
	font-family : var(--font-body);
	transition : var(--transition);
	color: #000;
	text-decoration : none;
}

h2 span
{
	background : rgba(36, 31, 28, 0.25);
	width : 100%;
	transition : var(--transition);
	color: #fff;
	padding: 10px 25px;
	text-transform : uppercase;
	letter-spacing : 3px;
	font-weight : 500;
}

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


figcaption
{
 margin-top:2px;
 color:#252424;
}

#Sommaire
{
	display : flex;
	list-style-type: none;
	height : 70px;
	background-color : transparent;
	color : var(--color-text);
    justify-content : center;
	align-items : center;
	font-size : 0.9em;
	width : 100%;
	flex-wrap : wrap;
	padding-left : 0%;
}

header
{
	display : flex;
	height : 80px;
	color : var(--color-text);
    justify-content : space-between;
	align-items : center;
	position : fixed;
	top : 0;
	width : 100%;
	box-sizing : border-box;
	margin-top : 0;
	margin-bottom : 10px;
	background-color : var(--color-bg);
	border-bottom : 1px solid transparent;
	box-shadow : none;
	transition : box-shadow var(--transition), border-color var(--transition);
	z-index : 100;
}

header.is-scrolled
{
	border-bottom-color : var(--color-border);
	box-shadow : var(--shadow-sm);
}

.nav-panel
{
	display : flex;
	flex : 1;
	justify-content : flex-end;
	align-items : center;
	gap : 24px;
	min-width : 0;
}

.menu-toggle
{
	display : none;
	flex-direction : column;
	justify-content : center;
	align-items : stretch;
	gap : 5px;
	width : 32px;
	height : 32px;
	margin-right : 4%;
	padding : 0;
	border : none;
	background : none;
	cursor : pointer;
	flex-shrink : 0;
}

.menu-toggle span
{
	display : block;
	height : 2px;
	width : 100%;
	background : var(--color-text);
	border-radius : 2px;
	transition : var(--transition);
}

header.menu-open .menu-toggle span:nth-child(1)
{
	transform : translateY(7px) rotate(45deg);
}

header.menu-open .menu-toggle span:nth-child(2)
{
	opacity : 0;
}

header.menu-open .menu-toggle span:nth-child(3)
{
	transform : translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px)
{
	.menu-toggle
	{
		display : flex;
	}

	.nav-panel
	{
		display : none;
	}

	header.menu-open .nav-panel
	{
		display : flex;
		flex-direction : column;
		align-items : center;
		gap : 6px;
		position : fixed;
		top : 80px;
		left : 0;
		right : 0;
		max-height : calc(100vh - 80px);
		overflow-y : auto;
		background : var(--color-bg);
		box-shadow : var(--shadow-md);
		padding : 18px 0 28px;
	}

	header.menu-open #Sommaire
	{
		flex-direction : column;
		height : auto;
		gap : 2px;
		width : 100%;
	}

	header.menu-open .Pages
	{
		height : auto;
		line-height : normal;
		padding : 12px 0;
		width : 100%;
	}

	header.menu-open .ActEnTete
	{
		margin : 6px 0 0 0;
	}

	header.menu-open #links
	{
		margin : 14px 0 0 0;
	}
}



.Suivant
{
    align-self: center;
    margin-left: 0;
}
.Precedent_Paysage
{
	align-self: center;
	margin-left : 1%;
}

.Precedent_Portrait
{
	align-self: center;
	margin-left : 12%;
}

.Precedent_Carre
{
	align-self: center;
	margin-left : 4%;
}


.Change
{
	color: var(--color-text-soft);
	text-decoration : none;
	font-style: normal;
	font-family : var(--font-body);
	letter-spacing : 0.06em;
	text-transform : uppercase;
	font-size : 0.7em;
	white-space : nowrap;
	transition : color var(--transition), letter-spacing var(--transition);
}

.Change:hover
{
	color : var(--color-accent-dark);
	letter-spacing : 0.1em;
}

.Precedent_Carre .Change::before
{
	content : '\2190\00a0\00a0';
}

.Suivant .Change::after
{
	content : '\00a0\00a0\2192';
}

.Image2
{
	width : 95%;
	display : flex;
	justify-content : flex-start;
	text-align : center;
	margin: auto;
}

#MamanFP
{
	text-align: center;
	margin-top : 120px;
	margin-bottom : 0;
	padding : 0 5%;
	font-size : clamp(2.4em, 7vw, 5.5em);
	font-weight : 500;
	letter-spacing : -0.01em;
	line-height : 1.05;
}

#MamanFP span
{
	display : block;
	margin-top : 22px;
	font-family : var(--font-body);
	font-size : 0.22em;
	font-weight : 400;
	letter-spacing : 0.3em;
	text-transform : uppercase;
	color : var(--color-text-soft);
}



#SommaireIntro
{
	font-size : 1.2em;
}



#Vent {
	width: 100%;
	margin-top : 150px;
	margin-bottom : 0px;
	margin-left : 0px;
	padding-left : 0px;
	margin-right : 0px;
	padding-right : 0px;
	}

#Presentation
{
	font-size : 1.2em;
	margin-bottom : 100px;
}

.MerciAccueil
{
	margin-left : 38%;
	margin-right : 40%;
	margin-top : 2%;
	padding-bottom : 10px;
	padding-top : 0px;
	text-align: center;
	font-size : 1.7em;
}

.ref2
{
	text-decoration : none;
	color : var(--color-text);
	position : relative;
	display : inline-block;
	transition : color var(--transition);
}

.ref2::after
{
	content : '';
	position : absolute;
	left : 50%;
	right : 50%;
	bottom : -6px;
	height : 1px;
	background : var(--color-accent);
	transition : var(--transition);
}

.Decouvrez:hover .ref2,
.MerciAccueil:hover .ref2
{
	color : var(--color-accent-dark);
}

.Decouvrez:hover .ref2::after,
.MerciAccueil:hover .ref2::after
{
	left : 0;
	right : 0;
}

.Decouvrez
{
	margin : 50px auto 80px;
	text-align: center;
	font-size : 1.1em;
	font-family : var(--font-body);
	letter-spacing : 0.08em;
	text-transform : uppercase;
}



.Pages a
{
	color: var(--color-text);
	text-decoration : none;
	letter-spacing : 0.02em;
	transition : color var(--transition);
}

.Pages:hover a
{
	color : var(--color-accent-dark);
}



#TitreFormation
{
	font-size : 1.4em;
	font-weight : bold;
}
.box:hover
{
	flex-grow : 1.4;
}

.box:hover::before
{
	filter : saturate(1.05) brightness(1);
}

.container:hover .box:not(:hover)::before
{
	filter : saturate(0.5) brightness(0.6);
}

.box:hover h2
{
	line-height : 20vh;
}

.box:hover h2 span
{
	color: #262626;
	background : rgba(255, 255, 255, 0.88);
	letter-spacing : 5px;
	box-shadow : var(--shadow-md);
}



.container .box:nth-child(1)::before { animation-delay : 0s; }
.container .box:nth-child(2)::before { animation-delay : -6s; }
.container .box:nth-child(3)::before { animation-delay : -12s; }
.container .box:nth-child(4)::before { animation-delay : -18s; }

.ImageGauche
{
	margin-left : 10%;
	width : 100%;
}

.taille25
{
	width : 100%;
}

.taille25Femme
{
	width : 70%;
}

.taille12
{
	width : 120%;
}


.taille40
{
	width : 100%;
}

.taille46
{
	width : 76%;
}

.taille41
{
	width : 91%;
}

.taille6
{
	width: 150%;
}


.taille8
{
	width: 150%;
}
.taille7
{
	width: 150%;
}

.taille80
{
	width: 110%;
}

.taille50
{
	width: 110%;
}
.taille60
{
	width: 120%;
}

.taille70
{
	width: 86%;
}
 
 .taille25Grue
{
	width: 110%;
}

.FondPDG
{
	width :100%;
	margin : 0;
	padding : 0;
}
 
#Description
{
	margin-top : 50px;
	margin-left : 20%;
	margin-right : 20%;
	font-size : 1.2em;
}

#Caption1
{
}

#Caption2
{
	color : grey;
}

#Caption3
{
	font-weight : bold;
}



.Formulaire
{
	max-width : 560px;
	margin : 0 auto;
	padding : 150px 24px 80px;
	box-sizing : border-box;
}

.itemContact
{
	margin-top : 20px;
	display : flex;
	flex-direction : column;
	align-items : stretch;
	gap : 6px;
}

.itemContact label
{
	color : var(--color-text-soft);
	font-size : 0.85em;
	text-transform : uppercase;
	letter-spacing : 0.05em;
}

.Formulaire input[type=text],
.Formulaire input[type=email],
.Formulaire textarea
{
	font-family : var(--font-body);
	font-size : 0.95em;
	padding : 10px 14px;
	border : 1px solid var(--color-border);
	border-radius : var(--radius-sm);
	background : #fff;
	color : var(--color-text);
	transition : border-color var(--transition), box-shadow var(--transition);
	width : 100%;
	box-sizing : border-box;
}

.Formulaire input[type=text]:focus,
.Formulaire input[type=email]:focus,
.Formulaire textarea:focus
{
	outline : none;
	border-color : var(--color-accent);
	box-shadow : 0 0 0 3px rgba(169, 129, 47, 0.15);
}

.Formulaire input[type=submit]
{
	display : block;
	margin : 28px auto 0;
	padding : 12px 34px;
	border : none;
	border-radius : 999px;
	background : var(--color-text);
	color : var(--color-bg);
	font-family : var(--font-body);
	font-size : 0.9em;
	letter-spacing : 0.05em;
	cursor : pointer;
	transition : background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.Formulaire input[type=submit]:hover
{
	background : var(--color-accent-dark);
	transform : translateY(-2px);
	box-shadow : var(--shadow-sm);
}

.ContacterArtiste
{
	text-align : center;
	margin : 0 0 40px;
	font-size : 2em;
	font-family : var(--font-display);
	font-weight : 600;
}

.form-feedback
{
	text-align : center;
	padding : 14px 20px;
	margin : -16px 0 30px;
	border-radius : var(--radius-sm);
	font-size : 0.9em;
}

.form-feedback-success
{
	background : rgba(74, 124, 89, 0.12);
	color : #3c6b4a;
}

.form-feedback-error
{
	background : rgba(179, 58, 58, 0.1);
	color : #a83e3e;
}

 .flottant
 {
	 float : left;
	 max-width : 30%;
	 margin-left : 8%;
	 margin-right : 6%;
 }
 
  .flottant2
 {
	 float : left;
	 max-width : 90%;
	 margin-left : 8%;
	 margin-right : 6%;
 }
 
.Actualite
{
	margin-top : 10%;
	margin-bottom : 5%;
	margin-right : 15%;
	margin-left : 8%;
	text-align: justify;
}

.Actu
{
	margin-left : 10%;
	margin-top : 5%;
	margin-bottom : 20px;
}

.Date
{
	font-style : italic;
	margin-right : 2%;
}

.ImageFlottante
{
	width : 20%;
	margin-left : 25%;
	margin-right: 5%;
	margin-bottom: 30px;
}

.ImageFlottante2
{
	width : 40%;
	margin-left : 30%;
	margin-right : 30%;
	margin-bottom: 2em;
}


.Description2
{
	text-align: justify;
}


.ImageFocused
{
    margin-right: 0%;
    margin-top: 150px;
    text-align: center;
    width: 100%;
    border-radius : var(--radius-md);
    box-shadow : var(--shadow-md);
    cursor : zoom-in;
    transition : transform var(--transition);
}

.ImageFocused:hover
{
    transform : scale(1.015);
}

.lightbox-overlay
{
    display : none;
    position : fixed;
    inset : 0;
    z-index : 1000;
    background : rgba(20, 17, 15, 0.96);
    align-items : center;
    justify-content : center;
    overflow : auto;
    -webkit-overflow-scrolling : touch;
}

.lightbox-overlay.is-open
{
    display : flex;
}

body.lightbox-open header
{
    display : none;
}

.lightbox-overlay img
{
    max-width : 96vw;
    max-height : 96vh;
    width : auto;
    height : auto;
    touch-action : pinch-zoom pan-x pan-y;
    cursor : zoom-out;
    box-shadow : none;
}

.lightbox-close
{
    position : fixed;
    top : 18px;
    right : 20px;
    width : 44px;
    height : 44px;
    border-radius : 50%;
    background : rgba(255, 255, 255, 0.15);
    color : #fff;
    border : none;
    font-size : 1.6em;
    line-height : 1;
    cursor : pointer;
    transition : background var(--transition);
}

.lightbox-close:hover
{
    background : rgba(255, 255, 255, 0.3);
}

.Figure_Portrait
{
    width: 57%;
}

.Figure_Portrait_First
{
	width: 57%;
	margin-left : 25%;
}

.Figure_Paysage
{
    width: 100%;
}

.Figure_Carre
{
    width: 75%;
}

.ImageFocused2
{
	margin : auto;
	margin-top : 200px;
	text-align : center;
	max-width : 80%;
	max-height : 80%;
}

.ImageFocusedLegend
{
    margin-right: 15%;
    margin-left: 15%;
    margin-top: 0px;
    text-align: center;
    max-width: 80%;
}

@media (max-width: 700px)
{
	.Image2
	{
		flex-direction : column;
		align-items : center;
		width : 100%;
	}

	.ImageFocused
	{
		margin-top : 100px;
	}

	.Figure_Carre,
	.Figure_Portrait,
	.Figure_Portrait_First,
	.Figure_Paysage
	{
		width : 90%;
		margin-left : 0;
		order : 1;
	}

	.Precedent_Carre,
	.Precedent_Paysage,
	.Precedent_Portrait
	{
		order : 2;
		margin : 20px 0 0;
	}

	.Suivant
	{
		order : 3;
		margin : 10px 0 0;
	}

	.ImageFocusedLegend
	{
		margin-left : 5%;
		margin-right : 5%;
		max-width : 90%;
	}

	h2 span
	{
		padding : 8px 10px;
		letter-spacing : 1px;
		font-size : 0.85em;
	}
}

.Galerie
{
	margin : 2rem auto;
	column-gap : 1.5rem;
}

.Galerie a
{
	display : block;
	position : relative;
	break-inside : avoid;
	margin-bottom : 1.5rem;
	border-radius : var(--radius-md);
	overflow : hidden;
	box-shadow : var(--shadow-sm);
	transition : box-shadow var(--transition), transform var(--transition);
}

.hover-label
{
	position : absolute;
	top : 0;
	left : 0;
	transform : translate(-50%, -50%);
	pointer-events : none;
	background : rgba(250, 248, 245, 0.94);
	color : var(--color-text);
	font-family : var(--font-body);
	font-size : 0.7em;
	letter-spacing : 0.1em;
	text-transform : uppercase;
	padding : 9px 18px;
	border-radius : 999px;
	white-space : nowrap;
	opacity : 0;
	transition : opacity 0.25s ease;
	z-index : 5;
}

.Galerie a:hover .hover-label
{
	opacity : 1;
}

.Galerie a:hover
{
	box-shadow : var(--shadow-lg);
	transform : translateY(-4px);
}

.Galerie img
{
	display : block;
	width : 100%;
	height : auto;
	transition : transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.Galerie a:hover img
{
	transform : scale(1.06);
}

.about2
{
	width : 60%;
	margin : auto;
}

.Merci
{
	margin-left : 33%;
	margin-top : 20 %;
}

.General
{
	display : flex;
	justify-content : flex-start;
	width : 60%;
	flex : auto;
	margin-right : 10%;
}

.fa {
  padding: 10px;
  font-size: 30px;
  width: 16px;
  height : 16px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  transition : transform var(--transition), opacity var(--transition);
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.75;
  transform : scale(1.12);
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}

.insta {
  font-size: 30px;
  width: 35px;
  height : 35px;
  margin-left : 3px;
  transition : transform var(--transition), opacity var(--transition);
}

.connect {

  margin-right :7px;
  margin-left : 3px;
  width: 35px;
  height : 35px;
  transition : transform var(--transition), opacity var(--transition);
}

.connect:hover {
  opacity: 0.75;
  transform : scale(1.12);
}

.insta:hover {
  opacity: 0.75;
  transform : scale(1.12);
}

#links{
	margin-left: 10px;
	margin-right: 10px;
	display: flex;
}