/*  create variables for multiple use/references */
:root {
    /* theme colors */   
    --text-gray : #3f4954;
    --text-light: #686666da;
    --bg-color: #0f0f0f;
    --white: #ffffff;
    --midnight: #104f55;
/* sample use: <span class=<?='"lgs l-g'.rand(0,20).'"' ?>><?= substr($par['name'],0,1)?></span>   */
    /* gradient colors   gradients.com */
    /* background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); rename backgrsound-image to sky */
    --sky: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
    --g00: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);

    --selenium: linear-gradient(120deg, #3C3B3F 0%, #605C3C 100%);
    --g01: linear-gradient(120deg, #fc4a1a 0%, #f7b733 100%);

    --sea: linear-gradient(120deg, #f12711 0%, #f5af19 100%);
    --g02: linear-gradient(120deg, #f12711 0%, #f5af19 100%);

    --ocean: linear-gradient(120deg, #009FFF 0%,#ec2F4B 100%);
    --g03: linear-gradient(120deg, #009FFF 0%,#ec2F4B 100%);

    --citrus: linear-gradient(120deg,#FDC830 0%, #F37335 100%);
    --g04: linear-gradient(120deg,#FDC830 0%, #F37335 100%);

    --xpresso: linear-gradient(120deg, #ad5389 0%, #3c1053 100%);
    --g05: linear-gradient(120deg, #ad5389 0%, #3c1053 100%);

    --lust: linear-gradient(120deg, #3c1053 0%,#dd1818 100%);
    --g06: linear-gradient(120deg, #3c1053 0%,#dd1818 100%);

    --tarantado: linear-gradient(120deg,#23074d 0%, #cc5333 100%);
    --g07: linear-gradient(120deg,#23074d 0%, #cc5333 100%);
    
    --purpink: linear-gradient(120deg, #7F00FF 0%,#E100FF 100%);
    --g08: linear-gradient(120deg, #7F00FF 0%,#E100FF 100%);
    
    --grandeur: linear-gradient(120deg, #000046 0%,#1CB5E0 100%);
    --g09: linear-gradient(120deg, #000046 0%,#1CB5E0 100%);

    --darksea: linear-gradient(120deg,#373B44 0%, #4286f4 100%);
    --g10: linear-gradient(120deg,#373B44 0%, #4286f4 100%);

    --sincity: linear-gradient(120deg, #ED213A 0%,#93291E 100%);
    --g11: linear-gradient(120deg, #ED213A 0%,#93291E 100%);

    --redsunset: linear-gradient(120deg, #355C7D 0%,#6C5B7B 50%,#C06C84 100%);
    --g12: linear-gradient(120deg, #355C7D 0%,#6C5B7B 50%,#C06C84 100%);

    --oceanview: linear-gradient(120deg,#a8c0ff 0%, #3f2b96 100%);
    --g13: linear-gradient(120deg,#a8c0ff 0%, #3f2b96 100%);

    --punyeta: linear-gradient(120deg, #108dc7 0%,#ef8e38 100%);
    --g14: linear-gradient(120deg, #108dc7 0%,#ef8e38 100%);

    --orangefun: linear-gradient(120deg, #fc4a1a 0%,#f7b733 100%);
    --g15: linear-gradient(120deg, #fc4a1a 0%,#f7b733 100%);

    --deepspace: linear-gradient(120deg, #000000 0%,#434343 100%);
    --g15: linear-gradient(120deg, #000000 0%,#434343 100%);

    --superman: linear-gradient(120deg, #0099F7 0%,#F11712 100%);
    --g16: linear-gradient(120deg, #0099F7 0%,#F11712 100%);

    --vikings: linear-gradient(120deg, #5614B0 0%,#DBD65C 100%);
    --g17: linear-gradient(120deg, #5614B0 0%,#DBD65C 100%);

    --backfuture: linear-gradient(120deg, #C02425 0%,#F0CB35 100%);
    --g18: linear-gradient(120deg, #C02425 0%,#F0CB35 100%);

    --nightday: linear-gradient(120deg, #2c3e50 0%,#3498db 100%);
    --g19: linear-gradient(120deg, #2c3e50 0%,#3498db 100%);

    --darkknight: linear-gradient(120deg, #BA8B02 0%,#181818 100%);
    --g20: linear-gradient(120deg, #BA8B02 0%,#181818 100%);





    /* theme font-families */
    /* --Abel:'Abel', cursive;
    --Lato: 'Lato',cursive;
    --Monsterrat: 'Montserrat', cursive;
    --Oswald: 'Oswald', cursive;
 */

    /* shadow variable */
    /*--box-shadow: 0 15px 20px rgba(0,0,0,0.5) ;*/
    --box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}


/* formats the first letter of a name*/
.lgs {
    padding: .4rem .7rem;
    border-radius: 50%;
    margin: .2rem .4rem;
    color: white;
}

.l-g0 {
    background: var(--g00);   
}
.l-g1 {
    background: var(--g01);    
}

.l-g2 {
    background: var(--g02);
}

.l-g3 {
    background: var(--g03);
}
.l-g4 {
    background: var(--g04);
}
.l-g5 {
    background: var(--g05);
}
.l-g6 {
    background: var(--g06);
}
.l-g7 {
    background: var(--g07);
}
.l-g8 {
    background: var(--g08);
}
.l-g9 {
    background: var(--g09);
}
.l-g10 {
    background: var(--g10);
}
.l-g11 {
    background: var(--g11);
}
.l-g12 {
    background: var(--g12);
}
.l-g13 {
    background: var(--g13);
}
.l-g14 {
    background: var(--g14);
}
.l-g15 {
    background: var(--g15);
}

.l-g16 {
    background: var(--g16);
}
.l-g17 {
    background: var(--g17);
}
.l-g18 {
    background: var(--g18);
}
.l-g19 {
    background: var(--g19);
}
.l-g20 {
    background: var(--g20);
}