*{margin:0;padding:0;box-sizing:border-box;transition:all .2s ease-in-out}::-webkit-scrollbar{width:0}html,body{height:100%}body{display:flex;flex-direction:column}main{flex:1 0 auto}footer{flex-shrink:0}body{display:flex;flex-direction:column;width:100%;font-family:"Jura";background-color:#3c4d77}body.active-menu{overflow:hidden}h1,h2,h3{font-weight:800;text-align:center}h1{color:#fff;font-size:4vw}h2{font-size:2.5vw}h3{font-size:2vw}@media(orientation: portrait){h1{font-size:4vh}h2{font-size:2.5vh}h3{font-size:2vh}}header{padding:0 3vw;display:flex;align-items:center;gap:2%;border-bottom:.5vw groove #bcbcbc}header .logo{color:#fff;font-size:5vw;font-weight:800;white-space:nowrap}header .swu-img{height:5.5vw}header .level-menu-btn{display:flex;flex-direction:column;justify-content:center;margin-right:0;margin-left:auto;height:4vw;padding:.4vw .2vw;opacity:.6;cursor:pointer;z-index:222222}header .level-menu-btn:hover{opacity:.8}header .level-menu-btn .level-menu-btn-img{height:.3vw;width:2.9vw;background:#fff;transition:all .15s ease-out;position:relative}header .level-menu-btn .level-menu-btn-img:before,header .level-menu-btn .level-menu-btn-img:after{position:absolute;content:"";width:100%;height:.3vw;background:#fff;transition:all .1s ease-out}header .level-menu-btn .level-menu-btn-img:before{top:-1vw;transform-origin:left}header .level-menu-btn .level-menu-btn-img:after{top:1vw;transform-origin:left}header .level-menu-btn.active .level-menu-btn-img{background:rgba(255,255,255,0)}header .level-menu-btn.active .level-menu-btn-img:before{transform:rotate(45deg)}header .level-menu-btn.active .level-menu-btn-img:after{transform:rotate(-45deg)}main{display:flex;flex-direction:row}@media(orientation: portrait),(max-width: 1000px){main{flex-direction:column}}main article{padding-top:5vh;padding-bottom:2vh;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between}main .learn-side{width:30vw;font-family:"Blogger Sans";font-size:2vw;line-height:150%;padding:2vw;background-color:#999}@media(orientation: portrait),(max-width: 1000px){main .learn-side{width:100%;font-size:2vh}}main .learn-side .side-header{display:flex;align-items:baseline}main .learn-side .side-header .title-finish-mark{position:relative;display:inline-block;margin-left:1.5vw;width:1.3vw;height:2.5vw;border:solid .3vw #fff;border-width:0 .4vw .4vw 0;opacity:.2;top:-0.3vw;transform:rotate(40deg)}main .learn-side .side-header .title-finish-mark.finished{opacity:.7;border-color:#3ae537}main .learn-side .side-header .title-finish-mark.cheated{opacity:.7;border-color:#f90b0b}@media(orientation: portrait){main .learn-side .side-header .title-finish-mark{margin-left:1.5vh;width:1.3vh;height:2.5vh;border:solid .3vh #fff;border-width:0 .4vh .4vh 0}}main .learn-side strong,main .learn-side tag{color:#661919;background:rgba(255,255,255,.1);padding:.3vw .6vw .3vw .6vw;margin:0 .2vw;font-weight:normal}main .learn-side .side-learn-sintaxis{background:rgba(255,255,255,.05);padding:.5vw .8vw;border-bottom:solid .2vw rgba(255,255,255,.1);margin:1.3vw auto;width:-moz-fit-content;width:fit-content}footer{height:12vh;display:flex;justify-content:space-around;align-items:center;border-top:1px groove #727272;background:linear-gradient(to bottom, #19011a, transparent)}@media(orientation: portrait){footer{height:12vw}}footer .copyright{color:#999;text-align:center}@media(orientation: portrait){footer .copyright{font-size:2.5vw}}footer .git-ref{color:#999;text-align:center;display:flex;align-items:center;gap:2%;white-space:nowrap}footer .git-ref .copyright,footer .git-ref .git-ref{font-size:2.5vh}@media(orientation: portrait){footer .git-ref .copyright,footer .git-ref .git-ref{font-size:2.5vw}}footer .copyright a{color:#777}footer .copyright a:hover{color:#999}footer .copyright:before{content:"©"}footer .rss-ref__img,footer .git-ref__img{height:6vh;fill:#777}@media(orientation: portrait){footer .rss-ref__img,footer .git-ref__img{height:6vw}}.editors{display:flex;align-items:center;justify-content:space-between;width:90%;color:#ccc;border:1vw solid #2e3b5b;cursor:default}.editors .viewer-header,.editors .editor-header{line-height:200%;background:#222122;display:flex;justify-content:space-around}.editors .viewer-header *:first-child,.editors .editor-header *:first-child{color:#9a9898}.editors.wrong-answer{animation:wrong-answer .5s infinite both}.editors>*{font-size:1.7vw;line-height:150%;width:50%;height:100%}.editors .html-viewer{background-color:#777}.editors .html-viewer [highlight]{filter:contrast(200%) brightness(150%)}.editors .html-viewer [twist]{color:#fff}.editors .html-viewer .viewer-field{display:flex}.editors .html-viewer .viewer-field>*{padding:3%}.editors .html-viewer .viewer-field .viewer-pre div{padding-left:2vw}.editors .html-viewer .viewer-field .viewer-pre>div{padding-left:0}.editors .viewer-numbers,.editors .editor-numbers{display:flex;flex-direction:column;align-items:flex-end;background-color:#363237;color:rgba(255,255,255,.73)}.editors .css-editor{background-color:#ddd}.editors .css-editor .editor-field{color:#999;display:flex}.editors .css-editor .editor-field>*{padding:3%}.editors .css-editor .editor-field .editor-info{width:100%}.editors .css-editor .editor-field .editor-info .input-wrapper{display:flex;gap:1vw}.editors .css-editor .editor-field .editor-info .input-wrapper .editor-input{font-family:"Jura";background:rgba(0,0,0,0);font-size:inherit;flex-grow:2;border:none}.editors .css-editor .editor-field .editor-info .input-wrapper .editor-input.input-want{background:rgba(145,242,0,.462745098);animation:input-want .5s infinite}@keyframes input-want{50%{background:none}}.editors .css-editor .editor-field .editor-info .input-wrapper .editor-input:focus{outline:none}.editors .css-editor .editor-field .editor-info .enter-btn,.editors .css-editor .editor-field .editor-info .cheat-btn{background:#ddd;border-radius:.3vw;padding:.3vw 1vw;color:#666;line-height:100%;font-weight:200;border:solid .3vw #999;border-width:.1vw .1vw .4vw .1vw;font-size:1.5vw;cursor:pointer;z-index:0;box-shadow:.1vw .4vw .7vw rgba(77,244,249,.469);transform:perspective(25vw) rotateX(20deg);text-align:center;width:-moz-fit-content;width:fit-content}.editors .css-editor .editor-field .editor-info .enter-btn:hover,.editors .css-editor .editor-field .editor-info .cheat-btn:hover{background:rgba(255,255,255,.05)}.editors .css-editor .editor-field .editor-info .enter-btn.pressed,.editors .css-editor .editor-field .editor-info .cheat-btn.pressed{transform:translateY(0.5vw);box-shadow:.1vw .1vw .7vw #c1f8fa}.game-wrapper{min-height:20vw;padding:5vh 1vw}.game-wrapper [highlight]{box-shadow:0 0 0 .6vw rgba(166,250,11,.706)}.game-wrapper [twist]{transform-origin:bottom;animation:twistStart .5s ease-out,twist 1s infinite;animation-delay:0s,.5s}.game-wrapper.table-win{transform:scale(0)}@keyframes twistStart{0%{transform:skew(0deg, 0deg) scaleY(1);animation-timing-function:ease-in}40%{transform:skew(0deg, 0deg) scaleY(0.9);animation-timing-function:ease-out}100%{transform:skew(4deg, 0deg) scaleX(1)}}@keyframes twist{0%{transform:skew(4deg, 0deg) scaleX(1)}10%{transform:skew(1deg, 0deg) scaleY(0.9)}50%{transform:skew(-4deg, 0deg) scaleX(1)}60%{transform:skew(-1deg, 0deg) scaleY(0.9)}100%{transform:skew(4deg, 0deg) scaleX(1)}}.game-wrapper .table-wrapper{transform:perspective(200vw) rotateX(20deg);transform-origin:bottom;margin-top:1vw;z-index:9999;position:relative}.game-wrapper .table-wrapper .table{transform-style:preserve-3d;outline:solid .1vw rgba(0,0,0,0);margin:0 auto 0 auto;min-height:14.2vw;padding:1.5vw 1.5vw 2.2vw 1.5vw;display:inline-block;z-index:999;position:relative;white-space:nowrap}.game-wrapper .table-wrapper .table-surface{box-shadow:0 4vw 1vw rgba(0,0,0,.2);background:#dd992d;background:linear-gradient(#dd992d, #cd8c26);position:absolute;height:100%;bottom:0;width:100%}.game-wrapper .table-wrapper .wrong-answer{animation:wrong-answer .5s infinite both}.game-wrapper .table-edge{margin:0 auto 1vw auto;background:#ac741c;height:1.5vw;transform:rotateX(-40deg);transform-origin:top;z-index:2}.game-wrapper .table-leg{width:2.4vw;height:1vw;background:#84570f;position:absolute;top:1.5vw}.game-wrapper .table-leg:first-child{left:2vw}.game-wrapper .table-leg:last-child{right:2vw}@keyframes wrong-answer{0%,100%{transform:translate3d(0, 0, 0)}10%,30%,50%,70%,90%{transform:translate3d(-1vw, 0, 0)}20%,40%,60%,80%{transform:translate3d(1vw, 0, 0)}}.playground-hint{position:absolute;display:none;color:#fff;background-color:#711c12;padding:1rem;z-index:9999}.playground-hint.show{display:block}.win{transform:scale(0) translateY(-200vh);transition:transform .7s}plate::before{position:absolute;content:"";display:block;left:0;right:0;top:0;bottom:0;height:6.5vw;width:6.5vw;background-color:#e9e9e9;margin:auto;border-radius:50%;box-sizing:border-box;box-shadow:inset .8vw .8vw .8vw 0 #aaa,inset -0.8vw -0.8vw .8vw 0 #fff}bento,plate{box-shadow:0 .8vw .8vw rgba(0,0,0,.2);display:inline-block;width:10vw;height:10vw;margin:0 1vw;position:relative}plate bento{height:7.4vw;width:7.4vw;position:absolute;top:-0.8vw;left:.4vw}bento{background:brown;position:relative;border:solid .3vw #711c12;border-width:2vw .2vw}plate{border-bottom:solid .5vw #ddd;background:#eee;border-radius:50%}plate bento apple,plate bento orange{top:-3.6vw !important}bento:before{content:"";position:absolute;width:100%;top:0;left:0;border:solid 1vw rgba(0,0,0,.1);border-width:1vw 0 0 0}apple{background:#e41919;border-color:#ab1212}orange{background:orange;border-color:#bd6e07}.watermelon_piece{position:absolute;width:4rem;height:7rem;overflow:hidden}.watermelon_piece:before{content:"";position:absolute;width:8rem;height:7rem;background:radial-gradient(circle, red 0%, red 50%, #268010 80%, #268010 100%);border-radius:50%}.watermelon_piece:after{content:"";position:absolute;width:.3rem;height:.25rem;border-radius:50%;background:#000;top:2rem;left:3rem;transform:rotate(10deg);box-shadow:-10px 15px #000,5px 24px #000,-15px 38px #000,5px 50px #000}icecream{display:inline-block;margin:2vw 1vw;height:6vw;width:4vw;background-color:#855539;border-bottom-left-radius:15%;border-bottom-right-radius:15%;border-top-left-radius:50%;border-top-right-radius:50%;position:relative;box-shadow:inset 0 .5vw #bf8c52,0 .5vw 0 rgba(0,0,0,.2)}icecream::after{position:absolute;content:"";top:2vw;right:.5vw;height:1.7vw;width:1.2vw;background-color:#cd8d3e;border-radius:50%;z-index:1;transform:rotate(-30deg)}icecream::before{position:absolute;content:"";top:6vw;right:1.4vw;height:3vw;width:1.2vw;background-color:#ffdfa6;border-bottom-left-radius:50%;border-bottom-right-radius:50%;box-shadow:inset 0 .5vw rgba(0,0,0,.05)}bento>icecream:only-child,plate>icecream:only-child{top:calc(50% - 4vw);left:calc(50% - 2vw);z-index:99999;margin:0;position:absolute}icecream.small{height:4vw;width:2.2vw;border-width:.1vw .2vw .6vw .2vw;margin:3vw 1vw}icecream.small::after{top:1vw;right:.4vw;height:1vw;width:.6vw}icecream.small::before{top:4vw;right:.9vw;height:2vw;width:.5vw}orange,apple{box-shadow:0 .5vw 0 rgba(0,0,0,.2);display:inline-block;margin:0 1vw;height:6vw}carrot{background:orange;width:6vw;height:6vw;display:inline-block;box-shadow:0 .5vw 0 rgba(0,0,0,.15);background:#f9e4ac;border-style:solid;border-color:#88611e;border-width:.2vw .2vw 1.2vw .2vw;border-radius:1.5vw 1.5vw .6vw .6vw;margin:2vw 1vw}orange,apple{border-radius:10vw;border-style:solid;border-width:.2vw .4vw 1.5vw .4vw;height:6vw;width:6vw;position:relative;margin:2vw 1vw}apple::after,orange::after{content:"";position:absolute;background:linear-gradient(150deg, #57c60c 50%, #4ba30d 50%);border-radius:46% 54% 100% 0%/100% 4% 96% 0%;width:4vw;height:2vw;right:-1vw;top:-1.8vw;transform:rotate(-10deg)}apple.small::after,orange.small::after{width:2vw;height:1vw;right:-0.7vw;top:-1vw}orange.small,apple.small{height:3vw;width:3vw;border-width:.2vw .4vw .8vw .4vw;margin:3vw 1vw}orange:before,apple:before{content:"";display:block;position:absolute;background:rgba(255,255,255,.3);height:30%;width:30%;top:0;left:35%;border-radius:10vw}bento orange,bento apple,plate orange,plate apple{left:calc(50% - 3vw);margin:0;position:absolute}plate>apple:last-child,plate>orange:last-child,bento>apple:last-child,bento>orange:last-child{top:calc(50% - 3.5vw)}plate .small,bento .small{left:calc(50% - 1.5vw);margin-left:0;margin-right:0}plate>.small:only-child,bento>.small:only-child{position:absolute;top:calc(50% - 1.5vw);margin:0}.plus{color:#666;padding:0 .4vw;font-size:4vw;display:none}plate [highlight]{box-shadow:0 0 0 .6vw rgba(0,0,0,.3)}#fancy:after{content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;height:7.4vw;width:7.4vw;border-radius:6vw;border:solid 1vw #009ff2;opacity:.4}orange{z-index:1000}board{display:none}plate apple,plate orange{position:absolute}plate apple:last-child,plate orange:last-child{z-index:300}plate apple:nth-last-child(2),plate orange:nth-last-child(2){top:-2.5vw;z-index:400}plate apple:nth-last-child(3),plate orange:nth-last-child(3){top:-6.5vw;z-index:500}plate apple:nth-last-child(4),plate orange:nth-last-child(4){top:-10.5vw;z-index:600}.hl-tag-name{color:#f2b500}.hl-tag{color:#009ff2}.hl-quot{color:#f26d00}.hl-attr-name{color:#d3d1da}.hl-attr-value{color:#00f20c}.level-side-wrapper{position:fixed;top:0;bottom:0;padding:0;overflow:auto;background:#68769a;right:-40vw;width:35vw;font-size:2vw}@media(orientation: portrait){.level-side-wrapper{font-size:2vh}}.level-side-wrapper.active{transform:translateX(0);right:0;z-index:11111}@media(orientation: portrait){.level-side-wrapper.active{width:100%}}.level-side-wrapper h2{color:#fff;opacity:.8;font-weight:normal;margin:0;padding:2vw}.level-side-wrapper .level-menu-wrapper div{display:block;cursor:pointer;padding:.5vw 1vw .5vw 2.5vw;color:#dbdbdb}.level-side-wrapper .level-menu-wrapper div .level-check{position:relative;display:inline-block;margin-right:1.4vw;width:.8vw;height:1.3vw;border:solid .3vw #fff;border-width:0 .3vw .3vw 0;opacity:.2;transform:rotate(40deg)}@media(orientation: portrait){.level-side-wrapper .level-menu-wrapper div .level-check{width:.8vh;height:1.3vh;border:solid .3vh #fff;border-width:0 .3vh .3vh 0}}.level-side-wrapper .level-menu-wrapper div .level-check.finished{opacity:.6;border-color:#3ae537}.level-side-wrapper .level-menu-wrapper div .level-check.cheated{opacity:.6;border-color:#f90b0b}.level-side-wrapper .level-menu-wrapper div.active-level{font-weight:bold;color:#aaa;background:rgba(255,255,255,.17)}.level-side-wrapper .level-menu-wrapper div:hover{background:rgba(255,255,255,.15)}.level-side-wrapper .level-menu-wrapper .level-number{opacity:.6;min-width:2.4vw;padding-right:1vw;display:inline-block}@media(orientation: portrait){.level-side-wrapper .level-menu-wrapper .level-number{min-width:2.4vh}}.level-side-wrapper .level-reset-btn{background-color:rgba(0,0,0,0);display:block;text-align:center;border:solid .2vw rgba(255,255,255,.2);color:rgba(255,255,255,.4);margin:0 auto;padding:1vw 0;cursor:pointer;width:70%;margin-top:2vw}.level-side-wrapper .level-reset-btn:hover{background:rgba(245,176,176,.395)}.end-game-text{position:absolute;top:30%;right:10%;margin:auto;font-size:10vw;font-weight:bold;text-shadow:0 -1px 0 #fff,0 7px 0 rgba(34,34,34,.32),0 8px 0 rgba(32,32,32,.31),0 9px 0 rgba(31,31,31,.35),0 10px 0 rgba(28,28,28,.28),0 11px 0 rgba(25,25,25,.28),0 22px 30px rgba(0,0,0,.38);color:#c7d1da;z-index:99999;animation:anim_end_lev 1.5s linear}@keyframes anim_end_lev{0%{transform:rotate(720deg) scale(0);opacity:0}100%{transform:rotate(0deg) scale(1);opacity:1}}@font-face{font-family:"Blogger Sans";src:url(fonts/Bloggersans.woff);font-weight:400;font-style:normal}@font-face{font-family:"Jura";src:url(fonts/Jura-Regular.woff2) format("woff2");font-weight:400;font-style:normal}@font-face{font-family:"Jura";src:url(fonts/Jura-Medium.woff2) format("woff2");font-weight:500;font-style:normal}