#edition-label {
    color: yellow;
}

#edition-number {
    color: yellow;
    border-color: yellow;
}

#color-hello-bio {
  font-size: 72px;
  color: yellow;
}




/* Floaters */



#hello {
    top: 300px; 
    left: -50px; 
    width: 200px;
    height: auto;
}

#hello img {
    width: 100%;
    height: auto;
    animation: hello 11.0s infinite ease-in-out;  
}

@media only screen and (max-width: 768px) {

    #hello {
        top: 350px; 
    }


}

@keyframes hello {
    0% { transform: translateY(0) }
    50% { transform: translateY(50px) }
    100% { transform: translateY(0) }
}

@-moz-keyframes hello {
    0% { transform: translateY(0) rotate(5deg); }
    50% { transform: translateY(-200px) rotate(-5deg); }
    100% { transform: translateY(0) rotate(5deg); }
}

@-webkit-keyframes hello {
    0% { transform: translateY(0) rotate(5deg); }
    50% { transform: translateY(-200px) rotate(-5deg); }
    100% { transform: translateY(0) rotate(5deg); }
}

@-o-keyframes hello {
    0% { transform: translateY(0) rotate(5deg); }
    50% { transform: translateY(-200px) rotate(-5deg); }
    100% { transform: translateY(0) rotate(5deg); }
}





#monster-1 {
    position: absolute;
    top: 10%;
    left: 10%;
    z-index: 999995;    
    width: 500px;
    pointer-events: none;
    animation: monster1 8.0s infinite ease-in-out;
    transform: translateZ(0.0001px);
}

#monster-1 img {
    width: 100%;
    pointer-events: none;
    animation: monster1img 4.0s infinite ease-in-out;
    transform: rotate(-10deg);
}

@media only screen and (max-width: 768px) {

    #monster-1 {
        position: absolute;
        top: 17%;
        left: 0;
        width: 320px;
    }

}

@keyframes monster1 {
    0% { transform: translateX(0); }
    50% { transform: translateX(600px); }
    100% { transform: translateX(0); }
}

@-moz-keyframes monster1 {
    0% { transform: translateX(0); }
    50% { transform: translateX(600px); }
    100% { transform: translateX(0); }
}

@-webkit-keyframes monster1 {
    0% { transform: translateX(0); }
    50% { transform: translateX(600px); }
    100% { transform: translateX(0); }
}

@-o-keyframes monster1 {
    0% { transform: translateX(0); }
    50% { transform: translateX(600px); }
    100% { transform: translateX(0); }
}



@media only screen and (max-width: 768px) {

    @keyframes monster1 {
        0% { transform: translateX(0); }
        50% { transform: translateX(400px); }
        100% { transform: translateX(0); }
    }

    @-moz-keyframes monster1 {
        0% { transform: translateX(0); }
        50% { transform: translateX(400px); }
        100% { transform: translateX(0); }
    }

    @-webkit-keyframes monster1 {
        0% { transform: translateX(0); }
        50% { transform: translateX(400px); }
        100% { transform: translateX(0); }
    }

    @-o-keyframes monster1 {
        0% { transform: translateX(0); }
        50% { transform: translateX(400px); }
        100% { transform: translateX(0); }
    }

}



@keyframes monster1img {
    0% { transform: rotate(-10deg); }
    50% { transform: rotate(15deg); }
    100% { transform: rotate(-10deg); }
}

@-moz-keyframes monster1img {
    0% { transform: rotate(-10deg); }
    50% { transform: rotate(15deg); }
    100% { transform: rotate(-10deg); }
}

@-webkit-keyframes monster1img {
    0% { transform: rotate(-10deg); }
    50% { transform: rotate(15deg); }
    100% { transform: rotate(-10deg); }
}

@-o-keyframes monster1img {
    0% { transform: rotate(-10deg); }
    50% { transform: rotate(15deg); }
    100% { transform: rotate(-10deg); }
}



#monster-2 {
    position: absolute;
    top: 3%;
    left: 98%;
    z-index: 999995;
    width: 38%;
    pointer-events: none;
    animation: monster2 8.0s infinite ease-in-out;
    transform: translateZ(0.0001px);
}

#monster-2 img {
    width: 100%;
    pointer-events: none;
    animation: monster2img 8.0s infinite ease-in-out;
    transform: rotate(0deg);
}

@media only screen and (max-width: 768px) {

    #monster-2 {
        top: 10%;
        width: 100%;
    }

}

