body{

	font-family: sans-serif;
	line-height: 1.5em;
	background:#ffffff;
	font-size: 12px;
}

h1{
	margin: 20px;
	font-size: 3em;
	font-style: bold;
	margin-top: 60px;
}

.triangle1{
    width: 1800px;
    height: 376px;
    z-index:-1;
    position:fixed;
    display:flex;
    margin-top: 500px;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 13s; /* Safari 4.0 - 8.0 */
  -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
  -webkit-animation-direction: alternate-reverse; /* Safari 4.0 - 8.0 */
 animation-name: example;
    animation-duration: 13s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
@-webkit-keyframes example {
  0%   {background-color:green;}
  25%  {background-color:yellow;}
  50%  {background-color:cyan;}
  75%  {background-color:magenta;}
  100% {background-color:#ff00a6;}
}
#container{
	position:absolute;
	display:flex;
	margin-left:1300px;
	margin-top:1200px;
	margin-bottom: 0px;
}
.circle{
	width: 400px;
    height: 400px;
    border-radius: 50%;
    background: yellow;
    mix-blend-mode: difference;
    margin-left:1000px;
	margin-top:1400px;
}
.square{
    width: 330px;
    height: 330px;
    background: cyan;
    mix-blend-mode: multiply;
    margin-left:1200px;
	margin-top:1200px;
}
.triangle{
	width: 0;
    height: 0;
    border-top: 150px solid magenta;
    border-right: 150px solid transparent;
    margin-left:1400px;
	margin-top:1000px;
}
/*tiltle container is here*/

#con1-C{
	display: inline-flex;
	margin-top: 150px;
    margin-left: 200px;
	position: absolute;

}
#con1-M{
	display: inline-flex;
	margin-left: 392px;
    margin-top: 172px;
	position: absolute;
}
#con1-Y{
    margin-left: 520px;
    margin-top: 157px;
    position: absolute;
    display: inline-flex;
}
#con-i{
	display: inline-flex;
    margin-left: 670px;
    margin-top: 204px;
    position: absolute;
}
#con-n{
	margin-left: 753px;
    margin-top: 217px;
    display: inline-flex;
    position: absolute;
}
#con1-R{
	margin-left: 388px;
    margin-top: 345px;
    position: absolute;
    display: flex;
}
#con-G{
	display: flex;
    margin-left: 498px;
    margin-top: 328px;
    position: absolute;
}
#con1-B{
	display: inline-flex;
    margin-left: 678px;
    margin-top: 345px;
    position: absolute;
}

/*CMY circles*/
#m-position{
    margin-left:1200px;
    margin-top:600px;
    position: absolute;
    display:inline-flex;
}
#magenta {
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: magenta;
    cursor: move;
    mix-blend-mode: darken;
    transition: cubic-bezier(0.88, 0.01, 1, 1), ease-out;
    transition-duration: 1s;
    transition-delay:-0.1s;
}
#magenta:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transform-origin: top;
    transform-origin: top;
    /* -webkit-animation-play-state: paused; */
    /* animation-play-state: paused; */
}
#c-position{
	margin-left:900px;
    margin-top:550px;
    position: absolute;
    display:inline-flex;
}
#cyan{
	width:400px;
	height: 400px;
	border-radius:50%;
	background:cyan;
	cursor: move;
    mix-blend-mode: darken;
    transition: cubic-bezier(0.88, 0.01, 1, 1), ease-out;
    transition-duration: 2s;
}
#cyan:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transform-origin: top;
    transform-origin: top;
    /* -webkit-animation-play-state: paused; */
    /* animation-play-state: paused; */
}
#y-position{
	margin-left:1000px;
    margin-top:150px;
    position: absolute;
    display:inline-flex;
}
#yellow{
    width:550px;
    height:550px;
    border-radius: 50%;
    background: yellow;
    cursor: move;
    mix-blend-mode: darken;
    transition: cubic-bezier(0.88, 0.01, 1, 1), ease-out;
    transition-duration: 2s;
}
#yellow:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transform-origin: top;
    transform-origin: top;
    /* -webkit-animation-play-state: paused; */
    /* animation-play-state: paused; */
}


/*alphabet*/
.C{
	border-radius: 50%;
    display: inline-block;
    border-style: solid;
    border-color: magenta;
    border-width: 23px;
    padding: 0px;
    width: 94px;
    height: 100px;
    position: static;
    margin-left: 10px;
    margin-right: 10px;
}
.Csquare{
	width: 83px;
    height: 107px;
    background: yellow;
    mix-blend-mode: screen;
    margin-left: 45px;
    margin-top: -5px;
    transition: ease-in, ease-out;
}
.Csquare:hover{
    
}

