@import url('https://fonts.googleapis.com/css2?family=Jersey+10&family=Strait&family=Titan+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jersey+10&family=Strait&family=Tiny5&family=Titan+One&display=swap');

@keyframes shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

body{
    margin: 0;
    font-family: sans-serif;
}

.zoom{
    zoom: 60%;
}

.wrapper{
    width: 3600px;
    height: 3890px;
    background-color: rgb(143, 22, 187);
    margin: auto;
    z-index: -2;
    overflow: hidden;
}

/*screen*/
.rect{
    height: 2000px;
    width: 3200px;
    background-color: rgb(69, 69, 72);
    position: relative;
    left: 200px;
    top: -1000px;
    border-radius: 190px;
    z-index: 1;
    box-shadow: 0px 8px 40px rgb(129, 61, 236);
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
}
/*.rect7{
    height: 35px;
    width: 1430px;
    background-color: rgb(69, 69, 72);
    position: absolute;
    top: 245px;
    left: 2350px;
    border-radius: 190px;
    z-index: 3;
}*/

.rect2{
    height: 2100px;
    width: 3300px;
    background-color: rgb(88, 14, 114);
    position: relative;
    left: 150px;
    top: -7060px;
    border-radius: 190px;
    box-shadow: 0px 30px 40px rgb(129, 61, 236);
}

/*crt screen*/
.crt{
    height: 2000px;
    width: 3200px;
    background-color: rgba(69, 69, 72, 0);
    opacity: 80%;
    position: relative;
    left: 200px;
    top: -3000px;
    border-radius: 190px;
    z-index: 3;
    overflow: hidden;
}
.crt::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        rgba(105, 92, 227, 0.358) 0px,
        rgba(182, 79, 79, 0.611) 9px,
        transparent 6px
    );
    pointer-events: none;
}
.crt::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(198, 17, 17, 0.118) 60%, rgba(42, 4, 65, 0.379) 100%);
    pointer-events: none;
}

/*control board*/
.rect3{
    height: 800px;
    width: 3600px;
    background-color: rgb(38, 5, 50);
    position: relative;
    top: -6700px;
    box-shadow: 0px 8px 40px rgb(13, 2, 17);
    z-index: 2;
}
.rect4{
    height: 150px;
    width: 3600px;
    background-color: rgb(77, 11, 101);
    position: relative;
    top: -6700px;
}
/*joystick*/
.rect5{
    height: 550px;
    width: 125px;
    background-color: rgb(154, 154, 154);
    background-image: linear-gradient(to right, rgb(132, 131, 131), rgb(222, 218, 218),rgb(154, 154, 154));
    position: relative;
    top: -7780px;
    left: 2710px;
    border-radius: 26px;
    z-index: 9;
}

.circ{
    height: 400px;
    width: 400px;
    background-color: rgb(227, 0, 121);
    background-image: radial-gradient(circle, rgb(227, 82, 159), rgb(220, 23, 23), rgb(14, 1, 5));
    position: relative;
    top: -8680px;
    left: 2575px;
    border-radius: 50%;
    z-index: 10;
}

.circ2{
    height: 350px;
    width: 315px;
    background-color: rgb(60, 58, 60);
    position: relative;
    top: -8440px;
    left: 2615px;
    border-radius: 50%;
    perspective: 500px;
    transform: rotateX(60deg);
    z-index: 8;
}

.circ3{
    height: 430px;
    width: 385px;
    background-color: rgb(143, 22, 187);
    position: relative;
    top: -8860px;
    left: 2577px;
    border-radius: 50%;
    perspective: 500px;
    transform: rotateX(60deg);
    z-index: 7;
}

/*buttons*/
.circ4{
    height: 275px;
    width: 275px;
    background-image: linear-gradient(to right, rgb(255, 255, 255), magenta);
    position: relative;
    top: -9300px;
    left: 575px;
    border-radius: 50%;
    perspective: 500px;
    transform: rotateX(60deg);
    z-index: 5;
}
.circ8{
    height: 275px;
    width: 275px;
    background-color: rgb(255, 0, 85);
    position: relative;
    top: -10370px;
    left: 575px;
    border-radius: 50%;
    perspective: 500px;
    transform: rotateX(60deg);
    z-index: 4;
}

