@font-face {
  font-family: LemonMilk;
  src: url(../fonts/LEMONMILK-Light.otf);
  font-weight: normal;
}

body, html {
	scroll-behavior: smooth;
	margin: 0;
	font-family: LemonMilk, Arial, Helvetica, sans-serif;
}

h1 {
	font-size: 3rem;
	font-weight: 400;
	text-align:center;
}

h2 {
	font-size: 1.7rem;
	font-weight: 400;
}

p {
	font-size:1.2rem;
	font-family: Arial;
	text-align: justify;
	text-justify: inter-word;
}

#noScroll {
	height:100vh;
}

#homepage {
	position:fixed;
	background-image: url("../images/gare_bg.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height:100%;
}

#mainTitle {
	width:100%;
	color:white;
	display:flex;
	gap:3rem;
	justify-content:center;
	align-items:center;
	margin-top:15%;
}

#mainTitle h1 {
	margin:0;
}

#mainSubtitle {
	width:100%;
	text-align:center;
	margin-top:30px;
}

#mainSubtitle a {
	color: white;
	text-decoration:none;
	background-color:#800000;
	width:130px;
	border-radius:100px;
	padding:10px;
	text-align: center;
	border: 3px solid #FFFFFF;
}

#mainSubtitle a:hover {
	color: #800000;
	background-color: #FFFFFF;
}

header {
	background-color:#f8f8f8;
	padding:18px;
}

.divider {
	height:30px;
}

.largeDivider {
	height:130px;
}

#mainMenu {
	position:relative;
	padding: 0;
	margin: 0;
	justify-content:center;
	align-items:center;
	display:flex;
	gap:15%;
	list-style-type: none;
}

#mainMenu a {
	color: lightgray;
	text-decoration:none;
}

#mainMenu a:hover {
	color: white;
}

#mainMenu .redText {
	color:#800000;
}

#mainMenu .redText:hover {
	color:gray;
}

.menuBackground {
	background-color: #f0f0f0;
	border-bottom: 2px solid #800000
}

#logo {
	color:white;
}

#logo h2 {
	margin:0;
}

#content {
	position: relative;
	z-index:1;
	padding-left:10%;
	padding-right:10%;
	padding-top:7rem;
	padding-bottom:7rem;
	background-color:#f8f8f8;
}

.redTopBorder {
	border-top: 12px solid #800000;
}

.textImageRow {
	display:flex;
	gap:8%;
	align-items:center;
	flex-wrap: wrap;
}

.textImageRow div:not(.multipleImages){
	border-left: 3px solid #e8e8e8;
	padding-left:18px;
	flex:1;
}

.textImageRow img {
	border: 0px solid white;
	border-radius: 5px;
	box-shadow: 40px 20px #e8e8e8;
	min-width: 0px;
	max-width: 100%;
	flex:1;
}

.textImageRow iframe {
	border: 0px solid white;
	border-radius: 5px;
	width:50%;
	height:35rem;
}

.textImageRow .galleryImage {
	max-height: 20rem;
	box-shadow: 0 0 #000000;
}

.multipleImages {
	display:flex;
	gap:15px;
	align-items:center;
	flex-wrap: wrap;
}

#pageLinks {
	display:flex;
	gap:10%;
	align-items:center;
	padding-left:10%;
	padding-right:10%;
	padding-top:10%;
	flex-wrap: wrap;
}

#pageLinks a {
	color: white;
	text-decoration:none;
	background-color:#800000;
	width:130px;
	border-radius:100px;
	padding:10px;
	margin:auto;
	margin-top:20px;
	text-align: center;
	border: 1px solid #800000;
}

#pageLinks a:hover {
	color: #800000;
	background-color: #FFFFFF;
}

footer {
	position: relative;
	z-index:1;
	padding:20px;
	background-color:#800000;
	text-align:center;
	color:white;
}

@media (width <= 900px) {
  .textImageRow, #mainMenu, #mainTitle {
	flex-direction: column;
  }
  
  #mainMenu li {
	margin: 8px;
  }
  
  #mainTitle {
	margin-top:1rem;
  }

  #mainSubtitle {
	margin-top:-10px;
  }
  
  .textImageRow iframe {
	width:100%;
  }
}