.M{
	width: 107px;
    height: 125px;
    background: magenta;
    mix-blend-mode: hard-light;
}
.MV{
	width: 0;
    height: 0;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-top: 110px solid yellow;
    margin-left: 8px;
    margin-bottom: 20px;
    margin-top: -21px;
    mix-blend-mode: screen;
}

.Y{
	width: 0;
    height: 0;
    border-left: 64px solid transparent;
    border-right: 64px solid transparent;
    border-top: 90px solid yellow;
    mix-blend-mode: screen;
}
.YV{
	width: 0;
    height: 0;
    border-left: 53px solid transparent;
    border-right: 53px solid transparent;
    border-top: 73px solid magenta;
    mix-blend-mode: screen;
    margin-left: -34px;
    margin-top: -79px;
}
.Y1{
    width: 20px;
    height: 70px;
    background: yellow;
    mix-blend-mode: screen;
    margin-left: -9px;
    margin-top: -16px;
    position: absolute;
}
.is{
    width: 25px;
    height: 60px;
    background: magenta;
    mix-blend-mode: screen;
    margin-left: 10px;
    margin-top: 30px;
    position: absolute;
}
.ic{
	width: 45px;
    height: 45px;
    border-radius: 50%;
    background: yellow;
    mix-blend-mode: screen;
}
.n-magenta{
	width: 52px;
    height: 78px;
    border-top-left-radius: 90px;
    border-top-right-radius: 90px;
    background: magenta;
}

.n-yellow-rectangle{
	width: 54px;
    height: 70px;
    background: yellow;
    mix-blend-mode: screen;
    margin-left: -22px;
    margin-top: 8px;
    display: inline-flex;
    position: absolute;
}
.R-rctg{
	width: 41px;
    height: 146px;
    background: magenta;
}
.R-cr{
    width: 105px;
    height: 91px;
    background: yellow;
    border-radius: 68px / 63px;
    mix-blend-mode: screen;
    position: absolute;
}
.R-h-cr{
    width: 105px;
    height: 55px;
    border-top-left-radius: 110px;
    border-top-right-radius: 110px;
    border-bottom: 0px;
    background: yellow;
    margin-top: 91px;
    margin-left: 0px;
    mix-blend-mode: screen;
    position: absolute;
}

.G-y-cr {
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background: yellow;
    mix-blend-mode: screen;
    margin-left: 20px;
    margin-top: 20px;
}
.G-m {
    width: 0px;
    height: 0px;
    border-right: 60px solid transparent;
    border-top: 66px solid magenta;
    border-left: 58px solid magenta;
    border-bottom: 51px solid magenta;
    mix-blend-mode: screen;
    border-top-left-radius: 65px;
    border-top-right-radius: 65px;
    border-bottom-left-radius: 65px;
    border-bottom-right-radius: 65px;
    margin-left: 4px;
    margin-top: 24px;
}








/*aphabet position here*/
#alph-line-A{
	display: inline-flex;
	margin-top: 1000px;
    margin-left: 300px;
	position: absolute;
}
#resize-BC{
	    display: inline-flex;
    margin-top: 978px;
    margin-left: 396px;
    position: absolute;
    transform: scale(0.7);
    margin-right: 82px;
}
#resize-C{
	display: inline-flex;
    margin-top: 958px;
    margin-left: 396px;
    position: absolute;
    transform: scale(0.7);
    margin-right: 82px;
}
#alph-line-DEF{
	display: inline-flex;
    margin-top: 989px;
    margin-left: 670px;
    position: absolute;
}
#resize-G{
	display: inline-flex;
    margin-top: 1148px;
    margin-left: 266px;
    position: absolute;
    transform: scale(0.8);
}
#HIJKL{
	display: inline-flex;
    margin-top: 1180px;
    margin-left: 428px;
    position: absolute;
}
#resize-M{
	display: inline-flex;
    margin-top: 1371px;
    margin-left: 266px;
    margin-left: 291px;
    position: absolute;
    transform: scale(0.8);
}
#NOP{
	display: inline-flex;
    margin-top: 1370px;
    margin-left: 437px;
    position: absolute;
}
#QRS{
	display: inline-flex;
    margin-top: 1524px;
    margin-left: 281px;
    position: absolute;
}
#resizeR{
	transform: scale(0.8);
    margin-right: 10px;
    margin-left: 29px;
    margin-top: 10px;
}