.circ5{
    height: 275px;
    width: 275px;
    background-image: linear-gradient(to right, white, rgb(255, 238, 0));
    position: relative;
    top: -9200px;
    left: 575px;
    border-radius: 50%;
    perspective: 500px;
    transform: rotateX(60deg);
    z-index: 5;
}
.circ9{
    height: 275px;
    width: 275px;
    background-color: rgb(255, 149, 0);
    position: relative;
    top: -10265px;
    left: 575px;
    border-radius: 50%;
    perspective: 500px;
    transform: rotateX(60deg);
    z-index: 4;
}

.circ6{
    height: 275px;
    width: 275px;
    background-image: linear-gradient(to right, white, rgb(0, 255, 30));
    position: relative;
    top: -9650px;
    left: 275px;
    border-radius: 50%;
    perspective: 500px;
    transform: rotateX(60deg);
    z-index: 5;
}
.circ10{
    height: 275px;
    width: 275px;
    background-color: rgb(0, 138, 16);
    position: relative;
    top: -10712px;
    left: 275px;
    border-radius: 50%;
    perspective: 500px;
    transform: rotateX(60deg);
    z-index: 4;
}

.circ7{
    height: 275px;
    width: 275px;
    background-image: linear-gradient(to right, white, rgb(0, 208, 255));
    position: relative;
    top: -9910px;
    left: 860px;
    border-radius: 50%;
    perspective: 500px;
    transform: rotateX(60deg);
    z-index: 5;
}
.circ11{
    height: 275px;
    width: 275px;
    background-color: rgb(3, 113, 215);
    position: relative;
    top: -10970px;
    left: 860px;
    border-radius: 50%;
    perspective: 500px;
    transform: rotateX(60deg);
    z-index: 4;
}

/*game*/
/*.sqr{
    height: 1960px;
    width: 1250px;
    position: absolute;
    top: 300px;
    left: 4300px;
    z-index: 2;
    border-style: solid;
    border-width: 25px;
    border-color: rgb(140, 122, 253);
}*/

.sqr2{
    height: 945px;
    width: 700px;
    position: relative;
    top: 720px;
    left: 2525px;
    z-index: 2;
    border-style: solid;
    border-width: 25px;
    border-color: rgb(140, 122, 253);
    font-family: "Jersey 10", serif;
    font-weight: 400;
    font-size: 125px;
    font-style: normal;
    color: white;
    text-align: center;
}

/*metal plate*/
.plate{
    height: 250px;
    width: 900px;
    position: relative;
    top: -1170px;
    left: 1350px;
    z-index: 1;
    background: linear-gradient(135deg, #b39b6a, #d4af37, #b39b6a);
    box-shadow: inset 0 2px 5px rgba(143, 22, 187, 0.2),inset 0 -2px 5px rgba(62, 6, 83, 0.5),0 4px 10px rgba(29, 5, 38, 0.8);
    border-radius: 50%;
    overflow: hidden;
}
.platetxt{
    font-family: 'Times New Roman', Times, serif;
    font-weight: 600;
    font-size: 100px;
    color: #f9e1a1;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8), -2px -2px 2px rgba(255, 255, 255, 0.2);
    position: absolute;
    left: 150px;
    top: 75px;
}
/*metal animation*/
.plate::before {
    content: "";
    position: absolute;
    width: 120%;
    height: 100%;
    background: linear-gradient(60deg, rgba(255, 255, 255, 0.3) 20%, transparent 50%);
    transform: translateX(-100%);
    animation: shine 3s linear infinite;
}
.plate::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 10%, transparent 50%);
    top: 0;
    left: 0;
}

/*letters*/
.shapecon{
    height: 1960px;
    width: 1250px;
    position: relative;
    top: -5000px;
    left: 1120px;
    z-index: 2;
    border-style: solid;
    border-width: 25px;
    border-color: rgb(140, 122, 253)
}

.shapecon .shapetxt{
    font-family: 'Tiny5', serif;
    font-weight: 400;
    font-size: 220px;
    font-style: normal;
    color: white;
    position: absolute;
    left: 130px;
    top: 945px;
    z-index: 1;
}
.shapecon .shapetxt2{
    font-family: 'Tiny5', serif;
    font-weight: 400;
    font-size: 220px;
    font-style: normal;
    color: rgb(175, 254, 157);
    position: absolute;
    left: 130px;
    top: 1115px;
    z-index: 1;
}
.shapecon .shapetxt3{
    font-family: 'Tiny5', serif;
    font-weight: 400;
    font-size: 220px;
    font-style: normal;
    color: white;
    position: absolute;
    left: 575px;
    top: 1115px;
    z-index: 1;
}

