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;
    width: 40px;
    height: 40px;
    position: relative;
}
.polygons > div::after{
    content: " ";
    display: block;
    background-color: #47a2da;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 300ms linear;
}
.newline{
    display: block;
    width: 100%;
}
.polygons > .bkgimg::after{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: transparent;
}


/* gradient background-color animations */

.gradient1::after{
    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::after{
    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::after{
    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;
}

/* download icon */
.download::after{
    clip-path:polygon(40% 0%, 60% 0%, 60% 40%, 80% 40%, 50% 81%, 50% 90%, 100% 90%, 100% 100%, 0% 100%, 0% 90%, 50% 90%, 50% 81%, 20% 40%, 40% 40%);
}

@keyframes xtotickanim{
    0%   {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;}
    45%  {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;}
    50%  {clip-path:polygon(16% 41%, 16% 41%, 36% 61%, 36% 61%, 84% 13%, 84% 13%, 99% 28%, 99% 28%, 36% 91%, 36% 91%, 1% 56%, 1% 56%);background-color: #24a777;}
    95%  {clip-path:polygon(16% 41%, 16% 41%, 36% 61%, 36% 61%, 84% 13%, 84% 13%, 99% 28%, 99% 28%, 36% 91%, 36% 91%, 1% 56%, 1% 56%);background-color: #24a777;}
    100%  {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;}
}
.xtotickanim{
    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%);
    animation-name: xtotickanim;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transition: all 300ms ease-out; 
}

/* plus sign */
.plus::after{
    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%);
}

/* plus sign 2 */
.plus2::after{
    clip-path:polygon(48% 0%, 52% 0%, 52% 48%, 100% 48%, 100% 52%, 52% 52%, 52% 100%, 48% 100%, 48% 52%, 0% 52%, 0% 48%, 48% 48%);
}

/* x sign 1 */
.xsign::after{
    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%);
}

/* navicon */
.navicon::after{
    clip-path:polygon(0% 5%, 100% 5%, 100% 15%, 0% 15%, 0% 45%, 100% 45%, 100% 55%, 0% 55%, 0% 85%, 100% 85%, 100% 95%, 0% 95%);
}

/* x sign 2 */
.xsign2::after{
    clip-path:polygon(18% 11%, 50% 43%, 82% 11%, 89% 18%, 57% 50%, 89% 82%, 82% 89%, 50% 57%, 18% 89%, 11% 82%, 43% 50%, 11% 18%);
}

/* x sign 3 */
.xsign3::after{
    clip-path:polygon(5% 10%, 10% 5%, 50% 45%, 90% 5%, 95% 10%, 55% 50%, 95% 90%, 90% 95%, 50% 55%, 10% 95%, 5% 90%, 45% 50%);
}

.navanim{
    cursor: pointer;
}
.navanim::after{
    clip-path:polygon(0% 5%, 100% 5%, 100% 15%, 0% 15%, 0% 45%, 100% 45%, 100% 55%, 0% 55%, 0% 85%, 100% 85%, 100% 95%, 0% 95%);
    transition: all 300ms ease-out; 
}
.navanim:hover::after{
    clip-path:polygon(18% 11%, 50% 43%, 82% 11%, 89% 18%, 57% 50%, 89% 82%, 82% 89%, 50% 57%, 18% 89%, 11% 82%, 43% 50%, 11% 18%);
    background-color: #cc3333;
}


/* star */
.star::after{
    clip-path:polygon(50% 3%, 62% 39%, 100% 39%, 69% 61%, 81% 97%, 50% 75%, 19% 97%, 31% 61%, 0% 39%, 38% 39%);
}

/* arrow a animation*/
@keyframes arrowanim{
    0%   {clip-path:polygon(6% 0%, 51% 0%, 97% 50%, 51% 100%, 6% 100%, 52% 50%);}
    20%   {clip-path:polygon(6% 0%, 51% 0%, 97% 50%, 51% 100%, 6% 100%, 52% 50%);}
    25%  {clip-path:polygon(51% 0%, 95% 0%, 49% 50%, 95% 100%, 51% 100%, 6% 50%);}
    45%  {clip-path:polygon(51% 0%, 95% 0%, 49% 50%, 95% 100%, 51% 100%, 6% 50%);}
    50%  {clip-path:polygon(50% 5%, 100% 52%, 100% 95%, 50% 49%, 0% 95%, 0% 52%);}
    70%  {clip-path:polygon(50% 5%, 100% 52%, 100% 95%, 50% 49%, 0% 95%, 0% 52%);}
    75%  {clip-path:polygon(0% 5%, 50% 51%, 100% 5%, 100% 49%, 50% 95%, 0% 49%);}
    95%  {clip-path:polygon(0% 5%, 50% 51%, 100% 5%, 100% 49%, 50% 95%, 0% 49%);}
    100%   {clip-path:polygon(6% 0%, 51% 0%, 97% 50%, 51% 100%, 6% 100%, 52% 50%);}
}
.arrowanim::after{
    animation-name: arrowanim;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transition: all 300ms ease-out; 
}

/* arrow a 1 to right */
.arrow1a::after{
    clip-path:polygon(6% 0%, 51% 0%, 97% 50%, 51% 100%, 6% 100%, 52% 50%);
}

/* arrow a 2 to left */
.arrow2a::after{
    clip-path:polygon(51% 0%, 95% 0%, 49% 50%, 95% 100%, 51% 100%, 6% 50%);
}

/* arrow a 3 to top */
.arrow3a::after{
    clip-path:polygon(50% 5%, 100% 52%, 100% 95%, 50% 49%, 0% 95%, 0% 52%);
}

/* arrow a 4 to bottom */
.arrow4a::after{
    clip-path:polygon(0% 5%, 50% 51%, 100% 5%, 100% 49%, 50% 95%, 0% 49%);
}

/* arrow b 1 to left */
.arrow1b::after{
    clip-path:polygon(5% 42%, 67% 42%, 54% 29%, 64% 19%, 94% 50%, 64% 82%, 54% 72%, 67% 58%, 5% 58%);
}

/* arrow c 1 to bottom */
.arrow1c::after{
    clip-path:polygon(47% 0%, 53% 0%, 53% 90%, 95% 47%, 99% 51%, 50% 100%, 2% 51%, 5% 47%, 47% 90%);
}

/* arrow d 1 to right */
.polygons .arrow1d::after{
    clip-path:polygon(0% 14%, 14% 7%, 100% 50%, 13% 93%, 0% 86%, 73% 50%);
    width: 20px;
}

/* arrow e 1 to bottom */
.polygons .arrow1e::after{
    clip-path:polygon(0% 0%, 100% 0%, 50% 100%);
    width: 16px;
    height: 9px;
}

/* arrow f 1 to bottom */
.arrow1f::after{
    clip-path: polygon(32% 0%,80% 50%,32% 100%,20% 87%,56% 50%,20% 13%);
}

/* tickmark */
.tickmark::after{
    clip-path:polygon(16% 41%, 36% 61%, 84% 13%, 99% 28%, 36% 91%, 1% 56%);
}

/* home icon */
.home::after{
    clip-path:polygon(50% 11%, 66% 24%, 66% 16%, 80% 16%, 80% 36%, 98% 51%, 83% 51%, 83% 90%, 59% 90%, 59% 68%, 41% 68%, 41% 90%, 17% 90%, 17% 51%, 3% 51%);
}

/* talk ballon */
.talk::after{
    clip-path:polygon(0% 10%, 100% 10%, 100% 75%, 49% 75%, 27% 94%, 27% 75%, 0% 75%);
}

/* smartphone */
.mobile::after{
    clip-path:polygon(27% 0%, 73% 0%, 76% 2%, 77% 5%, 77% 95%, 76% 98%, 73% 100%, 27% 100%, 24% 98%, 23% 95%, 23% 84%, 50% 84%, 50% 89%, 46% 89%, 46% 94%, 54% 94%, 54% 89%, 46% 89%, 50% 84%, 73% 84%, 73% 15%, 27% 15%, 27% 84%, 23% 84%, 23% 5%, 24% 2%);
}

/* space invader */
.polygons .space-invader1::after{
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: invader 6s ease infinite;
    clip-path:polygon(18% 17%, 27% 17%, 27% 26%, 36% 26%, 36% 33%, 64% 33%, 64% 26%, 73% 26%, 73% 17%, 82% 17%, 82% 26%, 73% 26%, 73% 33%, 81% 33%, 81% 42%, 63% 42%, 63% 50%, 74% 50%, 74% 42%, 92% 42%, 92% 26%, 100% 26%, 100% 50%, 91% 50%, 91% 58%, 82% 58%, 82% 76%, 91% 76%, 91% 83%, 74% 83%, 74% 67%, 27% 67%, 27% 83%, 9% 83%, 9% 76%, 18% 76%, 18% 58%, 9% 58%, 9% 50%, 0% 50%, 0% 26%, 9% 26%, 9% 42%, 18% 42%, 18% 34%, 27% 34%, 27% 50%, 37% 50%, 37% 42%, 27% 42%, 27% 26%, 18% 26%);
}
@keyframes invader {
	0% {
		background-position: 0% 50%;
	}
	50% {
        background-position: 100% 50%;
        clip-path:polygon(18% 17%, 27% 17%, 27% 26%, 36% 26%, 36% 33%, 64% 33%, 64% 26%, 73% 26%, 73% 17%, 82% 17%, 82% 26%, 73% 26%, 73% 33%, 81% 33%, 81% 42%, 63% 42%, 63% 50%, 74% 50%, 74% 42%, 92% 42%, 92% 26%, 100% 26%, 100% 50%, 91% 50%, 91% 58%, 82% 58%, 82% 76%, 91% 76%, 91% 83%, 74% 83%, 74% 67%, 27% 67%, 27% 83%, 9% 83%, 9% 76%, 18% 76%, 18% 58%, 9% 58%, 9% 50%, 0% 50%, 0% 26%, 9% 26%, 9% 42%, 18% 42%, 18% 34%, 27% 34%, 27% 50%, 37% 50%, 37% 42%, 27% 42%, 27% 26%, 18% 26%);
    }
    55%{
        background-position: 100% 50%;
        clip-path:polygon(18% 17%, 27% 17%, 27% 26%, 36% 26%, 36% 33%, 64% 33%, 64% 26%, 73% 26%, 73% 17%, 82% 17%, 82% 26%, 73% 26%, 73% 33%, 81% 33%, 81% 42%, 74% 42%, 74% 50%, 74% 50%, 74% 42%, 92% 42%, 92% 26%, 100% 26%, 100% 50%, 91% 50%, 91% 58%, 82% 58%, 82% 76%, 91% 76%, 91% 83%, 74% 83%, 74% 67%, 27% 67%, 27% 83%, 9% 83%, 9% 76%, 18% 76%, 18% 58%, 9% 58%, 9% 50%, 0% 50%, 0% 26%, 9% 26%, 9% 42%, 18% 42%, 18% 34%, 27% 34%, 27% 50%, 37% 50%, 37% 42%, 27% 42%, 27% 26%, 18% 26%);
    }
    60%{
        clip-path:polygon(18% 17%, 27% 17%, 27% 26%, 36% 26%, 36% 33%, 64% 33%, 64% 26%, 73% 26%, 73% 17%, 82% 17%, 82% 26%, 73% 26%, 73% 33%, 81% 33%, 81% 42%, 63% 42%, 63% 50%, 74% 50%, 74% 42%, 92% 42%, 92% 26%, 100% 26%, 100% 50%, 91% 50%, 91% 58%, 82% 58%, 82% 76%, 91% 76%, 91% 83%, 74% 83%, 74% 67%, 27% 67%, 27% 83%, 9% 83%, 9% 76%, 18% 76%, 18% 58%, 9% 58%, 9% 50%, 0% 50%, 0% 26%, 9% 26%, 9% 42%, 18% 42%, 18% 34%, 27% 34%, 27% 50%, 37% 50%, 37% 42%, 27% 42%, 27% 26%, 18% 26%);
        background-position: 100% 50%;
    }
	100% {
		background-position: 0% 50%;
	}
}

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

/* question mark */
.question::after{
    clip-path:polygon(25% 0%, 78% 0%, 85% 8%, 85% 46%, 82% 52%, 63% 62%, 63% 100%, 40% 100%, 40% 79%, 63% 79%, 63% 68%, 40% 68%, 40% 52%, 44% 47%, 62% 37%, 62% 23%, 40% 23%, 40% 34%, 18% 34%, 17% 10%);
}

/* number 1 */
.one::after{
    clip-path:polygon(53% 0%, 72% 0%, 72% 100%, 48% 100%, 48% 28%, 33% 40%, 22% 22%);
}

/* mouse pointer */
.pointer::after{
    clip-path:polygon(18% 0%, 82% 58%, 52% 62%, 69% 96%, 63% 100%, 45% 65%, 23% 88%);
}

/* send message */
.send::after{
    clip-path:polygon(0% 0%, 100% 50%, 0% 100%, 15% 57%, 80% 50%, 15% 43%);
}

/* ribbon */
.ribbon::after{
    clip-path:polygon(38% 0%, 50% 4%, 63% 0%, 70% 11%, 82% 15%, 82% 28%, 89% 38%, 82% 49%, 82% 62%, 70% 65%, 70% 100%, 50% 86%, 30% 100%, 30% 65%, 18% 61%, 18% 49%, 11% 38%, 18% 28%, 18% 15%, 30% 11%);
}

/* arrow 3 */
.arrow3{
    cursor: pointer;
}
.polygons > .arrow3::after{
    clip-path: polygon(6% 44%,67% 44%,61% 26%,63% 18%,73% 50%,63% 82%,61% 74%,67% 54%,6% 54%);
    width: 42px;
    height: 14px;
}
.polygons > .arrow3:hover::after{
    clip-path: polygon(6% 44%,87% 44%,81% 26%,83% 18%,93% 50%,83% 82%,81% 74%,87% 54%,6% 54%);
}

/* arrow 4 */
.arrow4{
    cursor: pointer;
}
.polygons > .arrow4::after{
    clip-path:polygon(0% 49%, 88% 49%, 71% 1%, 72% 0%, 90% 50%, 72% 100%, 71% 99%, 88% 51%, 0% 51%);
    width: 44px;
    height: 20px;
}
.polygons > .arrow4:hover::after{
    clip-path:polygon(0% 49%, 98% 49%, 81% 1%, 82% 0%, 100% 50%, 82% 100%, 81% 99%, 98% 51%, 0% 51%);
}

/* arrow 5 */
.polygons > .arrow5::after{
    clip-path: polygon(30% 5%, 95% 5%, 95% 70%, 87% 70%, 87% 19%, 9% 97%, 4% 91%, 82% 13%, 30% 13%);
}

/* arrow 6 */
.arrow6{
    cursor: pointer;
}
.polygons > .arrow6::after{
    clip-path:polygon(0% 49%, 85% 49%, 57% 20%, 59% 18%, 90% 50%, 58% 82%, 56% 80%, 85% 52%, 0% 52%);
}
.polygons > .arrow6:hover::after{
    clip-path:polygon(0% 49%, 95% 49%, 67% 20%, 69% 18%, 100% 50%, 68% 82%, 66% 80%, 95% 52%, 0% 52%);
}

/* download 2*/
.download2{
    cursor: pointer;
}
.download2::after{
    clip-path: polygon(20% 44%,23% 40%,47% 64%,47% 10%,53% 10%,53% 64%,77% 40%,80% 44%,50% 74%,20% 44%,15% 88%,85% 88%,85% 93%,15% 93%,15% 88%);
}
.download2:hover::after{
    clip-path: polygon(20% 54%,23% 50%,47% 74%,47% 20%,53% 20%,53% 74%,77% 50%,80% 54%,50% 84%,20% 54%,15% 88%,85% 88%,85% 93%,15% 93%,15% 88%);
}

/* goback */
.goback{
    cursor: pointer;
}
.goback::after{
    clip-path: polygon(100% 0%, 20% 50%, 100% 100%, 100% 50%);
}
.goback:hover::after{
    clip-path: polygon(100% 0%, 0% 50%, 100% 100%, 80% 50%);
    background-color: #24a777;
}

/* goback 2*/
.goback2{
    cursor: pointer;
}
.polygons > .goback2::after{
    clip-path:polygon(20% 50%, 40% 26%, 42% 32%, 30% 47%, 100% 47%, 100% 53%, 30% 53%, 42% 68%, 40% 73%);
    height: 20px;
}
.goback2:hover::after{
    clip-path:polygon(0% 50%, 20% 26%, 22% 32%, 10% 47%, 100% 47%, 100% 53%, 10% 53%, 22% 68%, 20% 73%);
}

    

/* keyhole */
.polygons .keyhole{
    clip-path:polygon(50% 0%, 60% 2%, 70% 10%, 75% 20%, 76% 30%, 71% 42%, 64% 48%, 73% 100%, 27% 100%, 36% 48%, 29% 42%, 24% 30%, 25% 20%, 30% 10%, 40% 2%);
    background-image: url(keyhole.jpg);
    background-size: 300%;
    animation: keyhole 10s ease infinite;
    animation-direction: alternate;
}

@keyframes keyhole {
	0% {
		background-position: 10% 55%;
	}
	20% {
        background-position: 7% 45%;
    }
    40%{
        background-position: 13% 50%;
    }
    60%{
        background-position: 60% 35%;
    }
	80% {
		background-position: 80% 30%;
    }
    100% {
		background-position: 85% 50%;
	}
}

/* window */
.window::after{
    clip-path:polygon(10% 55%, 10% 10%, 45% 10%, 45% 45%, 10% 45%, 10% 55%, 10% 90%, 45% 90%, 45% 55%, 10% 55%, 55% 55%, 55% 90%, 90% 90%, 90% 55%, 55% 55%, 55% 45%, 90% 45%, 90% 10%, 55% 10%, 55% 55%);
    background-image: url(window.jpg);
    width: 50px;
    height: 50px;
}

/* mail */
.mail::after{
    clip-path:polygon(5% 19%, 95% 19%, 50% 51%, 5% 19%, 0% 23%, 50% 59%, 100% 23%, 100% 81%, 0% 81%, 0% 23%);
}

.mailanim::after{
    clip-path:polygon(5% 29%, 95% 29%, 50% 61%, 5% 29%, 0% 33%, 50% 69%, 100% 33%, 100% 91%, 0% 91%, 0% 33%);
    animation: mailanim 1s ease infinite;
    animation-direction: alternate;
}

@keyframes mailanim {
	0% {
		clip-path:polygon(5% 29%, 95% 29%, 50% 61%, 5% 29%, 0% 33%, 50% 69%, 100% 33%, 100% 91%, 0% 91%, 0% 33%);
    }
    10% {
        clip-path:polygon(5% 29%, 95% 29%, 50% 55%, 5% 29%, 0% 33%, 50% 69%, 100% 33%, 100% 91%, 0% 91%, 0% 33%);
    }
	20% {
        clip-path:polygon(5% 29%, 95% 29%, 50% 50%, 5% 29%, 0% 33%, 50% 69%, 100% 33%, 100% 91%, 0% 91%, 0% 33%);
    }
    30% {
        clip-path:polygon(5% 29%, 95% 29%, 50% 40%, 5% 29%, 0% 33%, 50% 69%, 100% 33%, 100% 91%, 0% 91%, 0% 33%);
    }
    40%{
        clip-path:polygon(5% 29%, 95% 29%, 50% 35%, 5% 29%, 0% 33%, 50% 69%, 100% 33%, 100% 91%, 0% 91%, 0% 33%);
    }
    50% {
        clip-path:polygon(5% 29%, 95% 29%, 50% 30%, 5% 29%, 0% 33%, 50% 69%, 100% 33%, 100% 91%, 0% 91%, 0% 33%);
    }
    60%{
        clip-path:polygon(5% 29%, 95% 29%, 50% 25%, 5% 29%, 0% 33%, 50% 69%, 100% 33%, 100% 91%, 0% 91%, 0% 33%);
    }
    70%{
        clip-path:polygon(5% 29%, 95% 29%, 50% 20%, 5% 29%, 0% 33%, 50% 69%, 100% 33%, 100% 91%, 0% 91%, 0% 33%);
    }
	80% {
		clip-path:polygon(5% 29%, 95% 29%, 50% 15%, 5% 29%, 0% 33%, 50% 69%, 100% 33%, 100% 91%, 0% 91%, 0% 33%);
    }
    90% {
		clip-path:polygon(5% 29%, 95% 29%, 50% 10%, 5% 29%, 0% 33%, 50% 69%, 100% 33%, 100% 91%, 0% 91%, 0% 33%);
    }
    100% {
		clip-path:polygon(5% 29%, 95% 29%, 50% 0%, 5% 29%, 0% 33%, 50% 69%, 100% 33%, 100% 91%, 0% 91%, 0% 33%);
	}
}

/* mail */
.asterisk::after{
    clip-path:polygon(40% 10%, 60% 10%, 60% 35%, 84% 25%, 92% 43%, 71% 52%, 89% 64%, 79% 81%, 60% 69%, 60% 90%, 40% 91%, 40% 65%, 16% 75%, 9% 57%, 29% 48%, 11% 36%, 21% 19%, 40% 32%);
}

.toball:hover::after{
    clip-path:polygon(40% 10%, 60% 10%, 74% 16%, 84% 25%, 92% 43%, 91% 54%, 89% 64%, 79% 81%, 70% 87%, 60% 90%, 40% 91%, 26% 85%, 16% 75%, 9% 57%, 8% 46%, 11% 36%, 21% 19%, 29% 14%);
}

/* hexagon */
.hexagon::after{
    clip-path:polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0% 50%);
}



/* letters examples ALEX TADE */
.tade{
    display: flex;
    margin-top: 50px;
    justify-content: center;
    width: 100%;
}
.tade > div{
    width: 30px;
    height: 30px;
    margin: 3px;
    position: relative;
}
.tade > div::after{
    content: " ";
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* letter A */
.alpha::after{
    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::after{
    clip-path:polygon(11% 0%, 38% 0%, 38% 76%, 89% 76%, 89% 100%, 11% 100%);
}

/* letter E */
.epsilon::after{
    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::after{
    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::after{
    clip-path:polygon(7% 0%, 93% 0%, 93% 24%, 63% 24%, 63% 100%, 37% 100%, 37% 24%, 7% 24%);
}

/* letter D */
.delta::after{
    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%);
}

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

    .polygons > div{
        margin: 10px;
        width: 30px;
        height: 30px;
    }
    .polygons > div::after{
        width: 30px;
        height: 30px;
    }
    h1{
        font-size: 18px;
    }
    body{
        font-size: 14px;
    }
}

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