@import url('https://fonts.googleapis.com/css?family=Raleway');



*{
    box-sizing: border-box;
}

.color{
    background: linear-gradient(to right, #e1e0ff, #d7fadd);
}



.try-again{
    cursor: pointer;
    position: relative;
    font-size: 16px;
}

.try-again:after{
    content: '';
    position: absolute;
    left: 15px;
    right: 15px;
    height: 1px;
    top: 100%;
    background: #ebebeb;
    margin-top: 8px;
    transition: all 0.3s ease;
}

.try-again:hover:after{
    left: 40%;
    right: 40%;
}

.wrapper{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}




.button-circle{
    position: absolute;
    left: 0;
    top: 0;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    box-shadow: 0 0 10px #504bff, 0 0 20px #504bff, 0 0 30px #504bff;
    transition: all 0.5s ease;
}

.button-circle2{
    top: auto;
    bottom: 0;
}

.button-circle3{
    left: auto;
    right: 0;
    box-shadow: 0 0 10px #4cfa63, 0 0 20px #4cfa63, 0 0 30px #4cfa63;
}

.button-circle4{
    left: auto;
    top: auto;
    bottom: 0;
    right: 0;
    box-shadow: 0 0 10px #4cfa63, 0 0 20px #4cfa63, 0 0 30px #4cfa63;
}

.button:hover{
    box-shadow: -15px 0 70px -15px #504bff, 15px 0 70px -15px #4cfa63;
}

.button:hover .button-circle1{
    transform: translate(-15px, -15px) scale(0);
}

.button:hover .button-circle2{
    transform: translate(-15px, 15px) scale(0);
}

.button:hover .button-circle3{
    transform: translate(15px, -15px) scale(0);
}

.button:hover .button-circle4{
    transform: translate(15px, 15px) scale(0);
}

.button:hover .button-circle{
    box-shadow: none;
}

.popup{
    opacity: 0;
    visibility: hidden;
    height: 400px;
    width: 400px;
    flex-shrink: 0;
    border-radius: 3px;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease
}

.popup-inside{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 0 black;
    transition:
            box-shadow 0.5s ease 0.7s,
            border-radius 0.35s ease 0.7s;
}

.backgrounds{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.background{
    --offset: 0;
    position: absolute;
    left: var(--offset);
    right: var(--offset);
    bottom: var(--offset);
    top: var(--offset);
    background: linear-gradient(to right, #504bff, #4cfa63);
    transform: scale(0);
    transition: all 0.5s ease 0s;
    border-radius: 50%;
}

.background2{
    --offset: 10%;
    position: absolute;
    left: var(--offset);
    right: var(--offset);
    bottom: var(--offset);
    top: var(--offset);
    background: linear-gradient(to right, #6665ff, #69fa7f);
    transform: scale(0);
    transition: all 0.5s ease 0.1s;
}

.background3{
    --offset: 20%;
    position: absolute;
    left: var(--offset);
    right: var(--offset);
    bottom: var(--offset);
    top: var(--offset);
    background: linear-gradient(to right, #8583ff, #85fa99);
    z-index: 2;
    transition: all 0.5s ease 0.2s;
}

.background4{
    --offset: 30%;
    position: absolute;
    left: var(--offset);
    right: var(--offset);
    bottom: var(--offset);
    top: var(--offset);
    background: linear-gradient(to right, #aaaaff, #a7fab7);
    z-index: 3;
    transition: all 0.5s ease 0.3s;
}

.background5{
    --offset: 40%;
    position: absolute;
    left: var(--offset);
    right: var(--offset);
    bottom: var(--offset);
    top: var(--offset);
    background: linear-gradient(to right, #c9c8ff, #c3fad1);
    z-index: 4;
    transition: all 0.5s ease 0.4s;
}

.background6{
    --offset: 40%;
    position: absolute;
    left: var(--offset);
    right: var(--offset);
    bottom: var(--offset);
    top: var(--offset);
    background: white;
    z-index: 5;
    transition: all 0.8s ease 0.4s;
}

.content{
    --offset: 0;
    position: absolute;
    left: var(--offset);
    right: var(--offset);
    bottom: var(--offset);
    top: var(--offset);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.35s ease 0.75s;
    z-index: 10;
}

.content-wrapper{
    text-align: center;
}

body.active .content{
    opacity: 1;
    transform: none;
}

body.active .popup{
    opacity: 1;
    visibility: visible;
}

body.active .popup-inside{
    border-radius: 0;
    box-shadow: -50px 0 200px -50px #504bff, 50px 0 200px -50px #4cfa63;
}

body.active .background{
    transform: scale(1);
}

body.active .background6{
    transform: scale(8);
}