@keyframes planetRotate {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: -200% center;
    }
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.card--earth .planet__atmosphere {
    box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px #b3caff;
}

.card--earth .planet__surface {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/earth.jpg);
    transform: rotate(23deg) scale(1.2);
    animation: planetRotate calc(55*.1s) linear infinite;
}

.card--earth .card__planet::before {
    transform: rotate(23deg) scale(1.2);
    border-color: #b3caff;
    color: #b3caff;
}

.card--earth .tilt__icon {
    transform: rotate(23deg);
    ;
    color: #b3caff;
}

.card__planet::before {
    content: '';
    position: absolute;
    height: 190px;
    z-index: -2;
    left: 50%;
    top: 0%;
    border-left: 1px dashed rgba(255, 255, 255, 0.25);
}

.planet__atmosphere {
    height: 190px;
    width: 190px;
    position: relative;
    background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 65%);
    border-radius: 100px;
    overflow: hidden;
}

.planet__surface {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    background-size: cover;
}

.card--sun .planet__atmosphere {
    box-shadow: 0px 0px 10px 0px var(--sun-color), 0px 0px 1000px -2px var(--sun-color);
}

.card__info {
    width: 100%;
}

.info__title {
    text-align: center;
    font-size: 28px;
}

.info__form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.info__item {
    display: flex;
    align-items: flex-end;
    margin-bottom: 5px;
    font-size: 14px;
}

.info__item .tilt__icon {
    margin: 0 5px;
}

.info__label {
    font-size: 11px;
}

.info__line {
    flex: 1;
    margin: 0 5px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
}