body {
width: 100vw;
height: 100vw;
background-color: #FCF7BA;
background-image: url("https://mwokam.com/pattern6.png");
background-size: 40%;
  background-repeat: repeat;
  color: black;
  font-family: "pica";
}

.motifs {
position: absolute;
top: 0;
}

#motif1 {
position: absolute;
display: block;
left: 5vw;
top: 5vh;
}

#motif2 {
position: absolute;
display: block;
left: 30vw;
top: 15vh;
z-index: -2;
}

#motif3 {
position: absolute;
display: block;
left: 54vw;
top: 2vh;
z-index: -3;
}

#motif4 {
position: absolute;
display: block;
left: 76vw;
top: 5vh;
z-index: -2;
}

#motif5 {
position: absolute;
display: block;
margin-left: 85vw;
top: 2vh;
}

#motif6 {
position: absolute;
display: block;
left: 45vw;
top: 22vh;
}


#titre {
position: relative;
  color: #818DDA;
 text-align: center;
  font-family: "pica";
  font-size: 600%;
margin-left: auto;
margin-right: auto;
z-index: -2;
  }

.outfits {
width: 100px;
position: relative;
top: 0;
z-index: 1;
}


#outfit1 {
position: absolute;
top: 100px;
left: 100px;
}

#outfit1 img {
width: 100px;
transition: transform .2s;
-webkit-filter: drop-shadow(5px 5px 5px #818DDA);
  filter: drop-shadow(5px 5px 5px #818DDA);
border-radius: 2px;
padding: 10px;
}

#outfit1:hover {
transform: scale(1.5);
}


#outfit2 {
position: absolute;
top: 60px;
left: 300px;
}

#outfit2 img {
width: 150px;
transition: transform .2s;
-webkit-filter: drop-shadow(5px 5px 5px #818DDA);
  filter: drop-shadow(5px 5px 5px #818DDA);
border-radius: 2px;
padding: 10px;
}

#outfit2:hover {
transform: scale(1.5);
}

#outfit3 {
position: absolute;
top: 100px;
left: 550px;
}

#outfit3 img {
width: 120px;
transition: transform .2s;
-webkit-filter: drop-shadow(5px 5px 5px #818DDA);
  filter: drop-shadow(5px 5px 5px #818DDA);
border-radius: 2px;
padding: 10px;
}

#outfit3:hover {
transform: scale(1.5);
}

#outfit4 {
position: absolute;
top: 100px;
left: 800px;
}

#outfit4 img {
width: 100px;
transition: transform .2s;
-webkit-filter: drop-shadow(5px 5px 5px #818DDA);
  filter: drop-shadow(5px 5px 5px #818DDA);
border-radius: 2px;
padding: 10px;
}

#outfit4:hover {
transform: scale(1.5);
}

#outfit5 {
position: absolute;
top: 80px;
left: 1050px;
}

#outfit5 img {
width: 400px;
transition: transform .2s;
-webkit-filter: drop-shadow(5px 5px 5px #818DDA);
  filter: drop-shadow(5px 5px 5px #818DDA);
border-radius: 2px;
padding: 10px;
}

#outfit5:hover {
transform: skewY(15deg);
}

#outfit6 {
position: absolute;
top: 500px;
left: 80px;
}

#outfit6 img {
width: 100px;
transition: transform .2s;
-webkit-filter: drop-shadow(5px 5px 5px #818DDA);
  filter: drop-shadow(5px 5px 5px #818DDA);
border-radius: 2px;
padding: 10px;
}

#outfit6:hover {
transform: scale(1.5);
}

#outfit7 {
position: absolute;
top: 500px;
left: 250px;
}

#outfit7 img {
width: 200px;
transition: transform .2s;
-webkit-filter: drop-shadow(5px 5px 5px #818DDA);
  filter: drop-shadow(5px 5px 5px #818DDA);
border-radius: 2px;
padding: 10px;
}

#outfit7:hover {
transform: scale(1.5);
}

#outfit8 {
position: absolute;
top: 500px;
left: 500px;
}

#outfit8 img {
width: 150px;
transition: transform .2s;
-webkit-filter: drop-shadow(5px 5px 5px #818DDA);
  filter: drop-shadow(5px 5px 5px #818DDA);
border-radius: 2px;
padding: 10px;
}

#outfit8:hover {
transform: scale(1.5);
}

#outfit9 {
position: absolute;
top: 500px;
left: 700px;
}

#outfit9 img {
width: 150px;
transition: transform .2s;
-webkit-filter: drop-shadow(5px 5px 5px #818DDA);
  filter: drop-shadow(5px 5px 5px #818DDA);
border-radius: 2px;
padding: 10px;
}

#outfit9:hover {
transform: scale(1.5);
}


#outfit10 {
position: absolute;
top: 500px;
left: 900px;
}

#outfit10 img {
width: 100px;
transition: transform .2s;
-webkit-filter: drop-shadow(5px 5px 5px #818DDA);
  filter: drop-shadow(5px 5px 5px #818DDA);
border-radius: 2px;
padding: 10px;
}

#outfit10:hover {
transform: scale(1.5);
}


p {
font-family: "pica";
position: absolute;
left: 100px;
}

.dialog {
width: 100vw;
height: 100vh;
position: fixed;
top: 0px;
margin: auto;
  padding: 10px;
z-index: 50;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}


.dialog img{
width: 800px;
display: block;
margin-top: 20vh;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
border: 4px solid lightpink;
}

.hidden {
  display: none;
}
.clickable {
  cursor: pointer;
  margin: 10px;
  padding: 10px;
}

.close {
display: block;
margin-left: auto;
margin-right: auto;
}