@font-face {
    font-family: 2P ;
    src: url("fonts/2P-TYPE.otf");
}

@font-face {
    font-family: ABISTENCIL;
    src: url("fonts/ABISTENCIL.otf")
   
}
@font-face {
    font-family: ALOKOS;
    src: url("fonts/Alokos.ttf")
   
}
@font-face {
    font-family: BANDTYPE ;
    src: url("fonts/Bandtype.otf")
   
}
@font-face {
    font-family: BOKOOL;
    src: url("fonts/Bokool.otf")
   
}
@font-face {
    font-family: BONNIE;
    src: url("fonts/bonnie\ fini.otf")
   
}
@font-face {
    font-family: CLARON;
    src: url("fonts/Claron.otf")
   
}
@font-face {
    font-family: COCON;
    src: url("fonts/Cocon.ttf")
   
}
@font-face {
    font-family: CULMEN;
    src: url("fonts/Culmen.otf")
   
}
@font-face {
    font-family: DELTA;
    src: url("fonts/Delta\ -\ Camille\ Leroy.otf")
}
@font-face {
    font-family: DI-DIDOT;
    src: url("fonts/Di-didot.otf")
   
}
@font-face {
    font-family: DISASTER;
    src: url("fonts/Disaster.otf")
   
}
@font-face {
    font-family: ECART;
    src: url("fonts/ECART-Bold.otf");
    src: url("fonts/ECART.otf");
}
@font-face {
    font-family: EVENTAIL;
    src: url("fonts/Eventail.otf")
   
}
@font-face {
    font-family: FIRMINIO;
    src: url("fonts/Firminio.otf")
   
}
@font-face {
    font-family: FOONT;
    src: url("fonts/FOONT4Regular.otf")
   
}
@font-face {
    font-family: GARAMOND;
    src: url("fonts/GaramondFantasy.otf")
   
}
@font-face {
    font-family: GOTHSTRIPE;
    src: url("fonts/GothStripe-Regular.otf")
   
}
@font-face {
    font-family: JONQUILLE;
    src: url("fonts/JONQUILLE-REGULAR.OTF")

}

    @font-face {
        font-family: KRYPTEIN;
        src: url("fonts/Kryptein-Roman.otf")

}

@font-face {
    font-family: KUREAD;
    src: url("fonts/KuRead.otf")

}

@font-face {
    font-family: LABORYNTHE;
    src: url("fonts/Laborinthe.otf")

}

@font-face {
    font-family: LABPIX;
    src: url("fonts/Labpix\ Mayuri.otf")

}

@font-face {
    font-family: CENTAUR;
    src: url("fonts/LaCentaurCornue.otf")

}

@font-face {
    font-family: LATOTALE;
    src: url("fonts/LaTotale.otf")

}

@font-face {
    font-family: LINK;
    src: url("fonts/LINK.otf")

}

@font-face {
    font-family: META;
    src: url("fonts/Meta-Meta.otf")

}

@font-face {
    font-family: METROPOLIS;
    src: url("fonts/Metropolis.ttf")

}

@font-face {
    font-family: MORSICA;
    src: url("fonts/Morsica.otf")

}

@font-face {
    font-family: OCLOCK;
    src: url("fonts/O_clock-Regular.otf")

}

@font-face {
    font-family: ONDULES;
    src: url("fonts/Ondules.otf")

}

@font-face {
    font-family: ORIGAMI;
    src: url("fonts/Origami.otf")

}

@font-face {
    font-family: PETROL;
    src: url("fonts/PETROL-Regular.otf")

}

@font-face {
    font-family: PIXANE;
    src: url("fonts/pixane-Regular.otf")

}

@font-face {
    font-family: PLIADE;
    src: url("fonts/Pliade-Regular.otf")

}

@font-face {
    font-family: PLIFONT;
    src: url("fonts/plifont_LELEU_Camille.otf")

}

@font-face {
    font-family: PROTO;
    src: url("fonts/Proto.ttf")

}

@font-face {
    font-family: REPLI;
    src: url("fonts/Repli-LH.otf")

}

@font-face {
    font-family: RISE;
    src: url("fonts/Rise.otf")

}

@font-face {
    font-family: RUINES;
    src: url("fonts/Ruines.otf")

}

@font-face {
    font-family: SANSNOM;
    src: url("fonts/sans\ nom2.otf")

}

@font-face {
    font-family: SATIN;
    src: url("fonts/SATIN-Regular.otf")

}

