@font-face{font-family:Museo Sans Rounded;src:url(https://static.igem.wiki/teams/4591/wiki/wiki/font/museosansrounded-300.otf);font-weight:400;font-style:normal}*{box-sizing:border-box;font-family:Museo Sans Rounded,ui-sans-serif,sans-serif}body{display:grid;grid-gap:10px;grid-template-areas:"header header" "canvas settings" "canvas controls" "footer footer";grid-template-columns:max-content max-content;grid-template-rows:max-content max-content max-content max-content;height:max-content;width:max-content}header{grid-area:header;font-size:2em;font-weight:700;padding:10px;text-align:center}canvas{grid-area:canvas}label{display:inline-block;width:75px}.cols{grid-area:cols}.rows{grid-area:rows}.generate{grid-area:generate}.controls{display:grid;grid-template-areas:". up ." "left . right" ". down .";grid-template-columns:max-content max-content max-content;grid-template-rows:max-content max-content max-content}.up{grid-area:up}.right{grid-area:right}.down{grid-area:down}.left{grid-area:left}footer{grid-area:footer;text-align:center}footer>a:hover{background-color:#d3d3d3}@media (max-width: 640px){body{grid-template-areas:"header header" "canvas canvas" "settings controls" "footer footer";grid-template-columns:max-content max-content;grid-template-rows:max-content max-content max-content max-content}}.row{display:flex;flex-wrap:wrap;position:relative;box-sizing:border-box;width:100%}.col{flex:1 0 0%}.col-0{display:none}.offset-0{margin-left:0%}.col-1{width:4.1666666667%}.offset-1{margin-left:4.1666666667%}.col-2{width:8.3333333333%}.offset-2{margin-left:8.3333333333%}.col-3{width:12.5%}.offset-3{margin-left:12.5%}.col-4{width:16.6666666667%}.offset-4{margin-left:16.6666666667%}.col-5{width:20.8333333333%}.offset-5{margin-left:20.8333333333%}.col-6{width:25%}.offset-6{margin-left:25%}.col-7{width:29.1666666667%}.offset-7{margin-left:29.1666666667%}.col-8{width:33.3333333333%}.offset-8{margin-left:33.3333333333%}.col-9{width:37.5%}.offset-9{margin-left:37.5%}.col-10{width:41.6666666667%}.offset-10{margin-left:41.6666666667%}.col-11{width:45.8333333333%}.offset-11{margin-left:45.8333333333%}.col-12{width:50%}.offset-12{margin-left:50%}.col-13{width:54.1666666667%}.offset-13{margin-left:54.1666666667%}.col-14{width:58.3333333333%}.offset-14{margin-left:58.3333333333%}.col-15{width:62.5%}.offset-15{margin-left:62.5%}.col-16{width:66.6666666667%}.offset-16{margin-left:66.6666666667%}.col-17{width:70.8333333333%}.offset-17{margin-left:70.8333333333%}.col-18{width:75%}.offset-18{margin-left:75%}.col-19{width:79.1666666667%}.offset-19{margin-left:79.1666666667%}.col-20{width:83.3333333333%}.offset-20{margin-left:83.3333333333%}.col-21{width:87.5%}.offset-21{margin-left:87.5%}.col-22{width:91.6666666667%}.offset-22{margin-left:91.6666666667%}.col-23{width:95.8333333333%}.offset-23{margin-left:95.8333333333%}.col-24{width:100%}.offset-24{margin-left:100%}@media (max-width: 1200px){.col-xl-0{display:none}.offset-xl-0{margin-left:0%}.col-xl-1{width:calc(4.1666666667% * 1)}.offset-xl-1{margin-left:calc(4.1666666667% * 1)}.col-xl-2{width:calc(4.1666666667% * 2)}.offset-xl-2{margin-left:calc(4.1666666667% * 2)}.col-xl-3{width:calc(4.1666666667% * 3)}.offset-xl-3{margin-left:calc(4.1666666667% * 3)}.col-xl-4{width:calc(4.1666666667% * 4)}.offset-xl-4{margin-left:calc(4.1666666667% * 4)}.col-xl-5{width:calc(4.1666666667% * 5)}.offset-xl-5{margin-left:calc(4.1666666667% * 5)}.col-xl-6{width:calc(4.1666666667% * 6)}.offset-xl-6{margin-left:calc(4.1666666667% * 6)}.col-xl-7{width:calc(4.1666666667% * 7)}.offset-xl-7{margin-left:calc(4.1666666667% * 7)}.col-xl-8{width:calc(4.1666666667% * 8)}.offset-xl-8{margin-left:calc(4.1666666667% * 8)}.col-xl-9{width:calc(4.1666666667% * 9)}.offset-xl-9{margin-left:calc(4.1666666667% * 9)}.col-xl-10{width:calc(4.1666666667% * 10)}.offset-xl-10{margin-left:calc(4.1666666667% * 10)}.col-xl-11{width:calc(4.1666666667% * 11)}.offset-xl-11{margin-left:calc(4.1666666667% * 11)}.col-xl-12{width:calc(4.1666666667% * 12)}.offset-xl-12{margin-left:calc(4.1666666667% * 12)}.col-xl-13{width:calc(4.1666666667% * 13)}.offset-xl-13{margin-left:calc(4.1666666667% * 13)}.col-xl-14{width:calc(4.1666666667% * 14)}.offset-xl-14{margin-left:calc(4.1666666667% * 14)}.col-xl-15{width:calc(4.1666666667% * 15)}.offset-xl-15{margin-left:calc(4.1666666667% * 15)}.col-xl-16{width:calc(4.1666666667% * 16)}.offset-xl-16{margin-left:calc(4.1666666667% * 16)}.col-xl-17{width:calc(4.1666666667% * 17)}.offset-xl-17{margin-left:calc(4.1666666667% * 17)}.col-xl-18{width:calc(4.1666666667% * 18)}.offset-xl-18{margin-left:calc(4.1666666667% * 18)}.col-xl-19{width:calc(4.1666666667% * 19)}.offset-xl-19{margin-left:calc(4.1666666667% * 19)}.col-xl-20{width:calc(4.1666666667% * 20)}.offset-xl-20{margin-left:calc(4.1666666667% * 20)}.col-xl-21{width:calc(4.1666666667% * 21)}.offset-xl-21{margin-left:calc(4.1666666667% * 21)}.col-xl-22{width:calc(4.1666666667% * 22)}.offset-xl-22{margin-left:calc(4.1666666667% * 22)}.col-xl-23{width:calc(4.1666666667% * 23)}.offset-xl-23{margin-left:calc(4.1666666667% * 23)}.col-xl-24{width:calc(4.1666666667% * 24)}.offset-xl-24{margin-left:calc(4.1666666667% * 24)}}@media (max-width: 992px){.col-lg-0{display:none}.offset-lg-0{margin-left:0%}.col-lg-1{width:calc(4.1666666667% * 1)}.offset-lg-1{margin-left:calc(4.1666666667% * 1)}.col-lg-2{width:calc(4.1666666667% * 2)}.offset-lg-2{margin-left:calc(4.1666666667% * 2)}.col-lg-3{width:calc(4.1666666667% * 3)}.offset-lg-3{margin-left:calc(4.1666666667% * 3)}.col-lg-4{width:calc(4.1666666667% * 4)}.offset-lg-4{margin-left:calc(4.1666666667% * 4)}.col-lg-5{width:calc(4.1666666667% * 5)}.offset-lg-5{margin-left:calc(4.1666666667% * 5)}.col-lg-6{width:calc(4.1666666667% * 6)}.offset-lg-6{margin-left:calc(4.1666666667% * 6)}.col-lg-7{width:calc(4.1666666667% * 7)}.offset-lg-7{margin-left:calc(4.1666666667% * 7)}.col-lg-8{width:calc(4.1666666667% * 8)}.offset-lg-8{margin-left:calc(4.1666666667% * 8)}.col-lg-9{width:calc(4.1666666667% * 9)}.offset-lg-9{margin-left:calc(4.1666666667% * 9)}.col-lg-10{width:calc(4.1666666667% * 10)}.offset-lg-10{margin-left:calc(4.1666666667% * 10)}.col-lg-11{width:calc(4.1666666667% * 11)}.offset-lg-11{margin-left:calc(4.1666666667% * 11)}.col-lg-12{width:calc(4.1666666667% * 12)}.offset-lg-12{margin-left:calc(4.1666666667% * 12)}.col-lg-13{width:calc(4.1666666667% * 13)}.offset-lg-13{margin-left:calc(4.1666666667% * 13)}.col-lg-14{width:calc(4.1666666667% * 14)}.offset-lg-14{margin-left:calc(4.1666666667% * 14)}.col-lg-15{width:calc(4.1666666667% * 15)}.offset-lg-15{margin-left:calc(4.1666666667% * 15)}.col-lg-16{width:calc(4.1666666667% * 16)}.offset-lg-16{margin-left:calc(4.1666666667% * 16)}.col-lg-17{width:calc(4.1666666667% * 17)}.offset-lg-17{margin-left:calc(4.1666666667% * 17)}.col-lg-18{width:calc(4.1666666667% * 18)}.offset-lg-18{margin-left:calc(4.1666666667% * 18)}.col-lg-19{width:calc(4.1666666667% * 19)}.offset-lg-19{margin-left:calc(4.1666666667% * 19)}.col-lg-20{width:calc(4.1666666667% * 20)}.offset-lg-20{margin-left:calc(4.1666666667% * 20)}.col-lg-21{width:calc(4.1666666667% * 21)}.offset-lg-21{margin-left:calc(4.1666666667% * 21)}.col-lg-22{width:calc(4.1666666667% * 22)}.offset-lg-22{margin-left:calc(4.1666666667% * 22)}.col-lg-23{width:calc(4.1666666667% * 23)}.offset-lg-23{margin-left:calc(4.1666666667% * 23)}.col-lg-24{width:calc(4.1666666667% * 24)}.offset-lg-24{margin-left:calc(4.1666666667% * 24)}}@media (max-width: 768px){.col-md-0{display:none}.offset-md-0{margin-left:0%}.col-md-1{width:calc(4.1666666667% * 1)}.offset-md-1{margin-left:calc(4.1666666667% * 1)}.col-md-2{width:calc(4.1666666667% * 2)}.offset-md-2{margin-left:calc(4.1666666667% * 2)}.col-md-3{width:calc(4.1666666667% * 3)}.offset-md-3{margin-left:calc(4.1666666667% * 3)}.col-md-4{width:calc(4.1666666667% * 4)}.offset-md-4{margin-left:calc(4.1666666667% * 4)}.col-md-5{width:calc(4.1666666667% * 5)}.offset-md-5{margin-left:calc(4.1666666667% * 5)}.col-md-6{width:calc(4.1666666667% * 6)}.offset-md-6{margin-left:calc(4.1666666667% * 6)}.col-md-7{width:calc(4.1666666667% * 7)}.offset-md-7{margin-left:calc(4.1666666667% * 7)}.col-md-8{width:calc(4.1666666667% * 8)}.offset-md-8{margin-left:calc(4.1666666667% * 8)}.col-md-9{width:calc(4.1666666667% * 9)}.offset-md-9{margin-left:calc(4.1666666667% * 9)}.col-md-10{width:calc(4.1666666667% * 10)}.offset-md-10{margin-left:calc(4.1666666667% * 10)}.col-md-11{width:calc(4.1666666667% * 11)}.offset-md-11{margin-left:calc(4.1666666667% * 11)}.col-md-12{width:calc(4.1666666667% * 12)}.offset-md-12{margin-left:calc(4.1666666667% * 12)}.col-md-13{width:calc(4.1666666667% * 13)}.offset-md-13{margin-left:calc(4.1666666667% * 13)}.col-md-14{width:calc(4.1666666667% * 14)}.offset-md-14{margin-left:calc(4.1666666667% * 14)}.col-md-15{width:calc(4.1666666667% * 15)}.offset-md-15{margin-left:calc(4.1666666667% * 15)}.col-md-16{width:calc(4.1666666667% * 16)}.offset-md-16{margin-left:calc(4.1666666667% * 16)}.col-md-17{width:calc(4.1666666667% * 17)}.offset-md-17{margin-left:calc(4.1666666667% * 17)}.col-md-18{width:calc(4.1666666667% * 18)}.offset-md-18{margin-left:calc(4.1666666667% * 18)}.col-md-19{width:calc(4.1666666667% * 19)}.offset-md-19{margin-left:calc(4.1666666667% * 19)}.col-md-20{width:calc(4.1666666667% * 20)}.offset-md-20{margin-left:calc(4.1666666667% * 20)}.col-md-21{width:calc(4.1666666667% * 21)}.offset-md-21{margin-left:calc(4.1666666667% * 21)}.col-md-22{width:calc(4.1666666667% * 22)}.offset-md-22{margin-left:calc(4.1666666667% * 22)}.col-md-23{width:calc(4.1666666667% * 23)}.offset-md-23{margin-left:calc(4.1666666667% * 23)}.col-md-24{width:calc(4.1666666667% * 24)}.offset-md-24{margin-left:calc(4.1666666667% * 24)}}@media (max-width: 576px){.col-sm-0{display:none}.offset-sm-0{margin-left:0%}.col-sm-1{width:calc(4.1666666667% * 1)}.offset-sm-1{margin-left:calc(4.1666666667% * 1)}.col-sm-2{width:calc(4.1666666667% * 2)}.offset-sm-2{margin-left:calc(4.1666666667% * 2)}.col-sm-3{width:calc(4.1666666667% * 3)}.offset-sm-3{margin-left:calc(4.1666666667% * 3)}.col-sm-4{width:calc(4.1666666667% * 4)}.offset-sm-4{margin-left:calc(4.1666666667% * 4)}.col-sm-5{width:calc(4.1666666667% * 5)}.offset-sm-5{margin-left:calc(4.1666666667% * 5)}.col-sm-6{width:calc(4.1666666667% * 6)}.offset-sm-6{margin-left:calc(4.1666666667% * 6)}.col-sm-7{width:calc(4.1666666667% * 7)}.offset-sm-7{margin-left:calc(4.1666666667% * 7)}.col-sm-8{width:calc(4.1666666667% * 8)}.offset-sm-8{margin-left:calc(4.1666666667% * 8)}.col-sm-9{width:calc(4.1666666667% * 9)}.offset-sm-9{margin-left:calc(4.1666666667% * 9)}.col-sm-10{width:calc(4.1666666667% * 10)}.offset-sm-10{margin-left:calc(4.1666666667% * 10)}.col-sm-11{width:calc(4.1666666667% * 11)}.offset-sm-11{margin-left:calc(4.1666666667% * 11)}.col-sm-12{width:calc(4.1666666667% * 12)}.offset-sm-12{margin-left:calc(4.1666666667% * 12)}.col-sm-13{width:calc(4.1666666667% * 13)}.offset-sm-13{margin-left:calc(4.1666666667% * 13)}.col-sm-14{width:calc(4.1666666667% * 14)}.offset-sm-14{margin-left:calc(4.1666666667% * 14)}.col-sm-15{width:calc(4.1666666667% * 15)}.offset-sm-15{margin-left:calc(4.1666666667% * 15)}.col-sm-16{width:calc(4.1666666667% * 16)}.offset-sm-16{margin-left:calc(4.1666666667% * 16)}.col-sm-17{width:calc(4.1666666667% * 17)}.offset-sm-17{margin-left:calc(4.1666666667% * 17)}.col-sm-18{width:calc(4.1666666667% * 18)}.offset-sm-18{margin-left:calc(4.1666666667% * 18)}.col-sm-19{width:calc(4.1666666667% * 19)}.offset-sm-19{margin-left:calc(4.1666666667% * 19)}.col-sm-20{width:calc(4.1666666667% * 20)}.offset-sm-20{margin-left:calc(4.1666666667% * 20)}.col-sm-21{width:calc(4.1666666667% * 21)}.offset-sm-21{margin-left:calc(4.1666666667% * 21)}.col-sm-22{width:calc(4.1666666667% * 22)}.offset-sm-22{margin-left:calc(4.1666666667% * 22)}.col-sm-23{width:calc(4.1666666667% * 23)}.offset-sm-23{margin-left:calc(4.1666666667% * 23)}.col-sm-24{width:calc(4.1666666667% * 24)}.offset-sm-24{margin-left:calc(4.1666666667% * 24)}}body,#app{height:100vh;width:100vw;margin:0;padding:0}.content{margin:0;padding:0;display:flex;justify-content:space-around;width:100%;max-width:1200px;border:1px solid #000;aspect-ratio:2;position:relative;top:50%;left:50%;transform:translate(-50%,-50%);flex-wrap:wrap}.content .canvas_wrap{height:100%;width:50%;overflow:hidden;position:relative}.content .canvas_wrap #mainForm{position:relative;top:50%;left:50%;transform:translate(-50%,-50%);border:3px solid #000}.content .settings_container{display:flex;padding:10px;width:50%;height:100%;flex-wrap:wrap}.content .settings_container .settings{font-size:2rem;position:relative;width:100%;height:50%;text-align:center}.content .settings_container .settings p{display:block;width:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.content .settings_container .controls{width:100%;grid-template-columns:3fr 3fr 3fr;font-size:3em;max-width:350px;position:relative;left:50%;transform:translate(-50%);height:auto;justify-content:center;align-content:center}.content .settings_container .controls .move{width:1.5em;border-radius:5px;height:.9em;text-align:center;line-height:1em;padding-top:.1em;box-sizing:border-box;margin-left:calc(50% - .75em);background-color:#509d8c;color:#fff;cursor:pointer;font-size:1.2em;font-weight:700;padding:auto;position:relative}.content .settings_container .controls .move:after{content:"";display:block;height:0em;width:0em;margin-left:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.content .settings_container .controls .move.up:after{transform:translate(-50%,-50%) rotate(180deg)}.content .settings_container .controls .move.left:after{transform:translate(-50%,-50%) rotate(90deg) translateY(.07em)}.content .settings_container .controls .move.right:after{transform:translate(-50%,-50%) rotate(270deg) translateY(.07em)}.content .Q_A{font-size:2rem;position:absolute;width:50%;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(132,132,132,.9);box-sizing:content-box;border-radius:5px;box-shadow:0 5px 10px #888;max-height:100vh}.content .Q_A .question{box-sizing:border-box;display:flex;justify-content:center;align-items:center;margin:1rem}.content .Q_A .question p{margin:0}.content .Q_A .answer{width:100%;display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center}.content .Q_A .answer .answer_item{padding:.6em;height:50%;width:50%;display:flex;justify-content:center;align-items:center}.content .Q_A .answer .answer_item button{font-size:1.3rem;background:#fff;border-radius:.6em;padding:.3em;cursor:pointer}.content .Q_A .answer .answer_item button .DOT{margin-right:.5em;font-size:1.5rem;display:inline-block;height:1.2em;width:1.2em;border-radius:50%;background:#aaa}.content .finished{position:absolute;width:90%;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:5px;box-shadow:0 5px 10px #888;background:linear-gradient(180deg,rgb(248,246,255) 0%,rgb(189,172,232) 100%)}.content .finished h1{text-align:center;margin-top:1em}.content .finished .close{position:absolute;right:0;top:0;height:3rem;width:3rem;border:none;background-color:transparent;cursor:pointer}.content .finished .close span{display:inline-block;width:100%;height:4px;border-radius:4px;background:#333;transform-origin:center}.content .finished .close span.first{transform:rotate(45deg) translate3d(5.5px,5.5px,0)}.content .finished .close span.second{transform:rotate(-45deg) translate3d(6px,-6px,0)}.content .finished .content_wrap{height:auto;width:100%}.content .finished .content_wrap .left{aspect-ratio:1;padding:1em;background-size:cover;position:relative}.content .finished .content_wrap .left img{width:100%;aspect-ratio:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.content .finished .content_wrap .right{padding:1em}.content .finished .content_wrap .right p{font-size:3em;text-align:center}.content .finished .content_wrap .right p b{font-size:1.5em}.content footer{margin:5px}@media (max-width: 768px){.content{margin-top:5px;border:none;width:100%;max-width:100%;height:fit-content;display:flex;flex-wrap:wrap;position:static;transform:none}.content .canvas_wrap{box-sizing:border-box;width:95%;max-width:450px;aspect-ratio:1;height:unset}.content .settings_container{box-sizing:border-box;width:95%;height:unset}.content .settings_container .settings{height:fit-content}.content .settings_container .settings p{position:static;transform:none;margin-top:.3em;margin-bottom:.5em}.content .Q_A{width:80%;height:unset;font-size:1.5em}.content .Q_A .question{padding:1.5rem;box-sizing:border-box}.content .Q_A .answer .answer_item{width:80%}.content .Q_A .answer .answer_item button{width:100%}.content .finished{height:unset}.content .finished .content_wrap .left{max-width:500px}.content .finished .content_wrap .left img{max-width:450px}.content .finished .content_wrap .right p{font-size:2em}}