@charset "UTF-8";

/* pink: #ff0050 

ombre qui s'élargit*/

body {
  bottom: white;
  padding: 2vw 2vh;
}

.background-img {
  position: fixed;
  height: 90vh;
  left: 25vw;
  z-index: -10;
}

a {
  text-decoration: none;
}

.externallink {
  color: #ff0050;
  text-decoration: none;
  transition: ease-in-out 0.1s;
}
.externallink:hover {
  text-decoration: underline;
}

em {
  font-weight: bold;
}
.about-logo {
  width: 8vw;
  height: auto;
  position: fixed;
  top: 3vh;
  /* shadow: 10px 5px 5px red; */
}
svg {
  filter: drop-shadow(0px 0px 0px #ff0050);
  transition: ease-in-out 0.1s;
}
svg:hover {
  filter: drop-shadow(4px 3px 4px #ff0050);
}

.legend {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3vh;
  transition: ease-in-out 0.2s;
  z-index: 10;
  position: absolute;
  background-color: #ff0050;
  opacity: 0;
  transform: rotate(-10deg);
  margin-top: 10vh;
  margin-left: -3vw;
}

.mundane {
  width: 25vw;
  height: auto;
  position: absolute;
  z-index: 0;
  transition: 0.2s;
}

.mundane,
.legend {
  color: #ff0050;
}

.mundane:hover ~ .legend {
  color: white;
  opacity: 1;
}

.mundane:hover {
  width: 26vw;
  height: auto;
}
.container {
  display: flex;
  flex-wrap: wrap;
  width: 80vw;
  position: absolute;
  left: 18vw;
}
.content {
  height: 20vh;
  width: 22vw;
  /* background-color: white; */
  padding: 3vh;
  /* border: solid 2px red; */
}

.expo {
  z-index: 15;
  width: 25vw;
  height: auto;
  box-shadow: 0px 10px 30px #ff005156;
  transition: ease-in-out 0.1s;
}

.expo-horizontal {
  z-index: 15;
  width: 36vw;
  height: auto;
  box-shadow: 0px 10px 30px #ff005156;
  transition: ease-in-out 0.1s;
}

.expo-horizontal:hover {
  box-shadow: 0px 10px 30px #ff0050;
}
.expo:hover {
  box-shadow: 0px 10px 30px #ff0050;
}

h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10vh;
  color: #ff0050;
  transition: ease-in-out 0.1s;
  position: fixed;
  top: 2vh;
}

h1:hover {
  color: white;
  text-shadow: #ff0050 1px 0 10px;
}

h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 5vh;
  text-align: center;
  color: #ff0050;
  transition: ease-in-out 0.1s;
  padding-top: 2vh;

  padding-right: 10vw;
}

h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2vh;
  color: #000000;
  /*  transition: ease-in-out 0.1s; */
  padding-top: 1vh;
  line-height: 2.5vh;
  padding-left: 2vw;
  padding-right: 10vw;
  /* text-indent: 2vw; */
}

h4 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2vh;
  color: #ff0050;
  font-style: italic;
  padding-top: 1vh;
  line-height: 2.5vh;
  padding-left: 2vw;
  padding-right: 10vw;
}

.fr {
  font-style: italic;
  margin-top: 5vh;
}

.expo-text {
  width: 50vw;
  position: fixed;
  top: 15vh;
}

.expo-gallery {
  width: 50vw;
  position: absolute;
  left: 50vw;
  top: 3vh;
}
.img-gallery {
  width: 48vw;
  padding-top: 2vh;
}

#martytwo {
  box-shadow: 0px 10px 30px #ff0050;
}
.about-text {
  width: 50vw;
  position: absolute;
  left: 50vw;
  top: 5vh;
  padding-bottom: 10vh;
}
#about-title {
  position: fixed;
  left: 40vw;
}
.about-img {
  position: fixed;
  left: 5vw;
  top: 15vh;
  width: 40vw;
  height: auto;
}

.email {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 5vh;
  transition: ease-in-out 0.2s;
  z-index: 10;
  position: fixed;
  background-color: #ff0050;
  color: white;
  opacity: 0, 2;
  transform: rotate(-17deg);
  padding: 0.5vh;
  top: 38vh;
  left: 8vw;
}

.email:hover {
  text-decoration: underline;
}
.italic {
  font-style: italic;
}

/* responsive part */
/* responsive part */
/* responsive part */
/* responsive part */
/* responsive part */
/* responsive part */
/* responsive part */
/* responsive part */
/* responsive part */
/* responsive part */
/* responsive part */
/* responsive part */
/* responsive part */
/* responsive part */
/* responsive part */
/* responsive part */
/* responsive part */
/* responsive part */

@media only screen and (max-width: 600px) {
  .background-img {
    position: fixed;
    height: 40vh;
    left: 5vw;
    top: 30vh;
    z-index: -10;
  }

  .about-logo {
    width: 18vw;
  }

  .container {
    width: 90vw;

    left: 15vw;
    top: 5vh;
  }
  .content {
    height: 6vh;
    width: 10vw;
  }

  h1 {
    font-size: 5vh;
  }

  h2 {
    font-size: 2.5vh;
    z-index: 10;
  }

  h3 {
    padding-top: 1.5vh;
    padding-left: 2vw;
    padding-right: 2vw;
  }
  .about-img {
    position: fixed;
    left: 8vw;
    top: 70vh;
    width: 80vw;
    height: auto;
  }

  .about-text {
    width: 95vw;
    height: 50vh;
    position: absolute;
    top: 7vh;
    padding-bottom: 10vh;
    left: 2vw;
    overflow: scroll;
  }

  .email {
    font-size: 2.5vh;
    top: 82vh;
    left: 10vw;
  }
}