:root{--maincolour:#141428;--shadowcolour:#14142833;--hovercolour:#1414281a;--white:#fff;--successcolour:#dbcb48;--backgroundcolour:#c8e6f0;--highlightcolour:#dbcb48;--invalidcolour:#c80a3c;--interactionbuttontake:#f07800;--interactionbuttonturnright:#009a68;--interactionbuttonturnleft:#e1460f;--interactionbuttonforward:#0b7ef2;--interactionbuttonloop:#e7e9eb;--codeGame-font-family-source-sans-pro:Source Sans Pro;--codeGame-font-family-freckle-face:Freckle Face;--codeGame-font-style-normal:normal;--codeGame-font-weight-600:600px;--codeGame-font-weight-normal:normal;--codeGame-font-size-16:16px;--codeGame-font-size-18:18px;--codeGame-font-size-32:32px;--codeGame-font-size-48:48px;--codeGame-character-spacing-0:0px;--codeGame-character-spacing-3-2:3.2px;--codeGame-character-spacing-1-44:1.44px;--codeGame-line-spacing-18:18px;--codeGame-line-spacing-24:24px;--codeGame-line-spacing-26:26px;--codeGame-line-spacing-35:35px;--codeGame-line-spacing-50:50px;--codeGame-line-spacing-65:65px;--codeGame-text-transform-uppercase:uppercase;--button-size-56:56px;--button-size-40:40px;--button-size-30:30px;--button-padding-8:8px}.mainTitle{display:none}@media (width<=1024px){.codeGame-bar{display:none}.codeGame button{cursor:pointer;width:var(--button-size-56);height:var(--button-size-56);width:var(--button-size-40);height:var(--button-size-40);border:1px solid var(--maincolour);background-color:#0000;background-position:50%;background-repeat:no-repeat;background-origin:content-box;border-radius:8px;margin-right:12px;padding:6px 12px}.codeGame div.button{cursor:pointer;width:var(--button-size-56);height:var(--button-size-56);width:var(--button-size-40);height:var(--button-size-40);border:1px solid var(--maincolour);background-color:#0000;background-position:50%;background-repeat:no-repeat;background-origin:content-box;border-radius:8px;margin-right:12px;padding:12px}.maintitle{font-family:var(--codeGame-font-family-freckle-face);font-style:var(--codeGame-font-style-normal);font-weight:var(--codeGame-font-weight-normal);font-size:var(--codeGame-font-size-48);line-height:var(--codeGame-line-spacing-50);letter-spacing:var(--codeGame-character-spacing-0);color:var(--maincolour);text-shadow:1px 1px 0px var(--white)}.subtitle{font-family:var(--codeGame-font-family-source-sans-pro);font-style:var(--codeGame-font-style-normal);font-weight:var(--codeGame-font-weight-normal);font-size:var(--codeGame-font-size-18);line-height:var(--codeGame-line-spacing-26);letter-spacing:var(--codeGame-character-spacing-0);color:var(--codeGame-color-050a3c)}.codeGame-main{background-color:var(--backgroundcolour);height:250px;margin-top:50px;display:block}.codeGame-render{height:250px;margin:0 5vw;display:block}.codeGame-messagebox-container{flex-direction:column;display:flex}.codeGame-messagebox{flex:1;align-self:center}.codeGame-messagebox-section{border:2px solid var(--maincolour);opacity:1;border-radius:8px;flex-direction:column;margin:0 20px;display:flex;box-shadow:5px 5px #0003}.codeGame-messagebox .success{background-color:var(--successcolour)}.codeGame-messagebox .failed{background-color:#c83737}.codeGame-messagebox-header{opacity:1;border-bottom:1px solid var(--maincolour);flex:1;padding-top:5px;padding-bottom:5px;position:relative}.codeGame-messagebox-header pre{letter-spacing:var(--codeGame-character-spacing-3-2);text-transform:uppercase;text-align:center;color:var(--maincolour);margin:0;padding:0;font:16px/24px Source Sans Pro}.codeGame-messagebox-header div.circle{background-image:url(../assets/circle-blue.svg);width:15px;height:15px;position:absolute;top:10px;right:20px}.codeGame-messagebox-cover{flex:1}.codeGame-messagebox-cover img{width:75%;padding:10px 10px 0}.codeGame-messagebox-content{text-align:center;flex:3;min-height:fit-content}.codeGame-messagebox-content h1{letter-spacing:var(--codeGame-character-spacing-0);letter-spacing:0;margin:0;padding:0}.codeGame-messagebox-actions{flex-direction:column;flex:4;align-items:center;min-height:fit-content;padding-bottom:20px;display:flex}.codeGame-messagebox-actions button.nextLevel{letter-spacing:1.44px;background:var(--white)0% 0% no-repeat padding-box;white-space:nowrap;border:2px solid #050a3c;border-radius:4px;width:auto;height:48px;margin:0;padding:10px 30px;font:600 18px/24px Source Sans Pro;transition:all .2s}.codeGame-messagebox-actions button.nextLevel:hover{transform:scale(1.142)}.codeGame-messagebox-actions button.retryLevel{width:100%;max-width:100px;height:48px;color:var(--maincolour);text-align:left;background-color:#0000;border:none;margin-top:16px;font:600 18px/24px Source Sans Pro}.codeGame-messagebox-actions button.retryLevel p{white-space:nowrap;margin:0;padding:0}.codeGame-messagebox-actions button.retryLevel p>span{margin-left:10px}.codeGame-messagebox-actions button.retryLevel p>img{margin:0;transition:all .2s}.codeGame-messagebox-actions button.retryLevel:hover p>img{transform-origin:50%;transform:rotate(45deg)}.codeGame-levelselector{flex-direction:column;align-items:center;min-height:fit-content;display:flex}.codeGame-levelselector-section{background-color:var(--maincolour);border:2px solid var(--white);opacity:1;z-index:9;border-radius:8px;flex-direction:column;flex:1;align-content:center;align-items:center;width:-moz-fit-content;min-height:fit-content;margin-top:20px;display:flex;box-shadow:5px 5px #0003}.codeGame-levelselector-scrollcontainer{width:100%;min-height:40vh;max-height:40vh;overflow-y:scroll;overflow-x:hide;scrollbar-width:auto;scrollbar-color:var(--white)var(--maincolour);flex:1;padding:0 50px 50px}::-webkit-scrollbar{display:inherit;width:10px}.codeGame-levelselector-scrollcontainer::-webkit-scrollbar{display:inherit;width:10px}.codeGame-levelselector-scrollcontainer::-webkit-scrollbar-track{background:var(--maincolour);border-left:1px solid #fff}.codeGame-levelselector-scrollcontainer::-webkit-scrollbar-thumb{background-color:#fff}.codeGame-levelselector-scrollcontainer h3{color:#fff;margin-top:0;padding-top:40px;font:18px/26px Source Sans Pro}.codeGame-levelselector-header{opacity:1;border-bottom:1px solid var(--white);flex:1;width:100%;padding-top:5px;padding-bottom:5px;position:relative}.codeGame-levelselector-header pre{font-family:var(--codeGame-font-family-source-sans-pro);letter-spacing:var(--codeGame-character-spacing-3-2);text-transform:uppercase;text-align:center;color:var(--white);margin:0;padding:0;font-size:10pt}.codeGame-levelselector-header div.circle{background-image:url(../assets/circle.svg);width:15px;height:15px;position:absolute;top:7px;right:8px}.codeGame-levelselector-content{grid-column-gap:16px;grid-row-gap:16px;grid-template-columns:repeat(3,1fr);align-content:center;align-self:center;align-items:center;width:-moz-fit-content;font:600 32px/24px Source Sans Pro;display:grid;position:relative}.codegame-levelselector-content div{cursor:pointer;width:var(--button-size-56);height:var(--button-size-56);text-align:center;background-color:#fff;border-radius:8px;display:inline-block}.codegame-levelselector-content div:hover{background-color:var(--backgroundcolour)}.codegame-levelselector-content div>span{pointer-events:none;vertical-align:middle;line-height:var(--button-size-56);display:inline-block}.codegame-levelselector-content div.current{background-color:var(--successcolour)}.codegame-levelselector-content div>img{display:none}.codegame-levelselector-content div>img.completed{pointer-events:none;background-color:var(--successcolour);border:2px solid var(--maincolour);border-radius:50%;margin-top:-5px;margin-left:15px;padding:5px;display:inline;position:absolute}.codeGame-levelselector-footer{border-top:1px solid var(--white);flex-direction:column;align-items:center;width:100%;display:flex}.codeGame-control{text-align:center;align-items:center;width:100%;height:500px;display:block}.codeGame-control-container{flex:1}.codeGame-control-upper{align-items:center}#codeGame-levelTitle{width:100%;position:absolute;top:60px}#codeGame-mainTitle{width:100%;font-size:24px;line-height:25px;display:block;position:absolute;top:0}#codeGame-subTitle{width:100%;font-size:16px;line-height:20px;position:absolute;top:80px}.bottomtext{position:absolute;top:500px}.codeGame-control-upper h1.maintitle{text-align:center;padding:0}.codeGame-control-upper h4.level{letter-spacing:var(--codeGame-character-spacing-3-2);color:#141428;text-align:center;letter-spacing:3.2px;text-transform:uppercase;opacity:1;padding:0;font:600 16px/26px Source Sans Pro}.codeGame-control-upper h3.subtitle{text-align:center;padding:14px 0}.codeGame-control-lower{flex-direction:column;flex:1;margin-top:8px;display:flex}.codeGame-control-code-container{background:var(--maincolour)0% 0% no-repeat padding-box;border:2px solid var(--white);opacity:1;border-radius:8px;flex-direction:column;display:flex;box-shadow:5px 5px #0003}.codeGame-control-code-header{opacity:1;border-bottom:1px solid var(--white);flex:1;padding-top:5px;padding-bottom:5px}.codeGame-control-code-header pre{font-family:var(--codeGame-font-family-source-sans-pro);letter-spacing:var(--codeGame-character-spacing-3-2);text-transform:uppercase;text-align:center;color:var(--white);margin:0;padding:0;font-size:10pt}.codeGame-control-code-header div.circle{background-image:url(../assets/circle.svg);width:15px;height:15px;position:absolute;top:7px;right:8px}.codeGame-control-code-header div.trashnote{letter-spacing:0;background-color:#fff;padding:0 10px;font:600 14px/24px Source Sans Pro;display:none;position:absolute;top:30px;right:-5px}.codeGame-control-code-header div.trash{cursor:pointer;background-image:url(../assets/delete.svg);width:24px;height:24px;position:absolute;top:3px;right:25px;transform:scale(.9)}.codeGame-control-code-header div.trash:hover{background-image:url(../assets/deleteHover.svg)}.codeGame-control-code-header div.trash:hover+div.trashnote{display:block}.codeGame-control-code-sequence{border-bottom:1px solid #fff;flex-wrap:wrap;flex:4;min-height:fit-content;padding:20px;display:flex}.codeGame-control-code-sequence div.button{margin-top:8px;margin-bottom:8px}.codeGame-control-code-sequence div.button.highlight{border:3px solid var(--highlightcolour)}.codeGame-control-code-actions{background-color:#0000;flex-direction:row;flex:4;min-height:fit-content;display:flex}.codeGame-control-code-actions.drop{background-color:var(--invalidcolour)}.codeGame-control-buttons{flex-direction:row;flex:1;align-self:flex-end;margin:20px;display:flex}.codeGame-control-execute{flex-direction:row-reverse;flex:3;align-content:flex-end;margin:20px 20px 20px 0;display:flex}.codeGame-control-levelselector{flex-direction:column;align-content:center;display:flex}.codeGame-loop{height:calc(var(--button-size-56) + var(--button-padding-8)*2);background-color:#fff;background-image:url(../assets/loop.svg);background-position:10px;background-repeat:no-repeat;background-size:30px;border-radius:8px;flex-direction:row;width:fit-content;min-width:192px;margin:0 12px 0 0;padding-left:50px;padding-right:14px;display:flex}.codeGame-loop:hover{transform:scaleX(1.02)scaleY(1.05)}.codeGame-loop.selected{background-color:var(--backgroundcolour)}.codeGame-loopContent{flex-direction:row;flex:9;align-items:flex-start;width:fit-content;display:flex}.codeGame-loopContent div.button{margin:8px 12px 8px 0;padding:0}.codeGame-loopContent div.button:hover{transform:none!important}.codeGame-loopContent div.button.highlight{border:3px solid var(--highlightcolour)}.codeGame-loopContent div.button.placeholder{pointer-events:none;border-color:#000!important}.codeGame-loopControl{flex-direction:row;flex:1;margin-left:12px;padding-left:6px;padding-right:6px;display:flex}.codeGame-loopCounter{flex-direction:column;justify-content:space-between;padding:3px 0;display:flex}.codeGame-loopCounter input{text-align:center;-moz-appearance:textfield;background-color:#0000;border:none;width:36px;font-size:12pt;font-weight:700}.codeGame-loopCounter input::-webkit-outer-spin-button,.codeGame-loopCounter input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.codeGame-loopCounter button{width:100%;height:20px;margin:0;padding:0;border-radius:4px!important}.codeGame-loopCounter button.up{background-image:url(../assets/triangle.svg);background-position:50%;background-repeat:no-repeat}.codeGame-loopCounter button.down{background-image:url(../assets/triangle-inverted.svg);background-position:50%;background-repeat:no-repeat}}@media (width>=1024px){.codeGame button,.codeGame div.button{cursor:pointer;width:var(--button-size-56);height:var(--button-size-56);border:1px solid var(--maincolour);background-color:#0000;background-position:50%;background-repeat:no-repeat;background-origin:content-box;border-radius:8px;margin-right:12px;padding:12px}.maintitle{font-family:var(--codeGame-font-family-freckle-face);font-style:var(--codeGame-font-style-normal);font-weight:var(--codeGame-font-weight-normal);font-size:var(--codeGame-font-size-48);line-height:var(--codeGame-line-spacing-50);letter-spacing:var(--codeGame-character-spacing-0);color:var(--maincolour);text-shadow:1px 1px 0px var(--white)}.subtitle{font-family:var(--codeGame-font-family-source-sans-pro);font-style:var(--codeGame-font-style-normal);font-weight:var(--codeGame-font-weight-normal);font-size:var(--codeGame-font-size-18);line-height:var(--codeGame-line-spacing-26);letter-spacing:var(--codeGame-character-spacing-0);color:var(--codeGame-color-050a3c)}.codeGame-main{background-color:var(--backgroundcolour);grid-template-columns:50% 50%;min-width:1025px;max-width:1500px;height:calc(100vh - 306px);min-height:500px;max-height:700px;margin:10px auto auto;display:grid}.codeGame-render{margin:0 5vw}.codeGame-messagebox-container{flex-direction:column;display:flex}.codeGame-messagebox{flex:1;align-self:center}.codeGame-messagebox-section{border:2px solid var(--maincolour);opacity:1;border-radius:8px;flex-direction:column;width:400px;margin-top:80px;display:flex;box-shadow:5px 5px #0003}.codeGame-messagebox .success{background-color:var(--successcolour)}.codeGame-messagebox .failed{background-color:#c83737}.codeGame-messagebox-header{opacity:1;border-bottom:1px solid var(--maincolour);flex:1;padding-top:5px;padding-bottom:5px;position:relative}.codeGame-messagebox-header pre{letter-spacing:var(--codeGame-character-spacing-3-2);text-transform:uppercase;text-align:center;color:var(--maincolour);margin:0;padding:0;font:16px/24px Source Sans Pro}.codeGame-messagebox-header div.circle{background-image:url(../assets/circle-blue.svg);width:15px;height:15px;position:absolute;top:10px;right:20px}.codeGame-messagebox-cover{flex:1}.codeGame-messagebox-cover img{width:100%;padding:10px 10px 0}.codeGame-messagebox-content{text-align:center;flex:3;min-height:fit-content;margin-bottom:50px}.codeGame-messagebox-content h1{letter-spacing:var(--codeGame-character-spacing-0);letter-spacing:0;margin:0;padding:0}.codeGame-messagebox-actions{flex-direction:column;flex:4;align-items:center;min-height:fit-content;padding-bottom:50px;display:flex}.codeGame-messagebox-actions button.nextLevel{letter-spacing:1.44px;background:var(--white)0% 0% no-repeat padding-box;white-space:nowrap;border:2px solid #050a3c;border-radius:4px;width:auto;height:48px;margin:0;padding:10px 30px;font:600 18px/24px Source Sans Pro;transition:all .2s}.codeGame-messagebox-actions button.nextLevel:hover{transform:scale(1.142)}.codeGame-messagebox-actions button.retryLevel{width:100%;max-width:100px;height:48px;color:var(--maincolour);text-align:left;background-color:#0000;border:none;margin-top:16px;font:600 18px/24px Source Sans Pro}.codeGame-messagebox-actions button.retryLevel p{white-space:nowrap;margin:0;padding:0}.codeGame-messagebox-actions button.retryLevel p>span{margin-left:10px}.codeGame-messagebox-actions button.retryLevel p>img{margin:0;transition:all .2s}.codeGame-messagebox-actions button.retryLevel:hover p>img{transform-origin:50%;transform:rotate(45deg)}.codeGame-levelselector{flex-direction:column;align-items:center;min-height:fit-content;display:flex}.codeGame-levelselector-section{background-color:var(--maincolour);border:2px solid var(--white);opacity:1;border-radius:8px;flex-direction:column;flex:1;align-content:center;align-items:center;width:-moz-fit-content;min-height:fit-content;margin-top:20px;display:flex;box-shadow:5px 5px #0003}.codeGame-levelselector-scrollcontainer{width:100%;min-height:40vh;max-height:40vh;overflow-y:scroll;overflow-x:hide;scrollbar-width:auto;scrollbar-color:var(--white)var(--maincolour);flex:1;padding:0 50px 50px}::-webkit-scrollbar{display:inherit;width:10px}.codeGame-levelselector-scrollcontainer::-webkit-scrollbar{display:inherit;width:10px}.codeGame-levelselector-scrollcontainer::-webkit-scrollbar-track{background:var(--maincolour);border-left:1px solid #fff}.codeGame-levelselector-scrollcontainer::-webkit-scrollbar-thumb{background-color:#fff}.codeGame-levelselector-scrollcontainer h3{color:#fff;margin-top:0;padding-top:40px;font:18px/26px Source Sans Pro}.codeGame-levelselector-header{opacity:1;border-bottom:1px solid var(--white);flex:1;width:100%;padding-top:5px;padding-bottom:5px;position:relative}.codeGame-levelselector-header pre{font-family:var(--codeGame-font-family-source-sans-pro);letter-spacing:var(--codeGame-character-spacing-3-2);text-transform:uppercase;text-align:center;color:var(--white);margin:0;padding:0;font-size:10pt}.codeGame-levelselector-header div.circle{background-image:url(../assets/circle.svg);width:15px;height:15px;position:absolute;top:7px;right:8px}.codeGame-levelselector-content{grid-column-gap:16px;grid-row-gap:16px;grid-template-columns:repeat(3,1fr);align-content:center;align-self:center;align-items:center;width:-moz-fit-content;font:600 32px/24px Source Sans Pro;display:grid;position:relative}.codegame-levelselector-content div{cursor:pointer;width:var(--button-size-56);height:var(--button-size-56);text-align:center;background-color:#fff;border-radius:8px;display:inline-block}.codegame-levelselector-content div:hover{background-color:var(--backgroundcolour)}.codegame-levelselector-content div>span{pointer-events:none;vertical-align:middle;line-height:var(--button-size-56);display:inline-block}.codegame-levelselector-content div.current{background-color:var(--successcolour)}.codegame-levelselector-content div>img{display:none}.codegame-levelselector-content div>img.completed{pointer-events:none;background-color:var(--successcolour);border:2px solid var(--maincolour);border-radius:50%;margin-top:-5px;margin-left:15px;padding:5px;display:inline;position:absolute}.codeGame-levelselector-footer{border-top:1px solid var(--white);flex-direction:column;align-items:center;width:100%;display:flex}.codeGame-control{flex-direction:column;align-items:center;display:flex}.codeGame-control-sidebar{max-width:80%}.codeGame-control-container{flex:1}.codeGame-control-upper{align-items:center}.codeGame-control-upper h1.maintitle{text-align:center;padding:0}.codeGame-control-upper h4.level{letter-spacing:var(--codeGame-character-spacing-3-2);color:#141428;text-align:center;letter-spacing:3.2px;text-transform:uppercase;opacity:1;padding:0;font:600 16px/26px Source Sans Pro}.codeGame-control-upper h3.subtitle{text-align:center;padding:32px 0 0}.codeGame-control-lower{flex-direction:column;flex:1;min-width:518px;margin-top:48px;display:flex}.codeGame-control-code-container{background:var(--maincolour)0% 0% no-repeat padding-box;border:2px solid var(--white);opacity:1;border-radius:8px;flex-direction:column;display:flex;box-shadow:5px 5px #0003}.codeGame-control-code-header{opacity:1;border-bottom:1px solid var(--white);flex:1;padding-top:5px;padding-bottom:5px}.codeGame-control-code-header pre{font-family:var(--codeGame-font-family-source-sans-pro);letter-spacing:var(--codeGame-character-spacing-3-2);text-transform:uppercase;text-align:center;color:var(--white);margin:0;padding:0;font-size:10pt}.codeGame-control-code-header div.circle{background-image:url(../assets/circle.svg);width:15px;height:15px;position:absolute;top:7px;right:8px}.codeGame-control-code-header div.trashnote{letter-spacing:0;background-color:#fff;padding:0 10px;font:600 14px/24px Source Sans Pro;display:none;position:absolute;top:30px;right:-5px}.codeGame-control-code-header div.trash{cursor:pointer;background-image:url(../assets/delete.svg);width:24px;height:24px;position:absolute;top:3px;right:25px;transform:scale(.9)}.codeGame-control-code-header div.trash:hover{background-image:url(../assets/deleteHover.svg)}.codeGame-control-code-header div.trash:hover+div.trashnote{display:block}.codeGame-control-code-sequence{border-bottom:1px solid #fff;flex-wrap:wrap;flex:4;min-height:fit-content;padding:20px;display:flex}.codeGame-control-code-sequence div.button{margin-top:8px;margin-bottom:8px}.codeGame-control-code-sequence div.button.highlight{border:3px solid var(--highlightcolour)}.codeGame-control-code-actions{background-color:#0000;flex-direction:row;flex:4;min-height:fit-content;display:flex}.codeGame-control-code-actions.drop{background-color:var(--invalidcolour)}.codeGame-control-buttons{flex-direction:row;flex:1;align-self:flex-end;margin:20px;display:flex}.codeGame-control-execute{flex-direction:row-reverse;flex:3;align-content:flex-end;margin:24px 24px 24px 0;display:flex}.codeGame-control-levelselector{flex-direction:column;align-content:center;display:flex}.codeGame-loop{height:calc(var(--button-size-56) + var(--button-padding-8)*2);background-color:#fff;background-image:url(../assets/loop.svg);background-position:10px;background-repeat:no-repeat;background-size:30px;border-radius:8px;flex-direction:row;width:fit-content;min-width:192px;margin:0 12px 0 0;padding-left:50px;padding-right:14px;display:flex}.codeGame-loop:hover{transform:scaleX(1.02)scaleY(1.05)}.codeGame-loop.selected{background-color:var(--backgroundcolour)}.codeGame-loopContent{flex-direction:row;flex:9;align-items:flex-start;width:fit-content;display:flex}.codeGame-loopContent div.button{margin:8px 12px 8px 0;padding:0}.codeGame-loopContent div.button:hover{transform:none!important}.codeGame-loopContent div.button.highlight{border:3px solid var(--highlightcolour)}.codeGame-loopContent div.button.placeholder{pointer-events:none;border-color:#000!important}.codeGame-loopControl{flex-direction:row;flex:1;margin-left:12px;padding-left:6px;padding-right:6px;display:flex}.codeGame-loopCounter{flex-direction:column;justify-content:space-between;padding:3px 0;display:flex}.codeGame-loopCounter input{text-align:center;-moz-appearance:textfield;background-color:#0000;border:none;width:36px;font-size:12pt;font-weight:700}.codeGame-loopCounter input::-webkit-outer-spin-button,.codeGame-loopCounter input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.codeGame-loopCounter button{width:100%;height:20px;margin:0;padding:0;border-radius:4px!important}.codeGame-loopCounter button.up{background-image:url(../assets/triangle.svg);background-position:50%;background-repeat:no-repeat}.codeGame-loopCounter button.down{background-image:url(../assets/triangle-inverted.svg);background-position:50%;background-repeat:no-repeat}}body{background-color:var(--backgroundcolour);touch-action:manipulation}.codeGame div.button.placeholder{border:1px dashed var(--backgroundcolour);cursor:default}.codeGame button.speaker{background-image:url(../assets/speaker.svg)}.codeGame button.speaker:hover{background-color:var(--hovercolour)}.codeGame button.muted{background-image:url(../assets/muted.svg)}.codeGame button.muted:hover{background-color:var(--hovercolour)}.codeGame button.minus{background-image:url(../assets/minus.svg)}.codeGame button.minus:hover{background-color:var(--hovercolour)}.codeGame button.restart{background-image:url(../assets/restart.svg)}.codeGame button.restart:hover{background-color:var(--hovercolour)}.codeGame button.plus{background-image:url(../assets/plus.svg)}.codeGame button.plus:hover{background-color:var(--hovercolour)}.codeGame button.next{background-image:url(../assets/next.svg)}.codeGame button.next:hover{background-color:var(--hovercolour)}.codeGame button.center{background-image:url(../assets/center.svg)}.codeGame button.center:hover{background-color:var(--hovercolour)}.codeGame button.vibrate{background-image:url(../assets/vibrate.html)}.codeGame button.vibrate:hover{background-color:var(--hovercolour)}.codeGame button.previous{background-image:url(../assets/previous.svg)}.codeGame button.previous:hover{background-color:var(--hovercolour)}.codeGame div.button.loop{background-color:var(--interactionbuttonloop);background-image:url(../assets/loop.svg)}.codeGame div.button.loop:hover{transform:scale(1.1)}.codeGame div.button.forward{background-color:var(--interactionbuttonforward);background-image:url(../assets/arrow-forward.svg)}.codeGame div.button.forward:hover{transform:scale(1.1)}.codeGame div.button.left{background-color:var(--interactionbuttonturnleft);background-image:url(../assets/arrow-turnleft.svg)}.codeGame div.button.left:hover{transform:scale(1.1)}.codeGame div.button.right{background-color:var(--interactionbuttonturnright);background-image:url(../assets/arrow-turnright.svg)}.codeGame div.button.right:hover{transform:scale(1.1)}.codeGame div.button.use{background-color:var(--interactionbuttontake);background-image:url(../assets/paw.svg)}.codeGame div.button.use:hover{transform:scale(1.1)}.codeGame button.levelselector{background-color:#0000;background-origin:initial;letter-spacing:var(--codeGame-character-spacing-1-44);background-position:0;background-repeat:no-repeat;font:600 18px/24px Source Sans Pro}.codeGame button.levelselector:hover{background-color:var(--hovercolour)}.codeGame button.levelselector.open{width:192px;color:var(--maincolour);white-space:nowrap;text-align:left;background-image:url(../assets/levelselect.svg);background-position-x:32px;border:none;border-radius:4px;align-self:center;margin-top:20px;padding-left:56px;padding-right:32px}.codeGame button.levelselector.close{background-color:#0000;background-image:url(../assets/close.svg);background-origin:initial;width:146px;height:48px;color:var(--white);text-align:left;background-position:32px;background-repeat:no-repeat;border-radius:4px;margin-top:16px;margin-bottom:16px;padding:0 48px 0 60px}.codeGame button.levelselector.close:hover{background-color:#ffffff26}.codeGame button.execute{letter-spacing:var(--codeGame-character-spacing-1-44);border:2px solid var(--white);width:100%;color:var(--white);white-space:nowrap;background-color:#0000;background-image:url(../assets/play.svg);background-position:0;background-repeat:no-repeat;border-radius:4px;font:600 18px/24px Source Sans Pro}.codeGame button.execute:hover{background-color:#ffffff26}.codeGame button.execute:focus{border:4px solid var(--white)}.codeGame.invalid{background-color:var(--invalidcolour)}@media (width>=768px){.codeGame button.execute{background-position:50%}}@media (width<=600px){.codeGame button,.codeGame div.button{width:var(--button-size-30);height:var(--button-size-30);margin-right:8px;padding:0 12px}.codeGame-loopCounter .up,.codeGame-loopCounter .down{width:var(--button-size-30);height:1px;margin-right:8px;padding:7px}.codeGame-loopCounter input{position:absolute;top:12px;right:0}.codeGame div.button.forward,.codeGame div.button.left,.codeGame div.button.right,.codeGame div.button.use,.codeGame div.button.loop{background-size:18px}.codeGame-loop{height:calc(var(--button-size-30) + var(--button-padding-8)*2);background-size:20px;width:fit-content;min-width:192px;margin:0 12px 0 0;padding-left:50px;padding-right:14px;position:relative}.codeGame-loopControl{margin-left:2px}}@media (width>=700px){.codeGame button.execute{max-width:180px;height:48px;vertical-align:center;background-position:0 0;background-origin:initial;visibility:visible;letter-spacing:var(--codeGame-character-spacing-1-44);background-position:32px 14px;margin:0;padding:0 0 0 32px;font:600 18px/24px Source Sans Pro}.codeGame button.execute:focus{background-position:30px 12px}.codeGame button.execute:before{content:"Play code"}}@media (width<=700px){.codeGame button.execute:before{content:"Play"}}@media (width<=500px){.codeGame button.execute{background:0 0}}