@import "./fonts.css";
@import "./reset.css";

/* styles for gzhel */
@import "./gzhel.css";

/* styles for suprematizm */
@import "./suprematizm.css";


@keyframes opacity {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes translate {
    0% {
        opacity: 0;
        transform: translate(-100%, 0);
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(200%, 0);
    }
}
@-moz-keyframes move-circle {
    20% {
        top: calc(100% - 3.5rem);
        left: 60%;
        opacity: 0.3;
        transform: rotate(72deg);
    }
    40% {
        left: 0;
        top: calc(50% - 1rem);
        opacity: 0.9;
        transform: rotate(144deg);
    }
    60% {
        top: 0;
        left: 35%;
        opacity: 0.7;
        transform: rotate(216deg);
    }
    80% {
        top: calc(100% - 3.5rem);
        left: 60%;
        opacity: 0.2;
        transform: rotate(288deg);
    }
    100% {
        left: calc(100% - 3rem);
        top: 1rem;
        opacity: 1;
        transform: rotate(360deg);
    }
}
@-webkit-keyframes move-circle {
    20% {
        top: calc(100% - 3.5rem);
        left: 60%;
        opacity: 0.3;
        transform: rotate(72deg);
    }
    40% {
        left: 0;
        top: calc(50% - 1rem);
        opacity: 0.9;
        transform: rotate(144deg);
    }
    60% {
        top: 0;
        left: 35%;
        opacity: 0.7;
        transform: rotate(216deg);
    }
    80% {
        top: calc(100% - 3.5rem);
        left: 60%;
        opacity: 0.2;
        transform: rotate(288deg);
    }
    100% {
        left: calc(100% - 3rem);
        top: 1rem;
        opacity: 1;
        transform: rotate(360deg);
    }
}
@-o-keyframes move-circle {
    20% {
        top: calc(100% - 3.5rem);
        left: 60%;
        opacity: 0.3;
        transform: rotate(72deg);
    }
    40% {
        left: 0;
        top: calc(50% - 1rem);
        opacity: 0.9;
        transform: rotate(144deg);
    }
    60% {
        top: 0;
        left: 35%;
        opacity: 0.7;
        transform: rotate(216deg);
    }
    80% {
        top: calc(100% - 3.5rem);
        left: 60%;
        opacity: 0.2;
        transform: rotate(288deg);
    }
    100% {
        left: calc(100% - 3rem);
        top: 1rem;
        opacity: 1;
        transform: rotate(360deg);
    }
}
@keyframes move-circle {
    20% {
        top: calc(100% - 3.5rem);
        left: 60%;
        opacity: 0.3;
        transform: rotate(72deg);
    }
    40% {
        left: 0;
        top: calc(50% - 1rem);
        opacity: 0.9;
        transform: rotate(144deg);
    }
    60% {
        top: 0;
        left: 35%;
        opacity: 0.7;
        transform: rotate(216deg);
    }
    80% {
        top: calc(100% - 3.5rem);
        left: 60%;
        opacity: 0.2;
        transform: rotate(288deg);
    }
    100% {
        left: calc(100% - 3rem);
        top: 1rem;
        opacity: 1;
        transform: rotate(360deg);
    }
}

.content main {
    height: 100%;
    overflow: auto;
}