/*score board*/
.scr{
    font-family: "Jersey 10", serif;
    font-weight: 400;
    font-size: 300px;
    font-style: normal;
    color: rgb(255, 255, 255);
    position: relative;
    left: 370px;
    top: -350px;
    z-index: 2;
}
.scrtxt{
    font-family: "Jersey 10", serif;
    font-weight: 400;
    font-size: 200px;
    font-style: normal;
    color: rgb(234, 233, 167);
    position: absolute;
    left: 360px;
    top: 280px;
    z-index: 2;
}
.scrtxt2{
    font-family: "Jersey 10", serif;
    font-weight: 400;
    font-size: 300px;
    font-style: normal;
    color: rgb(255, 255, 255);
    position: absolute;
    left: 70px;
    top: 520px;
    z-index: 2;
}
.scrtxt3{
    font-family: "Jersey 10", serif;
    font-weight: 400;
    font-size: 200px;
    font-style: normal;
    color: rgb(234, 233, 167);
    position: absolute;
    left: 550px;
    top: 820px;
    z-index: 2;
}
.scrtxt4{
    font-family: "Jersey 10", serif;
    font-weight: 400;
    font-size: 300px;
    font-style: normal;
    color: rgb(255, 255, 255);
    position: absolute;
    left: 180px;
    top: 1070px;
    z-index: 2;
}
.scrtxt5{
    font-family: "Jersey 10", serif;
    font-weight: 400;
    font-size: 300px;
    font-style: normal;
    color: rgb(255, 255, 255);
    position: absolute;
    left: -10px;
    top: 1300px;
    z-index: 2;
}
.scrtxt6{
    font-family: "Jersey 10", serif;
    font-weight: 400;
    font-size: 200px;
    font-style: normal;
    color: rgb(234, 233, 167);
    position: absolute;
    left: 350px;
    top: 1580px;
    z-index: 2;
}

/*shapes*/

/*I*/
.i1{
    height: 200px;
    width: 50px;
    position: absolute;
    background-color: rgb(0, 255, 255);
    left: ;
    top: 1760px;
}

.i2{
    height: 50px;
    width: 200px;
    position: absolute;
    background-color: rgb(89, 0, 255);
    left: 250px;
    top: 1910px;
}

.i3{
    height: 50px;
    width: 200px;
    position: absolute;
    background-color: rgb(255, 255, 0);
    left: 750px;
    top: 1810px;
}

.i4{
    height: 50px;
    width: 200px;
    position: absolute;
    background-color: rgb(255, 0, 0);
    left: 950px;
    top: 1760px;
}

.i5{
    height: 200px;
    width: 50px;
    position: absolute;
    background-color: rgb(89, 0, 255);
    left: 600px;
    top: 1660px;
}

.i6{
    height: 200px;
    width: 50px;
    position: absolute;
    background-color: rgb(255, 255, 0);
    left: 150px;
    top: 1610px;
}

.i7{
    height: 50px;
    width: 200px;
    position: absolute;
    background-color: rgb(128, 0, 128);
    left: 350px;
    top: 1660px;
}

.i8{
    height: 200px;
    width: 50px;
    position: absolute;
    background-color: rgb(0, 255, 0);
    left: 1200px;
    top: 1360px;
}

.i9{
    height: 50px;
    width: 200px;
    position: absolute;
    background-color: rgb(255, 0, 0);
    left: 650px;
    top: 1610px;
}

.i10{
    height: 50px;
    width: 200px;
    position: absolute;
    background-color: rgb(255, 255, 0);
    left: 500px;
    top: 1510px;
}

.i11{
    height: 50px;
    width: 200px;
    position: absolute;
    background-color: rgb(0, 255, 0);
    left: 250px;
    top: 850px;
}

/*O*/
.o1{
    height: 100px;
    width: 100px;
    position: absolute;
    background-color: rgb(255, 0, 0);
    left: 50px;
    top: 1860px;
}

