@font-face {
    font-family: 'Cascadia';
    src: url('../fonts/Cascadia.ttf');
}
@font-face {
    font-family: 'Roboto Slab';
    src: url('../fonts/RobotoSlab.ttf');
}
@font-face {
    font-family: 'Hammersmith One';
    src: url('../fonts/HammersmithOne.ttf');
}
@font-face {
    font-family: 'Dosis';
    src: url('../fonts/Dosis.ttf');
}
@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald.ttf');
}
@font-face {
    font-family: 'Cornerstone';
    src: url('../fonts/Cornerstone.ttf');
}
@font-face {
    font-family: 'Exo2';
    src: url('../fonts/Exo2.ttf');
}
@font-face {
    font-family: 'Clanderon';
    src: url('../fonts/Clanderon/Clarendon-Regular.ttf');
}
@font-face {
    font-family: 'din';
    src: url('../fonts/DIN/DIN.ttf');
}
@font-face {
    font-family: 'EB Garamond';
    src: url('../fonts/EB_Garamond/EBGaramond-Regular.ttf');
}
@font-face {
    font-family: 'IBM plex sans';
    src: url('../fonts/IBM_Plex_Sans/IBMPlexSans-Regular.ttf');
}
@font-face {
    font-family: 'uni sans';
    src: url('../fonts/Uni_Sans/Uni_Sans_Thin.otf');
}
@font-face {
    font-family: 'noto sans';
    src: url('../fonts/NotoSansRegular.ttf');
}
@font-face {
    font-family: 'aldrich';
    src: url('../fonts/aldrich/v17/MCoTzAn-1s3IGyJMVacY3w.woff2');
}
@font-face {
    font-family: 'alata';
    src: url('../fonts/alata/v9/PbytFmztEwbIoce9zqY.woff2');
}
@font-face {
    font-family: 'alatsi';
    src: url('../fonts/alatsi/v9/TK3iWkUJAxQ2nLN2GT8G.woff2');
}
@font-face {
    font-family: 'abeezee';
    src: url('../fonts/abeezee/v22/esDR31xSG-6AGleN2tWkkA.woff2');
}


:root{
    /* Fonts : */



    /* Colors : */
    --navbar : #1D267D;
    --text1 : #0C134F;
    --text2 : #080202;
    --bg1 : #5C469C;
    --bg1-t : #5c469cb8;
    --bg2 : #D4ADFC;


    /* Gradients : */
    --bgGradient1: linear-gradient(45deg, rgba(2,0,36,1) 1%, rgba(10,39,82,1) 27%, rgba(13,57,83,1) 53%, rgba(1,117,157,1) 100%);
    --bgGradient2: linear-gradient(35deg, #020024 0%, #090979 35%, #00d4ff 100%);
    --bgGradient3: linear-gradient(-45deg, rgba(13,57,83,1) 0%, rgba(66,55,72,1) 24%, rgba(91,54,67,1) 40%, rgba(129,53,59,1) 61%, rgba(175,50,50,1) 89%);
    --bgGradient4: linear-gradient(51deg, rgba(13,57,83,1) 0%, rgba(59,91,54,1) 50%, rgba(170,117,19,1) 100%);
    --btnGradient1: linear-gradient(315deg, rgba(121,95,9,1) 0%, rgba(255,235,0,1) 100%);
    --gradient4: linear-gradient();
    --gradient5: linear-gradient();
}

body{
    min-height: 100vh;
}

.bg-nav{
    background-color: var(--navbar);
    transition: background-color .5s ease-in-out;
}

.bg-col1{
    background-color: var(--bg1);
}
.bg-col2{
    background-color: var(--bg2);
}
.text-col1{
    color: var(--text1);
}
.text-col2{
    color: var(--text2);
}


/* Fonts Classes */
.cascadia{
    font-family: 'Cascadia';
}
.cornerstone{
    font-family: 'Cornerstone';
}
.dosis{
    font-family: 'Dosis';
}
.exo2{
    font-family: 'Exo2';
}
.hammersmithOne{
    font-family: 'Hammersmith One';
}
.oswald{
    font-family: 'Oswald';
}
.robotoSlab{
    font-family: 'Roboto Slab';
} 
.clanderon{
    font-family: 'clanderon';
} 
.din{
    font-family: 'din';
} 
.eb-garamond{
    font-family: 'EB Garamond';
} 
.ibm-plex-sans{
    font-family: 'IBM plex Sans';
} 
.uni-sans{
    font-family: 'uni sans';
}   
.noto-sans{
    font-family: 'noto sans';
}
.aldrich{
    font-family: 'aldrich';
}
.alata{
    font-family: 'alata';
}
.alatsi{
    font-family: 'alatsi';
}
.abeezee{
    font-family: 'abeezee';
}        

/* Gradient */

.bg-gradient1{
    background-image: var(--bgGradient1);
    background-size: 300%;
    animation: animate-bg-gradient2 10s ease-out infinite alternate;
}

.bg-gradient1-rev{
    background-image: var(--bgGradient1);
    background-size: 300%;
    animation: animate-bg-gradient2 15s ease-out infinite alternate-reverse;
}

.bg-gradient2{
    background-image: var(--bgGradient2);
    background-size: 300%;
    background-repeat: no-repeat;
    animation: animate-bg-gradient 20s ease-out infinite alternate;
}

.btn-gradient2{
    background-image: var(--bgGradient2);
    background-size: 300%;
    background-repeat: no-repeat;
    animation: animate-bg-gradient 20s ease-out infinite alternate-reverse;
}
/* .btn-gradient2:active,.btn-gradient3:active{
    background: none;
} */

.btn-gradient1{
    background-image: var(--bgGradient1);
    background-size: 300%;
    background-repeat: no-repeat;
    animation: animate-bg-gradient 20s ease-out infinite alternate-reverse;
}

.bg-gradient3{
    background-image: var(--bgGradient3);
    background-size: 300%;
    background-repeat: no-repeat;
    animation: animate-bg-gradient 10s ease-out infinite alternate;

}

.bg-gradient4{
    background-image: var(--bgGradient4);
    background-size: 300%;
    background-repeat: no-repeat;
    animation: animate-bg-gradient 20s ease-out infinite alternate;
}

@keyframes animate-bg-gradient{
    0%{
        background-position: bottom left;
    }    
    100%{
        background-position: center;
    }    
}

@keyframes animate-bg-gradient2{
    0%{
        background-position: bottom left;
    }    
    100%{
        background-position: top right;
    }    
}