@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Medula+One&display=swap');

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");

body {
  margin: 0%;
}

.logo {
  width: 10%;
  margin-left: 20px;
}

#logo {
  width: 100%;
}

h1 {
  font-size: 34px;
  margin-left: 30px;
  font-family: 'Medula One', cursive;
  src: url('../fonts/MedulaOne-Regular.ttf') format('truetype');
  font-weight: 550;
}

nav {
  display: flex;
  align-items: center;
  background-color: #AF966D;
}

nav ol {
  display: flex;
  gap: 10px;
}

a:hover {
  font-weight: bold;
}

nav ol a {
  text-decoration: none;
  color: black;
}

/*
si temps pour chipotages ==> espacement entre jeux évènement et liste
*/

.menu {
  list-style: none;
  font-family: 'Medula One', cursive;
  src: url('../fonts/MedulaOne-Regular.ttf') format('truetype');
  font-size: 24px;
  font-variant: small-caps;
}

.jaquette {
  width: 100%;
  display: flex;
}

.slide1,
.slide3 {
  background-image: url("../img/zelda-bg_pattern_brown.png");
  padding: 5% 15% 2%;
}

.slide1 h2,
.slide3 h2 {
  color: aliceblue;
  font-family: 'Medula One', cursive;
  src: url('../fonts/MedulaOne-Regular.ttf') format('truetype');
  font-size: 48px;
  font-weight: lighter;
  margin: 0 auto 20px;
}

.slide1 p,
.slide3 p {
  color: aliceblue;
  font-family: 'Libre Baskerville', serif;
  src: url('../fonts/LibreBaskerville-Regular.ttf') format('truetype');
  font-size: 15px;
  text-align: center;
}

.yellow {
  color: #ffc107;
}

.world {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eyes {
  display: flex;
  margin: 10% auto 5%;
}

.eyes-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5%;
}


#linkOnHorse {
  width: 100%;
  margin-right: 10%;
}

.slide2,
.slide4 {
  background-image: url("../img/zelda-bg_pattern_white.png");
  padding: 5% 15% 2%;
}

#linkFrontWood {
  display: flex;
  width: 100%;
  justify-self: center;
  margin: 3%;
}

.slide2 h2,
.slide4 h2 {
  color: black;
  font-family: 'Medula One', cursive;
  src: url('../fonts/MedulaOne-Regular.ttf') format('truetype');
  font-size: 48px;
  font-weight: lighter;
  margin: 0 auto 20px;
}

.slide2 p,
.slide4 p {
  color: black;
  font-family: 'Libre Baskerville', serif;
  src: url('../fonts/LibreBaskerville-Regular.ttf') format('truetype');
  font-size: 15px;
  text-align: center;
}

.vignettesx3 {
  display: flex;
  margin-top: 50px;

  img {
    width: 33%;
  }
}

.mosaic {
  margin: 5% 0 5%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: repeat(3, 1fr);

  img {
   width: 100%;
  }
}

#pic-one {
  height: 100%;
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

#pic-two {
  grid-column: 2 / 4;
  grid-row: 1;
}

#pic-three {
  grid-column: 2;
  grid-row: 2;
}

#pic-four {
  grid-column: 3;
  grid-row: 2;
}

#pic-five {
  grid-column: 1 / 2;
  grid-row: 3;
}

#pic-six {
  height: 100%;
  grid-column: 2 / 4;
  grid-row: 3;
}

.bouton{
  display: flex;
  flex-direction: row;
  margin-top: 2rem;
  gap: 1rem;
  justify-content: center;
  padding-top: 2%;

  a{
    text-decoration: none;
    font-family: 'Medula One', cursive;
    font-size: 2.5em;
    color: #ffc107;
    background-color: #AF966D;
    padding: 2% 5%;
  }
}


@media screen and (max-width: 1000px) {
  .eyes {
    flex-direction: column;
  }
}

@media screen and (max-width: 500px) {

nav {
  flex-wrap: wrap;
}
nav ol {
  flex-direction: column;
  gap: 10px;
}

.logo {
  width: 50%;
}

*,
:after,
:before {
  box-sizing: border-box;
}

.hl-arrow {
  position: relative;
  display: block;
  background-color: #AF966D;
  margin: 0 auto 12px;
  max-width: 307px;
  height: 2px;
  opacity: 0;
  width: 0;
  -webkit-transition: width 2s 0.1s cubic-bezier(0.49, 0.02, 0.29, 1.06), opacity 0.6s 0.1s ease;
  transition: width 2s 0.1s cubic-bezier(0.49, 0.02, 0.29, 1.06), opacity 0.6s 0.1s ease;
}

.hl-arrow {
  width: 100%;
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  .hl-arrow {
    max-width: inherit;
    width: 60%;
    margin: 14px auto 13px;
  }
}

.hl-arrow:before,
.hl-arrow:after {
  position: absolute;
  content: "";
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNC4yLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iZGl2aWRlciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIyNXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDI1IDgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI1IDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNCNjlBNjg7fQ0KPC9zdHlsZT4NCjxwb2x5Z29uIGlkPSJhcnJvdyIgY2xhc3M9InN0MCIgcG9pbnRzPSIyNC41LDUuMDI3IDIxLjgyMiw3Ljc0NCAxOS4zNDMsNS4yMyAxNy4wOTUsNy43NDQgMC41LDQuMjY3IDAuNSwzLjk3NyAxNy4wOTUsMC41IA0KCTE5LjM0MywzLjAxNCAyMS44MjIsMC41IDI0LjUsMy4yMTYgIi8+DQo8L3N2Zz4NCg==") center center no-repeat;
  width: 24px;
  height: 8px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.hl-arrow:before {
  left: -24px;
}

.hl-arrow:after {
  -webkit-transform: translateY(-50%) scaleX(-1);
  transform: translateY(-50%) scaleX(-1);
  right: -24px;
}
}