.o2{
    height: 100px;
    width: 100px;
    position: absolute;
    background-color: aqua;
    left: 400px;
    top: 1810px;
}

.o3{
    height: 100px;
    width: 100px;
    position: absolute;
    background-color: rgb(255, 165, 0);
    left: ;
    top: 1660px;
}

.o4{
    height: 100px;
    width: 100px;
    position: absolute;
    background-color: aqua;
    left: 600px;
    top: 1860px;
}

.o5{
    height: 100px;
    width: 100px;
    position: absolute;
    background-color: rgb(0, 255, 0);
    left: 850px;
    top: 1710px;
}

.o6{
    height: 100px;
    width: 100px;
    position: absolute;
    background-color: rgb(0, 0, 255);
    left: 950px;
    top: 1860px;
}

.o7{
    height: 100px;
    width: 100px;
    position: absolute;
    background-color: aqua;
    left: 1050px;
    top: 1510px;
}

.o8{
    height: 100px;
    width: 100px;
    position: absolute;
    background-color: rgb(255, 165, 0);
    left: 300px;
    top: 650px;
}

/*S*/
.s1{
    height:50px ;
    width: 100px;
    position: absolute;
    background-color: rgb(0, 255, 0);
    left: 150px;
    top: 1910px;
}
.s2{
    height: 50px;
    width: 100px;
    position: absolute;
    background-color: rgb(0, 255, 0);
    left: 200px;
    top: 1860px;
}

.s3{
    height: 100px;
    width: 50px;
    position: absolute;
    background-color: rgb(128, 0, 128);
    left: 650px;
    top: 1410px;
}
.s4{
    height: 100px;
    width: 50px;
    position: absolute;
    background-color: rgb(128, 0, 128);
    left: 700px;
    top: 1460px;
}

.s5{
    height: 100px;
    width: 50px;
    position: absolute;
    background-color: rgb(0, 0, 255);
    left: 1000px;
    top: 1660px;
}
.s6{
    height: 100px;
    width: 50px;
    position: absolute;
    background-color: rgb(0, 0, 255);
    left: 950px;
    top: 1610px;
}

/*L*/
.l1{
    height: 50px;
    width: 150px;
    position: absolute;
    background-color: rgb(89, 0, 255);
    left: 50px;
    top: 1810px;
}
.l2{
    height: 50px;
    width: 50px;
    position: absolute;
    background-color: rgb(89, 0, 255);
    left: 150px;
    top: 1860px;
}

.l3{
    height: 50px;
    width: 150px;
    position: absolute;
    background-color: rgb(128, 0, 128);
    left: 700px;
    top: 1860px;
}
.l4{
    height: 50px;
    width: 50px;
    position: absolute;
    background-color: rgb(128, 0, 128);
    left: 800px;
    top: 1910px;
}

.l5{
    height: 50px;
    width: 150px;
    position: absolute;
    background-color: rgb(255, 255, 0);
    left: 1100px;
    top: 1710px;
}
.l6{
    height: 50px;
    width: 50px;
    position: absolute;
    background-color: rgb(255, 255, 0);
    left: 1200px;
    top: 1760px;
}

.l7{
    height: 50px;
    width: 150px;
    position: absolute;
    background-color: rgb(255, 165, 0);
    left: 750px;
    top: 1660px;
}
.l8{
    height: 50px;
    width: 50px;
    position: absolute;
    background-color: rgb(255, 165, 0);
    left: 750px;
    top: 1710px;
}

.l9{
    height: 150px;
    width: 50px;
    position: absolute;
    background-color: aqua;
    left: 200px;
    top: 1510px;
}
.l10{
    height: 50px;
    width: 50px;
    position: absolute;
    background-color: aqua;
    left: 150px;
    top: 1510px;
}

.l11{
    height: 50px;
    width: 150px;
    position: absolute;
    background-color: rgb(0, 255, 0);
    left: 400px;
    top: 1760px;
}
.l12{
    height: 50px;
    width: 50px;
    position: absolute;
    background-color: rgb(0, 255, 0);
    left: 400px;
    top: 1710px;
}

.l13{
    height: 150px;
    width: 50px;
    position: absolute;
    background-color: aqua;
    left: 900px;
    top: 1560px;
}
.l14{
    height: 50px;
    width: 50px;
    position: absolute;
    background-color: aqua;
    left: 850px;
    top: 1560px;
}

