body{
    background-color: #eee;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}
h1{
    font-size: 22px;
}
a{
    color: #23a6d5;
    text-decoration: none;
    transition: all 300ms ease-out;
}
a:hover{
    color: #24a777;
}
.library{
    text-align: center;
    max-width: 800px;
    margin: 40px auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
.backapps{
    display: block;
    position: fixed;
    text-decoration: none;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    z-index: 10;
}
.backapps::before{
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 10px;
    top: 10px;
    clip-path:polygon(100% 0%, 20% 50%, 100% 100%, 100% 50%);
    background-color: #23a6d5;
    transition: all 500ms ease-out;
}
.backapps:hover::before{
    clip-path:polygon(100% 0%, 0% 50%, 100% 100%, 80% 50%);
    background-color: #24a777;
}
.polygons{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.polygons > div{
    margin: 30px;
    background-color: #47a2da;
    width: 40px;
    height: 40px;
    transition: all 300ms linear;
}
.polygons > .p60{ /* 60% width of 40px */
    width: 24px;
}
.polygons > .p80{ /* 80% width of 40px */
    width: 32px;
}
.polygons > .p120{ /* 120% width of 40px */
    width: 48px;
}
.polygons > .u20{ /* 20% of 40px under baseline */
    position: relative;
    bottom: -8px;
}
.newline{
    display: block;
    width: 100%;
}
.polygons > .bkgimg{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: transparent;
    width: 60px;
    height: 60px;
}


/* gradient background-color animations */

.gradient1{
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient1 6s ease infinite;
}
@keyframes gradient1 {
	0% {
		background-position: 0% 50%;
	}
	50% {
        background-position: 100% 50%;
    }
    55%{
        background-position: 100% 50%;
    }
    60%{
        background-position: 100% 50%;
    }
	100% {
		background-position: 0% 50%;
	}
}

.gradient2{
    background: linear-gradient(0deg, #fcee21, #00ffff, #ffff00, #9cff00);
	background-size: 400% 400%;
	animation: gradient2 6s ease infinite;
}
@keyframes gradient2{
	0% {
		background-position: 0% 0%;
	}
	50% {
        background-position: 0% 100%;
    }
	100% {
		background-position: 0% 0%;
	}
}

/* end gradient background-color animations */


@keyframes varanim {
    0%   {clip-path:polygon(35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%);background-color: #24a777;}
    30%  {clip-path:polygon(35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%);background-color: #24a777;}
    35%  {clip-path:polygon(20% 0%, 50% 30%, 80% 0%, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0% 80%, 30% 50%, 0% 20%);background-color: #cc3333;}
    60%  {clip-path:polygon(20% 0%, 50% 30%, 80% 0%, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0% 80%, 30% 50%, 0% 20%);background-color: #cc3333;}
    65%  {clip-path:polygon(50% 3%, 62% 39%, 100% 39%, 69% 61%, 69% 61%, 81% 97%, 50% 75%, 19% 97%, 31% 61%, 0% 39%, 38% 39%, 38% 39% );background-color: #47a2da;}
    95%  {clip-path:polygon(50% 3%, 62% 39%, 100% 39%, 69% 61%, 69% 61%, 81% 97%, 50% 75%, 19% 97%, 31% 61%, 0% 39%, 38% 39%, 38% 39% );background-color: #23a6d5;}
    100%  {clip-path:polygon(35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%);background-color: #24a777;}
}

.varanim{
    clip-path:polygon(35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%);
    background-color: #24a777;
    animation-name: varanim;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transition: all 300ms ease-out;
}



/* alextade polygone 1 font */
.pfat-a{
    clip-path:polygon(20% 0%, 66% 0%, 80% 14%, 80% 50%, 60% 50%, 60% 20%, 40% 20%, 40% 50%, 80% 50%, 80% 100%, 60% 100%, 60% 70%, 40% 70%, 40% 100%, 20% 100%);
}
.pfat-b{
    clip-path:polygon(20% 0%, 80% 0%, 80% 40%, 60% 40%, 60% 20%, 40% 20%, 40% 40%, 81% 40%, 70% 50%, 80% 60%, 80% 80%, 60% 80%, 60% 60%, 40% 60%, 40% 80%, 80% 80%, 80% 86%, 66% 100%, 20% 100%);
}
.pfat-c{
    clip-path:polygon(20% 0%, 80% 0%, 80% 30%, 60% 30%, 60% 20%, 40% 20%, 40% 80%, 60% 80%, 60% 70%, 80% 70%, 80% 90%, 70% 100%, 20% 100%);
}
.pfat-d{
    clip-path:polygon(20% 0%, 59% 0%, 80% 21%, 80% 80%, 60% 80%, 60% 30%, 51% 20%, 40% 20%, 40% 80%, 80% 80%, 80% 86%, 66% 100%, 20% 100%);
}
.pfat-e{
    clip-path:polygon(20% 0%, 80% 0%, 80% 30%, 60% 30%, 60% 20%, 40% 20%, 40% 40%, 60% 40%, 60% 60%, 40% 60%, 40% 80%, 80% 80%, 80% 100%, 20% 100%);
}
.pfat-f{
    clip-path:polygon(20% 0%, 70% 0%, 80% 10%, 80% 30%, 60% 30%, 60% 20%, 40% 20%, 40% 50%, 60% 50%, 60% 70%, 40% 70%, 40% 100%, 20% 100%);
}
.pfat-g{
    clip-path:polygon(20% 0%, 70% 0%, 80% 10%, 80% 40%, 60% 40%, 60% 20%, 40% 20%, 40% 80%, 60% 80%, 60% 70%, 50% 70%, 50% 50%, 70% 50%, 80% 60%, 80% 100%, 20% 100%);
}
.pfat-h{
    clip-path:polygon(20% 0%, 40% 0%, 40% 50%, 60% 50%, 60% 0%, 80% 0%, 80% 100%, 60% 100%, 60% 70%, 40% 70%, 40% 100%, 20% 100%);
}
.pfat-i{
    clip-path:polygon(33% 0%, 67% 0%, 67% 100%, 33% 100%);
}
.pfat-j{
    clip-path:polygon(60% 0%, 80% 0%, 80% 90%, 70% 100%, 30% 100%, 20% 90%, 20% 60%, 40% 60%, 40% 80%, 60% 80%);
}
.pfat-k{
    clip-path:polygon(17% 0%, 38% 0%, 38% 30%, 58% 30%, 58% 0%, 78% 0%, 78% 30%, 67% 40%, 78% 50%, 78% 90%, 82% 90%, 82% 100%, 58% 100%, 58% 55%, 53% 50%, 37% 50%, 37% 100%, 17% 100%);
}
.pfat-l{
    clip-path:polygon(20% 0%, 40% 0%, 40% 80%, 60% 80%, 60% 60%, 80% 60%, 80% 90%, 70% 100%, 20% 100%);
}
.pfat-m{
    clip-path:polygon(20% 0%, 40% 0%, 50% 10%, 60% 0%, 80% 0%, 80% 101%, 60% 100%, 60% 20%, 50% 30%, 40% 20%, 40% 100%, 20% 100%);
}
.pfat-n{
    clip-path:polygon(20% 0%, 40% 0%, 60% 19%, 60% 0%, 80% 0%, 80% 100%, 60% 100%, 60% 49%, 40% 29%, 40% 100%, 20% 100%);
}
.pfat-o{
    clip-path:polygon(30% 0%, 80% 0%, 80% 80%, 60% 80%, 60% 20%, 40% 20%, 40% 80%, 80% 80%, 80% 100%, 20% 100%, 20% 10%);
}
.pfat-p{
    clip-path:polygon(20% 0%, 59% 0%, 80% 21%, 80% 66%, 66% 80%, 40% 80%, 40% 100%, 20% 100%, 20% 60%, 60% 60%, 60% 30%, 51% 20%, 40% 20%, 40% 60%, 20% 60%);
}
.pfat-q{
    clip-path:polygon(30% 0%, 70% 0%, 80% 10%, 80% 20%, 40% 20%, 40% 70%, 60% 70%, 60% 20%, 80% 20%, 80% 90%, 60% 90%, 60% 100%, 40% 100%, 40% 90%, 20% 90%, 20% 10%);
}
.pfat-r{
    clip-path:polygon(20% 0%, 60% 0%, 80% 20%, 40% 20%, 40% 50%, 60% 50%, 60% 29%, 51% 20%, 80% 20%, 80% 50%, 70% 60%, 80% 70%, 80% 100%, 60% 100%, 60% 70%, 40% 70%, 40% 100%, 20% 100%);
}
.pfat-s{
    clip-path:polygon(20% 0%, 80% 0%, 80% 30%, 60% 30%, 60% 20%, 40% 20%, 40% 40%, 80% 40%, 80% 86%, 66% 100%, 20% 100%, 20% 70%, 40% 70%, 40% 80%, 60% 80%, 60% 60%, 20% 60%);
}
.pfat-t{
    clip-path:polygon(20% 0%, 80% 0%, 80% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 20% 20%);
}
.pfat-u{
    clip-path:polygon(20% 0%, 40% 0%, 40% 80%, 60% 80%, 60% 0%, 81% 0%, 80% 100%, 20% 100%);
}
.pfat-v{
    clip-path:polygon(20% 0%, 40% 0%, 40% 70%, 50% 80%, 60% 70%, 60% 0%, 80% 0%, 80% 80%, 60% 100%, 40% 100%, 20% 80%);
}
.pfat-w{
    clip-path:polygon(20% 0%, 40% 0%, 40% 80%, 50% 70%, 60% 80%, 60% 0%, 80% 0%, 80% 100%, 60% 100%, 50% 90%, 40% 100%, 20% 100%);
}
.pfat-x{
    clip-path:polygon(20% 0%, 40% 0%, 40% 40%, 60% 40%, 60% 0%, 80% 0%, 80% 40%, 70% 50%, 80% 60%, 80% 100%, 60% 100%, 60% 60%, 40% 60%, 40% 100%, 20% 100%, 20% 60%, 30% 50%, 20% 40%);
}
.pfat-y{
    clip-path:polygon(20% 0%, 40% 0%, 40% 40%, 50% 50%, 60% 40%, 60% 1%, 80% 0%, 80% 40%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 20% 40%);
}
.pfat-z{
    clip-path:polygon(20% 0%, 80% 0%, 48% 80%, 80% 80%, 80% 100%, 20% 100%, 52% 20%, 20% 20%);
}
.pfat-0{
    clip-path:polygon(30% 0%, 70% 0%, 80% 10%, 80% 20%, 40% 20%, 40% 80%, 60% 80%, 60% 20%, 80% 20%, 80% 90%, 70% 100%, 30% 100%, 20% 90%, 20% 10%);
}
.pfat-1{
    clip-path:polygon(50% 0%, 70% 0%, 70% 100%, 50% 100%, 50% 20%, 30% 20%);
}
.pfat-2{
    clip-path:polygon(30% 0%, 70% 0%, 80% 10%, 80% 40%, 40% 80%, 80% 80%, 80% 100%, 20% 100%, 20% 70%, 60% 30%, 60% 20%, 40% 20%, 40% 30%, 20% 30%, 20% 10%);
}
.pfat-3{
    clip-path:polygon(30% 0%, 70% 0%, 80% 10%, 80% 40%, 71% 50%, 80% 60%, 80% 90%, 70% 100%, 30% 100%, 20% 90%, 20% 70%, 40% 70%, 40% 80%, 60% 80%, 60% 60%, 40% 60%, 40% 40%, 60% 40%, 60% 20%, 40% 20%, 40% 30%, 20% 30%, 20% 10%);
}
.pfat-4{
    clip-path:polygon(20% 0%, 40% 0%, 40% 40%, 60% 40%, 60% 0%, 80% 0%, 80% 100%, 60% 100%, 60% 60%, 20% 60%);
}
.pfat-5{
    clip-path:polygon(20% 0%, 80% 0%, 80% 20%, 40% 20%, 40% 40%, 70% 40%, 80% 50%, 80% 86%, 66% 100%, 20% 100%, 20% 80%, 60% 80%, 60% 60%, 20% 60%);
}
.pfat-6{
    clip-path:polygon(30% 0%, 80% 0%, 80% 20%, 40% 20%, 40% 40%, 70% 40%, 80% 50%, 80% 60%, 60% 60%, 40% 60%, 40% 80%, 60% 80%, 60% 60%, 80% 60%, 80% 86%, 66% 100%, 30% 100%, 20% 90%, 20% 10%);
}
.pfat-7{
    clip-path:polygon(20% 0%, 80% 0%, 60% 100%, 40% 100%, 48% 60%, 30% 60%, 30% 41%, 52% 40%, 56% 20%, 20% 20%);
}
.pfat-8{
    clip-path:polygon(30% 0%, 70% 0%, 80% 10%, 80% 20%, 80% 40%, 60% 40%, 60% 20%, 40% 20%, 40% 40%, 80% 40%, 71% 50%, 70% 50%, 80% 60%, 40% 60%, 40% 80%, 60% 80%, 60% 60%, 80% 60%, 80% 90%, 70% 100%, 30% 100%, 20% 90%, 20% 60%, 30% 50%, 20% 40%, 20% 10%);
}
.pfat-9{
    clip-path:polygon(30% 0%, 70% 0%, 80% 10%, 80% 20%, 60% 20%, 40% 20%, 40% 40%, 60% 40%, 60% 20%, 80% 20%, 80% 90%, 70% 100%, 30% 100%, 20% 90%, 20% 80%, 60% 80%, 60% 60%, 30% 60%, 20% 50%, 20% 10%);
}
.pfat-qstn{
    clip-path:polygon(34% 0%, 70% 0%, 80% 10%, 80% 40%, 60% 60%, 60% 70%, 40% 70%, 40% 80%, 40% 100%, 60% 100%, 60% 80%, 40% 80%, 40% 60%, 60% 40%, 60% 20%, 40% 20%, 40% 30%, 20% 30%, 20% 14%);
}
.pfat-excl{
    clip-path:polygon(33% 0%, 66% 0%, 66% 60%, 33% 60%, 33% 80%, 66% 80%, 66% 100%, 33% 100%);
}
.pfat-brc1{
    clip-path:polygon(25% 0%, 75% 0%, 75% 20%, 50% 20%, 50% 80%, 75% 80%, 75% 100%, 25% 100%);
}
.pfat-brc2{
    clip-path:polygon(25% 0%, 75% 0%, 75% 100%, 25% 100%, 25% 80%, 50% 80%, 50% 20%, 25% 20%);
}
.pfat-bsls{
    clip-path:polygon(25% 0%, 50% 0%, 75% 100%, 50% 100%);
}
.pfat-fsls{
    clip-path:polygon(50% 0%, 75% 0%, 50% 100%, 25% 100%);
}
.pfat-coln{
    clip-path:polygon(33% 20%, 67% 20%, 67% 40%, 33% 40%, 33% 60%, 67% 60%, 67% 80%, 33% 80%);
}
.pfat-scln{
    clip-path:polygon(33% 20%, 67% 20%, 67% 40%, 33% 40%, 33% 60%, 67% 60%, 67% 80%, 67% 100%, 33% 80%);
}
.pfat-comm{
    clip-path:polygon(33% 60%, 67% 60%, 67% 80%, 67% 100%, 33% 80%);
}
.pfat-perd{
    clip-path:polygon(33% 80%, 67% 80%, 67% 100%, 33% 100%);
}
.pfat-prcn{
    clip-path:polygon(20% 0%, 80% 0%, 80% 100%, 60% 100%, 60% 80%, 80% 80%, 80% 0%, 40% 100%, 20% 100%, 60% 0%, 40% 0%, 40% 20%, 20% 20%);
}
.pfat-attt{
    clip-path:polygon(17% 0%, 83% 0%, 83% 60%, 42% 60%, 42% 30%, 58% 30%, 58% 40%, 66% 40%, 67% 20%, 33% 20%, 33% 80%, 67% 80%, 67% 70%, 83% 70%, 83% 100%, 17% 100%);
}


/* letters examples ALEX TADE */
.tade{
    display: flex;
    margin-top: 50px;
    justify-content: center;
    width: 100%;
}
.tade > div{
    width: 30px;
    height: 30px;
    margin: 3px;
}

/* letter A */
.alpha{
    clip-path:polygon(39% 0%, 61% 0%, 98% 100%, 73% 100%, 50% 29%, 39% 62%, 61% 62%, 67% 82%, 33% 82%, 27% 100%, 2% 100%);
}

/* letter L */
.lamda{
    clip-path:polygon(11% 0%, 38% 0%, 38% 76%, 89% 76%, 89% 100%, 11% 100%);
}

/* letter E */
.epsilon{
    clip-path:polygon(11% 0%, 86% 0%, 86% 24%, 37% 24%, 37% 39%, 77% 39%, 77% 62%, 37% 62%, 37% 76%, 89% 76%, 89% 100%, 11% 100%);
}

/* letter X */
.xi{
    clip-path:polygon(2% 0%, 33% 0%, 50% 29%, 67% 0%, 98% 0%, 68% 50%, 99% 100%, 68% 100%, 50% 70%, 32% 100%, 1% 100%, 32% 50%);
}

/* letter T */
.taf{
    clip-path:polygon(7% 0%, 93% 0%, 93% 24%, 63% 24%, 63% 100%, 37% 100%, 37% 24%, 7% 24%);
}

/* letter D */
.delta{
    clip-path:polygon(6% 0%, 47% 0%, 60% 2%, 76% 10%, 85% 20%, 91% 30%, 93% 40%, 94% 50%, 93% 61%, 91% 70%, 86% 80%, 78% 89%, 70% 94%, 60% 98%, 46% 100%, 6% 100%, 6% 76%, 32% 76%, 46% 76%, 54% 73%, 63% 64%, 66% 54%, 66% 45%, 63% 36%, 55% 27%, 45% 24%, 32% 24%, 32% 76%, 6% 76%);
}

/* lightning strike */
.strike{
    clip-path:polygon(41% 0%, 72% 0%, 55% 34%, 75% 34%, 27% 100%, 44% 49%, 25% 49%);
}

@media all and (max-width: 800px){

    .polygons > div{
        margin: 10px;
        background-color: #47a2da;
        width: 30px;
        height: 30px;
        transition: all 300ms linear;
    }
    h1{
        font-size: 18px;
    }
    body{
        font-size: 14px;
    }
}

@media all and (max-width: 400px){
    .tade > div{
        width: 20px;
        height: 20px;
        margin: 3px;
    }
}