@color-primary: #30a9de;
@color-secondary: #30a9de;
@color-tertiary: #30a9de;
@color-primary-light: #6aafe6;
@color-primary-dark: #8ec0e4;
@Distance: 1000px;

body {
    overflow: hidden;
}

html,
body {
    position: relative;
    background: #d4dfe6;
    min-height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #274c5e;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main {
    justify-content: center;
}

.MainDescription {
    max-width: 50%;
    font-size: 1.2rem;
    font-weight: lighter;
}

.MainGraphic {
    position: relative;
}

.shuttle {
    width: 5rem;
    height: 5rem;
    margin: 10rem;
    transition: easeInOutQuint();
    animation: CogAnimation 30s linear infinite;
}

.astronaut {
    width: 15rem;
    height: 15rem;
    transition: easeInOutQuint();
    animation: CogAnimation2 25s linear infinite;
}

.world {
    width: 10rem;
    height: 10rem;
    transition: easeInOutQuint();
}

@keyframes CogAnimation {
    0% {
        transform: rotate(-360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

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

    100% {
        transform: rotate(0deg);
    }
}