/*bquare*/
.square-large{
    rotate: 45deg;
    border-bottom-left-radius: 250px;
    border-bottom-right-radius: 250px;
}

/*bgSquare Active*/
.square1{
    position: absolute;
    top: -120px;
    right: 0;
    width: 500px;
    height: 1100px;
    background: linear-gradient(180deg, rgb(42, 82, 138) 0%, rgb(210, 225, 250) 100%);
    z-index: -3;
}
.square2{
    position: absolute;
    top: -420px;
    right: 0;
    width: 300px;
    height: 1000px;
    background: linear-gradient(180deg, rgb(11, 29, 54) 0%, rgb(85, 129, 232) 100%);
    z-index: -2;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.432);
}
.square3{
    position: absolute;
    top: 290px;
    right: 0;
    width: 200px;
    height: 800px;
    background: linear-gradient(180deg, rgb(51, 68, 91) 0%, rgb(45, 78, 154) 100%);
    z-index: -1;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.793);
}

/*bgSquare Unactive*/
.unactive1{
    position: absolute;
    top: 220px;
    right: -400px;
    width: 500px;
    height: 0px;
    z-index: -3;
    transition: 1s;
}
.unactive2{
    position: absolute;
    top: -80px;
    right: 0;
    width: 300px;
    height: 0px;
    z-index: -3;
}
.unactive3{
    position: absolute;
    top: 690px;
    right: -80px;
    width: 200px;
    height: 0px;
    z-index: -3;
}

/*bgSquare Animation*/
.square1, .unactive1 {
    transition: all 1s ease;
}
.square2, .unactive2 {
    transition: all 1s ease;
}
.square3, .unactive3 {
    transition: all 1s ease;
}
/*bgSquare Animation End*/