* {
    margin:0;
    padding:0;
}
body {
    background: #333132;
    animation-name: backgroundcolor;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}
@keyframes backgroundcolor {
    0% {background: #333132;}
    14.99% {background: #333132;}
    15% {background: #333132;}
    25% {background: #C10A3E;}
    26% {background: #C10A3E;}
    64.99% {background: #C10A3E;}
    65% {background: #C10A3E;}
    75% {background: #333132;}
    76% {background: #333132;}
    100% {background: #333132;}
}
.circle01 {
    width: 4vh;
    height: 4vh;
    z-index: 1;
    border-radius: 2vh;
    background: #FFE4AE;
    position: absolute;
    animation-name: circle01move;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    transform: translate(-50%, -50%);
    -webkit- transform: translate(-50%, -50%);
}
@keyframes circle01move {
    0% {left: 5vw; top:50vh;}
    10% {left: 5vw; top:9vh;}
    30% {left: 95vw; top:9vh;}
    40% {left: 95vw; top:50vh;}
    50% {left: 95vw; top:50vh;}
    60% {left: 95vw; top:9vh;}
    80% {left: 5vw; top:9vh;}
    90% {left: 5vw; top:50vh;}
    100% {left: 5vw; top:50vh;}
}
.circle02 {
    width: 4vh;
    height: 4vh;
    z-index: 1;
    border-radius: 2vh;
    background: #FFE4AE;
    position: absolute;
    animation-name: circle02move;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    transform: translate(-50%, -50%);
    -webkit- transform: translate(-50%, -50%);
}
@keyframes circle02move {
    0% {left: 95vw; top:50vh;}
    10% {left: 95vw; top:9vh;}
    30% {left: 5vw; top:9vh;}
    40% {left: 5vw; top:50vh;}
    50% {left: 5vw; top:50vh;}
    60% {left: 5vw; top:9vh;}
    80% {left: 95vw; top:9vh;}
    90% {left: 95vw; top:50vh;}
    100% {left: 95vw; top:50vh;}
}
.circle03 {
    width: 4vh;
    height: 4vh;
    z-index: 1;
    border-radius: 2vh;
    background: #FFE4AE;
    position: absolute;
    animation-name: circle03move;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    transform: translate(-50%, -50%);
    -webkit- transform: translate(-50%, -50%);
}
@keyframes circle03move {
    0% {left: 5vw; top:50vh;}
    10% {left: 5vw; top:91vh;}
    30% {left: 95vw; top:91vh;}
    40% {left: 95vw; top:50vh;}
    50% {left: 95vw; top:50vh;}
    60% {left: 95vw; top:91vh;}
    80% {left: 5vw; top:91vh;}
    90% {left: 5vw; top:50vh;}
    100% {left: 5vw; top:50vh;}
}
.circle04 {
    width: 4vh;
    height: 4vh;
    z-index: 1;
    border-radius: 2vh;
    background: #FFE4AE;
    position: absolute;
    animation-name: circle04move;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    transform: translate(-50%, -50%);
    -webkit- transform: translate(-50%, -50%);
}
@keyframes circle04move {
    0% {left: 95vw; top:50vh;}
    10% {left: 95vw; top:91vh;}
    30% {left: 5vw; top:91vh;}
    40% {left: 5vw; top:50vh;}
    50% {left: 5vw; top:50vh;}
    60% {left: 5vw; top:91vh;}
    80% {left: 95vw; top:91vh;}
    90% {left: 95vw; top:50vh;}
    100% {left: 95vw; top:50vh;}
}
.diamond01 {
    width: 16vh;
    height: 16vh;
    position: absolute;
    top: 50vh;
    left: 50vw;
    background: #FFE4AE transparent;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 5px #FFE4AE solid;
    transition: border .4s;
    -webkit- transition: border .4s;
    transition-timing-function: ease-in-out;
    transform: translate(-50%, -50%);
    -webkit- transform: translate(-50%, -50%);
}
.diamond01:hover {
    border: 6vh #FFE4AE solid;
}
.diamond02 {
    width: 4vh;
    height: 4vh;
    background: #FFF;
    position: absolute;
    top: 48vh;
    left: 25vw;
    transform: rotate(45deg);
    -webkit- transform: rotate(45deg);
    transition: transform .4s;
    -webkit- transition: -webkit- transform .4s;
    transition-timing-function: ease-in-out;
}
.diamond02:hover {
    transform: rotate(180deg);
}
.diamond03 {
    width: 4vh;
    height: 4vh;
    background: #FFF;
    position: absolute;
    top: 48vh;
    right: 25vw;
    transform: rotate(45deg);
    -webkit- transform: rotate(45deg);
    transition: transform .4s;
    -webkit- transition: -webkit- transform .4s;
    transition-timing-function: ease-in-out;
}
.diamond03:hover {
    transform: rotate(-90deg);
}
.splash01 {
    width: 5px;
    height: 5px;
    left: 50vw;
    top: 9vh;
    border-radius: 100%;
    background: #FFF;
    position: absolute;
    animation-name: splash01active;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    transform: translate(-50%, -50%);
    -webkit- transform: translate(-50%, -50%);
}
@keyframes splash01active {
    0% {width: 5px; height: 5px; opacity: 0;}
    14.99% {width: 5px; height: 5px; opacity: 0;}
    15% {width: 5px; height: 5px; opacity: 1;}
    25% {width: 120px; height: 120px; opacity: 0;}
    26% {width: 5px; height: 5px; opacity: 0;}
    64.99% {width: 5px; height: 5px; opacity: 0;}
    65% {width: 5px; height: 5px; opacity: 1;}
    75% {width: 120px; height: 120px; opacity: 0;}
    76% {width: 5px; height: 5px; opacity: 0;}
    100% {width: 5px; height: 5px; opacity: 0;}

}
.splash02 {
    width: 5px;
    height: 5px;
    left: 50vw;
    top: 91vh;
    border-radius: 100%;
    background: #FFF;
    position: absolute;
    animation-name: splash02active;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    transform: translate(-50%, -50%);
    -webkit- transform: translate(-50%, -50%);
}
@keyframes splash02active {
    0% {width: 5px; height: 5px; opacity: 0;}
    14.99% {width: 5px; height: 5px; opacity: 0;}
    15% {width: 5px; height: 5px; opacity: 1;}
    25% {width: 120px; height: 120px; opacity: 0;}
    26% {width: 5px; height: 5px; opacity: 0;}
    64.99% {width: 5px; height: 5px; opacity: 0;}
    65% {width: 5px; height: 5px; opacity: 1;}
    75% {width: 120px; height: 120px; opacity: 0;}
    76% {width: 5px; height: 5px; opacity: 0;}
    100% {width: 5px; height: 5px; opacity: 0;}
}