@charset "UTF-8";

/* pink: #ff0050 

ombre qui s'élargit*/

body {
  bottom: white;

  width: 100vw;
}

.background {
  width: 100vw;
  height: 100vh;
  /* background: linear-gradient(
    0deg,
    rgba(255, 0, 80, 0.45) 0%,
    rgba(255, 204, 220, 0.61) 27%,
    rgba(255, 255, 255, 0.37) 100%
  ); */
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.65;
  pointer-events: none;
  /* background-color: rgb(122, 226, 176); */
  background-color: white;
}

.about-logo {
  width: 8vw;
  height: auto;
  position: fixed;
  top: 3vh;
  left: 2vw;
  /* border: solid 3px blue; */
}

svg {
  filter: drop-shadow(0px 0px 0px #ff0050);
  transition: ease-in-out 0.1s;
  position: inherit;
}
svg:hover {
  filter: drop-shadow(4px 3px 4px #ff0050);
}

.container {
  width: 60vw;
  position: absolute;
  left: 30vw;
  /* background-color: lightgreen; */
}
.event {
  padding-top: 2vh;
  width: 60vw;
  height: 80vh;
  /* background-color: lightblue; */
  margin-bottom: 2vh;
}

img {
  width: auto;
  height: 65vh;
}
.poster {
  margin-left: 10vw;
  transition: ease-in-out 0.1s;
}
.poster:hover {
  transform: rotate(5deg);
}

.documentation {
  margin-left: 15vw;
}

h1 {
  font-family: "Stack Sans Headline", sans-serif;
  font-size: 4vh;
  line-height: 5vh;
  transition: ease-in-out 0.2s;
  z-index: 10;
  position: sticky;
  top: 4vh;
  /* background-color: aqua; */
  margin-left: -10vw;
  z-index: 10;
  color: white;
}

mark {
  background-color: #ff0050;
  color: white;
  border-radius: 1vh;
}
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::: responsive ::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media only screen and (max-width: 1000px) {
  .about-logo {
    width: 18vw;
    position: fixed;
    top: 5vh;
    left: 2vh;
  }

  .container {
    width: 90vw;
    left: 10vw;
    position: absolute;
  }
  .event {
    height: 40vh;
    padding-bottom: 5vh;
  }
  img {
    width: 60vw;
    height: auto;
  }
  .poster {
    left: 10vw;
    position: relative;
  }
  
  #minimizer {
  height: 45vh;
  width:auto;
}
  h1 {
    font-size: 2vh;
    line-height: 2.5vh;
    text-align: center;
  }
  mark {
    padding: 0.2vh;
  }
}