body {
    font-family: 'bold';
}

.point {
    position: absolute;
    z-index: 20;
    height: 2em;

}

#song {
    right: 58em;
    top: 15em;
}

#archives {
    right: 70em;
    top: 45em;
}

.textstyle {
    padding: 2em;
    border : 2em;
    background-color: aliceblue;
    color: #001091;
}







#popup2 .pile figure {
  position: absolute;
  top: 35%;
  left: 35%;
  width: 200px;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

#popup2 .pile img {
  height: 20em;
  box-shadow: 0 10px 10px #030c53;
}












.overlay {
  position: fixed;
  inset: 0;
  background: rgba(108, 118, 192, 0.7);
  opacity: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  z-index: 90;
}

.overlay:target {
  opacity: 1;
  pointer-events: auto;
}

.close img {
    height: 5%;
    position: absolute;
    z-index: 80;
    right: 2em;
    top: 2em;
}






















.titre {
    height: 50%;
    position: absolute;
    z-index: 2;
    right: -30%;
    top: -15%;
}
 
.fleche {
    height: 5%;
    position: absolute;
    z-index: 80;
    left: 2%;
    bottom: 2%;
}

.carte {
    height: 100%;
    position: absolute;
    z-index: 1;
}

.frise {
    height: 100%;
    position: absolute;
    right: 0%;
    z-index: 0;
}

@font-face {
    font-family: 'bold';
    src: url('fraunces_bold.ttf')
}

.flotte{
position: absolute;
top:0%;
left: 0%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
height: 100%;
width: 100%;
} 


.ima{
    max-width: 100%;
}

.image{
    max-width: 100%;
}

.ecran{
    position:absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}

.lecran{
    position:absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}