@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600&display=swap);
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#444;background:#fff}.hljs-name{color:#01a3a3}.hljs-meta,.hljs-tag{color:#789}.hljs-comment{color:#888}.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-name,.hljs-selector-tag{font-weight:700}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:#4286f4}.hljs-section,.hljs-title{color:#4286f4;font-weight:700}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#bc6060}.hljs-literal{color:#62bcbc}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#25c6c6}.hljs-meta .hljs-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
html{height:100%;font-size:10px;transition:all .2s ease-out}body{display:flex;flex-direction:column;justify-content:space-between;background-color:#d3e8e5;font-family:"Montserrat",sans-serif;height:100%;box-sizing:border-box;padding:0 50px}.wrapper-main{margin:0 auto;max-width:1350px;display:flex;gap:30px;padding:10px;flex:1 0 auto}.left-side{width:calc(100% - 375px);display:flex;flex-direction:column;align-items:center}.level-title{text-align:center;font-size:2.3rem;color:#1c84bc;text-shadow:1px -1px #203d06;margin:0}.help{text-align:center;font-size:1.8rem;color:#7bbce3;text-shadow:1px -1px #203d06;margin:10px}.help:hover{-webkit-text-decoration:underline;text-decoration:underline;cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline}.visualization{padding:0 20px;width:80%;display:flex;align-items:flex-end;position:relative;background-image:url(assets/img/background/back.jpg);background-size:100% 100%;background-repeat:no-repeat;z-index:1;height:200px;border-radius:20px;border:5px solid #87c7ca}.visual-items{transition:all .3s;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:space-around;align-items:flex-end;overflow:hidden}.visual-items img{width:65px}.visual-set{display:flex;flex-direction:column;justify-content:center;height:200px}.butterfly{position:relative;background-repeat:no-repeat;background-size:contain;display:block;width:84px;height:84px;z-index:2;background-image:url(assets/img/blue-but.gif)}.blue-burtterfly{position:absolute;top:-55px;left:0;background-image:url(assets/img/blue-but.gif)}.blue-burtterfly-static{background-image:url(assets/img/butterfly.png);position:absolute;top:-55px;left:0}.blue-burtterfly-grass{background-image:url(assets/img/butterfly.png)}.butterfly_away{transform:translate3d(500px, -250px, -70px)}.rose{position:relative;display:flex;justify-content:center;background-repeat:no-repeat;background-size:contain;background-position:bottom}.rose.active{transform:scale(1.05);filter:drop-shadow(0 0 7px white)}.code.active .hljs-name{color:red}@keyframes pulsing{0%{transform:scale(1.3, 1.3)}50%{transform:scale(1, 1)}100%{transform:scale(1.3, 1.3)}}@keyframes winner{0%{opacity:.8}100%{transform:translate(500px, -70%);opacity:0}}.rose.animated,.rose.yellow-animated{animation:pulsing 2.5s infinite}#winner-animation{animation:winner 1.5s}.editor{width:100%;display:flex;flex-wrap:wrap;-moz-column-gap:15px;column-gap:15px;row-gap:15px;box-sizing:border-box;margin:20px 20px 0 20px}.css-editor,.html-viver{border-radius:20px;border:4px solid #87c7ca;padding:10px;box-sizing:border-box;background-color:#d3e8e5;width:100%}.html-viver{display:flex;flex-wrap:wrap}.html-viver:hover{cursor:default}.css-editor__main{justify-content:center;position:relative;display:flex;-moz-column-gap:10px;column-gap:10px}.editor__header{width:100%;display:flex;justify-content:space-around;font-size:1.4rem;font-weight:600;margin:0 0 10px 0;color:#203d06}.main-lines{text-align:right;font-size:1.7rem;font-weight:500;color:#203d06;width:30px;padding:0 8px 0;box-sizing:border-box}.input-wrapper{display:flex;position:relative;width:calc(100% - 60px)}.viver-wrapper{width:calc(100% - 40px);background-color:#d3e8e5}.css-editor__button{box-sizing:border-box;border:2px solid #87c7ca;height:23px;width:50px;font-size:1.3rem;font-weight:600;box-shadow:2px 2px 5px #87c7ca;border-radius:5px}.css-editor__button:hover{cursor:pointer}.css-editor__button:active{margin-left:1px;height:22px;width:49px;box-shadow:0 0 3px #87c7ca}.css-editor__rules,.codePre{line-height:1.9rem;font-size:1.7rem;width:calc(100% - 70px)}.code{display:block;width:100%;font-size:1.6rem;background-color:#d3e8e5}code.hljs{padding:0;margin:1px}.modal-str{position:absolute;top:-20px;left:-10px;text-align:center;font-size:1.3rem;padding:3px;border-radius:7px;border:1px solid #000;font-weight:600;background-color:rgba(255,228,196,.842);min-width:90px;z-index:7;pointer-events:none}.modal-str.hidden{display:none}input{display:block;width:100%;margin-right:10px;font-family:monospace,monospace;background:rgba(0,0,0,0);position:relative;opacity:1;z-index:4;color:rgba(0,0,0,0);caret-color:#203d06;font-size:1.6rem;line-height:1.15;height:18px;border:2px solid #87c7ca}.pre{max-width:100%;height:18px;position:absolute;top:3px;left:4px;z-index:2;margin:0}.css-code{font-size:1.6rem;padding:0;max-width:700px;background-color:#d3e8e5;border-color:#87c7ca}pre code.hljs{padding:0}.hljs-selector-class{color:green;font-weight:700}.hljs-selector-id{color:orange;font-weight:700}.hljs-selector-class{color:red;font-weight:700}.hljs-selector-id{color:#f0f;font-weight:700}.hljs-keyword{color:#3838c7;font-weight:700}@keyframes shake{0%{transform:translate(1px, 1px) rotate(0deg)}10%{transform:translate(-1px, -2px) rotate(-1deg)}20%{transform:translate(-3px, 0px) rotate(1deg)}30%{transform:translate(3px, 2px) rotate(0deg)}40%{transform:translate(1px, -1px) rotate(1deg)}50%{transform:translate(-1px, 2px) rotate(-1deg)}60%{transform:translate(-3px, 1px) rotate(0deg)}70%{transform:translate(3px, 1px) rotate(-1deg)}80%{transform:translate(-1px, -1px) rotate(1deg)}90%{transform:translate(1px, 2px) rotate(0deg)}100%{transform:translate(1px, -2px) rotate(-1deg)}}#error-animation{animation:shake .8s}.visual-for-check{position:absolute;top:8000px;left:8000px}.right-side{position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;width:375px;box-sizing:border-box;padding:10px;border-radius:20px;border:4px solid #87c7ca;padding-bottom:200px}.levels-header{display:flex;justify-content:space-between;align-items:flex-end;font-size:3em}._passed{color:#16a80e;font-weight:600}._passed-help{color:#f77969;font-weight:600}.burger{margin-bottom:8px;position:relative;width:30px;height:21px;border-bottom:3px solid #212121;border-top:3px solid #212121;box-sizing:border-box}.burger::after{transition-duration:.5s;position:absolute;width:30px;height:3px;background-color:#212121;content:"";top:6px}.burger_opened{transform:rotate(45deg);border-bottom:3px solid rgba(0,0,0,0);border-top:3px solid rgba(0,0,0,0)}.burger_opened::before{transform:rotate(90deg);transition-duration:.5s;position:absolute;width:30px;height:3px;background-color:#212121;content:"";top:6px}.burger:hover{cursor:pointer}.arrow{font-size:1.3em}.arrow:hover{cursor:pointer;color:#2274e8;transform:scale(1.2);filter:drop-shadow(0 0 3px rgb(0, 1, 48))}.description-wrapper{display:flex;flex-direction:column}.description-title{margin:20px 0;font-size:2em;font-weight:600;color:#203d06}.description-value,.description-example{margin:20px 0;font-size:1.6em;font-weight:600}.button__reset-level{position:absolute;bottom:10px;width:167px;left:96px;height:45px;font-size:1.3rem;font-weight:600;border-radius:10px;border:2px solid #87c7ca;align-self:center;margin-bottom:20px;box-shadow:2px 2px 7px #87c7ca}.button__reset-level:hover{cursor:pointer}.button__reset-level:active{width:calc(50% - 2px);height:43px;box-shadow:0 0 3px #87c7ca}.footer{margin:0 auto;flex:0 0 auto;max-width:1350px}.footer-list{display:flex;justify-content:center;align-items:center;-moz-column-gap:30px;column-gap:30px;list-style-type:none}.footer-list__item{-webkit-text-decoration:none;text-decoration:none}.git-link{display:block;width:30px;height:30px;background-image:url(assets/img/footer/git.png);background-size:contain;background-repeat:no-repeat}.year{font-size:2rem}.rss-link{display:block;width:80px;height:35px;background-image:url(assets/img/footer/rs_school_js.svg);background-size:contain;background-repeat:no-repeat}.levels-list{transition:all .4s;position:absolute;top:-5px;left:-5px;z-index:3;width:calc(100% + 10px);height:calc(100% + 10px);border-radius:20px;box-sizing:border-box;padding:20px;border:4px solid #87c7ca;background:#d3e8e5}.levels-list_hidden{transition:all .4s;transform:translate(1000px)}.levels-title{margin:0;color:#203d06;font-weight:300;font-size:2.5rem}.levels-row{display:flex;-moz-column-gap:10px;column-gap:10px;font-size:1.6rem;margin:8px 0;border-bottom:2px solid rgba(0,0,0,0)}.levels-row:hover{font-weight:800;cursor:pointer;border-bottom:2px solid #87c7ca}.levels-row_active{border-bottom:2px solid #87c7ca}.levels-row:hover .levels-row-title,.levels-row:hover._passed{font-weight:800}.pop-up-wrapper{position:fixed;width:100%;height:100%;top:0;left:0;z-index:5;display:flex;justify-content:center;align-items:center;background-color:rgba(111,114,114,.7)}.pop-up-container{width:300px;height:150px;background-color:#d3e8e5;border:3px solid #7bbce3;border-radius:10px;display:flex;justify-content:space-around;align-items:center;flex-direction:column}.pop-up-message{text-align:center;font-size:1.7rem;font-weight:600}.pop-up-button{width:50px;height:20px;box-sizing:border-box;border:2px solid #7bbce3;box-shadow:1px 1px 3px #177cc4;border-radius:5px}.pop-up-button:hover{cursor:pointer}.pop-up-button:active{width:49px;height:19px;padding:2px;box-shadow:2px 2px 1px #177cc4}@media screen and (max-width: 1400px){body{padding:0 30px 30px 30px}.right-side{width:300px}.levels-header{font-size:2.5em}.button__reset-level{left:65px}}@media screen and (max-width: 950px){.wrapper-main{flex-wrap:wrap}.left-side{width:100%}.right-side{width:100%}}@media screen and (max-width: 680px){.main-lines{font-size:1.5rem}.code{font-size:1.4rem}}@media screen and (max-width: 610px){.main-lines{font-size:1.3rem}.code{font-size:1.2rem}}@media screen and (max-width: 545px){.main-lines{font-size:1.1rem}.code{font-size:1rem}}