@charset "utf-8";

:root {
    --color-first: #fc8743;
    --color-second: #e73167;
    --color-third: #6d0f85;
    --color-forth: #5486e4;
    --block-width: 300px;
    --block-height: 340px;
    --border-width: .8rem;
    --border-radius-outer: 8px;
    --border-radius-inner: calc(var(--border-radius-outer) / 2);
}


.rainbow {
    width: 100%;
    height: 100%;
    -webkit-animation: o-rotate-360 linear 8s infinite;
    animation: o-rotate-360 linear 8s infinite;
}

.rainbow span {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    transform: translate(-50%, -50%);
}

.rainbow span:after {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 100%;
}

.rainbow span:first-child {
    background: var(--color-first);
}

.rainbow span:first-child:after {
    background: var(--color-second);
}

.rainbow span:last-child {
    background: var(--color-third);
}

.rainbow span:last-child:after {
    background: var(--color-forth);
}

.c-subscribe-box {
    max-width: var(--bs-modal-width);
    height: var(--block-height);
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, 0.2);
    border-radius: var(--border-radius-outer);
}

.c-subscribe-box__wrapper {
    width: calc(100% - var(--border-width));
    height: calc(100% - var(--border-width));
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 1.2rem 1rem 1.8rem;
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius-inner);
}


@-webkit-keyframes o-rotate-360 {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes o-rotate-360 {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}