:root {
  --text-default: rgb(34, 34, 34);
  --mood-white: #fff;
  --mood-salmon: #e48473;
  --mood-pink: #f7acb0;
  --mood-yellow: #fdf2c7;
  --mood-blue: #aedfe8;
  --mood-purple: #cbabd1;
}

html {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

body {
  margin: 0;
  padding: 0;
  color: var(--text-default);

  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

nav ul {
  display: flex;
  gap: 16px;
  list-style: none;
  padding: 0;

  justify-content: center;
}
@media screen and (max-width: 600px) {
  nav ul {
    flex-direction: column;
    align-items: center;
  }

  nav a {
    min-width: 200px;
    text-align: center;
  }
}

nav a {
  color: var(--mood-white);
  text-decoration: none;
  background-color: var(--mood-salmon);
  padding: 8px 16px;
  border-radius: 8px;
  display: inline-block;
}

.page {
  position: relative;
  scroll-snap-align: start;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.content {
  padding: 24px;
  text-align: left;
  max-width: 800px;
}
header .content {
  text-align: center;
}

.heading {
  text-align: center;
  font-size: 2.4em;
}

.bg-purple {
  background-color: var(--mood-purple);
}
.bg-blue {
  background-color: var(--mood-blue);
}
.bg-yellow {
  background-color: var(--mood-yellow);
}
.bg-salmon {
  background-color: var(--mood-salmon);
}
.bg-pink {
  background-color: var(--mood-pink);
}
.bg-white {
  background-color: var(--mood-white);
}

.rounded-s {
  border-radius: 8px;
}
.rounded-full {
  border-radius: 100%;
}
.p-24 {
  padding: 24px;
}

.text-color-light {
  color: var(--mood-white);
}

.colored-boxes {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
}
.colored-boxes p {
  margin: 0;
}
@media screen and (max-width: 600px) {
  .colored-boxes {
    flex-direction: column;
    padding: 0 24px;
  }

  .colored-boxes p {
    width: 100%;
  }
}

.flexmoi {
  display: flex;
  gap: 24px;
  align-items: center;
}
@media screen and (max-width: 600px) {
  .flexmoi {
    flex-direction: column;
  }
}
.flexmoi img {
  border-radius: 100%;
  border: 8px solid var(--mood-salmon);
}

#parcours .flexmoi > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#parcours ul,
#ateliers ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#formation ol {
  list-style: none;
  counter-reset: item;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

#formation li {
  display: flex;
  gap: 24px;
}
#formation li:before {
  content: counter(item);
  counter-increment: item;
  display: inline-block;
  background-color: var(--mood-purple);
  transition: background-color 300ms ease-in;
  color: var(--mood-white);
  width: 48px;
  height: 48px;
  border-radius: 100%;
  text-align: center;
  line-height: 48px;
  flex-shrink: 0;
}
#formation li:hover:before {
  background-color: var(--mood-salmon);
}

.button-centered {
  text-align: center;
}
.button-centered a {
  display: inline-block;
  margin: 24px auto;
  color: var(--mood-white);
  text-decoration: none;
  background-color: var(--mood-purple);
  border-radius: 8px;
  padding: 8px 16px;
  transition: background-color 300ms ease-in;
}
.button-centered a:hover {
  background-color: var(--mood-salmon);
}