@import 'typos/batik/stylesheet.css';
@import 'typos/';

@font-face {
    font-family: 'pixelated';
    src: url('typos/0xA000-Pixelated.woff2') format('woff2'),
        url('typos/0xA000-Pixelated.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




html {
    height: 100%,
}

body {
    height: 100%,
}
p {font-family:monospace;
    margin-left:30px; 
    margin-right: 40px;
    }

    ul{
        margin: 0;
        padding:0;
    }


.titre {
    color:blue;
    font-family:'pixelated';
    position: absolute;
    top: 5vw;
    margin-left: 10%;
        margin-right: 2%;
    font-size: 8em ;
    z-index: -1;
}
.header {
    height: 400px;
        z-index:+1;
   /* background-color:#1b2631;*/
    
    }

    .navbar li{
        list-style: none;
    }

    .navbar a{
        color:#FFF;
        text-decoration: none;
        font-family: monospace;
        background: rgba(0,0,255,0.5);
        font-size: 40px;
        top:10px;
    }

    .navbar .left{
        margin-left: -400px;
        transition: all 1s ease;
    }

    .navbar .left:hover{
        margin-left: 0px;
        /*background: rgba(0,0,255,0.5); */
    }

    .navbar .right{
        text-align: right;
    }
.menu {
position: absolute;
z-index: 1;
display: inline;
width: auto;
top: 250px;
}

.menu li {
    display: inline;
}

.menu a {
    font-size: 25px;
    margin: 61px;
}
    /*

    .navbar a{
        color:#FFF;
        text-decoration: none;
        font-family: monospace;
        background: rgba(0,0,255,0.5);
        font-size: 60px;
        top:10px;
    }

    .navbar .right{
        margin-right: 100px;
        transition: all 1s ease;
    }

    .navbar .right:hover{
        margin-right: 0px;
        
    }

    .navbar .left{
        text-align: left;
    }
*/

.image-wrapper{
    width: 50%;
}

.legende1{
    color: #1B2631;
    font-family: monospace;
    font-size: 0.25em;
    position: absolute;
    top: 12vw;
    left: 69vw;
    text-align: justify;
}
.legende2{
    color: #1B2631;
    font-family: monospace;
    font-size: 0.25em;
    position: absolute;
top: 29vw;
left: 34vw;
width: 27%;
text-align: justify;
    }

.legende3{
    color: #1B2631;
    font-family: monospace;
    font-size: 0.25em;
    position: absolute;
    top: 59vw;

left: 72vw;

width: 20%;

text-align: justify;

}
.legende4{
    color: #1B2631;
    font-family: monospace;
    font-size: 0.25em;
    position: absolute;
    top: 81vw;
    left: 37vw;
    width :20%;
text-align: justify;
}
.texte {
    margin-top: 50px;
    margin-left: 100px;
    margin-right:100px;
    color: black;
    z-index:1;
    position: absolute;
}
img{
  
  width: 100%;
    /*position relative déplacer 
    /*flex box permet de mettre des élments en ligne*/
}

.gros{
    font-size: 2em;
}

h1, 
.carte{
    font-family: 'pixelated';
     font-weight: normal; 
     font-style: normal;
    font-size: 44px;


}

.tableau1 {
    font-size:8px;
    font-family: monospace;
    color: #aab7b8 ;
}

.tableau2 {
    font-size:8px;
    font-family: monospace;
    color: #aab7b8;

}
.tableau3 {
    font-size:8px;
    font-family: monospace;
    color: #aab7b8;

}
.tableau3 {
    font-size:8px;
    font-family: monospace;
    color: #aab7b8;
    }


.tableau4 {
    font-size:8px;
    font-family: monospace;
    color: #aab7b8;
    }
    
p span{
    font-size: 25px;
    font-family:monospace;

}

.carte{
     width: 100%;
     height: 0;
     padding-bottom: 100%;
     display: block;
     position: relative;
     background-image: url('imagesecris/fond principal.jpg');
     background-size: 100%;
     background-repeat: no-repeat;
}
.date1{
    position: absolute;
    top: 139px;
    left: 252px;
    color: #A9A9A9;
    font-size: 60PX;
}
.date2{
    position: absolute;
    top: 1022PX;
    right:595PX;
    color: #A9A9A9;
    font-size: 60PX;


}
.date4{
    position: absolute;
    top: 54vw;
    left: 756px;
    color: #A9A9A9;
    font-size: 5vw;
    transform: rotate(90deg);
}

.image1{
    width: 30%;
    position: absolute;
    top:10vw;
    left: 40vw;
}

.image1 img {
    position: absolute;
}

.image1:hover img:nth-child(2){
    display: none;
}
.image2{
    width: 30%;
    position:absolute; 
    top:30vw;
    left: 5vw;
}
.image2 img{
    position:absolute;
}

.image2:hover img:nth-child(2){
    display: none;
}

.image3{
   width: 25%;
    position: absolute;
    top:80vw;
    left: 70vw;
}

.image3 img{
    position:absolute;
}

.image3:hover img:nth-child(2){
    display: none;
}
.image4{
    width: 28%;
    position: absolute;
    top: 70vw;
    left: 10vw;
}

.image4 img{
    position:absolute;
}

.image4:hover img:nth-child(2){
    display: none;
}