/* body {
  background-image: url("images/Hedy_Lamarr.jpg")
} */

@font-face {
  font-family: Mule-Regular;
  src: url(font/Mule-Regular.otf);
}

.show-background-image .container {
  display: block;
  /* background-image: url('images/Hedy_Lamarr.jpg'); */
}

.textstylise {
  position: fixed;
  font-size: 2em;
  line-height: 1em;
  background-color: rgb(0, 0, 0);
  mix-blend-mode: hue;
  cursor: pointer;
  /* z-index: 1000; */
}

.textstylise3 {
  position: fixed;
  font-size: 2em;
  line-height: 1em;
  background-color: rgb(0, 0, 0);
  cursor: pointer;
  z-index: 999;
  top: 230px;
}

.textstylise2 {
  position: absolute;
  background-color: rgb(0, 0, 0);
  color: white;
  mix-blend-mode: hue;
  padding-top: 3em;
  cursor: pointer;
  z-index: 1000;
}

#textElement1 {
  width: 100%;
  /* z-index: -2000; */
}

.box {
  font-family: Mule-Regular;
  /* z-index: 1000; c'est ça qui permet la box.1 en pp */
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  font-family: "MyCustomFont", sans-serif;
}

/* .container {
  width: 100%;
} */

.box {
  position: absolute;
  /* background: rgba(255, 255, 255, 0.8); Semi-transparent white background */
  width: 100%;
  height: 20vh;
}

.box1 {
  position: absolute;
  /* background: rgba(255, 255, 255, 1); */
  width: 70%;
  z-index: 1000;
}

.box2 {
  position: absolute;
  /* background: rgba(0, 0, 0, 1); Semi-transparent white background */
  width: 100%;
  z-index: 99;
}

.box3 {
  position: absolute;
  background: rgba(255, 255, 255, 1);
  /* Semi-transparent white background width: 100%; */
  z-index: 98;
}

.box4 {
  position: absolute;
  background: rgba(0, 0, 0, 1);
  /* Semi-transparent white background width: 100%; */
  z-index: 97;
}

#hedy-lamarr-portrait {
  z-index: 1000;
}

.highlightBlack {
  background-color: rgb(0, 0, 0);
  -webkit-text-fill-color: white;
}

.highlightWhite {
  background-color: rgb(255, 255, 255);
  -webkit-text-fill-color: black;
}

.distorted-text {
  font-size: 6vw;
  filter: url(#wavy);
  /* Reference to the SVG filter */
}

.is-selected {
  filter: none;
  /* -webkit-text-fill-color: rgb(255, 255, 255); */
}

.box-selected {
  pointer-events: none;
  z-index: 100;
}

.hidden-image {
  display: none;
}

.hidden {
  display: none;
}