@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;
}
span {
    font-size:3rem;
    color: black;
   
}
a{
    
    text-decoration: none;
    color: black;
}
a:hover{
    font-style: italic;
    /* 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 25s 0s infinite;
    /* display: none; */
}
    
span:nth-of-type(2){
    font-family:REPLI ;
    animation: typ 30s 0s infinite;

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

}  span:nth-of-type(4){
    font-family: TWIST3;
    animation: typo2 10s 0s infinite;

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

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

}
span:nth-of-type(7){
    font-family: CULMEN;
    animation: typ 10s 0s infinite;

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

}
span:nth-of-type(9){
    font-family: LABORYNTHE ;
    animation: typo2 10s 0s infinite;

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

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

}

@keyframes typo {
    19%{
        margin-top:200px;
        filter: hue-rotate();
        

    }
    30%{
        margin-left:100px;
       

    }
}
@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) {

   

}