@keyframes monster2 {
    0% { transform: translateX(0); }
    50% { transform: translateX(-50px); }
    100% { transform: translateX(0); }
}

@-moz-keyframes monster2 {
    0% { transform: translateX(0); }
    50% { transform: translateX(-50px); }
    100% { transform: translateX(0); }
}

@-webkit-keyframes monster2 {
    0% { transform: translateX(0); }
    50% { transform: translateX(-50px); }
    100% { transform: translateX(0); }
}

@-o-keyframes monster2 {
    0% { transform: translateX(0); }
    50% { transform: translateX(-50px); }
    100% { transform: translateX(0); }
}



@keyframes monster2img {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(10deg); }
    100% { transform: rotate(0deg); }
}

@-moz-keyframes monster2img {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(10deg); }
    100% { transform: rotate(0deg); }
}

@-webkit-keyframes monster2img {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(10deg); }
    100% { transform: rotate(0deg); }
}

@-o-keyframes monster2img {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(10deg); }
    100% { transform: rotate(0deg); }
}

#kitty {
    top: 55%; 
    left: 18%
}

#kitty img {
    pointer-events: none;
    animation: kitty 3.0s infinite ease-in-out;
    transform: translateY(0) rotate(5deg);
    width: 100%;
    max-width: 300px;
    height: auto;
}

@media only screen and (max-width: 768px) {

    #kitty {
        top: 65%;
        left: 9%;
    }

    #kitty img {
        max-width: 200px;
    }

}

@keyframes kitty {
    0% { transform: translateY(0) rotate(5deg); }
    50% { transform: translateY(-200px) rotate(-5deg); }
    100% { transform: translateY(0) rotate(5deg); }
}

@-moz-keyframes kitty {
    0% { transform: translateY(0) rotate(5deg); }
    50% { transform: translateY(-200px) rotate(-5deg); }
    100% { transform: translateY(0) rotate(5deg); }
}

@-webkit-keyframes kitty {
    0% { transform: translateY(0) rotate(5deg); }
    50% { transform: translateY(-200px) rotate(-5deg); }
    100% { transform: translateY(0) rotate(5deg); }
}

@-o-keyframes kitty {
    0% { transform: translateY(0) rotate(5deg); }
    50% { transform: translateY(-200px) rotate(-5deg); }
    100% { transform: translateY(0) rotate(5deg); }
}



#kitty-mew {
    top: 32%; 
    left: 74%;
}

#kitty-mew img {
    pointer-events: none;
    animation: kittymew 3.0s infinite ease-in-out;
    opacity: 0.0;
    width: 100%; 
    max-width: 50px;
    height: auto;
}

@media only screen and (max-width: 768px) {

    #kitty-mew {
        top: 34%;
        left: 59%;
    }
    
    #kitty-mew img {
        max-width: 50px;
    }

}

@keyframes kittymew {
    0% { opacity: 0.0; }
    47% { opacity: 0.0; }
    50% { opacity: 1.0; }
    85% { opacity: 0.0; }
    100% { opacity: 0.0; }
}

@-moz-keyframes kittymew {
    0% { opacity: 0.0; }
    47% { opacity: 0.0; }
    50% { opacity: 1.0; }
    85% { opacity: 0.0; }
    100% { opacity: 0.0; }
}

@-webkit-keyframes kittymew {
    0% { opacity: 0.0; }
    47% { opacity: 0.0; }
    50% { opacity: 1.0; }
    85% { opacity: 0.0; }
    100% { opacity: 0.0; }
}

@-o-keyframes kittymew {
    0% { opacity: 0.0; }
    47% { opacity: 0.0; }
    50% { opacity: 1.0; }
    85% { opacity: 0.0; }
    100% { opacity: 0.0; }
}



#lil-me {
    width: 150px;
    height: auto;
    top: 11.2%;
    left: 35%;
    animation: lilmeY 6s infinite;
    transform: translateY(0);
}

#lil-me img {
	width: 100%;
	height: 100%;
	animation: lilme 2s infinite;
}

@media only screen and (max-width: 768px) {

	#lil-me {
		width: 140px;
        top: 10.2%;
		left: 32%;
	}

}

@keyframes lilmeY {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(10px); }
    100% { transform: translateY(0); }
}

@-moz-keyframes lilmeY {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(10px); }
    100% { transform: translateY(0); }
}

