@font-face {
font-family: "Circular";
src:
  url("font/CircularStd-Book.otf") format("opentype"),
}

@font-face {
font-family: "Necto-Mono";
src:
  url("font/Necto-Mono.woff") format("woff"),
  url("font/Necto-Mono.woff2") format("woff2"),
}

* {
    box-sizing: border-box;
}

::selection {
  color: rgb(255, 205, 255);
  background: rgb(255, 255, 143);
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Circular", sans-serif;
    font-size: calc(1rem + 1vw);
    min-font-size: 10px;
    color: rgb(43, 184, 118);
    padding-left: 1em;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    cursor: url('images/cursor.png') 32 40, auto; /* Utilisation de l'image pour le curseur */
    scroll-behavior: smooth;
  }

body {
    position: relative;
     padding-bottom: 4em;
}

a {
  text-decoration: none;
  color: rgb(185,199,247);
  padding-bottom: 0px;
  transition: 0.2s;
}

a:hover {
  text-decoration: underline;
}

header {
  position: relative;
  margin-top: 5vh;
  /*background-color: red;*/
  text-align: center;
  width: 30vw;
}

header h1 {
  padding: 0px;
  margin: 0px;
}

header a {
  cursor: url('images/cursor.png') 32 40, auto; /* Utilisation de l'image pour le curseur */
}

header h2 {
  /*background-color: pink;*/
  white-space:nowrap;
  margin-top: 8em;
  font-family: "Necto-Mono", courier;
  font-size: 0.35em;
  text-transform: uppercase;
  text-rendering: geometricPrecision;
  font-weight: 100;
  letter-spacing: 0.1em;
  transition: transform 0.3s ease-in-out; /* Transition douce */
}

header:hover h2 {
  transition: transform 0.3s ease-in-out; /* Transition douce */
}

main {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  flex: 1;
  margin-top: 3em;
}

#texte:first-of-type {
  /*background-color: blue;*/
  width: 60vw;
  margin-right: 1.5em;
}

#texte p:nth-of-type(4) {
  /*background-color: blue;*/
  margin-top: 3em;
  margin-bottom: 3em;
}

#texte h3 {
  font-size: 0.75em;
  margin-top: 3em;
  font-weight: 100;
  text-transform: uppercase;
  text-decoration: underline;
}

#texte ul {
  list-style: none;
  padding: 0;
  column-count: 2;
  column-gap: 0.1em;
  width: 14em;
}

#texte ul li {
  font-size: 0.5em;
  line-height: 1.5em;
}

#texte ul li a {
  color: rgb(43, 184, 118);

}

#photo-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 1;
  padding-top: 1.25em;

}

#photo-container img {
max-width: 25vw;
margin-bottom: 2em;
}

.random-image {
    transition: opacity 0.2s ease-in-out;
    cursor: pointer;
}

#instagram-logo {
position: absolute;
top: 1em; /* Ajustez la position en fonction de vos besoins */
right: 1.5em; /* Ajustez la position en fonction de vos besoins */
width: 40px; /* Ajustez la largeur en fonction de vos besoins */
height: 40px; /* Ajustez la hauteur en fonction de vos besoins */
z-index: 1000; /* Assurez-vous que le logo est au-dessus du contenu */
transition: 0.25
}

#instagram-logo:hover {
opacity: 0.85;
}

footer {
  /*background-color: blue;*/
  font-size: 0.5em;
  width: 90vw;
  position: relative;
  top: 8em; /* Ajoutez un padding si nécessaire */
  display: flex;
  align-items: flex-end; /* Aligner tous les éléments au bas du conteneur */
  justify-content: space-between;
  padding-bottom: 3em;
}

#bonappetit {
width: 25em; /* Ajustez la largeur en fonction de vos besoins */
margin-left: 20vw;
margin-bottom: 5px;
}



footer span {
  color: lightgrey;
  font-size: 0.5em;
  position: relative;
  top: 6em;
}

footer span a {
  color: lightgrey;
}
footer span a:hover {
  color: grey;
  text-decoration: none;
}


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

    body {
      padding-left: 0.5em;
    }

    header {
      position: relative;
      margin-top: 10vh;
      text-align: center;
      width: 65vw;
    }

    header h2 {
      margin-top: 4em;
      font-family: "Necto-Mono", courier;
      font-size: 0.5em;
      text-transform: uppercase;
      text-rendering: geometricPrecision;
      font-weight: 100;
      letter-spacing: 0.1em;
      transition: transform 0.3s ease-in-out; /* Transition douce */
    }

    #texte:first-of-type {
      /*background-color: blue;*/
      width: 75vw;
      margin-right: 1.5em;
    }

    section ul {
      list-style: none;
      padding: 0;
      column-count: 1;
      width: 14em;
    }

    section ul li {
      font-size: 0.85em;
      line-height: 1.5em;
    }

    footer {
      width: 85vw;
      display: block;
    }

    footer span {
      display: none;
    }

    #bonappetit {
      position: absolute;
      margin: 0;
      margin-top: 10em;
      padding-bottom: 15em;
      width: 40vw;
      height: 6em;
      right: 1em;
    }

    #photo-container {
      display: none; /* Masquer la bande sur les petits écrans */
    }
  }