* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#universe {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
}

#mars {
    width: 200vw;
    margin: auto;
    -webkit-animation: spin 240s infinite linear;
    -moz-animation: spin 240s infinite linear;
    -o-animation: spin 240s infinite linear;
    -ms-animation: spin 240s infinite linear;
    animation: spin 240s infinite linear;
    display: block;
}

#atmosphere {
    position: absolute;
    top: 70%;
    right: 0;
    left: -50vw;
}

.shake {
    animation: shake 0.5s infinite;
}

#sky {
    height: 100%;
    width: 100%;
    pointer-events: none;
    background: rgb(0,4,34);
    background: linear-gradient(180deg, rgba(0,4,34,1) 37%, rgba(8,89,113,1) 100%);
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes spin {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}