/* PARAMETRE DU TROU */
.hole {
  margin: -100px 0 0 -100px;
  width: 200px;
  height: 200px;
  box-shadow: 0 0 0 9999em #000; 
  border-radius: 90%;
  cursor: pointer;
  position: fixed;
  transition: width .5s ease-in-out, height .5s ease-in-out, margin .5s ease-in-out;
}

/* au clic */
.hole:active {
  margin: -300px 0 0 -300px;
  width: 400px;
  height: 400px;
  transition: width .7s ease-in-out, height 1s ease-in-out, margin 1s ease-in-out;
}

/* bord flou */
.hole:after {
  content: "";
  display: block;
  margin: -200% 0 0 -200%;
  width: 700%;
  height: 700%;
  box-shadow: inset 0 0 10px 50px #000;
  border-radius: 90%;
}

/* Mise en forme du document */
body {
  height: 100%;

  /* Image de fond */ 
  background: url("https://robertmakeev07.github.io/res/images/roberthrihoryan-profile-picture.jpg") no-repeat left top;
  background-size: cover;
  overflow: hidden;
  
  /* Typo */
  font-family: 'Verdana', sans-serif;
  text-align: center;

}
p {
  color: #420000;
  display: inline-block;
  margin: -92px 0 0 -230px;
  width: 460px;
  height: 184px;
  font-size: 100px;
  text-align: center;
  position: absolute;
  top: 20%;
  left: 50%;
  z-index: 5;
}
p span {
  display: block;
  font-size: 50px;
}



html {
  height: 100%;
}

::-moz-selection {
    color: #FFF;
    background: none;
}

::selection {
    color: #FFF;
    background: none;
}