/*
||||||||||||||||||||||||||||||||||||||||||||||||||

DO NOT EDIT THESE RULES – LOOK FURTHER DOWN THE PAGE!

||||||||||||||||||||||||||||||||||||||||||||||||||
*/

/* remove page margins and paddding */
body, html{
  padding:0;
  margin:0;
}

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
 }


/*
||||||||||||||||||||||||||||||||||||||||||||||||||

SHAPE STYLES

||||||||||||||||||||||||||||||||||||||||||||||||||
*/


body{
    background-color: rgb(255, 0, 0);
}

.shape-1{
    position: absolute;
    width: 50%;
    height: 50%;
    background-color: rgb(0, 255, 106);
    z-index: 1;
    mix-blend-mode: lighten;
}

.shape-2{
    position: absolute;
    left: 50%;
    top: 0px;
    width: 50%;
    height: 50%;
    background-color: rgb(0, 0, 0);
}

.shape-3{
    position: absolute;
    left: 0px;
    top: 50%;
    width: 50%;
    height: 50%;
    background-color: rgb(0, 0, 0);
}

.shape-4{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50%;
    height: 50%;
    background-color: rgb(0, 255, 8);
    z-index: 1;
    mix-blend-mode: lighten;
}

.circle{
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
}

.shape-5{
    margin: -190px 0 0 -190px;
    width: 380px;
    height: 380px;
    background-color: #6243b0;
    border: solid red 20px;
    border-left: solid black 20px;
    border-right: solid black 20px;
    animation-name: rotate;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index: 0;
}

.shape-6{
    margin: -210px 0 0 -210px;
    width: 420px;
    height: 420px;
    background-color: transparent;
    border: solid red 20px;
    border-left: solid pink 20px;
    border-right: solid tomato 20px;
    animation-name: rotate;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: reverse;
    z-index: 3;
    mix-blend-mode: difference;
}


.shape-7{
    margin: -250px 0 0 -250px;
    width: 500px;
    height: 500px;
    background-color: transparent;
    border: solid orange 40px;
    border-left: solid yellow 40px;
    border-right: solid green 40px;
    animation-name: rotate;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate-reverse;
    z-index: 0;
    mix-blend-mode: difference;
}

.shape-8{
    margin: -270px 0 0 -270px;
    width: 540px;
    height: 540px;
    background-color: transparent;
    border: solid transparent 20px;
    border-left: solid transparent 20px;
    border-right: solid rgb(00,00,255) 20px;
    animation-name: rotate;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
    z-index: 10;
    mix-blend-mode: multiply;
}

.shape-9{
    margin: -290px 0 0 -290px;
    width: 580px;
    height: 580px;
    background-color: transparent;
    border: solid transparent 20px;
    border-top: solid rgb(00,00,255) 20px;
    border-right: solid  transparent 20px;
    animation-name: rotate;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate-reverse;
    z-index: 10;
    mix-blend-mode: multiply;
}

.shape-10{
    margin: -295px 0 0 -295px;
    width: 590px;
    height: 590px;
    background-color: transparent;
    border: solid red 5px;
    border-top: solid blue 5px;
    border-bottom: solid  red 5px;
    animation-name: rotate2;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate-reverse;
    z-index: 10;
    mix-blend-mode: difference;
}


@keyframes rotate {
  0% { transform: rotate(0deg);}
  50% {transform: rotate(180deg); }
  100% {transform: rotate(360deg); }
}

@keyframes rotate2 {
  0% { transform: rotate(0deg);}
  75% {transform: rotate(180deg); }
  100% {transform: rotate(360deg); }
}

@keyframes flip {
  0% { transform: rotateX(0deg);}
  50% {transform: rotateX(180deg); }
  100% {transform: rotateX(360deg); }
}