.comingFlexBox {
    height: 100%;
}

.centerBlock {
    margin: 20vh auto;
    width: 60vh;
    height: 60vh;
    max-width: 700px;
    max-height: 700px;
    min-height: 300px;
    min-width: 300px;
    transition: background 0.4s, width 0.6s, height 0.6s;
}

.circleA {
    background: rgba(93, 230, 255, 0.76);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 8%;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.06);
    transition: background 0.4s, width 1s, height 1s,padding 1s;
}
.circleA:hover {
    background: rgba(93, 230, 255, 0.96);
}

.circleB {
    background: rgba(156, 247, 255, 0.84);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 12%;
    transition: background 1s, width 0.6s, height 0.6s,padding 0.8s;

}
.circleB:hover {
    background: rgba(156, 247, 255, 1);
}

.circleC {
    background: rgba(212, 250, 255, 0.68);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 10%;
    position: relative;
    box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.04);
    transition: background 0.6s, width 0.6s, height 0.6s,padding 0.6s;
}

.circleC:hover {
    background: rgba(212, 250, 255, 0.98);
}

.CircleLogo {
    height: 70px;
    margin: 20% auto;
    text-align: center;
}

.CircleLogo .logo svg {
    fill: rgba(93, 230, 255, 1);
    transition: fill 0.8s;
}

.CircleLogo:hover .logo svg {
    fill: #222;
}
.error {
    z-index: 200;
    position: absolute;
    top: 650px;
    left: 0;
    width: 100%;
}

.lButton {
    display: block;
    background: var(--color-blue);
    max-width: 200px;
    width: 80%;
    margin: 10px auto;
    padding: 6px 10px;
    color: #000;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--color-blue);
    border-radius: 4px;
    font-size: var(--button-text-size);
    transition: background 0.8s;
}
.lButton:hover {
    background: var(--color-blue-light);
    text-decoration: none;
}