/* RESET */
* {
  margin: 0;
  padding: 0;
}

/* GENERAL */
@font-face {
  font-family: "Renogare";
  src: url("../libraries/fonts/Renogare-Regular.otf");
}
@font-face {
  font-family: "Montserrat";
  src: url("../libraries/fonts/Montserrat-Regular.ttf");
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #fbd0eb;
  font-family: "Renogare", serif;
  overflow-x: hidden;
}

p {
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-size: 0.85em;
}

/* menu de navigation */
nav {
  position: absolute;
  background-color: rgba(101, 58, 108, 0.8);
  width: 100%;
  height: 2.5em;
  left: 0;
  top: 0;
  position: fixed;
}

nav ul {
  list-style-type: none;
  justify-content: center;
}

nav ul li {
  transition-duration: 0.5s;
  padding: 0.45em 0;
}

nav ul li:hover {
  transition-duration: 0.5s;
  background-color: #8e6196;
}

nav ul li a {
  transition-duration: 0.5s;
  padding: 0 3em;
  color: #fff;
}

nav ul li a:hover {
  transition-duration: 0.5s;
  text-decoration: none;
  color: #ca548f;
}

/* Footer */
footer {
  background-color: #411249;
  width: 100%;
  height: 2.5em;
}

footer ul {
  list-style-type: none;
  justify-content: center;
}

footer ul li {
  transition-duration: 0.5s;
  padding: 0.45em 0;
}

footer ul li:hover {
  transition-duration: 0.5s;
  background-color: #8e6196;
}

footer ul li a {
  transition-duration: 0.5s;
  padding: 0 3em;
  color: #fff;
}

footer ul li a:hover {
  transition-duration: 0.5s;
  text-decoration: none;
  color: #ca548f;
}

/* CLASS/ID */

.box {
  display: flex;
  margin: 0;
}

#startPoint {
  height: 2.5em;
}

#fraise {
  transition: all 0.3s ease-in-out 0s;
}

#fraise:hover {
  transform: rotate(360deg);
  transition: all 0.2 ease-in-out 0s;
}

#chevron {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: rotate(180deg);
  transition: all 0.5s;
}

#chevron:hover {
  transform: rotate(0deg);
}

/* Corps */
#mainContainer {
  background-color: #f67fcf;
  width: 85%;
  margin: 0 auto;
  padding: 1.5em;
  border-radius: 0.8em;
}

#mainContainer p {
  font-family: "Montserrat", serif;
  text-align: justify;
}

#mainContainer h2 {
  color: #fff;
}

#mainContainer section aside img {
  width: 100%;
}

#section2 {
  margin: 1.5em auto;
}

#aside1 {
  width: 90%;
}

#article1 {
  margin: auto 0 auto 2em;
}

#aside2 {
  width: 80%;
}

#article2 {
  margin: auto 2em auto 0;
}

#aside3 {
  width: 85%;
}

#article3 {
  margin: auto 0 auto 2em;
}

/* SPECIAL */

.parallax {
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.headerImg {
  background-image: url("../libraries/img/celeste.jpg");
}

/* bouton acheter */
.pulse:hover,
.pulse:focus {
  background-color: #241733;
  -webkit-animation: pulse 1s;
  animation: pulse 1s;
  box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
}

@-webkit-keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}

div.center {
  margin: 2em auto 3em auto;
  text-align: center;
}

.pulse {
  background-color: #f67fcf;
  font-size: 1.5em;
  font-weight: 800;
  --color: #fff;
  --hover: #f67fcf;
}

button {
  color: var(--color);
  -webkit-transition: 0.25s;
  transition: 0.25s;
  background: none;
  border: 2px solid;
  font: inherit;
  line-height: 1;
  margin: 0.5em;
  padding: 1em 2em;
}
button:hover,
button:focus {
  border-color: var(--hover);
  color: #f67fcf;
}

/* effet battement de coeur */
@keyframes heartbeat {
  0% {
    transform: scale(0.75);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.75);
  }
  75% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.75);
  }
}

#heartbeat {
  animation: heartbeat 8s infinite;
}

#heartbeat:hover {
  animation: none;
}