@-webkit-keyframes lilmeY {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(10px); }
    100% { transform: translateY(0); }
}

@-o-keyframes lilmeY {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(10px); }
    100% { transform: translateY(0); }
}


@keyframes lilme {
    0%   { opacity: 0.0; }
    20%  { opacity: 0.0; }
    22%   { opacity: 1.0; }
    24%  { opacity: 0.0; }
    26%   { opacity: 1.0; }
    28%  { opacity: 0.0; }
    50%  { opacity: 0.0; }
    52%   { opacity: 1.0; }
    60%   { opacity: 1.0; }
    62%  { opacity: 0.0; }
    100%   { opacity: 0.0; }
}

@-moz-keyframes lilme {
    0%   { opacity: 0.0; }
    20%  { opacity: 0.0; }
    22%   { opacity: 1.0; }
    24%  { opacity: 0.0; }
    26%   { opacity: 1.0; }
    28%  { opacity: 0.0; }
    50%  { opacity: 0.0; }
    52%   { opacity: 1.0; }
    60%   { opacity: 1.0; }
    62%  { opacity: 0.0; }
    100%   { opacity: 0.0; }
}

@-webkit-keyframes lilme {
    0%   { opacity: 0.0; }
    20%  { opacity: 0.0; }
    22%   { opacity: 1.0; }
    24%  { opacity: 0.0; }
    26%   { opacity: 1.0; }
    28%  { opacity: 0.0; }
    50%  { opacity: 0.0; }
    52%   { opacity: 1.0; }
    60%   { opacity: 1.0; }
    62%  { opacity: 0.0; }
    100%   { opacity: 0.0; }
}

@-o-keyframes lilme {
    0%   { opacity: 0.0; }
    20%  { opacity: 0.0; }
    22%   { opacity: 1.0; }
    24%  { opacity: 0.0; }
    26%   { opacity: 1.0; }
    28%  { opacity: 0.0; }
    50%  { opacity: 0.0; }
    52%   { opacity: 1.0; }
    60%   { opacity: 1.0; }
    62%  { opacity: 0.0; }
    100%   { opacity: 0.0; }
}

#balloon {
    width: 54%;
    top: 7%;
    left: 23%;
    transform: rotate(37deg);
}

#balloon img {
	width: 100%;
	height: auto;
    opacity: 0.3;
    animation: balloon 4s infinite;
}

@media only screen and (max-width: 768px) {

    #balloon {
        width: 64%;
        top: 5%;
        left: 18%;
    }

}

@keyframes balloon {
    0%   { opacity: 1.0; }
    20%  { opacity: 0.3; }
    22%   { opacity: 1.0; }
    24%  { opacity: 0.3; }
    26%   { opacity: 1.0; }
    28%  { opacity: 0.3; }
    50%  { opacity: 0.8; }
    52%   { opacity: 1.0; }
    60%   { opacity: 0.0; }
    62%  { opacity: 0.6; }
    100%   { opacity: 1.0; }
}

@-moz-keyframes balloon {
    0%   { opacity: 1.0; }
    20%  { opacity: 0.3; }
    22%   { opacity: 1.0; }
    24%  { opacity: 0.3; }
    26%   { opacity: 1.0; }
    28%  { opacity: 0.3; }
    50%  { opacity: 0.8; }
    52%   { opacity: 1.0; }
    60%   { opacity: 0.0; }
    62%  { opacity: 0.6; }
    100%   { opacity: 1.0; }
}

@-webkit-keyframes balloon {
    0%   { opacity: 1.0; }
    20%  { opacity: 0.3; }
    22%   { opacity: 1.0; }
    24%  { opacity: 0.3; }
    26%   { opacity: 1.0; }
    28%  { opacity: 0.3; }
    50%  { opacity: 0.8; }
    52%   { opacity: 1.0; }
    60%   { opacity: 0.0; }
    62%  { opacity: 0.6; }
    100%   { opacity: 1.0; }
}

@-o-keyframes balloon {
    0%   { opacity: 1.0; }
    20%  { opacity: 0.3; }
    22%   { opacity: 1.0; }
    24%  { opacity: 0.3; }
    26%   { opacity: 1.0; }
    28%  { opacity: 0.3; }
    50%  { opacity: 0.8; }
    52%   { opacity: 1.0; }
    60%   { opacity: 0.0; }
    62%  { opacity: 0.6; }
    100%   { opacity: 1.0; }
}