.sun {
    position: absolute;
    left: 10%;
    top: 8%;
    bottom: 100px;
    width: 200px;
    height: 200px;
    margin: 0 0 0 -50px;
    border-radius: 50%;
    background: #fdd835;
    opacity: 1;
    transition: all .6s cubic-bezier(.565, 1.65, .765, .88);
    transform: translateY(0%);
    will-change: transform;
}

.active-sun {
    transform: translateY(300%);
    opacity: 0;
}

.obj-sun-corona {
    position: absolute;
    top: 3%;
    right: 3%;
    bottom: 3%;
    left: 3%;
    background: transparent;
    border-radius: 50%;
    animation: spin 15s infinite linear;
}

.obj-sun-corona>div {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* background: rgb(255, 235, 59); */
}

.obj-sun-corona>div>span {
    display: block;
    position: absolute;
    width: 16%;
    height: 16%;
}

.obj-sun-corona>div>span>span {
    display: block;
    width: 100%;
    height: 100%;
    background: rgb(255, 235, 59);
}

.obj-sun-corona>div>span>span {
    transform: scaleY(1.8);
}

.obj-sun-corona>div>span>span>span {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    background: rgb(255, 235, 59);
    transform: rotate(45deg);
}

.obj-sun-corona .item-1 {
    top: -5%;
    left: 42%;
}

.obj-sun-corona .item-2 {
    top: 42%;
    right: -5%;
    transform: rotate(90deg);
}

.obj-sun-corona .item-3 {
    bottom: -5%;
    left: 42%;
}

.obj-sun-corona .item-4 {
    top: 42%;
    left: -5%;
    transform: rotate(90deg);
}

.obj-sun-corona .item-group-2 {
    transform: rotate(15deg);
}

.obj-sun-corona .item-group-3 {

    transform: rotate(30deg);
}

.obj-sun-corona .item-group-4 {

    transform: rotate(45deg);
}

.obj-sun-corona .item-group-5 {

    transform: rotate(60deg);
}

.obj-sun-corona .item-group-6 {

    transform: rotate(75deg);
}

.obj-sun-corona .item-group-1>span>span {
    transform: scaleY(1.9);
}

.obj-sun-corona .item-group-2 .item-1>span,
.obj-sun-corona .item-group-2 .item-3>span {
    transform: scaleY(1.4);
}

.obj-sun-corona .item-group-2 .item-2>span,
.obj-sun-corona .item-group-2 .item-4>span {
    transform: scaleY(1.5);
}

.obj-sun-corona .item-group-6 .item-1>span,
.obj-sun-corona .item-group-6 .item-3>span {
    transform: scaleY(1.4);
}

.obj-sun-corona .item-group-6 .item-2>span,
.obj-sun-corona .item-group-6 .item-4>span {
    transform: scaleY(1.5);
}

.obj-sun-corona .item-group-4 .item-4>span {
    transform: scaleY(1.6);
}

.obj-sun-corona .item-group-4 .item-1>span,
.obj-sun-corona .item-group-4 .item-3>span {
    transform: scaleY(1.6);
}

.obj-sun-corona .item-group-5 .item-4>span {
    transform: scaleY(1.9);
}

.obj-sun-photosphere {
    position: absolute;
    top: 18%;
    right: 18%;
    bottom: 18%;
    left: 18%;
    background: rgb(255, 235, 59);
    box-shadow: inset -10px -10px 0 0 rgb(255, 235, 59);
    border-radius: 50%;
}

/* Keyframes */

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}