.a1 {
    width: 0;
    height: 0;
    border-left: 48px solid transparent;
    border-right: 48px solid transparent;
    border-bottom: 102px solid magenta;
}
.a2{
	width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 74px solid yellow;
    flex: center;
    margin-left: -16px;
    margin-bottom: -32px;
    margin-top: 0px;
    padding-top: 0px;
}
.a3{
	width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 40px solid #ffffff;
    margin-left: -15px;
    margin-top: -17px;
}
.B1{
	width: 41px;
    height: 146px;
    background: yellow;
    margin-right: 97px;
    mix-blend-mode: hard-light;
}
.B2{
    width: 105px;
    height: 91px;
    background: magenta;
    border-radius: 68px / 63px;
    mix-blend-mode: screen;
    position: absolute;
}
.B3{
	width: 105px;
    height: 91px;
    background: magenta;
    border-radius: 68px / 63px;
    mix-blend-mode: screen;
    position: absolute;
    margin-top: 55px;
}
.D-y{
	width: 110px;
    height: 125px;
    background: yellow;
    margin-left: 10px;
    margin-right: 10px;
    transform: scale(0.8);
}
.D-m{
	width: 75px;
    height: 125px;
    border-bottom-right-radius: 110px;
    border-top-right-radius: 110px;
    border-left: 0px;
    background: magenta;
    margin-top: 0px;
    margin-left: 21px;
    position: absolute;
}
.EF-y{
	width: 78px;
    height: 102px;
    background: yellow;
    margin-top: 12px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
}
.E-m{
    width: 64px;
    height: 66px;
    background: magenta;
    margin-left: 25px;
    margin-top: 18px;
}
.E-y-{
	width: 48px;
    height: 13px;
    background: yellow;
    mix-blend-mode: screen;
    /* margin-right: 10px; */
    margin-left: 15px;
    margin-top: -38px;
    margin-bottom: 52px;
}
.F-y-{
	width: 48px;
    height: 13px;
    background: yellow;
    mix-blend-mode: screen;
    /* margin-right: 10px; */
    margin-left: 15px;
    margin-top: -49px;
    margin-bottom: 52px
}
.F-m{
	width: 62px;
    height: 84px;
    background: magenta;
    margin-left: 29px;
    margin-top: 17px;
}
.H-y{
	width: 78px;
    height: 108px;
    background: yellow;
    /* margin-top: 10px; */
    margin-right: 10px;
    /* margin-bottom: 10px; */
    margin-left: 10px;
}
.H-m1{
	width: 36px;
    height: 37px;
    margin-left: 20px;
    background: magenta;
    margin-left: 22px;
}
.H-m2{
	width: 36px;
    height: 36px;
    margin-left: 22px;
    margin-top: 35px;
    background: magenta;
}
.I{
    width: 25px;
    height: 108px;
    margin-left: 58px;
    margin-right: 58px;
    background: magenta;
}
.J-hf-cr{
	width: 50px;
    height: 25px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom: 0px;
    background: magenta;
    margin-top: 57px;
    margin-left: 34px;
    margin-right: 10px;
    transform: scale(1.2);
}
.J-rtg{
	width: 20px;
    height: 71px;
    background: magenta;
    margin-left: 29px;
    margin-right: 20px;
    margin-top: -46px;
}
.J-cr{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: yellow;
    mix-blend-mode: screen;
    margin-top: -25px;
    margin-left: 0px;
    margin-right: 10px;
}
.K-rtg{
	width: 78px;
    height: 102px;
    background: white;
    margin-right: 31px;
    margin-left: 57px;
    transform: scale(1.06);
}
.K-tr2{
	width: 0;
    height: 0;
    border-top: 88px solid magenta;
    border-right: 60px solid transparent;
    margin-top: 0px;
    margin-left: 0px;
}
.K-tr3{
    width: 0;
    height: 0;
    border-bottom: 89px solid yellow;
    border-left: 62px solid transparent;
    margin-left: 16px;
    margin-top: -75px;
}
.K-tr4{
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 35px solid magenta;
    margin-left: 16px;
    margin-top: -35px;
}
.L-y{
	width: 78px;
    height: 102px;
    background: yellow;
    margin-right: 10px;
    margin-left: 18px;
    transform: scale(1.06);
}
.L-m{
	width: 58px;
    height: 84px;
    background: magenta;
    margin-left: 20px;
}

