@font-face {
    font-family: 'apoc';
    src: url('apocthin-webfont.woff2') format('woff2'),
         url('apocthin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'at_apocdark';
    src: url('apocdark-webfont.woff2') format('woff2'),
         url('apocdark-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'at_apocrevelations_italic';
    src: url('apocthinitalic-webfont.woff2') format('woff2'),
         url('apocthinitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body{
  font-family: 'apoc';
  background-color: white;
  height: 200vh;
  font-size: 30pt;
  text-align: left;

}



.test1 {

	font-family: 'apoc';
	position: fixed;
  margin-top:0%;
  left: 1%;
  font-size: 95pt;
  transition: filter .5s;
  -webkit-transition: filter .5s;
  color: red;



}

.test1:hover {


  color: red;
  position: fixed;
  left: 1%;
  transition: filter .5s;
  -webkit-transition: filter .5s;
  margin-top: 0%;
  font-size: 95pt;
 
  font-family: 'at_apocrevelations_italic';

  transition-duration: 3s;

}



.Italie {


  position: absolute;
  top: 100%;
  left: 78%;
  height: 30%;
  width: 20%;


}






.linear-gradient {
  background: linear-gradient(0deg,#FF00FF, transparent);
  width:100%;
  height: 100%;
  top: 100%;
  left: 0px;
  right: 0px;
  margin: none;




}