.l15{
    height: 50px;
    width: 150px;
    position: absolute;
    background-color: rgb(255, 165, 0);
    left: 400px;
    top: 1560px;
}
.l16{
    height: 50px;
    width: 50px;
    position: absolute;
    background-color: rgb(255, 165, 0);
    left: 400px;
    top: 1610px;
}

/*T*/
.t1{
    height: 50px;
    width: 150px;
    position: absolute;
    background-color: rgb(255, 255, 0);
    left: 450px;
    top: 1910px;
}
.t2{
    height: 50px;
    width: 50px;
    position: absolute;
    background-color: rgb(255, 255, 0);
    left: 500px;
    top: 1860px;
}

.t3{
    height: 150px;
    width: 50px;
    position: absolute;
    background-color: rgb(255, 0, 0);
    left: 550px;
    top: 1760px;
}
.t4{
    height: 50px;
    width: 50px;
    position: absolute;
    background-color: rgb(255, 0, 0);
    left: 500px;
    top: 1810px;
}

.t5{
    height: 150px;
    width: 50px;
    position: absolute;
    background-color: rgb(255, 165, 0);
    left: 1200px;
    top: 1810px;
}
.t6{
    height:50px;
    width: 50px;
    position: absolute;
    background-color: rgb(255, 165, 0);
    left: 1150px;
    top: 1860px;
}

.t7{
    height: 50px;
    width: 150px;
    position: absolute;
    background-color: aqua;
    left: 500px;
    top: 1610px;
}
.t8{
    height: 50px;
    width: 50px;
    position: absolute;
    background-color: aqua;
    left: 550px;
    top: 1660px;
}

.t9{
    height: 150px;
    width: 50px;
    position: absolute;
    background-color: rgb(128, 0, 128);
    left: 1050px;
    top: 1610px;
}
.t10{
    height: 50px;
    width: 50px;
    position: absolute;
    background-color: rgb(128, 0, 128);
    left: 1100px;
    top: 1660px;
}

.t11{
    height: 50px;
    width: 150px;
    position: absolute;
    background-color: rgb(175, 254, 157);
    left: 900px;
    top: 600px;
}
.t12{
    height: 50px;
    width: 50px;
    position: absolute;
    background-color: rgb(175, 254, 157);
    left: 950px;
    top: 550px;
}

.t13{
    height: 150px;
    width: 50px;
    position: absolute;
    background-color: rgb(89, 0, 255);
    left: 350px;
    top: 400px;
}
.t14{
    height: 50px;
    width: 50px;
    position: absolute;
    background-color: rgb(89, 0, 255);
    left: 300px;
    top: 450px;
}

/*Z*/
.z1{
    height: 50px;
    width: 100px;
    position: absolute;
    background-color: rgb(128, 0, 128);
    left: 300px;
    top: 1860px;
}
.z2{
    height: 50px;
    width: 100px;
    position: absolute;
    background-color: rgb(128, 0, 128);
    left: 250px;
    top: 1810px;
}

.z3{
    height: 100px;
    width: 50px;
    position: absolute;
    background-color: aqua;
    left: 1100px;
    top: 1810px;
}
.z4{
    height: 100px;
    width: 50px;
    position: absolute;
    background-color: aqua;
    left: 1150px;
    top: 1760px;
}

.z5{
    height: 50px;
    width: 100px;
    position: absolute;
    background-color: rgb(89, 0, 255);
    left: 1100px;
    top: 1610px;
}
.z6{
    height: 50px;
    width: 100px;
    position: absolute;
    background-color: rgb(89, 0, 255);
    left: 1150px;
    top: 1560px;
}

.z7{
    height: 50px;
    width: 100px;
    position: absolute;
    background-color: rgb(255, 0, 0)
    ;
    left: 50px;
    top: 1610px;
}
.z8{
    height: 50px;
    width: 100px;
    position: absolute;
    background-color: rgb(255, 0, 0)
    ;
    left: 100px;
    top: 1560px;
}

.z9{
    height: 50px;
    width: 100px;
    position: absolute;
    background-color: rgb(255, 255, 0);
    left: 250px;
    top: 200px;
}
.z10{
    height: 50px;
    width: 100px;
    position: absolute;
    background-color: rgb(255, 255, 0);
    left: 300px;
    top: 250px;
}