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;
}
.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 minimal bold letters */
.pfat-a{
    clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 60% 100%, 60% 30%, 40% 30%, 40% 50%, 60% 50%, 60% 80%, 40% 80%, 40% 100%, 0% 100%);
}
.pfat-b{
    clip-path:polygon(0% 0%, 100% 0%, 100% 40%, 90% 50%, 100% 60%, 100% 100%, 60% 100%, 60% 20%, 40% 20%, 40% 40%, 60% 40%, 60% 60%, 40% 60%, 40% 80%, 60% 80%, 60% 100%, 0% 100%);
}
.pfat-c{
    clip-path:polygon(0% 0%, 100% 0%, 100% 40%, 40% 40%, 40% 60%, 100% 60%, 100% 100%, 0% 100%);
}
.pfat-d{
    clip-path:polygon(0% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 60% 100%, 60% 50%, 40% 30%, 40% 70%, 60% 50%, 60% 100%, 0% 100%);
}
.pfat-e{
    clip-path:polygon(0% 0%, 100% 0%, 100% 20%, 40% 20%, 40% 40%, 80% 40%, 80% 60%, 40% 60%, 40% 80%, 100% 80%, 100% 100%, 0% 100%);
}
.pfat-f{
    clip-path:polygon(0% 0%, 100% 0%, 100% 20%, 40% 20%, 40% 40%, 80% 40%, 80% 60%, 40% 60%, 40% 100%, 0% 100%);
}
.pfat-g{
    clip-path:polygon(0% 0%, 100% 0%, 100% 20%, 40% 20%, 40% 80%, 80% 80%, 80% 60%, 60% 60%, 60% 40%, 100% 40%, 100% 100%, 0% 100%);
}
.pfat-h{
    clip-path:polygon(0% 0%, 40% 0%, 40% 40%, 60% 40%, 60% 0%, 100% 0%, 100% 100%, 60% 100%, 60% 60%, 40% 60%, 40% 100%, 0% 100%);
}
.pfat-i{
    clip-path:polygon(30% 0%, 70% 0%, 70% 100%, 30% 100%);
}
.pfat-j{
    clip-path:polygon(60% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 60%, 40% 60%, 40% 80%, 60% 80%);
}
.pfat-k{
    clip-path:polygon(0% 0%, 40% 0%, 40% 40%, 60% 40%, 60% 0%, 100% 0%, 100% 40%, 90% 50%, 100% 60%, 100% 100%, 60% 100%, 60% 60%, 40% 60%, 40% 100%, 0% 100%);
}
.pfat-l{
    clip-path:polygon(0% 0%, 40% 0%, 40% 60%, 100% 60%, 100% 100%, 0% 100%);
}
.pfat-m{
    clip-path:polygon(0% 0%, 40% 0%, 50% 10%, 60% 0%, 100% 0%, 100% 100%, 60% 100%, 60% 40%, 50% 50%, 40% 40%, 40% 100%, 0% 100%);
}
.pfat-n{
    clip-path:polygon(0% 0%, 40% 0%, 60% 40%, 60% 0%, 100% 0%, 100% 100%, 60% 100%, 40% 60%, 40% 100%, 0% 100%);
}
.pfat-o{
    clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 60% 100%, 60% 40%, 40% 40%, 40% 60%, 60% 60%, 60% 100%, 0% 100%);
}
.pfat-p{
    clip-path:polygon(0% 0%, 100% 0%, 100% 80%, 40% 80%, 40% 100%, 0% 100%, 0% 50%, 60% 50%, 60% 30%, 40% 30%, 40% 50%, 0% 50%);
}
.pfat-q{
    clip-path:polygon(0% 0%, 100% 0%, 100% 90%, 60% 90%, 60% 35%, 40% 35%, 40% 55%, 60% 55%, 60% 100%, 40% 100%, 40% 90%, 0% 90%);
}
.pfat-r{
    clip-path:polygon(0% 0%, 100% 0%, 100% 40%, 90% 50%, 100% 60%, 100% 100%, 60% 100%, 60% 20%, 40% 20%, 40% 40%, 60% 40%, 60% 60%, 40% 60%, 40% 100%, 0% 100%);
}
.pfat-s{
    clip-path:polygon(0% 0%, 100% 0%, 100% 20%, 40% 20%, 40% 40%, 100% 40%, 100% 100%, 0% 100%, 0% 80%, 60% 80%, 60% 60%, 0% 60%);
}
.pfat-t{
    clip-path:polygon(0% 0%, 100% 0%, 100% 40%, 70% 40%, 70% 100%, 30% 100%, 30% 40%, 0% 40%);
}
.pfat-u{
    clip-path:polygon(0% 0%, 40% 0%, 40% 60%, 60% 60%, 60% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.pfat-v{
    clip-path:polygon(0% 0%, 40% 0%, 40% 60%, 50% 70%, 60% 60%, 60% 0%, 100% 0%, 100% 80%, 80% 100%, 20% 100%, 0% 80%);
}
.pfat-w{
    clip-path:polygon(0% 0%, 40% 0%, 40% 60%, 50% 50%, 60% 60%, 60% 0%, 100% 0%, 100% 100%, 60% 100%, 50% 90%, 40% 100%, 0% 100%);
}
.pfat-x{
    clip-path:polygon(0% 0%, 30% 0%, 50% 20%, 70% 0%, 100% 0%, 100% 30%, 80% 50%, 100% 70%, 100% 100%, 70% 100%, 50% 80%, 30% 100%, 0% 100%, 0% 70%, 20% 50%, 0% 30%);
}
.pfat-y{
    clip-path:polygon(0% 0%, 30% 0%, 50% 20%, 70% 0%, 100% 0%, 100% 30%, 70% 60%, 70% 100%, 30% 100%, 30% 60%, 0% 30%);
}
.pfat-z{
    clip-path:polygon(0% 0%, 100% 0%, 100% 30%, 60% 70%, 100% 70%, 100% 100%, 0% 100%, 0% 70%, 40% 30%, 0% 30%);
}


.pfat-gama{
    clip-path:polygon(0% 0%, 100% 0%, 100% 40%, 40% 40%, 40% 100%, 0% 100%);
}
.pfat-delta{
    clip-path:polygon(30% 0%, 70% 0%, 100% 40%, 100% 100%, 0% 100%, 0% 70%, 70% 70%, 50% 40%, 30% 70%, 0% 70%, 0% 40%);
}
.pfat-theta{
    clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 60% 100%, 60% 20%, 40% 20%, 40% 40%, 60% 40%, 60% 60%, 40% 60%, 40% 80%, 60% 80%, 60% 100%, 0% 100%);
}
.pfat-lamda{
    clip-path:polygon(30% 0%, 70% 0%, 100% 60%, 100% 100%, 70% 100%, 50% 50%, 30% 100%, 0% 100%, 0% 60%);
}
.pfat-ksi{
    clip-path:polygon(0% 0%, 100% 0%, 100% 20%, 0% 20%, 0% 40%, 100% 40%, 100% 60%, 0% 60%, 0% 80%, 100% 80%, 100% 100%, 0% 100%);
}
.pfat-pi{
    clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 60% 100%, 60% 40%, 40% 40%, 40% 100%, 0% 100%);
}
.pfat-sigma{
    clip-path:polygon(0% 0%, 100% 0%, 100% 30%, 50% 30%, 70% 50%, 50% 70%, 100% 70%, 100% 100%, 0% 100%, 0% 70%, 20% 50%, 0% 30%);
}
.pfat-phi{
    clip-path:polygon(35% 0%, 65% 0%, 100% 30%, 100% 60%, 65% 90%, 65% 60%, 80% 45%, 65% 30%, 65% 100%, 35% 100%, 35% 30%, 20% 45%, 35% 60%, 35% 90%, 0% 60%, 0% 30%);
}
.pfat-psi{
    clip-path:polygon(0% 0%, 30% 0%, 30% 50%, 50% 30%, 70% 50%, 70% 0%, 100% 0%, 100% 80%, 65% 80%, 65% 100%, 35% 100%, 35% 80%, 0% 80%);
}
.pfat-omega{
    clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 80%, 100% 80%, 100% 60%, 0% 60%, 0% 40%, 70% 40%, 70% 20%, 30% 20%, 30% 40%, 0% 40%);
}


/* 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;
    }
}