@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: whitesmoke;
    text-align:justify;
    /* margin-left: 1rem;
    margin-right: 1rem; */
    

}
span {
    font-size:3rem;
    color: black; 
}



a{

    text-decoration: none;
    color: black;
    background: linear-gradient(0deg, rgba(195,34,34,1) 25%, rgba(255,255,255,1) 50%, rgba(255,57,207,1) 85%, rgba(255,28,28,1) 90%, rgba(43,46,137,1) 95%, rgba(45,253,54,1) 100%);

}
a:hover{
    font-style: italic;
    /* background: linear-gradient(0deg, rgba(195,34,34,1) 25%, rgba(255,255,255,1) 50%, rgba(255,57,207,1) 85%, rgba(255,28,28,1) 90%, rgba(43,46,137,1) 95%, rgba(45,253,54,1) 100%); */

    /* filter: drop-shadow(16px 16px 20px red) 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;
    /* display: none; */
}
    
span:nth-of-type(2){
    font-family:REPLI ;

}
span:nth-of-type(3){
    font-family: TRANSITYPE;

}  span:nth-of-type(4){
    font-family: TWIST3;

}
span:nth-of-type(5){
    font-family: TETUE;

}
span:nth-of-type(6){
    font-family: ALOKOS;

}
span:nth-of-type(7){
    font-family: CULMEN;

}
span:nth-of-type(8){
    font-family: META  ;

}
span:nth-of-type(9){
    font-family: LABORYNTHE ;

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

}
span:nth-of-type(11){
    font-family: BONNIE ;

}

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

    }
    30%{
        margin-left:300px;

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

   

}