body, html {
    padding: 0;
    margin: 0;
}

body {
    height: 100%;
    position: relative;
    overflow: hidden;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 22px;
    color: white;
}

/* barvy: */

div.earth, div.bump.everest:before {
    background: #086;
}

body, div.bump.marian:before {
    background: #000;
}

/* zeměkoule default: */

div.earth {
    width:  200000px;
    height: 200000px;
    position: absolute;
    right: 50%;
    top: 350px;
    transform: translate(50%);
    border-radius: 50%;
}

div.bump, div.iss {
    width: .1%;
    height: .1%;
    position: absolute;
    left: 49.95%;
    top: 0;
    height: 100%;
    text-align: center;
    white-space: nowrap;
}

div.bump.everest {
    transform: rotate(-.15deg);
}

div.bump.marian {
    transform: rotate(.15deg);
}

div.bump:before {
    content: ' ';
    display: block;
    width: 100%;
    height: .1%;
    transform: rotate(45deg);
    position: relative;
    top: -.05%;
}

/* ISS a animace: */

div.iss {
    height: 105%;
    top: -2.5%;
    animation: orbit 2300s linear 0s infinite;
    -webkit-animation: orbit 2300s linear 0s infinite;
    font-size: 60px;
    transition: 10s ease-in font-size;
}

div.iss:before {
    content: ' ';
    display: block;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    animation: beep 3s linear 0s infinite;
    -webkit-animation: beep 3s linear 0s infinite;
}

@keyframes orbit {
    0%   { transform: rotate(-3deg);   }
    25%  { transform: rotate(87deg);  }
    50%  { transform: rotate(177deg); }
    75%  { transform: rotate(267deg); }
    100% { transform: rotate(-3deg); }
}

@-webkit-keyframes orbit {
    0%   { transform: rotate(-3deg);   }
    25%  { transform: rotate(87deg);  }
    50%  { transform: rotate(177deg); }
    75%  { transform: rotate(267deg); }
    100% { transform: rotate(-3deg); }
}

@keyframes beep {
    0%   { background: #000; }
    45%  { background: #000; }
    50%  { background: #eee; }
    60%  { background: #eee; }
    100% { background: #000; }
}

@-webkit-keyframes beep {
    0%   { background: #000; }
    45%  { background: #000; }
    50%  { background: #eee; }
    60%  { background: #eee; }
    100% { background: #000; }
}

/* hodnoty pro "zoom" */

div.earth {
    transition: 12s ease-out width, 12s ease-out height;
}

div.earth:hover {
    width:  1200px;
    height: 1200px;
}

div.earth div.bump {
    transition: 10s ease-out font-size, 8s ease-out color, 10s cubic-bezier(.75, 0, 1, 1) transform;
}

div.earth:hover div.bump {
    font-size: 4px;
    color: #086; /* protože chrome */
}

div.earth:hover div.iss {
    font-size: 12px;
    color: rgba(255,255,255,.9);
}

div.earth:hover div.bump.everest {
    transform: rotate(-3.5deg);
}

div.earth:hover div.bump.marian {
    transform: rotate(3.5deg);
}

/* protože jsem líný: */

@media screen and (max-width: 1000px) {
    body:before {
        content: 'Sorry, pouze pro desktop.';
        display: block;
        text-align: center;
        padding: 1em;
    }
}

/* výška okna by šla detekovat pomocí js, nebo nahackovat paddingem, ale to se mi nechce */

@media screen and (max-height: 1600px) {
    div.earth { top: 750px; }
}

@media screen and (max-height: 1400px) {
    div.earth { top: 650px; }
}

@media screen and (max-height: 1200px) {
    div.earth { top: 550px; }
}

@media screen and (max-height: 1000px) {
    div.earth { top: 470px; }
}

@media screen and (max-height: 900px) {
    div.earth { top: 430px; }
}

@media screen and (max-height: 800px) {
    div.earth { top: 380px; }
}

@media screen and (max-height: 700px) {
    div.earth { top: 340px; }
}

@media screen and (max-height: 600px) {
    div.earth { top: 290px; }
}