main{
    height: 180vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
main section{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bgColDark);
    flex-basis: 30%;
}
main section p.per::after{
    content: '.';
}
main.dark section{
    color: var(--bgColLight);
}
.textDiv{
    position: relative;
    flex-basis: 45%;
}
.textDiv svg{
    position: absolute;
    bottom: -1em;
    height: 10em;
    width: 10em;
}
section.per .textDiv svg{
    right: -1em;
}
section.eng .textDiv svg{
    left: -1em;
    transform: rotateY(180deg);
}
.stbd0{
    stroke: var(--purpDark);
    fill: var(--purpDark);
}
.stbd0.dark{
    stroke: var(--blueDark);
    fill: var(--blueDark);
}
.aboutAnimationFirst,
.aboutAnimationSecond,
.aboutAnimationThird{
    height: 100%;
    flex-basis: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aboutAnimationFirst svg,
.aboutAnimationSecond svg,
.aboutAnimationThird svg{
    height: 60%;
}
.stnd0{fill:var(--purpDark);stroke:var(--purpDark);stroke-width:1.5;stroke-miterlimit:10;}
.stnd0.dark{fill:var(--blueDark);stroke:var(--blueDark)}

.aboutAnimationSecond svg polygon{
    animation: brainStorm 1s ease-in-out infinite;
    transform-origin: center;
}
@keyframes brainStorm{
    0%, 100%{
        transform: rotateX(5deg)rotateY(0deg)rotateZ(25deg);
    }
    20%,70%{
        transform: rotateX(0deg)rotateY(5deg)rotateZ(0deg);
    }
    35%,85%{
        transform: rotateX(0deg)rotateY(0deg)rotateZ(-5deg) scale(0.9);
    }
    50%{
        transform: rotateX(0deg)rotateY(0deg)rotateZ(-25deg) scale(1.1);
    }

}
.stbr0{fill:none;stroke:var(--purpDark);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.stbr0.dark{fill:none;stroke:var(--blueDark);}
.stlt0{fill-rule:evenodd;fill:var(--purpDark); clip-rule:evenodd;}
.stlt0.dark{fill: var(--blueDark);}
.rectify{
    animation: rectify 0.95s steps(1) infinite;
}
@keyframes rectify{
    0%{
        opacity: 0;
    }
    70%{
        opacity: 1;
    }
}





@media screen and (max-width: 768px){
    .aboutAnimationFirst svg,
.aboutAnimationSecond svg,
.aboutAnimationThird svg{
    width: 100%;
}
    .textDiv{
        flex-basis: initial;
    }
    main{
        height: 110em;
        font-size: 0.85em;
    }
    main section:nth-of-type(3n-1){
        flex-direction: column;
    }
    main section{
        flex-direction: column-reverse;
    }
}