.N-y{
	width: 0;
    height: 0;
    border-top: 90px solid yellow;
    border-left: 42px solid transparent;
    border-left: 53px solid transparent;
    margin-left: 11px;
    margin-right: 10px;
}
.N-m{
	width: 85px;
    height: 114px;
    background: magenta;
}
.O-y{
	width: 125px;
    height: 125px;
    border-radius: 50%;
    background: yellow;
    /* mix-blend-mode: screen; */
    margin-left: 20px;
    margin-top: -17px;
    margin-right: 10px;
    transform: scale(0.8);
}
.O-m{
	width: 125px;
    height: 125px;
    border-radius: 50%;
    background: magenta;
    mix-blend-mode: screen;
    margin-left: 0px;
    margin-top: 20px;
}
.P-m{
	width: 41px;
    height: 146px;
    background: magenta;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: -18px;
    transform: scale(0.8);
}
.P-y{
	width: 105px;
    height: 91px;
    background: yellow;
    border-radius: 68px / 63px;
    mix-blend-mode: screen;
    position: absolute;
}
.Q-y{
	width: 125px;
    height: 125px;
    border-radius: 50%;
    background: yellow;
    mix-blend-mode: screen;
    margin-left: -82px;
    margin-top: -69px;
    /* margin-right: 10px; */
    /* transform: scale(0.8); */
    mix-blend-mode: screen;
}
.Q-m{
    width: 0px;
    height: 0px;
    border-right: 60px solid transparent;
    border-top: 49px solid magenta;
    border-left: 64px solid magenta;
    border-bottom: 70px solid magenta;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
    mix-blend-mode: screen;
    transform: scale(1.1);
    transform: rotate(45deg);
    margin-top: 30px;
    /* margin-left: 10px; */
    transform: rotate(45deg) scale(0.8);
}
.Q-m-w{
    width: 70px;
    height: 70px;
    background: yellow;
    /* mix-blend-mode: screen; */
    margin-top: -24px;
    margin-left: -36px;
    position: absolute;
    border-radius: 50%;
}
.S-hc-top1{
    background-color: magenta;
    width: 85px;
    height: 33px;
    border-radius: 50% / 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-left: 72px;
    margin-top: 25px;
    margin-right: 10px;
}
.S-hc-left1{
    border-radius: 100% / 50%;
    width: 51px;
    height: 51px;
    background-color: magenta;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-top: 8px;
    margin-left: 0px;
}
.S-hc-top2{
    background-color: magenta;
    width: 85px;
    height: 33px;
    border-radius: 50% / 100%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-left: 0px;
    margin-top: 26px;
    margin-right: 10px;
}
.S-hc-left2{
    border-radius: 100% / 50%;
    width: 51px;
    height: 51px;
    background-color: magenta;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-top: -60px;
    margin-left: 34px;
}
.S-y1{
	    width: 62px;
    height: 40px;
    margin-left: 33px;
    margin-top: -89px;
    background: yellow;
    mix-blend-mode: screen;
}
.S-y2{
	width: 62px;
    height: 40px;
    margin-left: -9px;
    margin-top: -1px;
    background: yellow;
    mix-blend-mode: screen;
}
#TUVW{
	display: inline-flex;
    margin-top: 1735px;
    margin-left: 292px;
    position: absolute;
}
.T-y{
	width: 100px;
    height: 30px;
    background: yellow;
    mix-blend-mode: screen;
    margin-left: 0px;
    margin-right: 40px;
}
.T-m{
	width: 20px;
    height: 110px;
    background: magenta;
    mix-blend-mode: screen;
    margin-left: 40px;
}
.U-m{
	width: 68px;
    height: 83px;
    background: magenta;
    margin-right: 10px;
    margin-left: 14px;
}
.U-y{
    width: 68px;
    height: 54px;
    border-radius: 96px / 71px;
    margin-top: 54px;
    background: yellow;
    mix-blend-mode: screen;
    margin-right: 10px;
    margin-left: 0px;
}
.V{
    width: 0;
    height: 0;
    border-left: 43px solid transparent;
    border-right: 43px solid transparent;
    border-top: 99px solid magenta;
    margin-left: 35px;
    margin-right: 20px;
}
.W1{
	width: 0;
    height: 0;
    border-left: 32px solid transparent;
    border-right: 26px solid transparent;
    border-top: 99px solid yellow;
    margin-left: 25px;
    margin-right: 20px;
}
.W2{
    width: 0;
    height: 0;
    border-left: 32px solid transparent;
    border-right: 26px solid transparent;
    border-top: 99px solid magenta;
    mix-blend-mode: color-dodge;
    margin-left: 10px;
    margin-right: 20px;
    margin-top: -99px;
}
#XYZ{
	display: inline-flex;
    margin-top: 1920px;
    margin-left: 296px;
    position: absolute;
}
#resizeY{
	transform: scale(0.8);
    margin-top: -10px;
}
.X-y{
    width: 0;
    height: 0;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-top: 73px solid yellow;
    margin-left: 0px;
    margin-right: 28px;
}
.X-m{
	width: 0;
    height: 0;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-bottom: 73px solid magenta;
    mix-blend-mode: screen;
    margin-left: -46px;
    margin-top: -36px;
}
.Z-tr-left{
	width: 0;
    height: 0;
    border-top: 110px solid magenta;
    border-right: 86px solid transparent;
    margin-top: 0px;
    margin-left: 36px;
}
.Z-tr-right{
	width: 0;
    height: 0;
    border-bottom: 110px solid yellow;
    border-left: 86px solid transparent;
    mix-blend-mode: screen;
    margin-top: -109px;
    margin-left: -20px;
}
.text{
    font-size: 2em;
    margin-left: 1235px;
    margin-top: 360px;
    position: absolute;
    display: block;
}