@import url('buttons.css');
@import url('animations.css');
@import url('winner-modal.css');
@import url('avatar.css');

body {
    background-image: url('../img/space-background.png');
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
}
h1 {
    margin: 0;
    text-align: center;
    font-weight: normal;
    font-size: 90px;
    font-family: 'Rye', serif;
    color: #ffee02;
    letter-spacing: 2px;
    
}
h2 {
    margin: 0;
    text-align: center;
    font-weight: 600;
    font-size: 100px;
    font-family: 'Asimovian', sans-serif;
    color: #4eff02;
    letter-spacing: 2px;
}
p {
    margin: 0;
    text-align: center;
    color: #808080;
    font-family: 'Rye', serif;
    font-size: 40px;
}

.game {
    height: 650px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Stages */
.stage {
    position: fixed;
    right: 0px;
    width: 100px;
    height: 100px;
    display: grid;
    place-items: center;
}
.stage2 {
    position: fixed;
    left: 0px;
    width: 100px;
    height: 100px;
    display: grid;
    place-items: center;
}

/* Balls */
.ball {
    will-change: transform;
    animation: orbit 4s linear infinite;
}
.ball img {
    width: 100%;
}
.ball2 {
    will-change: transform;
    animation: orbit 6s linear infinite;
}
.ball2 img {
    width: 100%;
}

/* UFO */
.ufo {
    position: fixed;
    top: 100px;
    left: 90px;
}
.ufo img {
    width: 50%;
    animation: float 4s ease-in-out infinite;
    will-change: transform;
}

/* Animal on planet */
.animal-planet {
    position: fixed;
    bottom: 100px;
    right: 30px;
}
.animal-planet img {
    width: 50%;
    animation: float 4s ease-in-out infinite;
    will-change: transform;
}

/* Animal on rocket */
.rocket {
    position: fixed;
    bottom: 140px;
    left: 250px;
}
.rocket img {
    width: 30%;
    animation: float 4s ease-in-out infinite;
    will-change: transform;
}