*{
                    margin: 0px;
                    padding: 0px;
                    font-family: 'Roboto Slab', serif;
                }
                body{
                    width: 100vw;
                    height: 100vh;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: #f2f2f2;
                }
                main{
                    width: 100%;
                    max-width: 1366px;
                    height: 625px;
                    max-height: 625px;
                    background: #464646;
                    overflow: hidden;
                    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
                    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
                    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
                    position: relative;
                }
                /* Header Start */
                header{
                    width: 100%;
                    height: 30px;
                    background: #464646;
                    border-bottom: 1px solid #535353;
                    box-sizing: border-box;
                }
                header > div{
                    width: auto;
                    height: 24px;
                    margin: 2px 5px;
                    float: left;
                    padding: 4px;
                    box-sizing: border-box;
                    font-size: 12px;
                    color: #d9d9d9;
                    cursor: pointer;
                    font-weight: 500;
                    user-select: none;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                header > div span{
                    margin: 0px 1px;
                }
                header > div > i{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 15px;
                    height: 15px;
                }
                header > div > i svg{
                    width: 15px;
                    height: 15px;
                }
                header > div > i.start path{
                    fill: limegreen;
                }
                header > div > i.stop{
                    display: none;
                }
                header > div > i.stop path{
                    fill: #c12222;
                }
                header > div:hover > i{
                    transform: scale(1.2, 1.2) !important;
                }
                header > div.run.disabled path{
                    fill: #969696;
                }
                header > div.run.disabled > i.stop path{
                    fill: #969696;
                }
                header > div.run.disabled > i.start path{
                    fill: #969696;
                }
                header .theory{
                    width: 250px;
                    height: 30px;
                    text-align: center;
                    line-height: 20px;
                    float: right;
                    color: #fff;
                    font-size: 12px;
                    background: #3188ff;
                    position: absolute;
                    cursor: pointer;
                    top: -2px;
                    right: -5px;
                }
                header .theory > i{
                    font-size: 15px;
                    margin-left: 2px;
                    transition-duration: .2s;
                    transition-timing-function: ease-out;
                }
                header .theory:hover i{
                    margin-left: 10px;
                    transition-duration: .2s;
                    transition-timing-function: ease-out;
                }
                header .theory::before{
                    content: '';
                    width: 40px;
                    height: 60px;
                    background: #3188ff;
                    transform: rotate(40deg);
                    position: absolute;
                    top: 0px;
                    left: -20px;
                }
                /* Header End */
                .container{
                    width: 100%;
                    height: auto;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                }
                /* Editor Start */
                
                .editor{
                    width: 500px;
                    height: 595px;
                    background: #212121;
                    overflow-y: scroll;
                    font-family: 'Ubuntu Mono', monospace;
                    scroll-behavior: smooth;
                    
                }
                
                .editor > .code{
                    width: 100%;
                    background: #212121;
                    display: flex;
                    justify-content: center;
                    align-items: flex-start;
                    flex-direction: row;
                    margin-top: 15px;
                    font-family: inherit;
                }
                .editor > .code > .line{
                    width: 50px;
                    font-family: inherit;
                }
                .editor > .code > .line  .line-no{
                    width: 50px;
                    height: 20px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-direction: row;
                    margin: 2px 0px;
                    font-family: inherit;
                    user-select: none;
                }
                
                .editor > .code > .line > .line-no  .active{
                    width: 10px;
                    height: 10px;
                    background: limegreen;
                    border-radius: 50%;
                    margin: 5px;
                    font-family: inherit;
                }
                .editor > .code > .line > .line-no  .active.skip{
                    background: rgba(205, 98, 50, 0.64);
                }
                .editor > .code > .line > .line-no  .row-no{
                    width: 30px;
                    height: 20px;
                    text-align: center;
                    line-height: 20px;
                    color: grey;
                    font-family: inherit;
                }
                
                .editor > .code > .code-text{
                    width: calc(100% - 50px);
                    font-family: 'Roboto Mono', monospace;
                }
                .editor > .code > .code-text .code-line-text{
                    width:  100%;
                    height: 20px;
                    margin: 2px 0px;
                    font-family: inherit;
                    box-sizing: border-box;
                }
                .editor > .code > .code-text .code-line-text.active{
                    background: rgba(50, 50, 205, 0.64);
                }
                .editor > .code > .code-text .code-line-text.active.skip{
                    background: rgba(205, 98, 50, 0.64);
                }
                .editor > .code > .code-text .code-line-text span{
                    height: 20px;
                    font-size: 13px;
                    vertical-align: text-top;
                }
                .editor > .code > .code-text .code-line-text::-moz-selection { 
                  background: rgba(0, 196, 255, 0.23);
                }

                .editor > .code > .code-text .code-line-text::selection {
                  background: rgba(0, 196, 255, 0.23);
                }
                .editor > .code > .code-text .code-line-text span::-moz-selection { 
                  
                  background: rgba(0, 196, 255, 0.23);
                }

                .editor > .code > .code-text .code-line-text span::selection {
                  
                  background: rgba(0, 196, 255, 0.23);
                }
                /* color codes */
                .color-grey{
                    color: #d8d8d8;
                }
                .color-blue{
                    color: #32adfa;
                }
                .color-green{
                    color: #0ae868;
                }
                .color-purple{
                    color: #9438ff;
                }
                .color-yellow{
                    color: #fff720;
                }
                .color-skyblue{
                    color: #20c3ff;
                }
                
                /*  live */
                .live{
                    width: calc(100% - 500px);
                    height: 595px;
                    background: #fff;
                }
                .graphical{
                    width: 100%;
                    height: 400px;
                    background: #242424;
                    padding: 20px;
                    box-sizing: border-box;
                    position: relative;
                }
                .bash{
                    width: 100%;
                    height: 195px;
                    background: #272727;
                    
                }
                .operations{
                    width: 100%;
                    height: 30px;
                    background: #3b3b3b;
                    border-top: 1px solid #535353;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    flex-direction: row;
                    position: relative;
                }
                .operations .tag{
                    width: auto;
                    height: 20px;
                    text-align: center;
                    line-height: 20px;
                    color: #fff;
                    margin: 0px 5px;
                    font-size: 13px;
                    font-weight: 300;
                    display: flex;
                    
                }
                .operations .tag.cmd{
                    color: deepskyblue;
                    cursor: pointer;
                }
                .operations .tag.cmd path{
                    fill: deepskyblue;
                }
                .operations .tag.cmd.disabled{
                    color: #797979;
                    cursor:context-menu;
                }
                .operations .tag.cmd.disabled path{
                     fill: #797979;
                }
                .operations .tag.right{
                    position: absolute;
                    right: 0px;
                    top: 5px;
                    cursor: pointer;
                }
                .operations .tag.right:hover i{
                    transform: rotate(90deg);
                    transition-duration: .3s;
                }
                .operations .tag > i{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: row;
                    margin: 0px 2px;
                    transition-duration: .3s;
                    transform: rotate(0deg);
                }
                .operations .tag > i svg{
                    width: 18px;
                    height: 18px;
                }.operations .tag.right > i svg{
                    width: 10px;
                    height: 10px;
                }
                .operations .tag.cmd:not(.disabled):hover{
                    color: #e2e2e2;
                }
                .operations .tag.cmd:not(.disabled):hover path{
                    fill: #e2e2e2;
                }
                .command{
                    width: 100%;
                    height:165px;
                    overflow-y: scroll;
                    overflow-x: hidden;
                }
                .commands-line{
                    width: 100%;
                    height: 160px;
                    padding: 20px;
                    box-sizing: border-box;
                    font-family: 'VT323', monospace;
                }
                .commands-line .code-text{
                    width: auto;
                    height: 20px;
                    text-align: left;
                    line-height: 20px;
                    font-family: inherit;
                }
                .commands-line .code-text > p{
                    font-family: inherit;
                    font-size: 18px;
                    color: #d1d1d1;
                    display: inline
                }
                .commands-line .code-text > p.user{
                    font-weight: 300;
                    color: #12ea7e;
                }
                .commands-line .code-text > .getCommand{
                    width: auto;
                    height: 20px;
                    font-size: 18px;
                    color: #d1d1d1;
                    border: none;
                    outline: none;
                    font-family: inherit;
                    background: transparent;
                }
                /* scroller */
                .scroll-x::-webkit-scrollbar {
                  width: 8px;
                }

                .scroll-x::-webkit-scrollbar-track {
                  background: #1a1a1a;
                }

                .scroll-x::-webkit-scrollbar-thumb {
                  background: #555;
                }

                .scroll-x::-webkit-scrollbar-thumb:hover {
                  background: #6d6d6d;
                }
                
                /* graphical */
                .graphical > h1{
                    text-align: center;
                    font-size: 15px;
                    color: #e6e6e6;
                    font-weight: 400;
                }
                .varibles-box{
                    width: 100%;
                    height: 100px;
                    border-radius: 2px;
                    margin: 10px 0px;
                }
                .direction-box{
                    width: 820px;
                    height: 70px;
                    border-radius: 2px;
                    margin: 10px 0px;
                    position: absolute;
                    top: 130px;
                }
                .direction-box .queue-line{
                    width: 60px;
                    height: 70px;
                    position: absolute;
                    left: 225px;
                    transform: rotate(180deg);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    opacity: 0;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(1,.01,.98,.58);
                }
                .direction-box .queue-line.animate{
                    opacity: 1;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(1,.01,.98,.58);
                }
                
                .varibles-box > .header{
                    width: 100%;
                    height: 20px;
                    padding: 0px 10px;
                    box-sizing: border-box;
                    line-height: 20px;
                    position: relative;
                }
                .varibles-box > .header > em{
                    font-size: 12px;
                    color: #d1d1d1;
                    font-style: normal;
                }
                .varibles-box > .header .color-info{
                    width: auto;
                    height: 20px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    position: absolute;
                    right: 0px;
                    top: 0px;
                }
                .varibles-box > .header .color-info .color{
                    width: auto;
                    height: 20px;
                    text-align: center;
                    line-height: 20px;
                    margin: 0px 10px;
                }
                .varibles-box > .header .color-info .color .colorCode{
                    width: 10px;
                    height: 10px;
                    display: inline-block;
                }
                .varibles-box > .header .color-info .color .red{
                    background: #9d1434;
                }
                .varibles-box > .header .color-info .color .green{
                    background: #01ada5;
                }
                .varibles-box > .header .color-info .color .info{
                    font-size: 12px;
                    color: #d1d1d1;
                }
                .memory{
                    width: 100%;
                    height: 80px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    flex-direction: row;
                    padding: 0px 10px;
                    box-sizing: border-box;
                }
                .memory .variable{
                    width: 60px;
                    height: 60px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    flex-direction: column;
                    border-radius: 1px;
                    transform: scale(1, 1);
                    transition-duration: .2s;
                    margin: 0px 5px;
                }
                .memory .variable.free{
                    background: #9d1434;
                }
                .memory .variable.used{
                    background: #01ada5;
                }
                .memory .variable > .vname{
                    width: 100%;
                    height: 15px;
                    text-align: left;
                    line-height: 10px;
                }
                .memory .variable > .vname > span{
                    color: #e6e6e6;
                    font-size: 10px;
                    padding: 0px 5px;
                    box-sizing: border-box;
                }
                .memory .variable > .vvalue{
                    width: 100%;
                    height: 45px;
                    text-align: center;
                    line-height: 40px;
                }
                .memory .variable > .vvalue > span{
                    color: #fff;
                    font-size: 25px;
                    padding: 0px 5px;
                    box-sizing: border-box;
                }
                .memory .variable > .vaddress{
                    width: 100%;
                    height: 15px;
                    text-align: right;
                    line-height: 10px;
                }
                .memory .variable > .vaddress > span{
                    color: #e6e6e6;
                    font-size: 10px;
                    padding: 0px 5px;
                    box-sizing: border-box;
                }
                /** array */
                .array-box{
                    width: 100%;
                    height: 150px;
                    margin-top: 80px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    flex-direction: column;
                    opacity: 0;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(1,.01,.98,.58);
                }
                .array-box.animate{
                    opacity: 1;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(1,.01,.98,.58);
                }
                .array-box .queue{
                    height: 70px;
                    display: flex;
                    justify-content: center;
                    align-items: flex-start;
                    flex-direction: column;
                    position: relative;
                    
                }
                .array-box .move-box{
                    width: 100%;
                    height: 60px;
                    position: absolute;
                    top: -20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    
                }
                
                .array-box .move-box .symbol{
                    width: 60px;
                    height: 60px;
                    opacity: 0;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(1,.01,.98,.58);
                }
                .array-box .move-box .symbol.active{
                    opacity: 1;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(1,.01,.98,.58);
                }
                .array-box .move-box .symbol > div{
                    content: "";
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    border: 2px solid lime;
                    border-left-color: transparent;
                    border-right-color: transparent;
                    border-bottom-color: transparent;
                    position: relative;
                }
                .array-box .move-box .symbol > div::before{
                    content: '';
                    width: 0;
                    height: 0;
                    border-top: 6px solid transparent;
                    border-right: 12px solid lime;
                    border-bottom: 6px solid transparent;
                    position: absolute;
                    top: 0px;
                    left: 5px;
                    transform: rotate(-45deg);
                }
                .array-box .queue .array-index{
                    width: 100%;
                    height: 70px;
                }
                
                .array-box .queue .array-index .array-graphical{
                    width: 100%;
                    height: 70px;
                    border-top: 1px solid grey;
                    border-bottom: 1px solid grey;
                    background: rgb(36,36,36);
                    background: linear-gradient(90deg, rgba(36,36,36,1) 0%, rgba(74,74,74,1) 50%, rgba(36,36,36,1) 100%);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: row;
                }
                .array-box .queue .array-index .array-graphical::before{
                    content: '';
                    width: 0;
                    height: 0;
                    border-top: 6px solid transparent;
                    border-right: 12px solid grey;
                    border-bottom: 6px solid transparent;
                    position: absolute;
                    top: -5px;
                    left: -10px;

                }
                .array-box .queue .array-index .array-graphical::after{
                    content: '';
                    width: 0;
                    height: 0;
                    border-top: 6px solid transparent;
                    border-right: 12px solid grey;
                    border-bottom: 6px solid transparent;
                    position: absolute;
                    top: 66px;
                    left: -10px;

                }
                .array-box .queue .array-index .array-graphical  .byte{
                    width: 56px;
                    height: 40px;
                    border-radius: 5px;
                    margin: 15px 2px;
                    text-align: center;
                    border: 2px solid transparent;
                    line-height: 36px;
                    color: #fff;
                    box-sizing: border-box;
                    
                }
                .array-box .queue .array-index .array-graphical  .byte.used{
                    background: #01ada5;
                    border: 2px solid #01ada5;
                    transition-duration: .5s;
                    transition-timing-function: ease-out;
                }
                .array-box .queue .array-index .array-graphical  .byte.free{
                    background: #9d1434;
                    font-size: 10px;
                    border: 2px solid #9d1434;
                    transition-duration: .5s;
                    transition-timing-function: ease-out;
                }
                .array-box .queue .array-index .array-graphical  .byte.used.active{
                    border: 2px solid #0ae8de;
                    background: #0ae8de;
                    -webkit-box-shadow: 0px 0px 20px 0px #0ae8de;
                    -moz-box-shadow: 0px 0px 20px 0px #0ae8de;
                    box-shadow: 0px 0px 20px 0px #0ae8de;
                    line-height: 36px;
                    transition-duration: .5s;
                    transition-timing-function: ease-out;
                }
                .array-box .queue .array-index .array-graphical  .byte.free.active{
                    border: 2px solid #e0234f;
                    background: #e0234f;
                    -webkit-box-shadow: 0px 0px 20px 0px #e0234f;
                    -moz-box-shadow: 0px 0px 20px 0px #e0234f;
                    box-shadow: 0px 0px 20px 0px #e0234f;
                    line-height: 36px;
                    transition-duration: .5s;
                    transition-timing-function: ease-out;
                }
                
                
                .array-box .index-no{
                    height: 30px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: -60px;
                    
                }
                .array-box .number{
                    width: 60px;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    color: #939393;
                    font-size: 12px;
                }
                .array-box .number.active{
                    color: #fff;
                }
                
                .array-pointer{
                    width: 660px;
                    height: 100px;
                    position: relative;
                    opacity: 0;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(1,.01,.98,.58);
                    margin-left: -60px;
                }
                .array-pointer.animate {
                    opacity: 1;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(1,.01,.98,.58);
                }
                .array-pointer .pointer{
                    width: 15px;
                    height: 60px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    position: absolute;
                }
                .array-pointer .pointer.front{
                    left: 30px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }
                .array-pointer .pointer.front.pos_0{
                    left: 30px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }.array-pointer .pointer.front.pos_1{
                    left: 90px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }.array-pointer .pointer.front.pos_2{
                    left: 150px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }.array-pointer .pointer.front.pos_3{
                    left: 210px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }.array-pointer .pointer.front.pos_4{
                    left: 270px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }.array-pointer .pointer.front.pos_5{
                    left: 330px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }.array-pointer .pointer.front.pos_6{
                    left: 390px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }.array-pointer .pointer.front.pos_7{
                    left: 450px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }.array-pointer .pointer.front.pos_8{
                    left: 510px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }.array-pointer .pointer.front.pos_9{
                    left: 570px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }
                /******************************************/
                .array-pointer .pointer.rear{
                    left: 15px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }.array-pointer .pointer.rear.pos_0{
                    left: 15px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }.array-pointer .pointer.rear.pos_1{
                    left: 75px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }.array-pointer .pointer.rear.pos_2{
                    left: 135px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }.array-pointer .pointer.rear.pos_3{
                    left: 195px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }.array-pointer .pointer.rear.pos_4{
                    left: 255px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }.array-pointer .pointer.rear.pos_5{
                    left: 215px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }.array-pointer .pointer.rear.pos_6{
                    left: 275px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }.array-pointer .pointer.rear.pos_7{
                    left: 335px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }.array-pointer .pointer.rear.pos_8{
                    left: 395px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }.array-pointer .pointer.rear.pos_9{
                    left: 455px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }
                /*********************************************************/
                .array-pointer .pointer.move_0{
                    left: 23px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }
                .array-pointer .pointer.move_1{
                    left: 83px;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }
                .array-pointer .pointer.move_2{
                    left: calc(83px + 60px);
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }
                .array-pointer .pointer.move_3{
                    left: calc(83px + 120px);
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }
                .array-pointer .pointer.move_4{
                    left: calc(83px + 180px);
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }
                .array-pointer .pointer.move_5{
                    left: calc(83px + 240px);
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }
                .array-pointer .pointer.move_6{
                    left: calc(83px + 300px);
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }
                .array-pointer .pointer.move_7{
                    left: calc(83px + 360px);
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }
                .array-pointer .pointer.move_8{
                    left: calc(83px + 420px);
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }
                .array-pointer .pointer.move_9{
                    left: calc(83px + 480px);
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(0,.63,.45,.99);
                }
                .array-pointer .pointer .symbol{
                    width: 15px;
                    height: 30px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .array-pointer .pointer .symbol > i{
                    
                    
                }
                .array-pointer .pointer .symbol > i > svg{
                    width: 15px;
                    height: 20px;
                    
                }

                .array-pointer .pointer .symbol > i path{
                    fill: #fff;
                    transition-duration: .2s;
                    transition-timing-function: ease-out;
                }
                .array-pointer .pointer .symbol > i.active svg{
                    filter: drop-shadow(0px 0px 12px rgb(17, 182, 255));
                    transition-duration: .2s;
                    transition-timing-function: ease-out;
                }
                .array-pointer .pointer .symbol > i.active path{
                    fill: deepskyblue;
                    transition-duration: .2s;
                    transition-timing-function: ease-out;
                }
                .array-pointer .pointer .text{
                    color: #fff;
                    font-weight: 500;
                }
                
                /**************** question *********************/
                .askme{
                    width: 100%;
                    height: 625px;
                    background: rgba(0, 0, 0, 0.32);
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    z-index: +2;
                    display: none;
                }
                .askme .question-assesment{
                    width: 600px;
                    height: auto;
                    background: #262626;
                    border-radius: 10px;
                    border: 1px solid #6f6f6f;
                    padding: 20px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    flex-direction: column;
                    align-items: center;
                    
                }
                .askme .question-assesment .question{
                    width: 100%;
                    height: auto;
                    padding: 20px;
                    box-sizing: border-box;
                }
                .askme .question-assesment .question h4{
                    font-size: 18px;
                    color: #e8e8e8;
                }
                .askme .question-assesment .checkbox{
                    width: 100%;
                    height: auto;
                    padding: 20px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: row;
                    flex-wrap: wrap;
                }
                .askme .question-assesment .checkbox .option{
                    width: 50%;
                    padding: 10px 20px;
                    box-sizing: border-box;
                    color: #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .askme .question-assesment .checkbox .option label{
                    font-size: 15px;
                    min-height: 30px;
                }
                .askme .container {
                  display: block;
                  position: relative;
                  padding-left: 35px;
                  margin-bottom: 12px;
                  cursor: pointer;
                  font-size: 22px;
                  -webkit-user-select: none;
                  -moz-user-select: none;
                  -ms-user-select: none;
                  user-select: none;
                }

                .askme .container input {
                  position: absolute;
                  opacity: 0;
                  cursor: pointer;
                  height: 0;
                  width: 0;
                }

                .askme .checkmark {
                  position: absolute;
                  top: 0;
                  left: 0;
                  height: 25px;
                  width: 25px;
                  background-color: #eee;
                }

                .askme .container:hover input ~ .checkmark {
                  background-color: #ccc;
                }

                .askme .container input:checked ~ .checkmark {
                   background-color: limegreen;
                }
                .askme .container input:checked ~ .checkmark.false{
                   background-color: #cd323e;
                } 
                .askme .checkmark:after {
                  content: "";
                  position: absolute;
                  display: none;
                }
                .askme .container input:checked ~ .checkmark:after {
                  display: block;
                }
                .askme .container .checkmark:after {
                  left: 9px;
                  top: 5px;
                  width: 5px;
                  height: 10px;
                  border: solid white;
                  border-width: 0 3px 3px 0;
                  -webkit-transform: rotate(45deg);
                  -ms-transform: rotate(45deg);
                  transform: rotate(45deg);
                }
                /****** information ***************/
                .information{
                    width: 100%;
                    height: 625px;
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    z-index: +3;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(1,.11,.11,1.03);
                    background: rgb(19 19 47);
                }
                .information.animate{
                    left: 100%;
                    transition-duration: .5s;
                    transition-timing-function: cubic-bezier(1,.11,.11,1.03);
                }
                .information .header{
                    width: 100%;
                    height: 30px;
                    background: #1f1f1f;
                    border-bottom: 1px solid #363636;
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    overflow: hidden;
                }
                .information .header div{
                    width: 200px;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    float: right;
                    color: #fff;
                    font-size: 12px;
                    background: #3188ff;
                    position: relative;
                    cursor: pointer;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .information .header div > i{
                    font-size: 15px;
                    margin-left: 0px;
                    transition-duration: .2s;
                    transition-timing-function: ease-out;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 15px;
                    height: 15px;
                    margin-left: 2px;
                }
                .information .header div:hover i{
                    margin-left: 10px;
                    transition-duration: .2s;
                    transition-timing-function: ease-out;
                    transform: scale(1.2, 1.2);
                }
                .information .header div::before{
                    content: '';
                    width: 40px;
                    height: 60px;
                    background: #3188ff;
                    transform: rotate(40deg);
                    position: absolute;
                    top: 0px;
                    left: -20px;
                }
                .information .text{
                    width: 100%;
                    height: auto;
                    margin-top: 30px;
                    padding: 20px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    flex-direction: row;
                    flex-wrap: wrap;
                }
                .information .text .blocks{
                    border-radius: 10px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    flex-direction: column;
                    overflow: hidden;
                    border: 1px solid #484848;
                    padding: 10px;
                    box-sizing: border-box;
                    background: #212121;
                    margin: 20px;
                }
                .information .text .blocks .question-text{
                    width: 100%;
                    height: 40px;
                    padding: 0px 10px;
                    box-sizing: 40px;
                    line-height: 40px;
                    background: #3188ff;
                    color: #e3e3e3;
                    font-size: 14px;
                }
                .information .text .blocks .answer-text{
                    width: 100%;
                    height: auto;
                    padding: 10px;
                    box-sizing: content-box;
                }
                .information .text .blocks .answer-text > p{
                    font-size: 15px;
                    color: #bfbfbf;
                    margin: 5px;
                }
                .information .text .blocks:nth-child(1){
                    width: 100%;
                }
                .information .text .blocks:nth-child(2){
                    width: 400px;
                }
                .information .text .blocks:nth-child(3){
                    width: 200px;
                }
                 .information .text .blocks:nth-child(4){
                    width: 400px;
                    height: 210px;
                }
/* preloader */

.preloader{
                    width: 100vw;
                    height: 100vh;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    background: #1a1a1a;
                    position: fixed;
                    top: 0px;
                    left: 0px;
                    z-index: +5;
                    
                }
                .preloader .logo{
                    width: 400px;
                    height: 200px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: row;
                }
                .preloader .logo > h1{
                    font-size: 40px;
                    color: #fff;
                }
                .preloader .logo > h1::first-letter{
                    font-size: 180px;
                    color: #305ef8;
                }
                .preloader .logo .box{
                    width: 200px;
                    height: 100px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: row;
                    margin-left: -80px;
                    margin-top: -20px;
                }
                .preloader .logo .box span{
                    width: 50px;
                    height: 100px;
                    background: #7e7e7e;
                    margin: 0px 5px;
                    
                }
                .preloader .logo .box span:nth-child(1){
                    height: 70px;
                    background: #0ddbac;
                }
                .preloader .logo .box span:last-child{
                    height: 70px;
                }
                .preloader .text{
                    font-size: 15px;
                    color: #fff;
                }
                .preloader .loading-bar{
                    width: 300px;
                    height: 20px;
                    border-radius: 20px;
                    border: 5px solid #656565;
                    margin-top: 20px;
                    overflow: hidden;
                }
                .preloader .loading-bar >div{
                    width: 0px;
                    height: 20px;
                    background: rgb(9,9,121);
                    background: linear-gradient(90deg, rgba(9,9,121,1) 0%, rgba(132,0,255,1) 100%);
                    animation: queue;
                    animation-duration: 3s;
                    animation-fill-mode: forwards;
                    
                }
                @keyframes queue{
                    100%{
                        width: 100%;
                    }
                }