@import url('https://fonts.googleapis.com/css?family=Bai+Jamjuree|Chakra+Petch');

*{
  cursor: url("images/curseur.png"), auto;
}

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

h1 {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 16vw;
  line-height:1.1;
}

h1:hover{
  color: transparent;
  background: url("images/bouton.png");
  background-size: contain;
  background-repeat: no-repeat;
}

h2 {
  font-family: 'Chakra Petch', sans-serif;
  color: #1712ab;
  font-size: 30px;
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-100%);
}

h3 {
  font-family: 'Chakra Petch', sans-serif;
  color: #b4e6fa;
  font-size: 2.7vw;
  text-align: center;
}

h4{
  font-family: 'Chakra Petch', sans-serif;
  font-size: 4vw;
  font-style:italic;
  line-height: 0.2;
}

div:hover h2{
  color: #b4e6fa;
  text-decoration:underline;
}

p {
  font-family: 'Bai Jamjuree', sans-serif;
  font-size: 17px;
  text-align: center;
  color: #1712ab;
  background:#b4e6fa;
  padding:1px;
}

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

.back {
  background-image: url('images/bouton.png');
  background-size: contain;
  background-repeat: no-repeat;

  height: 20.5vw;
  width: 20.5vh;

  position: fixed;
  bottom: -18vh;
  left: 45vw;

  color: transparent;
  font-size: 2.3vw;
  text-align: center;
  text-decoration: none;
  font-family: 'Chakra Petch', sans-serif;
  text-decoration: underline;
  padding-top: 15px;

}

.back:hover {
  color: #fba5aa;
}

.index div{
  background-color: #b4e6fa;
  color : #1712ab;
  width: 265px;
  height: 265px;
  overflow: scroll;
  position: absolute;
}

.index div:hover{
  background: #1712ab;
}

.bloc1{
  background: url("images/1996-Cyberespace_2.jpg");
  top: 7vh;
  left: 8vw;
}

.bloc2{
  background: url("images/1996-CybeRoberta_2.jpg");
  top: 17vh;
  left: 30vw;
}

.bloc3{
  background: url("images/1996-Joysticks_2.jpg");
  top: 7vh;
  left: 52vw;
}

.bloc4{
  background: url("images/1996-Lara Croft_2.jpg");
  top: 17vh;
  left: 74vw;
  right: 5vw;
}

.bloc5{
  background: url("images/1996-Les Pénélopes_2.jpg");
  top: 47.3vh;
  left: 1.7vw;
}

.bloc6{
  background: url("images/1996-Mouchette.org_2.jpg");
  top: 62vh;
  left: 23.7vw;
}

.bloc7{
  background: url("images/1996-Nathalie Magnan_2.jpg");
  top: 57vh;
  left: 45.7vw;
}

@keyframes example {
    0%   {left: 100vw;}
    100% {left: -40vw;}
}

h1{
  position: absolute;
  top: 39vh;
  height: 50vh;
  left: 65.5vw;
  animation-name: example;
  animation-duration: 12s;
  animation-timing-function: linear;
  animation-iteration-count:infinite;
}

h4{
position: absolute;
top: 0vh;
height: 53vh;
left: 65.5vw;
animation-name: example;
animation-duration: 12s;
animation-timing-function: linear;
animation-iteration-count:infinite;
}

.cyberoberta {
  position: absolute;
  top: 25vh;
  height: 53vh;
  left: -50vw;
  animation-name: example;
  animation-duration: 14s;
  animation-timing-function: linear;
  animation-iteration-count:infinite;
}
.cyberoberta:hover{
  animation-play-state: paused;
}

.cyberespace {
  position: absolute;
  top: 25vh;
  height: 53vh;
  left: -50vw;
  animation-name: example;
  animation-duration: 14s;
  animation-timing-function: linear;
  animation-iteration-count:infinite;
}
.cyberespace:hover{
  animation-play-state: paused;
}

.joysticks {
  position: absolute;
  top: 25vh;
  height: 53vh;
  left: -50vw;
  animation-name: example;
  animation-duration: 14s;
  animation-timing-function: linear;
  animation-iteration-count:infinite;
}
.joysticks:hover{
  animation-play-state: paused;
}

.laracroft {
  position: absolute;
  top: 25vh;
  height: 53vh;
  left: -50vw;
  animation-name: example;
  animation-duration: 14s;
  animation-timing-function: linear;
  animation-iteration-count:infinite;
}
.laracroft:hover{
  animation-play-state: paused;
}

.lespenelopes {
  position: absolute;
  top: 25vh;
  height: 53vh;
  left: -50vw;
  animation-name: example;
  animation-duration: 14s;
  animation-timing-function: linear;
  animation-iteration-count:infinite;
}
.lespenelopes:hover{
  animation-play-state: paused;
}

.mouchetteorg {
  position: absolute;
  top: 25vh;
  height: 53vh;
  left: -50vw;
  animation-name: example;
  animation-duration: 14s;
  animation-timing-function: linear;
  animation-iteration-count:infinite;
}
.mouchetteorg:hover{
  animation-play-state: paused;
}

.nathaliemagnan {
  position: absolute;
  top: 25vh;
  height: 53vh;
  left: -50vw;
  animation-name: example;
  animation-duration: 14s;
  animation-timing-function: linear;
  animation-iteration-count:infinite;
}
.nathaliemagnan:hover{
   animation-play-state: paused;
}