@import url('https://fonts.googleapis.com/css?family=Acme|Muli|Russo+One');
*{
  cursor: url("images/curseur.png"), auto;
}

body{
  background-color: #1712ab;
  color : #b4e6fa;
}

h1 {
  font-family: 'Russo One', sans-serif;
  font-size: 125px;
  line-height:1;
  position:absolute;
  top: -2.5vh;
  left: 28.5vh;
}

h2 {
  font-family: 'Russo One', sans-serif;
  font-size: 125px;
  line-height:1;
  position:absolute;
  top: 5.5vh;
  left: 43vh;
}

span{
  font-family: 'Muli', sans-serif;
  font-size:12px;
}


span:after{
  content:url(images/curseur.png);
  margin-left: 10px;
  top: 3.8px;
  position: relative;

}

.bouton{
  position: absolute;
  width: 20vh;
  top: 79vh;
  left: 49.5vh;
}

p {
  font-family: 'Muli', sans-serif;
  font-size: 11.5px;
  text-align: center;
  color: #b4e6fa;
  padding:1px;
}

p:hover{
  color: #b4e6fa;
  background:#1712ab;
}


.bloc1{
  background-color: #b4e6fa;
  color : #1712ab;
  width: 211px;
  height: 211px;
  position: absolute;
  background: url("images/1975-image.jpg");
  background-size: contain;
  top: 10vh;
  left: 6vw;
}

.bloc2{
  background-color: #b4e6fa;
  color : #1712ab;
  width: 211px;
  height: 211px;
  position: absolute;
  background: url("images/1975-robots.jpg");
  background-size: contain;
  top: 20vh;
  left: 28vw;
}

.bloc3{
  background-color: #b4e6fa;
  color : #1712ab;
  width: 211px;
  height: 211px;
  position: absolute;
  background: url("images/1977-horreur-domotique.jpg");
  background-size: contain;
  top: 30vh;
  left: 50vw;
}

.bloc4{
  background-color: #b4e6fa;
  color : #1712ab;
  width: 211px;
  height: 211px;
  position: absolute;
  background: url("images/1977-micro-ordi.jpg");
  background-size: contain;
  top: 40vh;
  left: 72vw;
}

.bloc5{
  background-color: #b4e6fa;
  color : #1712ab;
  width: 211px;
  height: 211px;
  position: absolute;
  background: url("images/1978-carol-shaw.jpg");
  background-size: contain;
  top: 51vh;
  left: 50vw;
}

.bloc6{
  background-color: #b4e6fa;
  color : #1712ab;
  width: 211px;
  height: 211px;
  position: absolute;
  background: url("images/1980-roberta-williams.jpg");
  background-size: contain;
  top: 62vh;
  left: 28vw;
}

.bloc7{
  background-color: #b4e6fa;
  color : #1712ab;
  width: 211px;
  height: 211px;
  position: absolute;
  background: url("images/1982-machine.jpg");
  background-size: contain;
  top: 73vh;
  left: 6vw;
}

.texte1{
  width: 211px;
  height: 211px;
  position: absolute;
  top: 23vh;
  left: 6vw;
}

.texte2{
  width: 211px;
  height: 211px;
  position: absolute;
  top: 33vh;
  left: 28vw;
}

.texte3{
  width: 211px;
  height: 211px;
  position: absolute;
  top: 43vh;
  left: 50vw;
}

.texte4{
  width: 211px;
  height: 211px;
  position: absolute;
  top: 53vh;
  left: 72vw;
}

.texte5{
  width: 211px;
  height: 211px;
  position: absolute;
  top: 64vh;
  left: 50vw;
}

.texte6{
  width: 211px;
  height: 211px;
  position: absolute;
  top: 75vh;
  left: 28vw;
}

.texte7{
  width: 211px;
  height: 211px;
  position: absolute;
  top: 86vh;
  left: 6vw;
}

@media print{
  @page{
    size: A3;
  }