@font-face {
    font-family: SILEX;
    src: url("fonts/SILEX.otf")

}

@font-face {
    font-family: SOPHIE;
    src: url("fonts/Sophie.otf")

}

@font-face {
    font-family: TETUE;
    src: url("fonts/Tetue-Regular.otf")

}

@font-face {
    font-family: TIMELESS;
    src: url("fonts/Timeless.otf")

}

@font-face {
    font-family: TRANSITYPE;
    src: url("fonts/Transitype.otf")

}

@font-face {
    font-family: TWIST3;
    src: url("fonts/Twist3.otf")

}

@font-face {
    font-family: TWISTTYPE;
    src: url("fonts/TWISTTYPE.otf")

}

@font-face {
    font-family: Yingsi;
    src: url("fonts/Yingzi.otf")

}


body{
    background-color: yellow;
    text-align: center;
    /* margin-left: 1rem;
    margin-right: 1rem; */
    
        padding:0;
        padding-left: 7% ;
        padding-bottom: 3%;
        padding-top: 3%;
        padding-right: 7%;
        filter: contrast(200%);
        
    
}
span {
    font-size:3rem;
    color: black;
   
}
a{
    
    text-decoration: none;
    color: black;
}
a:hover{
    font-style: italic;
    opacity: .6;
    /* background-color: blue; */
    /* filter: drop-shadow(16px 16px 20px blue) invert(75%); */


}
#test{
    width: 10vw;
    height: 10%;
    background-color:red !important;
    opacity: 1;
    display: none;
    position: absolute;
    top:0;
    left: 0;
    animation: move .5s ease-in 0s infinite ;
    border-radius: 60%;

   
    
}
#martine:hover ~ #test{
    display: block;
    

    
}


/* #fond:hover ~ #liens{
    background-color: blue !important;
} */

span:nth-of-type(1){
    font-family: ABISTENCIL;
    animation: typo 5s 0s ;
    /* display: none; */
}
    
span:nth-of-type(2){
    font-family:REPLI ;
    animation: typo 10s 0s ;

}
span:nth-of-type(3){
    font-family: TRANSITYPE;
    animation: typo 5s 0s;
   

}  span:nth-of-type(4){
    font-family: TWIST3;
    animation: typo 2s 0s ;

}
span:nth-of-type(5){
    font-family: TETUE;
    animation: typo 5s 0s ;

}
span:nth-of-type(6){
    font-family: ALOKOS;
    animation: typo 10s 0s ;

}
span:nth-of-type(7){
    font-family: CULMEN;
    animation: typo 5s 0s ;

}
span:nth-of-type(8){
    font-family: META  ;
    animation: typo 8s 0s ;

}
span:nth-of-type(9){
    font-family: LABORYNTHE ;
    animation: typo 4s 0s ;

}
span:nth-of-type(10){
    font-family: BANDTYPE  ;
    animation: typo 8s 0s ;

}
span:nth-of-type(11){
    font-family: BONNIE ;
    animation: typo 10s 0s ;
    

}

/* span{
     
        animation-duration: 3s;
        animation-name: slidein;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      
} */

@keyframes typo {
    
    /* from{ color: black;

    }
    to{ 
        margin-right:100px;

    } */
    10%{
        top:200px;
        filter: blur(5px);
        opacity: .2;
        /* background-color: yellowgreen; */
    }
    20%{
        left:300px;
        opacity: .5;
        /* background-color: blue; */
    }
    40%{
        top:900px;
        opacity: .7;
        
    }
    80%{
        opacity: 1;
    }

}
/* @keyframes typ {
    from
    
}
@keyframes typo2 {
    19%{
        margin-top:200px;
        filter: hue-rotate();

    }
    30%{
        margin-right:100px;

    } */
}
/* @keyframes move {
    1%{
        top:200px;
        background-color: blueviolet;

    }
    30%{
        left:300px;
        background-color: blueviolet;
    }
    80%{
        top:900px;
        background-color:yellow;
    }
    
    
} */
    
@media print {
    /* @page {
    size: 10cm 5cm; 
    }
    @page:left {
        size: 10cm 10cm; 
    } */
    p{
        color: green;
        page-break-after: always;
    }
    span:nth-of-type(1){
    font-family: ABISTENCIL;
    display: block;
}
} 




/* SMARTPHONE MODE PORTRAIT */
@media screen and (orientation: portrait) {

   

}