/* Lettrine */
.big-letter p:first-child:first-letter {
	float: left;
	color: black;
	font-size: 8em;
	line-height: 0.8em;
}

.big-letter {
  color: black;
  background-color: rgba(255,255,255,0.4);
  text-align:center;
  padding:50px 80px;
	font-size: large;
  text-align: left;
}

/*texte*/
p {
	font: 14px "Lora", sans-serif;
}

/* Bouton rond avec la flèche */
.btn.previous {
  background-color: #8E1919;
  color: #fff;
  text-decoration: none;
  padding: 8px 16px;
}
.round {
  border-radius: 50%;
}

.btn.previous:hover {
  background-color: #C56161;
  color: #000;
  text-decoration: none;
}

html {
  scroll-behavior: smooth;
}

/* mon menu à la vertical */
body {
  margin: 0;
  font-family: "Lora", serif;
}

.sidebar {
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #fff;
  position: fixed;
  height: 100%;
  overflow: auto;
}

.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

div.content {
  margin-left: 200px;
  height: 1000px;
}

@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {float: left;}
  div.content {margin-left: 0;}
}

@media screen and (max-width: 625px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}

/* couleur menu active et hover */
    #accueil.active {
      background-color: #CA7C5C;
      color: white;
    }

    #accueil:hover:not(.active) {
      background-color: #CA7C5C;
      color: white;
    }

    #monodyssee.active {
        background-color: #C89F9C;
        color: white;
    }

    #monodyssee:hover:not(.active) {
        background-color: #C89F9C;
        color: white;
    }

    #curriculumlectricis.active {
        background-color: #EED7C5;
        color: #CA7C5C;
    }

    #curriculumlectricis:hover:not(.active) {
        background-color: #EED7C5;
        color: #CA7C5C;
    }

    #creations.active {
        background-color: #EEE2DF;
        color: #C89F9C;
    }

    #creations:hover:not(.active) {
        background-color: #EEE2DF;
        color: #C89F9C;
    }

/* Contenu de la page Index */
#index {
	background-color: #CA7C5C;
	color: white;
}

.bgimg {
  position: relative;
  opacity: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.bgimg {
  background-image: url("intro.jpg");
  height: 60%;
}

.caption {
  position: absolute;
  left: 0;
  top: 30%;
  width: 100%;
  text-align: center;
}

h3 {
  letter-spacing: 20px;
  text-transform: uppercase;
  font: 20px "Lora", sans-serif;
  color: #fff;
}


/* Contenu de la page Mon odyssée */

.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5 {
  position: relative;
  opacity: 1;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.bgimg-1 {
  background-image: url("iletaitunefois.jpg");
  min-height: 40%;
}

.bgimg-2 {
  background-image: url("lille.jpg");
  min-height: 40%;
}

.bgimg-3 {
  background-image: url("angers.jpg");
  min-height: 40%;
}

.bgimg-4 {
  background-image: url("paris.jpg");
  min-height: 40%;
}

.bgimg-5 {
  background-image: url("sapho.jpg");
  min-height: 40%;
}


/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5 {
    background-attachment: scroll;
  }
}

/*Contenu de la page mes créations*/
#mescreations {
	background-color: #EEE2DF;
}
			/* Galerie page mes créations */
figure {
  display: flex;
  flex-flow: column;
  padding: 4px;
  max-width: 450px;
  margin: auto;
}

#crea img {
  max-width: 450px;
	filter: grayscale(1);
}
#crea img:hover {
	filter: grayscale(0);
}
figcaption {
	background-color: rgba(255, 255, 255, 0);
  color: black;
  font: italic smaller sans-serif;
  padding: 0px;
  text-align: left;
	font: "Lora", sans-serif;
	letter-spacing: 1px;
}



#bonjour {
  padding-left: 90px;
  padding-top: 250px;
	padding-bottom: 250px;
	background-color: #EEE2DF;
}

#bonjour1 {
  padding-left: 90px;
  padding-top: 250px;
	padding-bottom: 250px;
}


/*Contenu de la page mes créations*/
#pagecurriculumlectricis {
	background-color: #EED7C5;
}
#lectures{
	padding-left: 90px;
  padding-top: 250px;
	padding-bottom: 250px;
	background-color: #EED7C5;
}
#imagelivre{
	padding-top: 100px;
}
.fond {
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 10px;
	padding: 20px;
}


/* liens */
.link {
	color: #CA7C5C;
	font-weight: bold;
}

.link:hover{
	color: #C89F9C;
	text-decoration: none;
}

.linkindex {
	color: #EED7C5;
	font-weight: bold;
}

.linkindex:hover{
	color: #EEE2DF;
	text-decoration: none;
}

#claire {
	font-size: 9px;
	color: grey;

}