@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{
    padding:0;
    padding-left: 7% ;
    padding-bottom: 3%;
    padding-top: 3%;
    padding-right: 7%;
    filter: contrast(200%);
    
}

a:hover{
    font-style: italic;
    opacity: .6;
    filter: drop-shadow(16px 16px 20px green) invert(75%);


}

p {
     font-size:5vw;
     color: black;
     display: inline;
     justify-content: space-between;     
}

a{
    
    text-decoration: none;
    color: black;
}

#t1{
    font-family: TWISTTYPE ;
    animation: typo 5s 0s ;

}
   
#t2 {
    font-family:DI-DIDOT ;
    animation: typo 5s 0s ;

}
#t3{
    font-family: TRANSITYPE;
    animation: typo 5s 0s ;

} 
#t4{
    font-family: METROPOLIS;
    animation: typo 5s 0s ;

}
#t5{
    font-family: JONQUILLE;
    animation: typo 5s 0s ;

}
#t6{
    font-family: EVENTAIL;
    animation: typo 5s 0s ;

}
#t7{
    font-family: COCON;
    animation: typo 5s 0s ;

}
#t8{
    font-family: ORIGAMI  ;
    animation: typo 5s 0s ;

}
#t9{
    font-family: PROTO ;
    animation: typo 5s 0s ;

}
#t10{
    font-family: PLIFONT  ;
    animation: typo 5s 0s ;

}
#t11{
    font-family: RISE ;
    animation: typo 5s 0s ;
}

#t12{
    font-family: FIRMINIO ;
    animation: typo 5s 0s ;
    

}
@media print {

     @page {
    size: 15cm 21cm ; 
    padding:0;
    }
    
    /* p{
        
        page-break-after: always;
    } */
    
}
@media print {

    @page{
        size: 11cm 20cm;
    }
    
    body {
        /* margin: 2; */
    
        font-family: BONNIE ;
        background-color: white !important;
        font-size: 10pt;
        margin: 1%;
      
    }
    a{
        color: blueviolet;
        font-size: 40pt;

    }
    #span{
        text-align: center;
        margin: 5%;
    }
}

p {
    
    animation-duration: 3s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-direction: alternate;

  }
  
     @keyframes typo {

    30%{
        font-size: 280%;
        filter: blur(5px);
    }


    




    





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

   

}