body{
    background-color:black;
}

.wrapper{
    position:relative;
}
.intro{
    margin-left:350px;
    font-family:helvetica;
    font-size:20px;
    color:#ffffff; 
    border:2px solid #ffffff;
    width:235px;
}
/*.pattern{*/
/*    width: 70px;*/
/*    height: 70px;*/
/*    margin: 0 auto;*/
/*    margin-top: 50px;*/
/*}*/
/*.pattern1{*/
/*    width: 70px;*/
/*    height: 70px;*/
/*    margin: 0 auto;*/
/*    margin-top: 50px;*/
/*}*/
.purple{
    position:absolute;
    background-color: #9600FF;
    width: 60px;
    height:20px;
    top:20px;
    left:0px;
}
.purplebottom{
    position:absolute;
    top:0px;
    left:20px;
    width:20px;
}
.f{
    position:absolute;
    top:0px;
    left:80px;
}
.f1{
    position:absolute;
    top:0px;
    left:80px;
}

.container{
    position:absolute;
    width: 620px;
    height:340px;
    color:#ffffff;
    border: 3px solid #ffffff;
    margin-top:140px;
    margin-left: 380px;
}

/*-------------container-------------------*/


.blue {
    position:absolute;
    background-color: #0038FF;
    width: 20px;
    height:40px;
}
.bluebottom{
    top:20px;
    left:20px;
    width:40px;
    height:20px;
}
.bbb{
    position:absolute;
    top:80px;
    left:180px;
    transform:rotate(180deg);
}
.bbb1{
    position:absolute;
    top:60px;
    left:120px;
    transform:rotate(90deg);
}
.bbb2{
    position:absolute;
    top:100px;
    left:240px;
    transform:rotate(270deg);
}
.bbb3{
    position:absolute;
    top:40px;
    left:260px;
    transform:rotate(90deg);
}
.bbb4{
    position:absolute;
    top:60px;
    left:460px;
}
.bbb5{
    position:absolute;
    top:200px;
    left:350px;
}
.bbb6{
    position:absolute;
    top:200px;
    left:470px;
}
.bbb7{
    position:absolute;
    top:220px;
    left:550px;
    transform:rotate(180deg);
}

/*-----------------blue-----------------------*/

.red{
    position:absolute;
    background-color:#FF0000;
    width:20px;
    height:40px;
}
.redbottom{
    position:absolute;
    background-color:#FF0000;
    height:20px;
    width:40px;
    left:20px;
}
.rrr{
    position:absolute;
    top:100px;
    left:180px;
    transform:rotate(90deg);
}
.rrr1{
    position:absolute;
    top:180px;
    left:70px;
}
.rrr2{
    position:absolute;
    top:180px;
    left:170px;
    transform:rotate(90deg);
}
.rrr3{
    position:absolute;
    top:300px;
    left:70px;
    transform:rotate(270deg);
}
.rrr4{
    position:absolute;
    top:300px;
    left:170px;
    transform:rotate(180deg);
}
.rrr5{
    position:absolute;
    top:240px;
    left:550px;
    transform:rotate(90deg);
}

/*-----------------red-----------------------*/

.pink1{
    position:absolute;
    background-color: #FD00FF;
    top:80px;
    left:200px;
    width: 20px;
    height:80px;
}
.pink2{
    position:absolute;
    background-color: #FD00FF;
    top:80px;
    left:280px;
    width: 20px;
    height:80px;
}
.pink3{
    position:absolute;
    background-color: #FD00FF;
    top:80px;
    left:320px;
    width: 20px;
    height:80px;
}
.pink4{
    position:absolute;
    background-color: #FD00FF;
    top:80px;
    left:400px;
    width: 20px;
    height:80px;
}
.pink5{
    position:absolute;
    background-color: #FD00FF;
    top:40px;
    left:460px;
    width:80px;
    height:20px;
}
.pink6{
    position:absolute;
    background-color: #FD00FF;
    top:80px;
    left:440px;
    width: 20px;
    height:80px;
}
.pink7{
    position:absolute;
    background-color: #FD00FF;
    top:140px;
    left:460px;
    width:80px;
    height:20px;
}
.pink8{
    position:absolute;
    background-color: #FD00FF;
    top:180px;
    left:350px;
    width:80px;
    height:20px;
}
.pink9{
    position:absolute;
    background-color: #FD00FF;
    top:220px;
    left:330px;
    width: 20px;
    height:80px;
}
.pink10{
    position:absolute;
    background-color: #FD00FF;
    top:280px;
    left:350px;
    width:80px;
    height:20px;
}
.pink11{
    position:absolute;
    background-color: #FD00FF;
    top:220px;
    left:450px;
    width: 20px;
    height:80px;
}

/*-----------------pink-----------------------*/

.purple1{
    position:absolute;
    background-color: #9600FF;
    width: 60px;
    height:20px;
    top:100px;
    left:340px;
}
.purplebottom1{
    position:absolute;
    top:120px;
    left:360px;
    width:20px;
}

/*-----------------purple-----------------------*/

.green {
    position:absolute;
    background-color: #3CFF00;
    width: 20px;
    height:40px;
}
.greenbottom{
    top:20px;
    left:20px;
}

.zgreen{
    position:absolute;
    top:40px;
    left:320px;
}
.zgreen1{
    position:absolute;
    top:180px;
    left:190px;
}
.zgreen2{
    position:absolute;
    top:220px;
    left:190px;
}

/*-----------------green-----------------------*/

.yellow{
    position: absolute;
    background-color:#F0FF00;
    width:20px;
    height:40px;
    top:20px;
    left:0px;
}
.yellowtop{
    position:absolute;
    top:0px;
    left:20px;
}
.zyellow{
    position:absolute;
    top:120px;
    left:140px;
    transform:rotate(90deg);
}
.zyellow1{
    position:absolute;
    top:40px;
    left:380px;
    /*transform:rotate(90deg);*/
}
.zyellow2{
    position:absolute;
    top:180px;
    left:270px;
    /*transform:rotate(90deg);*/
}
.zyellow3{
    position:absolute;
    top:220px;
    left:270px;
    /*transform:rotate(90deg);*/
}

/*-----------------yellow-----------------------*/

.sky{
    position:absolute;
    background-color: #00f9ff;
    width: 40px;
    height:40px;
    top:260px;
    left:230px;
    
}

/*-----------------sky-----------------------*/



.turnitgray{
    background-color:#c7c7c7;
}