HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<!-- set role and aria-label to expose this as an image to accessibility tools -->
<div class="landscape" role="img" aria-label="Monotone illustration of a landscape. Trees are in the foreground, a loch and forest is in a valley and in the background a mountain range is visible.">
<!-- landscape layer 1 - clouds -->
<div class="landscape__layer">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M1830 81c23-15 55-16 83-21-32 8-63 15-91 32l-4 8c-22 8-47 9-69 18 33 2 65-15 98-14-132 29-265 60-397 86 38-32 94-25 130-60 30-5 57-21 88-20 20 6 37-5 56-6 7-22 34-31 54-22 17 8 34-4 52-1zm576 28c84-1 168-1 251 16 10 2 21 4 27 13-38 23-84 29-127 39l-1 5c10 2 20 3 29 7-45 1-90-2-134 7 25 8 54 8 79 17-64-1-129 0-192-11v-8c83-20 168-32 251-52-3-4-7-6-13-6-57-6-114-17-170-27zm-391 75c101-10 203-23 304-32v6c-50 9-101 15-150 28l-1 6c12 0 23-2 35-1-45 15-94 16-140 24-11-5-41 1-24-18l-1-9c-8 0-19 6-23-4zm36 15c23 18 55-6 82-4v-8c-27 1-55 5-82 12zm681-33c63-9 125 12 188 8-45 12-95 13-139 28 28 0 56-3 84-1-90 9-179 21-268 38-71 10-144 15-215 25-10 0-24 9-28-4 79-24 165-30 247-49 16-15 36-24 59-25 20-18 49-11 72-20zm198 60c18-1 37-6 55-4-40 13-90 12-125 30 17 5 34 2 51 3l-12 7c29 0 58-4 88-1-33 9-73 23-105 9-43 2-87-3-130 5-8-3-3-12 2-15-66 7-131 20-197 25v-9c123-23 249-33 373-50z" style="fill: var(--c0);"/>
</svg>
</div>
</div>
<!-- landscape layer 2 - mountains 1 -->
<div class="landscape__layer">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M1740 213c11 1 556 40 576 44 10 1 19 5 29 4 14-3 27-9 41-10 13-1 25 3 38 3 12-1 24 3 36 3 9 1 20 0 28 5 9 4 18 9 28 9 11 1 21-3 32-3 14 0 25 9 37 13 9 3 19 1 27-3 11-3 17-14 28-16 11-3 21 4 32 2l30-6c12-1 23-5 34-4l24 4h32c15 1 29 5 44 5 12 0 25-2 37 0l23 6c10 2 19 8 30 9 16 2 30 12 47 13 16 2 33 3 49-1 4-1 0 710 0 710H0h1146s-7-784 0-786c8-2 16-2 24 0 10 2 20 8 30 10l54 3c27 0 53-5 80-4l39 2c14 2 29 3 43-3 11-3 21-9 32-9 11-1 22 2 32 7 15 6 32 3 47-1 18-3 35-12 53-12 17-1 35 3 52 3 9 0 19 4 28 2 14-2 28-6 42-7 13-1 25 7 38 8z" style="fill: var(--c2);"/>
<path d="M2687 271c32 36 78 61 108 62 23 0 55-22 72-43-7 15-16 27-28 35 21-4 36-15 50-29-2 5-7 11-14 18 6-2 12-6 18-11-45 42-68 44-94 48l-22 4c-4 0-10-5-10-5-46 2-81-7-104-39-1-3 0-4 1-6 1-3 0-6-2-9 1-3 3-4 5-6l-3-11c28 31 55 51 81 55-28-16-49-35-58-63zm-1491-27c17 11 32 26 49 38s39 28 54 37c12 7 24 13 37 17 17 6 41 15 62 15 36 1 75-4 112-17 22-7 76-33 99-43 19-9 46-21 55-27 13-8 22-9 19-19-1-4-13-1-15-2-4-1-8-2-7-3 1-3 9-1 23-7 8-4 20-5 17-15-1-7-18-7-31-4-16 4-38 3-48 4-11 0-22 0-16 8 3 4 28 17 27 19s-19-3-29-3h-28l-12 3c-1-1 1-2 6-6 8-7 4-11-6-12-6 0-21 3-29-6 0-1 0-2-2-2-12 3-36 6-44 5-3 0-3 5 0 6 3 2 18 3 19 5 0 2-15 8-10 13 3 2 26 5 24 7-3 2-25-1-29 0-2 1-9 5-15 4-8 0-23-6-32-5-10 1-17 15-17 20-1 2 3 5 4 6 2 1 8 0 7 2-2 4-9 2-12 3-3 2-8 11-8 15 1 3 13 5 13 7s-13 2-18 0c-6-2-16-11-21-13-3-1-10 4-10 0-1-5 20-6 28-15 9-9 20-31 22-41 2-7-1-17-5-18-3-1-15 6-30 7-20 2-67-4-94-2-29 2-74 5-91 2-15-2-38 3-18 17zm1322 33c1-2 1-4 4-4 10 0 26-2 31-1 9 3 18 4 22 10 5 5 4 17 5 25 1 14-20 31-32 30-5 0-8-2-8-2h5c12-1 32-22 23-33-7-8-38 21-47 24-2 0-4-4-5-2-2 3-16 4-19 1 0-1 12-3 10-5-2-1-14 1-18 1l-5-4c-3-2-9-1-14-1-6 0-12-4-12-4-2 5 23 13 22 14-2 2-27-8-40-14-13-5-30-9-39-14-6-4-12-10-15-15-4-6-6-14-6-19 0-2 3-5 6-6l10-1 16 2 6 1 2 5c0 3 2 14 0 14-1 0-14-14-15-13-1 2 7 13 11 17l8 9c1 1 4 1 5-2l-3-17-2-9c1-2 3-4 5-4l7-1 2 2 1 26 3 6 2 2h2c0-1-2-2-2-7l1-13 2-13c0-1 0-3 3-3 8 0 20 0 26 2l15 5 16 6c4 2-1 9-2 15l-1 17h2c1-6 7-19 12-27zm6 39c4-2 16-19 17-27l1 1-1 7h2l3-2 1 1c-4 6-19 21-22 21-1 0-2 0-1-1zm-10 0c5-3 8-8 8-15l-7 6c-1-1 5-14 12-20 2-2 7-1 7 1 3 10-10 26-15 28-4 2-5 0-5 0zm7-30c-3 4-9 19-9 22 1 1-2 0-2-2 0-4 7-18 9-21 1-1 3 0 2 1zm-38 16l1 5 2-1c0-2-2-5-3-4zm14-24c0 12-2 10-2 26h-2v-15c-1-2-6-7-7-6l-1 14c-1 1-2 0-2-1l-2-8v-9l-3-3-1 13c0 2-2 0-2-1l1-13c0-1 2-4 4-4s6 1 7 3l5 9c2-1 2-4 3-5h2zm-51 19l2 4c2 1 4 0 3-2-1-1-4-3-5-2zm105-3l-2 4h1l3-3c0-1-1-2-2-1zm-87-25v24c0 2-4 2-5 0a55 55 0 013-23c0-1 2-3 2-1z" style="fill: var(--c3);"/>
</svg>
</div>
</div>
<!-- landscape layer 3 - mountains 2 -->
<div class="landscape__layer">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M1982 177c15-3 31 0 47 4s29 14 45 19l43 16c11 4 22 11 35 12 20 2 38-7 56-11 14-2 28-4 40 3 17 9 35 14 52 23 20 9 38 23 59 32 36 17 73 31 111 46 32 14 66 24 100 33 19 4 37 10 54 18 24 11 52 13 78 12 21-3 41-7 61-12 15-4 30-2 44-9 27-16 55-32 87-37 20-4 41-5 61-11 17-4 32-10 48-18 21-10 44-14 67-14 21 1 41 6 62 8 15 1 29-6 42-13 15-7 30-15 46-19 8-2 15 0 22 1 17 5 34 6 50 12 25 9 52 10 77 17 19 4 37 12 56 14 19 3 37 11 56 14 18 3 35 9 52 10 11 1 22 1 32 4 15 5 31 5 46 10 20 8 40 12 60 20 21 9 42 18 65 21 34 5 67-4 101-9 25-3 50-4 75-4 29 1 59 6 88 8v623H0V362c22-11 45-22 68-30 17-5 35-8 53-12 33-8 68-14 102-23l92-24c25-9 52-16 79-17l24-1c25-2 49 4 74 3 13-1 25-6 38-4 10 2 18 10 28 12 19 5 39 2 58-1l44-9c16-4 32-12 48-17 27-11 54-18 82-25 11-4 22-4 33-2 15 3 29 5 43 9 16 4 34 6 51 4 15-1 29-8 44-10 18-2 36 5 54 8 12 3 23-3 35-4 10-2 20 1 30 2 27 3 52-10 78-9 7-1 15 1 22 4 12 8 25 15 36 24 29 21 61 37 91 55 37 19 79 30 121 32 12 0 25 2 37 0 13-1 24-6 36-10l46-16 43-19c37-13 72-31 106-50 26-12 54-19 82-24 27-5 55 0 82 1 43 0 81-23 122-32z" style="fill: var(--c3);"/>
<path d="M3169 281l5-3c15-7 30-15 46-19 8-2 15 0 22 1l6 2-2 2c-15 0-23 5-26 7-2 1-3 6 0 6 14 1 26 8 31 11 2 2 7 7 2 9-14 5-15 13-6 19-3 4 0 10 1 14 1 6-3 16-7 23-21 35-81 50-118 54-31 2-75 2-93 6-19 5-39 8-53 10-10 1-21 1-30-1-8 7-59 11-88 13s-53-1-82 0c-8 0-19-4-26-5-6 0-14 1-20-1-4-1-5-4-12-8-4-2-12-2-17-7l16-1c2 0 9-3 2-4-5 0-20 2-32 0 10-2 34-7 39-12 2-1 1-4-1-4-4 1-35 2-45-1 20-3 36-6 41-11l41-9c15-4 30-2 44-9 27-16 55-32 87-37 20-4 41-5 61-11 17-4 32-10 48-18 17-8 35-13 54-14 13 5 9 16 7 20-4 12-23 27-33 30-3 0-3 4 0 4 7 1 28-3 41-10a1259 1259 0 0197-46zm-702 153c-12 0-20-2-32-3-15-1-27 4-58-1-51-8-85-33-122-43-31-9-64-10-96-17-41-9-90-25-125-44-43-23-130-46-164-54l-30-3c-3 0-24 2-45 8-32 10-69 27-73 28-66 13-164 54-207 67-17 5-44 15-51 13-2 0-5-5-8-5-13 2-41 19-59 21-37 3-91-10-164-5-34 2-61 16-119 16-30 0-84-12-121-26-29-8-71-19-91-21-18-2-48-6-73-1-16 3-29 11-33 8-6-7 4-24 16-33 12-10 44-14 59-26 15-11 32-35 45-42 10-5 22-6 33-5-7-7-5-12 1-17-18-13-40-19-58-23l25-1c15-1 29-8 44-10 18-2 36 5 54 8 12 3 23-3 35-4 10-2 20 1 30 2 25 2 48-8 72-9a124 124 0 00-56 25c-17 13-57 44-77 47-4 0-39 18-56 22-13 4-30 1-39 2-6 0-13 4-13 4l52 7c9 0 21 7 17 10-2 3-6 4-30 4l45 5c32 2 58 1 82 0l-60-13c-6-1-19-2-19-4 2-5 19-8 26-8 20 0 80 6 96 6v-4c-9 0-17-7-18-10-2-5 5-13 11-12 14 0 54-2 67 3 3 1 13-3 13-3-8 0-25-8-30-13-4-4-8-9-7-14 2-9 17-31 23-38 1-2 10-2 17-2l20 14c29 21 61 37 91 55 37 19 79 30 121 32l18 1 19-1c13-1 24-6 36-10l46-16 43-19c37-13 72-31 106-50l22-9 10-3 38-10 3 3c3 1 12-2 18-1 10 1 32 0 41 8 3 4-18 6-17 8s16 4 20 6 4 5 3 8c-3 8-15 10-15 11 0 3 21 2 21 2l33 6 52 13-36-20 8-13s33 3 49 7c20 5 45 13 67 22l75 38s-15-11-21-19-16-21-16-32c0-8 4-19 12-21 16-4 65-2 80-5l12-2c19 0 36-8 53-12 10-2 21-3 31-1l20 22c10 10 22 26 34 35 11 10 26 15 38 23 15 11 34 46 61 61 17 10 38 10 60 9l11-1c3-1 3-4 0-4-7 0-27-2-37-8-10-5-21-10-29-17-6-5-18-16-15-21 1-2 16-1 23 0 9 2 24 7 28 10 3 2 6 0 4-2-4-4-21-13-32-18l-31-11c-17-6-47-14-69-28-14-9-30-24-37-33l-2-5c11 5 23 9 34 15 20 9 38 23 59 32 36 17 73 31 111 46 25 10 51 19 77 27l-1 4c-8 3-27-1-32-4-2-2-4 0-3 0 7 9 35 17 46 19 5 1 7 8 16 13 15 10 26 11 31 15 2 1 0 6-2 6-6 0-29-1-35-5-2-1-4 2-1 3 4 3 18 9 30 11l-19-2c-7-1-18 0-25 2-14 3-41 15-56 19-9 3-28 4-28 4l-1 1zM0 400v-38c22-11 45-22 68-30 17-5 35-8 53-12 33-8 68-14 102-23l92-24c25-9 52-16 79-17l24-1h21c-19-1-78 2-108 21-35 22-87 55-113 82-12 12-19 36-46 41-18 4-46-8-68-5-22 2-50 17-68 17-12 0-27-8-36-11zm568-132c16 2 33-1 48-3l44-9c16-4 32-12 48-17 27-11 54-18 82-25 11-4 22-4 33-2l10 2-19 1c-13 2-28 9-40 15-21 9-54 33-86 41-50 14-101 12-114 2l-6-5zm1391-85l3 3c2 1 6-1 8-1l13 5v4c-3 0-3 2 0 5-11 1-22 1-23 7 0 0 9 0 13 2l11 9c-4 3-1 5 2 9 0 0-23-5-26 2-1 3 26 20 26 20-31-12-74-25-127-39h1c35 0 66-15 99-26z" style="fill: var(--c4);"/>
</svg>
</div>
</div>
<!-- landscape layer 4 - mountains 3 -->
<div class="landscape__layer">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M0 408s1229-15 1235-22c8-10 23-16 37-15 19 0 37-2 56-5 20-3 40-2 60-6 31-3 61-6 91-15 23-7 48-9 71-17 40-13 80-24 119-41 20-7 40-15 61-21 29-10 61-6 90 2l44 8c22 3 44 9 65 13 19 4 37 9 54 16 11 4 23 9 35 9 19 0 39 1 58 6 13 4 26 10 39 13l41 12c24 8 50 13 76 17 22 3 43 7 64 14 52 18 105 35 158 49 11 3 22-2 33 2 4 2 8 6 10 10h388c47-1 79-3 80-4 6-11 14-19 25-25 19-11 38-24 60-26l33-7 44-11c59-12 119-23 179-33 30-6 62-10 92-18 39-11 78-21 118-23 23 0 45-2 67 3 17 3 34 6 49 13 23 10 45 23 69 34 15 6 28 16 43 23 16 8 34 14 51 22 16 7 35 14 52 9 7-2 14-1 21 0 20 2 39-1 58-3 15-1 27 12 42 11l32 1v597H0V408z" style="fill: var(--c5);"/>
<path d="M3470 296c15-3 31-5 46-6 23 0 45-2 67 3 17 3 34 6 49 13 23 10 45 23 69 34 15 6 28 16 43 23 16 8 34 14 51 22 16 7 35 14 52 9 7-2 14-1 21 0 20 2 39-1 58-3 15-1 27 12 42 11l32 1v84c-16 49-56 84-111 112l-171-143s39-18 40-26c0-2-8-9-17-12-12-4-41-10-56-10-9 0-24-6-26-10-2-2 0-4 3-5 0 0-13-12-22-14-9-3-25-1-31-1-3 0-5-3-2-4 3-3 13-4 20-4 0 0-26-15-41-20a267 267 0 00-88-8c-4 1-6-3-3-6 7-5 36-9 47-14 0 0-11-3-15-6l-8-8c-9-2-35-5-45-10l-4-2zm-1705-21c31 2 158 35 158 35-18 2-21 2-20 12 1 9 14 12 16 16-3 4-1 8 0 10-10 5-40 18-60 23-11 2-27 3-34 2-5-1-8-7-12-10s-11-4-11-6c1-3 9-7 15-9l16-4c4-1 3-9-1-10l-26-1c-9 0-19 2-24 3-1-4-4-4-5-6-1-3 5-7 0-12-6-4-10-2-15-2 6-6 23-10 28-12 5-3 4-9-3-11-7-3-36-5-42-7 3-5 13-12 20-11z" style="fill: var(--c4);"/>
</svg>
</div>
</div>
<!-- landscape layer 5 - valley 1 -->
<div class="landscape__layer">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M396 354c9 0 18-3 27-5 7-1 14 0 20 2 17 3 34-1 51 2 9 2 19 2 29 2 13 1 26-3 39-1 11 2 22 1 33 1 16-2 33 1 49-1 22-2 44 3 66 2 16 0 31 4 46 5 9 0 18 4 28 4 6 1 12 0 18-1 12-1 22-6 34-7l33-2c10-1 19 4 29 4 9 1 18 1 27 4 14 3 28 3 42 3 19 1 39-2 59 2 15 3 30 6 46 6 17-1 35 0 52-4 23-5 47-5 70-3 17 2 32 11 48 15 27 7 56 10 84 10 16-1 31 6 45 13 10 4 20 4 30 7 6 2 10 9 16 12 7 2 15-2 22-5 12-4 25-2 37-5 23-6 47-1 70-4 15-3 29 9 43 3 13-5 28-10 43-7s29 6 44 7c9 0 17-5 26-5 16 0 33 2 49-1 10-2 18-7 28-8 8-1 17 3 25 1 31-11 63-4 94-10 11-2 23-3 34-2 14 0 28-5 42-4 11 1 20 7 31 9 9 2 18-1 27-3 13-2 26 1 38-2l18-6c7 0 14 4 21 4 13 0 26 3 40 4 11-1 20 8 31 8s22 0 33-3 22-8 33-10l28-5c4-1 8 3 11 5 13 1 27 6 39 1 7-2 14 1 21 3 12 4 24 6 37 9 11 3 22 1 34 3 7 1 15 4 23 4h35c9 1 17 5 26 6l29 4c13 3 27 1 41 2 10 0 19 5 28 6l36 3c14 3 28 2 42 2 12 0 24 2 35 0 12-1 23-4 33-7 10-4 20-3 30-3 11 0 21-5 32-6 13 0 27-1 40-4 7-2 14-7 22-7 8-1 17-1 25-4 13-4 26-2 39-3l23 1c12 2 24 1 35 5 9 3 19 5 29 5 8 0 16-2 24-4 11-2 22 1 32 0l27-1c11 0 22-3 33-1l37 3c11 0 22 6 33 5l21 1c10 3 20-2 30-3 16-2 32-6 48-1 16 6 34 1 51 3l55-7c8-1 16 3 24 3 9 0 17-8 26-8s17 6 24 11c12 9 26 17 42 18 15 2 31 3 46 1 25-3 50-7 74-13 13-2 25-10 39-8 18 2 37 4 55 3 17-1 34 2 51 0 12-2 24 0 36 1 7 0 12-6 19-8 8 0 16 2 25 1 12-3 23 3 35 3 13 2 25-5 37-5 10-2 18 8 29 7 9-1 18-3 28-3v597H0V391l36-5c11-1 23 1 34 3 17-3 34-9 52-8 15 1 31-2 46-3 9-1 15-7 24-8 13 0 26 1 39-4 5-1 10-5 16-5 20 1 39-1 59-1 16 1 30-6 46-6l24-2c7-1 13 2 20 2z" style="fill: var(--c6);"/>
</svg>
</div>
</div>
<!-- landscape layer 6 - valley 2 -->
<div class="landscape__layer">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M651 500c3-5 8-9 14-11 7-2 15 0 23 0 32 2 64 9 96 2 11-2 20-9 30-11 16-3 33-2 50-4 15-2 29 7 44 2 14-6 29-6 44-6 8 0 16 3 24 4 8-1 16-4 24-4 13 0 25 3 38 2 35-2 71 0 106 2 19 1 38-5 56 1 15 5 31 2 46 2l35 2c10 2 21-2 31-2 19-1 38-5 57-8 7-1 13 2 20 4 7 3 14 3 22 5l20 8 18 2c13 1 25 8 39 7 17-1 34-2 51 0 14 2 27-5 41-6 12 0 23-6 34-8 14-3 26 5 40 4 20-1 39-10 56-21 11-6 24-4 36-4 25 2 49-3 74-3 14 1 26-7 40-8l20-5c12 0 25 5 36-2 7-5 16-8 26-7 7 1 13 6 19 10 11 5 23 6 35 7 10 1 19 6 29 7 11 2 22 0 33 2 8 1 15 5 23 6 9 2 18 1 28 3l20 5c21 3 42 0 63 3 10 0 19 5 28 6 9 2 19 2 28 2 11-1 20 5 30 5 17 0 34 6 51 8 12 2 25 0 37 0 31 7 62 0 92-5 10-2 20 1 30 2 21 2 41-5 62-4 23-2 47 2 69-5 26-7 52-13 79-16 19-4 38-3 56-9 18-4 36-9 54-9 10-1 18-6 28-7 8 0 16 1 23-3 10-5 22-4 33-4 10 0 20 0 30 3 8 3 16-2 24-3 18-3 36 0 54-1 8-3 17-4 26-6 16-6 32 3 48 1 15-1 29-5 44-4 12 1 19-10 30-13 9-1 17 2 26 1 13-2 26 5 39 3 8-1 14-6 22-9 6-1 13 2 19 3 15 4 31 1 46 5 14 3 29-2 43 2 9 3 17-4 25-6 11-4 22-11 34-11 20-1 40 2 60 4 14 0 26-7 38-10l54-5c11 0 20-7 31-8 14 1 27 10 41 11 13-3 26-8 40-6 5 1 7 7 13 9 5 2 11 2 16 6 11 8 23 15 34 24 5 5 10 9 16 12 6 0 12-2 19-1l24 6c19 6 34 22 54 23 8 1 16 4 23 8 16 9 34 13 48 24 16 6 32 14 43 27 6 7 16 7 24 10 8 5 13 12 20 17v443H651V500z" style="fill: var(--c7);"/>
</svg>
</div>
</div>
<!-- landscape layer 7 - loch -->
<div class="landscape__layer">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M2550 660c-30 10-61 4-91 1-9 0-11-10-13-17-30-4-65 5-92-14-5-6-11-14-6-21 7-13 23-15 36-17l70-10c32-4 64 0 97 1 36-6 73 0 110-6 20-2 40-9 61-9 31 1 61 3 92 2 92-6 184 7 276 6 24-4 39 16 59 24 32 9 65 13 98 17 18 1 34 10 48 20 8 4 11 16 5 23-6 11-19 12-30 16-5 22-23 44-47 47-31 4-63 0-95 2-27 2-55 0-82 1s-52-8-78-13c-27-7-56-5-84-9-35-4-70-4-105-9l-109-13c-13-2-27 2-40 1-9-1-14-11-24-10-19-3-37-8-55-13h-1z" style="fill: var(--c2);"/>
<path d="M2454 582c32-4 64 0 97 1-32 7-66 5-98 13-10 2-21-2-30-6l3 11c-20 3-40 6-59 12-4 3-12 4-4 12 3 7 12 8 18 10l57 3c16 1 29 13 45 15 22 3 45 0 67 7-30 10-61 4-91 1-9 0-11-10-13-17-30-4-65 5-92-14-5-6-11-14-6-21 7-13 23-15 36-17l70-10z" style="fill: var(--c0);"/>
</svg>
</div>
</div>
<!-- landscape layer 8 - foreground 1 -->
<div class="landscape__layer">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M4000 1000H0V274l12-2-6 10c9-3 14-11 19-18 2 4 6 8 3 12-3 5-10 9-10 16l-9 3c4 2 9 8 14 6l6-12c5 3 10 4 15 1-1-4-3-9-7-12v-10c8-2 16 1 23 1l2-13c-2 3-3 6-6 7l-10-3c-2-8 5-14 12-14 3-5 6-12 13-11l-5-3c5-3 10-5 16-6l1 14 7 2-1 9h7l-7 9 8 7c-1 4-4 7-7 10l12 2-1 6c-8 5-16 8-25 9 9 3 18-2 28-4-1 4 0 10-5 13-6 7-15 10-23 12 7 0 15 1 22 4 6 1 12-2 17 0l-1 9 10-16 3 3-1-9c5 3 11 3 16 0-5-1-10-4-9-10l13-1-6-7c6-1 11-2 16-5l1 15 4-2v-6l12 1c4-4 5-8 8-12l-7-8c6-3 4-10 4-16l8 1-3-5 13-4c2 8 0 16-2 23l-4 3c5 6 10 13 19 13-4 2-7 5-11 6h-6l5 12c1 10 7 19 11 28 2 6 6 8 10 12l8-4c-2-11 3-21 8-30 9 2 13 11 20 16 1 7-7 5-11 4l10 9 5-7c2 6 0 11-2 16h8c2 5 6 9 11 12v5l-5 1 1 3h12v6c7 0 12-4 17-8-8-1-14-3-21-6l-1-5h17c-7-3-16-5-19-14 6 0 10 3 15 5h10l6 6 1-14c-6 2-12 3-19 3 0-4 1-7-1-11-4-5-11-9-13-16l14 7v-3l9 2-9-13 13-4-10-15 11 5c-3-5-3-11-3-17l18 5-7 8 15-1-2 10h-7l6 7 12-6-11 16 11-3c-4 5-11 7-17 10 1 5 8 6 12 9 4-3 8-5 13-6 0 4 1 9-2 13l-13 8c-4-1-7-2-11-1l10 7-15-5v1l1 3v1c10 5 20 1 29-3-2 6-5 12-10 15 7-2 13-6 21-3-5 5-11 6-17 5v5l9-3-8 11 14-4c-2 2-3 5-6 6-5 2-10 2-12 8l12-3 12 9-2-18 5-2 1 6 1-12 4 8 8-2c-5 4-9 9-7 15l6-4 1 5c3-2 5-6 8-4 8 2 14 8 22 8l12 3-13-15h4l-7-8 5-6-6-4v-4l11 6-4-12 14 6c-1-5-3-10-3-16l9-10 2 10 8-4c-5 4-9 9-8 16l8-5v4l9-1c-4 6-6 14-10 21l19-5c-4 5-9 9-11 16l14-7c-2 5-4 10-8 14l1 8-8 7 15 1c-6 6-14 12-16 21 5-1 11-2 14-7 4-4 9-6 14-7l5 6 5-4v9c0 5-2 12 5 14 4 4 9 2 12-1l-8-10c1-4 0-9 4-11l19 2 1-13-4 9-12-4c1-3 0-8 4-9 7-4 14-11 18-19 4 0 8-1 11-3 2 6 3 12 9 15l-1 8 6-2c-1 4-3 7-6 11 5 2 9 6 15 7l12 2c-9-6-12-16-17-24l4-5-7-4 9-5 3-6 11 7-2-16 8-11 3 9 6-3-8 13 15 5-1 15c10-2 19-9 26-17l-4-2-4-14 2-8 11 2-1 6 7-2c-1 6-3 12 2 17-5 5-4 12-3 19l17-1v6l9 3-10 3 12 6c-7 9-16 2-23-3l-2 11 13-2c-2 5-5 9-9 13 3 5 10 3 15 4l1-8c7-4 14-8 18-16 3-6 10-6 15-7 1 6 3 12 9 15l-1 7 6 1-7 9 8 6-3 10 10 2-8 11h9v8l-14 12c13 3 26 4 39 5l-7-11 11 5 5-4c-4-2-7-5-8-9l13-2-7-6 17-4c0 5 0 10-3 15l9-3-8 12c7 3 15 3 22 0l-9-11 8 3-2-14 17 4-8 6 11 1-3 9c1 3 2 7 1 10 0 4-3 9 0 13 6 7 15 10 19 17 6 9 6 19 8 28 4 8 14 10 21 11l39 11c4 0 7 2 9 3l-8-16 13 7c-4-8-9-17-9-26l13 1-5-8 13 2c-4-6-15-4-17-13l14 4c-6-6-11-12-15-19 7-2 13 3 20 4-5-3-9-8-11-15l20 6-2 7c3-6 8-10 13-14l-17 4c4-2 8-4 10-8l-12 1-1-4h-8c-3-5-5-11-4-17l14 8 12-9c-6-3-13-6-18-11l11 3-11-16 11 6 7-5c-5-2-10-6-9-12h16l-9-8c6-1 14 1 18-5 1 6 2 13-2 18l12-5-11 15 13 4-9 12 9 2c5-3 10-6 15-7-2 7-9 10-13 16l-4 11c-6 1-12-1-17-3v13c7-4 16-3 23-7 3-3 6-3 10-2-5 7-13 10-20 13h12c4 0 4 5 6 7l4-5 7-1v-8l11-1c-3-4-5-9-5-14l14 2v-5h-8v-5c6-5 11-12 19-17l7 12c5 7-1 19 9 23 3-3 9-6 10-11l9-18c4-7 5-16 8-24l-9 2-8-7 10-1 10-14-7 2c3-6 0-11-1-17l1-9 12 3-1 7 8-3-3 12 5 5-5 7 1 13 18-2-2 7 9 3 1 3h-6l-2 2 11 7-12 3c-3-3-6-6-10-7l-4 10 14-2c-2 5-6 9-9 13 3 5 11 4 16 5l-10 4 18 2-4 6 11-1v-7l15 1c1-7 2-13-3-19l4-4-2-9h6c1-6 6-7 11-8 2 7 1 13-2 19l3 3-7 1c4 7 10 12 18 14l-16 5c3 5 5 11 6 17 4 12 12 22 19 32 3 7 10 4 15 5 1-4 4-7 8-9l12 9 7-4-9-2-6-15c8 3 17 7 26 8l13-5v-4-1c-6 2-13 7-20 6 4-2 8-5 13-6l-1-1-1-3-1-1c-4 1-8 2-10 6l-5-5v-1l3-2 1-1-14-1-5-9 1-12 16 9c6-2 10-6 15-10l1-2c-9-3-17-6-23-13l15 4c-5-7-11-13-15-21l16 8 8-9-8-1c-4-3-3-8-4-13l20 2c-2-5-7-8-12-11 7-1 14-3 21-2l3-6c2 8 4 17-1 24l14-7c-3 10-13 15-14 25l4-3 13 2-11 17 12 2 16-9c2 5 6 8 11 10v4l6-1c0 6-1 12 4 16l-6 7 1 13 17-1v6l10 4v-9c-8-4-17-8-20-16l5-2 12 7c7 3 15 2 22 6l-10-12c1-6-4-9-7-12l6-2c-3-4-6-7-7-12l12 7-3-12c4 1 9 3 13 6-1-5-3-11-2-16l8-8 2 7 6-1c-3 3-6 8-6 13l14 1c-1 6-1 12-6 16l1 2-5 5c7-4 14-8 22-10-3 6-10 10-11 17l13-7-7 14 1 8-8 7 15 1c-6 6-13 12-16 20l25-5-6 9c8-2 13-10 18-16l3 10-11 16-8 3 10 10c5-4 7-10 10-16l8 4 6-4-8-10 2-10 8-1v11l3-9 10 1 1-13c-2 3-3 6-6 7l-10-3c0-5 1-9 6-10 6-3 10-9 14-14 2-6 9-6 13-8l3 12 7 3-3 8h7l-6 9 8 6-6 9 10 2c6 10 13 20 17 31 1 6 7 6 12 7l-8-13a576 576 0 0111 5v-2h1c-4-5-5-11-4-17l12 6c-5-7-13-12-14-21l1-1 2-1h1l16 11 7-2c-7-6-10-15-16-21-5-5-5-12-6-18 5 5 11 10 19 10l1-10c-8-4-16-8-20-16l1-1h3l1-1 12 7c7 3 15 2 22 6l-10-12c1-6-4-8-7-11l5-3c-2-4-5-7-6-12l12 7-3-12c4 1 9 3 13 6l-2-12c-2-6 4-9 7-12l3 7 6-1c-3 3-6 8-6 13l14 1c-1 6-1 12-6 16l1 2-5 5c7-4 14-8 22-10-3 6-10 10-11 17l13-7-7 14 1 8-8 7 15 1c-6 6-13 12-16 20l25-5-6 9c8-2 13-10 18-16l3 10-11 16-8 3 10 10c5-4 7-10 10-16l8 4 6-4-8-10c0-5 2-9 4-12l7 3-1 9 3-9 10 1 1-13c-2 3-3 6-6 7l-10-3c0-5 1-9 6-10 6-3 10-9 14-14 2-6 9-6 13-8l3 12 7 3-3 8h7l-6 9 7 6-4 11h10c-1 3-3 6-6 8-6 5-13 6-20 7 9 3 18-2 27-4-1 6-3 13-9 16-5 5-12 5-18 7l21 3 17 1-5 14h-7l4 9h13-9l6-14 12 5 9-6-16-9h8l-7-12 10 5 8-6h-8l-3-8h12l-5-7c6 0 11-2 16-5l-1 15 7-2-8 12 10 2-4 11 6 2v-1l2-1h1l-3-9 8-4-6-10 7 2-2-12 15 2-6 6 12 1c0 4-3 7-7 9l5 3 10-3-7 8 5 4-13 8 9 4 11-3 5 9 5-1c-4-6-6-12-8-18 12 0 23-2 35-4-11-1-25-8-24-21 8 2 17 7 25 2-10 1-20-4-25-12l10-1-4-11 7-5c-3-3-8-8-2-11l1-4c5-3 7-9 9-14h1l2 1h1c8 2 11 11 17 15 3 3 10 6 9 12l-9 5c-3-2-4-6-6-9l2 13h9l3 8-1-9h10c1 7-3 14-7 20 5 1 10 2 15 1 2 4 2 10 7 10 3-1 6-4 8-7l-6-2-9-17c-1-3 1-5 2-8 5 6 9 12 17 15l-6-9 23 5c0-9-9-13-14-19 5 0 10-2 15-1l-8-6 1-9c-4-4-6-8-8-12l13 6c-1-7-8-10-10-16 7 2 15 5 21 9-5-5-9-13-9-21l13-2c-1-5-3-9-7-13l6 2 4-8 1 9 2-3 4 2-2 16 10-3v9c5-2 9-6 11-11 7 3 13 7 19 12 5-8 16-8 19-16l-15-5c-5-2-10-7-14-12l17 6c-3-10-12-16-17-25 8 2 14 7 20 11l3-6c-1-5-4-9-7-13 1-4 1-7-1-11 8 3 16 3 25 2-3-6-10-9-16-13 6-1 14 2 18-3l9 3 2-10c4 5 3 12 4 18 0 5-4 9-6 13l19-10c-3 10-11 17-17 24l10 5h11c-4 8-10 15-15 22 6 0 11 0 16 3 6-6 13-10 21-12-1 3-1 8-4 11-7 5-14 10-19 17l1 14c-10 2-21 1-30-4v20l11-2-5-6 21 3 14-10 8 3-8 10c-7 3-15 4-21 10 9-1 19-2 27 2l-1 5c-8 3-16 5-24 10l-8-2c4 5 8 12 15 13h20c-9 5-21 3-29 11l22 8-17 1 1 7-7-7c1 5 4 9 7 11l-1 5c-5-3-12-6-18-3l7 6c8 6 18 2 26 5l5-9h10l-5-8 21-1-10-6c7-1 16-1 22-8l-10-4-7-10-11-4 1-4 11-6-9-2 1-5h10l-3-9 22 2 2-16-7-9 7-4-3-15 10 2-3-7 16-4-2 10h4c-3 6-7 14-2 21l-10-2 13 16 12 2-11 7h-10l7 15-3 4 10 13-5 1c7 4 10 13 13 20 5 4 10 8 11 14 7 2 13 4 20 4l-9-4c-2-8-4-16-2-24 0-8 7-14 11-22 9 6 16 15 24 22l-8 6-7-5c3 5 7 9 12 12l5-7c5 6 1 13-2 18l12 2 1 10h10v8l-7 5 14 1c2 1 3 4 4 6 8 2 14-3 18-9-9-2-20-2-25-11 6-3 14-2 21-2-8-4-17-6-22-14l4-4c6 5 12 9 20 8 5 0 8 6 13 4l1-15c-7 4-15 4-23 4v-12c-6-7-16-11-18-21l13 6c4 4 10 1 16 1l-11-15 16-5c-5-6-10-11-14-18l15 7c-6-7-5-16-2-24l2 7c7-1 13 0 20 1l-11 10h17c0 3 2 7-1 9-2 3-6 2-10 3l9 8 14-8c-3 7-9 12-12 20l12-4c-5 7-14 10-22 13l15 11 15-9 2 6 16-9c5-6 10-14 13-22-5 5-9 11-16 13-6 1-14 1-17-5l8-10-2-5c5-4 9-8 15-10 0-5 1-9 3-13 2-5 7-7 10-11a320 320 0 01-4-1l-1-2 11-12-4-6c3-5 9-11 7-18l-8 1-3 5 1-8-5 3-6-9 17 1-3-7c5-3 9-8 13-13l-11 2 5-5-6-6 3-3c-4-6-3-13-1-20 6 0 11 4 17 4l-4 5 2 4 9-4v13l-1 1-3 1-1 1 12 6-11 10c3 6 3 12 2 18 9 1 18-2 26-1-2 3-3 7-1 10l9-1 3 7h-10l-2 3 13 5 1 4-16 7-4 9c-2 3-6 4-10 5 5 10 17 6 25 11h-13v6c8-1 17-1 25 1l-7 7 14 3-1 7h-10c3 5 8 8 13 11l-10-4-8 5-7-6c0 6 3 10 6 14-6-2-8-8-10-14h-15c1 5 1 10 5 14 3 2 6 2 9 2l-3 7 6 1-1 5c9 2 18 7 28 5l5 15c-3 2-6-3-9-4l-3 3c-4-2-8-3-13-3l6 7c-6 1-13 0-19-2 5 4 10 9 13 16l4-1 6 6-1 6c5 5 9 13 18 13 21 4 42-2 63 2-8-6-18-4-26-9-5-4-5-9-4-14l13 6 11-9c-6-2-12-5-17-10l8 1-9-13 12 6 6-5-7-3-1-8h14l-8-7c6-1 12-2 18-5 0 6 0 12-3 17l11-5-10 14 12 3-8 12c8 2 15-2 22-5-3 7-9 11-13 16l-2 10-17-3 1 12 4-1 1-4 6 1c7 1 12-7 18-4-3 6-10 9-16 11l15 3c-4 2-7 6-10 10 6 1 12 0 18-1l-5-3v-6h8l1-8 8-2-3-11c3-4 8-1 12-1l-7-6c6-6 11-15 19-18l7 14c1 7 0 15 7 19 4-4 9-7 11-12 6-12 11-24 14-37-5-1-11-2-15-5 7-2 13-7 17-13-5-7-7-16-5-24 9 1 17 9 16 19l3 3c-5 5-4 12-3 19l16-1-1 6 9 1-4 7 7 6c-4 0-7 2-10 1l-12-6-2 11 12-2c-3 4-5 9-9 13l16 3c-3 1-7 1-9 5h17l-4 5 19 8v-7c-5-4-10-7-13-13 9 3 18 7 28 9-6-6-12-15-11-24l5-7 9 4c-1-4-3-8-2-12l5-6 3 5 4-1-6 9 12 1-2 12 9-1-7 10 9-2-7 19 7 1-10 15 12-2 4 4 12-10c0 9-6 16-13 21l7 6a394 394 0 016-8l1 1h1l8-4c-3-5-5-10-4-15l16 1-12-8c6-4 11-9 15-15 2-3 6-4 9-5l9 17v17l7 1c-4 6-11 9-18 11l19-4c-1 10-11 14-19 17l23 3c6 3 12 5 19 6l-8-6c1-3 0-6-2-9l8 3c1-3-1-6-2-9l8-1-3-6h9c3 5 4 10 1 15l6 2-3 8 12-3-6 9c18 4 36 8 55 8 7-2 6-9 5-14-4 0-6 4-9 6l-2-6-9 10-7-6c-7 1-14-1-21-3 3-5 7-9 13-12 7-3 11-10 17-17 3-4 10-5 14-9 4-6 8-12 11-20-6 6-11 13-19 13-4 0-8 1-11-2-2-5 3-9 5-13l-2-5 15-10 3-12c2-5 7-8 11-11l-6-1 10-13-2-7c3-6 7-10 7-16l-8-1-4 5 1-5c-4-2-12-2-10-8 5-1 11 0 16 1l-3-7c5-3 9-8 13-12l-11 2 5-6-6-5 4-2-6-8 3-5v-8c5 0 10 2 13 5l4-1-3 8 11-2-2 17 7 3-9 10c2 6 2 12 2 18 8 1 17-1 25-2-1 3-5 7-1 10 3 1 11-1 11 5l-12 3c4 3 8 6 14 6v6c-6 0-15 5-18-2-3-3-7-4-11-5l-4 14 19-3c-1 8-8 13-14 17l11 6v9l15-2-14-6 18-4c6 5 14 9 23 6-4-3-9-4-14-5 1-7-3-12-6-19 9 5 18 8 27 10 9 3 16-4 24-5l-2-6c-8 3-15 9-25 8l2-4c5-1 11-2 15-5-2-2-4-6-7-5-5 0-8 4-10 6l-6-5 5-6-16 1-7-10c-3-5 0-12 0-17 8 2 15 6 21 11 4-1 5-6 10-7 3-2 11-4 9-9l-14-4c-6-3-10-8-14-13l17 6c-3-10-14-16-17-26l20 11c1-2 4-4 3-7-1-4-4-7-6-11l-1-12c7 3 15 3 24 2-2-7-10-9-16-13l16-1 2-4 9 5 4-11 3 18c1 5-4 9-6 13l19-8-7 13-11 10c7 5 14 7 23 6-5 8-11 15-15 23 5-1 11-3 15-6l-3 9c9-4 16-11 26-13-1 4-2 9-6 12l-20 17c2 4 5 10 1 14-10 3-21 2-29-5l-1 16c0 2-1 5 2 5 3 3 7-1 10-2l-5-5c8 1 15 3 22 2l16-10 6 4-4 6c-6 8-18 6-25 14 9-1 19-2 27 2l-1 6c-7 2-13 7-21 5l-1 4-11-1c5 5 9 12 16 13h21c-11 5-23 4-32 11l24 8-17 2 1 5-6 2 7 4-2 5c-6-3-12-5-19-4 3 3 5 6 8 7 7 6 17 2 26 5v-7l7-1-1-10 6-5-6-7 5-2 7-20c5 2 10 2 13 6 4 7 11 11 17 16 2 6-5 10-9 13h16c0 7-3 13-6 20h14c1 5 4 10 8 12 2-3 10-6 5-9-7-6-14-15-12-24l16 13-3-8 21 5c0-9-9-13-14-19l12-1c-6-7-6-17-11-25l12 4c-3-5-6-10-11-14l14 2-4-16c5-1 11-1 15 4-1-6-2-11-6-16l4 1 4-6c3 3 6 5 7 8l-2 14 10-5 8 7-3 14c-2 7-7 12-11 17 5 0 11 0 16-2 5-3 11-6 18-7-3 8-11 11-17 15l-1 8c7 0 13-3 18-5-2 11-10 21-18 30l2 6c7-4 13-9 21-12 1 11-12 13-16 22l13-5 2 7c-5 5-10 10-11 18 24-2 48-1 71-5-4-2-11-5-7-12 7 0 15-3 22-6-2-4-5-7-10-9 2-2 3-5 6-6h17c-7-7-19-6-28-7l3-5c-10-1-17-8-25-12l3-5c6 1 11-1 14-6 7 4 16 8 23 3v-7l-5-2-7 5-3-21c6-1 11-4 17-7l1 9 5-4h6c-3-5-7-11-6-18 1-4 5-7 8-10 3 2 5 5 9 6 7-1 14-5 16-12l-6 3-2-11-9 1v-5l6-3-5-8 6-7c10 5 21 5 32 6-1-3-2-7-5-8l-18-6-2-13c6-1 9-4 11-9l9 2v-7c8-6 12-14 16-22l6 5 7-8h7c1 6-1 12 1 18s10 4 14 5l-4 16 8-6 1 9c-2 4-7 6-11 9l16 10c-3 6-7 13-12 17l20 2-4 12-6 1 3-11c-4 4-5 10-8 14-8 6-18 7-27 6 9 9 23 1 33-1 6-2 12-3 13-9l16 1c0-4 1-9-1-13-2-6 0-13 0-20h5c1-5 6-7 11-7 1 8 1 17-5 23l8 10 9 2c-4 5-10 5-15 6 3 8 4 17 8 25 5 8 8 18 17 22 10 3 20 0 30 2 1-6-1-11-4-15h7l4-11-6 1-7-11 2-12 15 9c5-6 11-9 18-11-9-3-18-6-24-14l14 4-14-20 16 8 9-10-7 3c-4-4-6-10-6-16 7 1 14 3 21 0l-13-10 21-2 3-5c2 8 4 17-2 24 5-2 9-5 14-6-2 7-8 13-13 18 5 3 11 5 17 5l-11 18 12-5-1 7 12-12c11 2 21-5 32-6l-3-6 7-1-4-7 12-3c4-5 6-12 4-18-5 2-11 3-16 1l-4 7-1-8-7 9-10-6-11 4 13-8 1-4-9 1c-4-1-3-7-4-10l17-2c-3-3-7-6-7-10 9-2 19-2 27 1l1-8-15 1c6-6 15-4 22-7l7-7c-5 0-10-3-15-5l4-6c-7-6-16-10-24-13l1-5c4-1 10 0 13-4 2-2 0-5 0-7l-10 4 1-9c5 1 11 2 14-4l-5-9c10 2 20 5 30 3-1-7 0-14 2-21l-11-11 12-7-5-2c1-5 2-11 0-16l10 4 3-4-5-7 6 2c3-5 9-7 15-6l-1 10 4 3c-3 4-5 9-5 14l-4 7 8 5-15-2c4 6 10 10 15 15l-1 6 18 2c-3 2-5 6-7 9l-10-8 5 9c-5-2-12-3-14 3 2 6 7 10 9 16 0 3-3 4-4 7 5 6 12 10 13 18h-6l9 7c4 6 5 13 6 19l19 13-5 3 9 12-2 6c-6 1-11 3-17 1-8-2-13-10-18-16 2 10 8 17 13 25 4 6 13 4 17 11 6 7 11 16 20 20 7 3 12 9 16 15l12-3-1-5-10-7 1-6c8 5 16 9 25 7v-1l1-3 1-1-12-9-7 5c-8-6-17-12-19-22 11 0 20 13 32 8-4-7-11-11-18-15l-2-12c-7-1-12-5-15-11 6-1 11-3 16-6 8 8 19 15 31 11l-4-5-15-2 3-12c-6-3-11-8-9-15l13 7c7 4 14 3 20 6 5 2 12 5 16 1 6-4 12-6 18-6v-9l-8 1c-5 3-8 7-13 9h-14l1-5c7 0 15-2 21-5-1-3-2-6-5-8l-12 1-5 9c-2-3-5-6-9-8l-1-11c-4 2-8 4-13 4-5-6-9-13-12-20l3-20c4 3 9 6 14 7 7 2 9 12 18 11l1-8c9-3 20-5 22-15l-21-6c-7-4-14-9-19-16 9 1 16 6 25 7l-7-11c-5-9-17-14-18-25 11 3 18 12 27 16 3-4 5-9 6-13l5 4c2-3 2-7 1-11l-8 5-12-13 6-5-6-9c12 4 23 5 35 3-1-11-15-11-20-18h22l1-8c4 4 9 6 14 8l2-15c8 9 4 22 8 32-4 3-11 7-9 13 8-6 17-11 27-14l-11 21c-8 1-11 8-15 13l10 2 4 6c5-2 11-2 16-2-3 12-16 20-19 32 8 0 15-4 22-7-3 3-6 7-6 12 5-1 9-5 12-8 7-5 15-8 23-11l-3 11h9l6 7 6-3-6 7 4 4 11-4c-2 6-1 12 0 18l-5 1c3 4 8 6 12 8-4 4-9 8-11 13 1 7 3 14 2 21 10 1 20 0 29-3l2 4-6 8c5 3 11 3 16 2a390 390 0 00-2 4h4l-2 6-11-6 1 8h5v5l9-1 2 8-20 4 2 3-1 1-5 5 1 5-13 8c7 11 22 4 30 13l-16-1v8c10-1 22-4 31 2-4 2-7 5-9 8l18 2-2 9-6 3-6-4 5 10-12 7-9-11c1 4 0 8 2 12l8 6-9-1-4-14-18-1-3 8 8-1c2 5 3 10 9 12 11 5 24 6 37 8 5-5 10-11 13-18l-8-7c2-13 20-16 19-29l-12-4c1-9 12-11 17-18 7-8 8-20 9-31 5-11 16-18 24-27v511zm-864-313c-2 2-4 5-4 8 3-1 8-2 10-6l-6-2zm357 1l1 3 3-1c0-3-2-3-4-2zm-259-10l7 8c6-2 12-8 10-16-7 1-12 5-17 8zm-339 3c-1 1-1 3 1 3h4c2-3-3-6-5-3zm148-1v4c1 1 3 1 4-1 2-3-3-5-4-2zm318-6c2 2 2 6 5 6 2-2 2-6 3-9l-8 3zm166-1l-3 3c-1 1-2 2-1 4 3 1 8-6 4-7zm-29-2l8 7 2-8-10 1zm-242-1l6 7 6-7h-12zm-172-2c1 3 3 5 6 6l8 2c-2-6-9-6-14-8zm652-2l-2 3c0 2 1 3 2 3 3 0 3-6 0-6zm-1143-23l-1 7c-7-3-15-5-22-2 1 4 4 9 9 10 1 3 2 6 5 8 5 2 11 3 17 3-4-3-9-7-9-13 6 1 11 6 16 9l3-3-14-19h-4zm1007 13c0 3 2 5 4 7l8 5c-4-4-7-9-12-12zm-905 8l1 3 1-1c1-2 1-3-2-2zm571-20l1 7 8 1v14l6-8-2-10-13-4zm-623 18l-1 3 8-3 2-3-9 3zm860-2l1 3 1-1c1-2 1-3-2-2zm-1007-6l1 7c3 1 7 1 10-1l-11-6zm384 3v3h3c1-3 0-4-3-3zm53-4c-1 0-2 1-2 3v3c4 3 7-9 2-6zm-63-17c-4 7 2 16 10 16 7 4 15 11 23 5 0-4-5-6-8-9 1-5 5-2 7 0 4 2 8 2 12 2l2-4-8-5h-13l-8-5c0 4 2 9 4 12l-4-1c0-4-1-7-3-11-4 2-9 1-14 0zm782-6c-1 4 0 11 5 13l27 15-14-13c-2-2-2-6-5-9h-9c-2-1-4-4-4-6zm-143 23l11 5c1-3 1-7 3-10-6 0-11 1-14 5zm215 1v3h4c1-3 0-4-4-3zm-1192-5l-10-1-12 4 24 3c5-4 7-10 10-15-4 3-7 8-12 9zm833 1c-1 1 0 3 1 3h3c2-2-2-5-4-3zm-427-5l1 7c4 0 4-5 5-7l-2-1h-3-1v1zm643-7c1 6 7 10 11 14-1-7-3-14-8-19l-3 5zm-89 6l1 7 3 1v-8h-4zm212 1v4h5c3-3-2-7-5-4zm27-2c-2 1-1 3 0 4h4c2-3-2-7-4-4zm-471-19l-6 5 9-2-3 9c8-5 16-9 25-9l-5 8 5-2 1 12c7-2 14-1 20 3l3-5c2-1 5-2 4-5h-1l-2-1h-1c-11 1-18-11-29-12-7 0-13 1-19-1h-1zm63 9l-1 12 16 2 1-5-13-4c6-4 12-5 18-7-7 0-14 0-21 2zm-830 11l1 3 1-2c1-1 1-2-2-1zm1016-23c7 0 14-2 21 1v5c-7 3-14 3-20 7l-6-1c3 8 11 14 20 12l9-12c-2-6 3-11 0-17-8-2-18-2-24 5zm-1488 21c0 2 1 3 2 3l4-1c0-3-5-3-6-2zm1611-62l-3 13c5 5 10 10 17 13 9 2 14 12 21 17 9 5 16 12 23 19 4 1 4-3 4-6-5-6-8-13-14-18-9-8-3-21-9-30l-10-3c-2 4-4 8-8 9l-10-12-1 6h-6c0-3-2-6-4-9v1zm-1644 54l1 7 13 1-14-8zm1635 2c-1 2 0 3 2 4 1 2 3 2 4 2 1-3-4-7-6-6zm-133-8l4 5-4 6 7 2c0-4 2-9 5-12h7c-3-7-13-4-19-1zm-219 8c-3 2-3 3-1 4 1 1 4 1 5-1 2-3-3-4-4-3zm458-1c-2 2 0 3 2 3s4 0 4-3-5-2-6 0zm-813-3l-2 2 2 2c3-1 3-3 0-4zm-16-1l5 2 5 1c0-5-7-2-10-3zm53-9l3 11 7 1v-8c-3-3-6-4-10-4zm951 7c-1 2 1 4 3 4h4c-1-3-4-5-7-4zm-1870-27l-8 5-6-5 3 6-17 14c6 2 14 1 21 0-6 4-13 6-19 8l2 4c9-1 17-3 26-6l-1-5h1l2-1h1v-5l8-2c2-4 6-8 3-13l-13 1-3 8-5 3c3-3 6-7 6-12h-1zm601 18v8l5-6-5-2zm465 1c1 3 3 7 7 7v-8l-7 1zm259-20l-17 15c-7 2-15-1-20 5 5-1 11 0 15 3l7-5c3 5 8 8 14 9l-4-6 17-1c-1-4-6-3-9-4 5-2 12-1 16-6-5-2-9-6-10-11l11 2v-11c-6 4-13 8-20 10zm-916 21l1 5c4 1 7 0 9-3l-10-2zm-293 0c-2 1-2 2-1 3s3 2 4 1c5-2 0-7-3-4zm-211 0c-2 2-1 3 0 4l4-1c2-3-3-5-4-3zm1677-8l-2 5 12 7-10-12zm-1481 4c-2 2 2 3 3 5l7-1 3-9 10 4 1-4c-8-1-16 0-24 5zm783 4l10-2-9-7-1 9zm37-8v5l11 3-1-10-10 2zm-755-5c7 0 11 6 12 12 3-1 5-2 6-4l-6-2 4-7c-5-1-12-5-16 1zm705 10l9 2-4-10c-2 2-7 4-5 8zm781-8v6l7 3c4-2 2-6 2-9h-9zm-1828 5v3h3c1-3 0-4-3-3zm-269-5c-4 1-5 4-7 7 5 3 7-1 9-5l7 2 2-4h-11zm664-11v8l-9 2c3 2 4 6 6 9l11-1 2-3c-4 1-9 1-14-1l8-6-4-8zm-425 11l8 2 10 5c-3-8-11-11-18-7zm1944 3l7 3 7-1c-2-6-9-4-14-2zm-1686-20c2 8 7 15 12 21 3-1 6-3 9-2 7 0 14-2 21-4-5 0-10-2-14-6-4 2-9 4-14 3-6-2-10-7-14-12zm1443-16c-4 5-9 8-14 11 2 4 2 8 1 13l-5 1c-6-1-13-2-19-5l-1 16c3 1 7 2 9-2l-3-4 17 2 11-7 9-1 6-5-5-2c-1-6-6-12-2-18l-4 1zm-583 29v3c0 1 1 2 3 0 2-1 0-6-3-3zm-714-3c-2 1-2 3-2 4 1 2 2 3 4 2 3-1 2-7-2-6zm736-3c-5-1-9 1-12 3 1 8 13 9 15 1l7 3c0-6-6-12-10-7zm-997 5l-1 4 10-1c-2-2-6-2-9-3zm306-10c-1 4-2 8-7 8l-2-6-6 10c5 2 12 1 17 0 0-4 1-9-2-12zm-676-5l-3 6 6 4 2 7c1-2 2-6 1-9l-6-4 5-5-5 1zm102 8l-2 9h4v-4l7-5h-9zm19 0l9 7v-7h-9zm-156 3c-3 3-1 4 2 4 2 0 5-1 5-4h-7zm1366-2v4c0 2 2 2 3 1 3-2 0-7-3-5zm349-2l-8 1v1l-1 2 12 2v-6h-3zm654 2h2v1c-1 2-2 2-2-1zm-386 0l1 2 1-1c1-1 1-2-2-1zm-1329-7c0 4 2 5 5 7l9 2c-4-4-8-9-14-9zm1606 7c4-1 7-4 10-6v-10c-2 6-8 10-10 16zm-278-9l5 3v5c9 0 9-10 11-16-6 2-12 3-16 8zm194 3v4h4c1-4 0-5-4-4zm-1940-2c2 1 3 3 4 6l11-2 1-10c-5 1-11 3-16 6zm-207-2l14-5 2 11 11 1 6-5-22-8c-5-1-9 1-11 6zm40-1l-3 7 10 1 1-2-8-3 7-4-7 1zm153-1l4 3-6 6 10-2-1-6-7-1zm1704 0l3 8c4-1 9-2 11-6l-14-2zm-1263 1l-1 5 6 1 4-6h-9zm1557-6l1 4c4 3 9 9 14 5 0-4 2-8-1-10l-14 1zm-2207 3c-2 1-3 2-3 4s2 3 4 2c3-1 3-7-1-6zm267 1v4h3c3-2-1-6-3-4zm1904 0c-1 0-2 1-1 3 0 1 1 2 3 2 3-1 2-6-2-5zm-451 3c6 1 11 2 17 1l-3-4-14 3zm67-4l-2 2 2 2c3-1 3-2 0-4zm-1417-6l-4 3v4c3 2 7-6 4-7zm1791 6a71 71 0 002-8c-5 0-7 6-2 8zm-2236-7c1 3 5 4 7 5v-6l-7 1zm408 1v3h4c1-3 0-4-4-3zm1631-2c-1 2 0 3 1 3h3c2-3-3-5-4-3zm-1591-6v5c1 2 2 3 4 3 1-3 2-9-4-8zm-554 5l8 3-2-6-6 3zm802-4l8 5c3 1 6 0 8-4-5-2-11-1-16-1zm1604 0v4c2 1 4 2 5 0 3-3-2-7-5-4zm-61 1v3h3c0-3-1-4-3-3zm-1520 0v3l2-2c1-1 0-2-2-1zm-239-2l1 4h3c1-3 0-4-4-4zm1762-8l4 11c5-1 3-7 5-12l-9 1zm-406 10c3 0 8 3 9-2l-4-4-5 6zm-1919-6l-4 2 1 3c4 2 9-5 3-5zm398 1v3c1 1 3 1 4-1 2-3-3-5-4-2zm-217 0l8 3-2-6-6 3zm2199-1l1 3 3-1c0-3-2-3-4-2zm-2455-3v5c7-1 13-5 16-11-5 2-10 7-16 6zm2476 0l-12 1h-1v3l-1 1c6-1 12-2 15-5h-1zm-29-1c-1 2 0 3 1 4h4c2-3-3-6-5-4zm-2508-2c6 2 12 8 18 4-3-5-8-7-11-12-4-1-5 5-7 8zm2443 1v3h3c1-3 0-4-3-3zm-2103-3l-4 2 1 3c4 2 9-5 3-5zm235-7c3 6 9 9 16 10l-1-3-15-7zm1100 2c-5 2 0 10 5 8 6 0 9-4 13-8-6 2-12 1-18 0zm-992-11l2 6-3 4 3 8h6c0-5-2-9-5-13l8 1-2-8-9 2zm-48 12c-2 1-3 2-2 4 0 1 2 3 4 2 4-1 1-7-2-6zm1893-11c-3 4-8 7-13 8 9-1 15 6 23 9v-7c3-3 5-7 5-11l6-4c-7 2-14 6-21 5zM886 558v4h4c1-4-1-5-4-4zm2059-2c-2 0-3 2-4 3-1 2 0 3 2 3 4 0 7-6 2-6zm-1395 1v5c7-1 13-5 16-11-5 2-10 7-16 6zm-298-31c-7 0-13 2-19 6 8 1 16-2 23 2l-1 5-27 7c6 7 15 9 24 11-1-6 3-10 7-14l-3-3c3-4 5-8 6-13l-7-1 2-8-5 8zm791 20l-1 6c4 1 9 3 14 3-2-4-4-9-3-14l-10 5zm1673 8l3-3 1-5c-4 1-7 5-4 8zm-2435-11l-4 10 11-3-1-5-6-2zm652-1l1 10 8-2-9-8zm-718 5v3h7v-4l-7 1zm2553-13c1 5 2 10 5 15l8 1v-11c-4-4-8-7-13-5zm-1844 12v3h4c1-3 0-4-4-3zm1808-3l-2 2 2 3c3 0 3-5 0-5zm-2517-1c4 2 9 3 12-1l8-1-5-3c-6 0-13-2-15 5zm-7-1v2h2c1-1 1-2-2-2zm2347-7c2 2 1 3 0 4-2 2-4 2-5 2-7 0 3-5 5-6zm-2359 2v3l3 1c1-4 0-5-3-4zm2102-2l-2 3c0 1 0 2 2 3 4 1 5-8 0-6zm-1314-4c-5 2-13-1-15 6 3 4 8 3 12 4l2-5 9 1c-2-3-5-8-8-6zm-24 6v3h2c1-1 2-2-2-3zm-626-1l-1 3 3 1c2-2 1-4-2-4zm2498-47c-10-5-18 4-27 7l-1 3 22-2 15 4-2 9c-7 1-16 2-19 9l-10-5-1 9c-5 1-10-6-15-2 1 5 5 5 9 6l2 7c8 5 18 7 28 4v-7c6-4 10-10 15-15l-7-3c2-8 10-13 11-22l-12-3c-1 2-1 6-3 7-1-7 3-11 7-16-5 3-9 6-12 10zm-898 43l8 5-5-7-3 2zm-984 5a123 123 0 010-8c-6-1-6 9 0 8zm-637-4v3l2-1c1-2 1-3-2-2zm2408 1c4 0 9 0 13-2-5-3-8-7-11-11-3 4-2 9-2 13zm-2628-23h-18l4 7-4-2c0-3 0-6-2-8h-11l-1 4c1 4 5 8 10 8v5l4 1-3 3c7 2 15 4 23 4v-3h-9l16-5c-4-4-7-8-8-13l11 3-2-11c-4 1-7 4-10 7zm2677 13l1 6 15 3-3-12-13 3zm112-11v13l-1 1-3 2-1 1 2 2c7 1 13-2 19-4l-2-10c-5-1-11 0-14-5zm-1962 10l-2 8 3 1 3-7-4-2zm1780 6c4 3 9 4 14 2l-4-12c-5 2-7 6-10 10zm-2162-1l-1 3 3 1c2-2 1-4-2-4zm-21-3v3l2-1c1-2 1-3-2-2zm-265-34c-4 4-7 8-12 10 1 5 2 9 1 13-8 2-17 1-24-4v17l9-2-4-4 18 2c5-3 9-9 15-7 5 1 8-3 9-7l-4-1c0-5-6-12-1-17-2-1-5-3-7 0zm688 23l-4-3-10 10c8 1 16 5 24 5l15-6-1-6c-6 1-10 4-14 7-4 1-11 2-10-3l11-2c4 0 5-4 2-6-4-3-11-1-13 4zm1756 7l-1 1-1 2c2 7 10-4 2-3zm-2724-5c4 0 7 3 10 6 4 2 7 4 11 1-6-5-13-7-21-7zm-78 3c-1 0-2 2-1 3 0 1 1 2 3 2 3-1 1-7-2-5zm2864 0c2 0 3-1 4-3l1-4c-4 0-4 4-5 7zm-2423-10v9h4l3-7-7-2zm2454-1c-3-1-6-5-10-2-4 1-9 5-5 9 4 3 8 4 13 3 2-2 4-5 4-8l10 4c0-2 1-3 3-4l-10-7c-3 0-4 3-5 5zm-1877-19l-1 5 1 1h3l1 1-9 8 3 3-10 11c5-2 11-2 16-3l24-10c-6-1-11-2-16 0l-12-16zm-892 22l-11-1-11 4 25 4 9-15c-4 3-7 7-12 8zm2316 2l-2 2 2 2c3-1 3-2 0-4zm-1456-8c1 3 0 10 5 9l2-7-7-2zm1859-1l-1 7 6 2c1-3 2-7 0-10l-5 1zm-2200-2a219 219 0 011 8h3l3-7-7-2v1zm1399 1v4c1 2 2 2 4 1 2-2 0-7-4-5zm-1959 2v3h3c1-3 0-4-3-3zm238-4l1 6c6 1 11-1 14-5l-15-1zm-11 1v3h3c1-3 0-4-3-3zm-215-1v3l2-1c1-2 1-3-2-2zm-233-5l-2 6 10 1-3-7h-5zm1564-16c2 6 3 13-3 16 6 1 13-2 19-3l-4-8c-5 0-9-2-12-5zm-350 7c0 3 0 8 4 8 6 1 10-3 14-7l-18-1zm-1046-4c0 4 2 6 5 5l7-4-12-1zm2914-60l-3 1c-5 4-13 7-10 14-5 1-11 1-13 6-3 4 3 8 5 11-2 3-2 6-2 10-4 0-8 1-11 4l-9-6-4 6c-6-4-12-10-19-11-1 7-2 14 1 20l-3 7c5 5 16 4 18-4l-8-4 20 2c4 1 9 2 13 0l18-13c3-1 5 3 7 4 7-3 13-8 17-14-5-2-10 0-15 1l8-5-2-7-6 1c2-3 4-7 3-10l-5-5v-1l2-2h7c-3-2-6-5-9-5zm-2641 57v4l4 1c1-3-2-6-4-5zm-554 1c-1 2 1 3 3 4 1 0 4 0 4-2-1-3-5-4-7-2zm3194-5v2h4c2-3-3-5-4-3zm-3174-1l1 3 3-1c0-3-2-4-4-2zm-30-9l1 8h7l-1-9-7 1zm3089 0v3h3c1-3 0-4-3-3zm-1773-4h-1l-1 1-1 1 8 5-5-7zm1617-11l-4 10c7 1 14 6 22 3-7-3-8-11-5-17-3 4-8 5-13 4zm178 7v3h3c1-3 0-4-3-3zm-3249-5c-1 1 0 3 1 4h3c2-3-2-6-4-4zm3278-11c-1 6 2 13 9 12 8 0 13-6 18-10-9 1-18-1-27-2zm-3117 4l-20-3v5c8-2 16 0 23 5v-14l-3 7zm3094 4v2h1c2-1 2-2-1-2zm-50-1v3h2c1-1 2-3-2-3zm54-3c-1 1 0 2 1 3h4c2-3-3-6-5-3zm-3239 1v3l2-1c1-2 1-3-2-2zm1435-11v4c1 1 2 2 3 1 3-2 0-8-3-5zm-1414-1c-1 1-2 2-1 3 0 1 1 2 3 2 3-1 1-6-2-5zm65-35l-10 8v2l-1 3v1l11-4c1 5-3 8-6 11l2 8c-2 4-7 6-9 10 5-1 9-5 13-8l-2-4c3-4 8-8 5-14l6-9-9-4zm-216 29v4h4c2-3-2-6-4-4zm111-1v2h2c1-1 1-2-2-2zm-129-7v8c5 0 7-4 7-8h-7zm209-8l1 9c5-1 8-6 5-10l-6 1zm3170-1v3c1 2 2 2 4 1 3-2-1-7-4-4zM380 394l-1 13c5 1 9-1 13-3l-3 10 7-1 1-9-17-10zm24 14l-2 2 2 2c3-1 3-2 0-4zm3339-1v4c1 1 3 1 4-1 3-2-2-6-4-3zM297 394c-1 2-1 3 1 4 1 1 2 1 3-1 3-2-2-5-4-3zm134-8v8c5 0 8-5 5-9l-5 1zm-158-9v7l-7 3c6 0 12 2 17 5l9-5-11-1 12-4c-3-7-13-7-20-5zm44 9v4h3c1-4 0-5-3-4zm3471 1v2h1c2-1 3-2-1-2zm-3456-8v2h2c1-1 2-2-2-2zm101-1v3l2-1c1-2 1-3-2-2zm-130-8c3 2 2 7 2 10 6-1 4-8 4-12-3-2-4 1-6 2zm28-3l-4 2c-1 2-1 3 1 4 4 1 6-5 3-6zm3426 1l1 2 1-1c1-1 1-3-2-1zM200 350c3 7 7 13 12 18l2-7-14-11zm98 9l-2 3c4 1 10 6 12 0-1-4-6-2-10-3zm23 0v3h3c1-3 0-5-3-3zM26 348c-3 1-3 5-4 8 5 0 7-4 9-8l7 3 2-4c-5 0-10-1-14 1zm12-18c4 4 8 8 8 13l3-2-1-8-10-3zm-34 7l-1 5c3-1 7-2 9-5H4zm149-2c-1 2 0 3 2 3 2 1 4 0 4-2 0-3-5-3-6-1zm145-3c0 6 6 3 9 4v-5l-9 1zM51 319c1 4-1 9 2 12l11 2 6-6-19-8zm26 4v8h10l-8-6 7-3-9 1zm-58-3c-2 0-3 1-4 3-1 1-1 3 1 3 4 1 7-5 3-6zm143-3l-2 3c0 2 0 3 2 4 4 0 5-8 0-7zm4-9l1 4h5l2-5-8 1zm-121-8c-1 2 1 4 2 4 2 1 4 0 5-2-1-3-5-4-7-2zM0 254l2 2-2 2v-4z" style="fill: var(--c8);"/>
<path d="M810 628l7-3c15-7 33-9 45-20 4-4 5-8 0-12l-22-13c10 0 20 3 29 7l8 3c11 6 15 15 5 21-14 11-34 13-47 25l-25-8z" style="fill: var(--c4);"/>
</svg>
</div>
</div>
<!-- landscape layer 9 - foreground 2 -->
<div class="landscape__layer">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M3954 700l46 14v286H0V480l22-1c12 0 24-4 36-5 11-1 21-4 31-7 16-5 33-2 49-4 15 0 30-7 45-2 17 5 33 16 43 31 4 6 11 7 18 8 15 2 29 1 44 0s27 12 42 11c21 1 43-8 64-1 15 4 25 15 37 23 7 4 11 10 17 15 11 4 24 3 35 7 10 3 20 7 30 8 13 3 25 0 37 1 15 1 31-5 45 1 16 6 33 5 49 7 12 1 22 7 32 12 6 3 10 9 16 11h22c7 1 13 6 20 6 13 1 25 1 37 6 11 3 20 9 30 13 11 3 23 4 34 9 8 4 14 11 21 15 15 5 31 7 45 15 10 6 21 6 31 10 12 4 24 4 36 4 3-5 5-10 9-14 4-3 10-5 15-7 6-3 11-7 17-9 8-2 18-1 26-4 11-2 23-4 34-2 8 2 14 8 22 10 7 2 15 1 23 1 12-1 24 0 36-4 19-6 40-9 59-3 11 5 23 11 31 21l8 8 19-1c8-3 16-9 25-8 16 3 26 16 40 22 12-1 25-5 36-1 10 2 16 10 23 15 11 4 23 2 35 6l24 3c11 0 21 5 32 9 8-7 17-12 28-13 11-2 23 0 34 2 5-2 10-6 14-9 4-7 6-15 12-19 11-9 26-8 40-6 20 4 41 10 58 22 8 4 13 11 16 19h30c4 1 6-2 9-4 9-8 23-10 34-6 14 5 28 2 42 6 8 2 14-4 20-6 18-6 37-3 54 0 7 2 13-3 20-4 14-2 27 1 41 3 9 1 18 2 27 5 5 2 9 7 14 9l19 4c9 3 17 8 25 13 6 4 13-1 20-2 23-2 47 6 66 20 2 2 5 5 9 4l24-3c6 0 10-6 16-8 12-7 27-5 41-5 11 2 23 1 34 2 11 2 20 9 27 16 14-2 27-4 40-1 27 3 47 22 72 28l33 9c3 1 8 2 11-1 8-6 14-13 23-18 6-3 14-3 22-5 7-5 12-12 19-15 23-11 52-6 71 11 11 7 16 19 28 24s25 9 38 12c8 2 14-5 22-6l27-4c29 0 54 17 82 21 22 3 44-6 66-5 25 0 49 3 74 2 41-2 80 11 119 22 21 7 43 12 64 20 6 3 12 5 19 6l72 3c10 1 18-7 27-9 10-4 22-2 31-9l27-17c10-7 22-14 35-13 11 0 21 7 32 8 13 0 26-2 38-7 7-4 16-3 23-6l4-13-15-1c-1 5-3 8-7 10v-11c-5 2-9 5-11 11l-9-2c6-5 6-14 9-20 4-8 14-2 20-5 10-5 20-6 30-9-1-3-3-6-6-8l12-1-5-7v-5c5 0 10 1 15-2 4-5 5-12 10-17l-6-8-11 4c-4-2-8-6-11-2-3 6-3 12-4 17-4 2-9 3-14 2 5-2 11-4 13-10v-11c-4 4-7 9-12 12l-13-8-14 5c5-6 13-7 19-12l-3-7-4 6c-5-3-13-7-11-15 6-6 15-3 23-4l-1-5-9-4 1-6c13-1 26-4 38 2l1-12-22 4c9-15 30-3 39-17-5-5-10-10-17-12l2-9-7 1 3-6-6-2c12-5 22 5 34 3 4-5-4-5-7-6l2-19c-4 6-11 6-17 6l-3 11c-11 1-22 1-31-5l2-9 10-1c3-4 9-7 8-13-4 1-8 4-11 7-6-4-4-10-2-16l15 2 5-6c-3-3-6-6-6-11 5-1 11-1 17 2 8 4 17 0 26 0l-2-15 5-13c-6-6-12-11-17-18 7-2 14-5 18-12l-9 1c2-8 4-17 0-24 6 4 15 9 20 1l-7-10 8 3 8-8 12-1 2 9-6 9c4-1 8 0 12 1-5 5-14 11-8 18l-7 10 11 8c-7 1-13-4-20-2 3 9 12 13 19 18 3 2 1 7 2 11l22 2v5c-4 2-8 5-10 9l-8-8 1 15-5-7c-5-1-13-2-13 5 1 10 10 16 13 26l-8 4c5 8 11 15 19 20l-2 8-7-3c3 7 10 11 16 14v8l7 5c-1 5-2 10-1 14 5 4 11 6 17 7l3 8 7 2-8 5c5 5 10 10 13 16 0 5-1 10-6 11h-20c-11-3-18-14-24-23 0 5-1 10 3 14l17 23c4 6 12 5 18 8l8 11 2-14c5 3 11 8 18 7 8-4 15-9 22-15-11 0-19-8-27-14l1-1 1-2h1c6 3 12 6 19 7-4-6-7-13-13-17-4-4-8-8-8-14 9 1 15 9 23 13 2-3 5-5 5-8-1-4-4-6-6-9-4-5-2-12-3-18 8 2 16 3 24 1l-1-7-12-9h15l15-5 3-6 18 6c7 2 12 7 18 10h14s83 4 144 5c23 0 59 7 70 11 16 8 44 11 64 16l20 5z" style="fill: var(--c9);"/>
</svg>
</div>
</div>
<!-- landscape layer 10 - empty -->
<div class="landscape__layer">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M190 55l11 1c3 1 4 5 4 8-1 9 2 19-1 28l5-8c3 1 5 4 7 7l12-2c-3 8-11 16-6 25l9-9c2 5 5 12 1 17-4 6-11 8-17 11h8c2 4 3 7 6 10l12 3-12 25-10 1 15 4-1 8c3-8 12-10 19-7l-4 17-8 4-2-10 7 3-4-11c-4 7-8 14-8 23-10 2-19 5-28 11l-2-4-14-1c6 8 16 7 25 9l12-8 7 4 9-15v12c4-5 10-8 16-9l-3 9c-2 5-7 7-11 10h14l-3 9c-4 1-9 1-13 4l-21 20c-4 4-10 2-15 2-6 0-12 3-18 5l2 2 12-1c4 0 7 5 10 7l3-6 7-3 22 18 1-5c6-1 13-3 18-7l4 5 7-5 3 7h8c-2 5-5 9-8 12-6 5-3 14-4 21l-7 4-10-4-3 5 11 2-8 12c6 0 12 3 17 1 4-1 3-4 4-7 0-5 3-9 5-13 14 4 28 3 41 3-4 6-7 12-13 16-4 1-9 0-14-1l5 9-13 5 4-12c-5 5-12 6-19 5l6 9-2 2-15-8c-12-1-23 2-34 3-8 1-16 4-23 6-5 2-11 3-14 8-2 8 0 16 0 24l8-1-6-1c-1-5 6-4 10-4 7 2 14-1 21-3l-4 7c3 2 6 5 10 4 5-1 11-3 17-1l4-2h17l4 8 10-2 2 6-16-1 3 9c-8 4-13 12-21 17v3l-6 4c7 5 15 7 23 8-3 7-12 6-19 6l4 8-4 4c-3-4-7-8-13-9l2 11c-12-5-18-18-29-24l-11 4 3 4c6 1 10 5 14 8h-20c0 18-1 36 1 54l2 40 46 11c16 7 35 7 52 10 13 4 26 9 34 20 5 6 7 15 15 17 16 6 33 12 47 23 11 7 16 20 26 29 5 4 10 9 17 11 8 2 17 5 23 12 8 9 8 23 15 33 8 2 17 3 25 7 8 5 12 13 20 18l16 14c9 13 20 25 35 31 16 7 34 5 51 8 6 1 10-3 15-6 16-11 33-22 51-28l47-16c6-2 12-5 18-5h17c13-4 24-12 36-16 6-1 11-4 16-7 13 0 25-2 37-6 15-3 28 4 41 9 10 1 21 0 31 3 16 5 32-4 48-4 8 0 16 2 24 5 8 2 17-2 26-2 20-1 38 6 56 13 37 1 71 15 106 22 10 2 20-2 31-3 24-2 47 4 70 10 20 6 40 13 61 11 14-1 28 0 42 2 20 4 38 18 54 30 11 9 23 16 35 23 7 5 17 6 25 9 8 4 16 9 23 15 12 8 25 14 37 21 8 4 16 9 24 10 16 1 32-3 48-5 17-2 33 7 48 13 8 3 16 2 24 1 19-1 38 0 57 2 13 1 24 5 36 8 13 4 26 1 39 3 11 1 21 5 32 5 10-2 19-5 29-6 9-1 17-7 27-8l16 2h32c9 0 15-7 24-7 13-2 24 5 36 8 16 4 32 3 48 6 27 3 51 16 76 22 35 8 67 21 100 34l29 11c9 3 19 2 29 3 12 2 24-4 36-3 21 1 39 13 59 18 22 6 46 7 69 4 19-2 39-3 59-2 18 2 36-3 55-2 18 1 36-2 54-1 17 0 35-3 52-2 26 1 52-8 78-7 25 0 50 3 75 4 46 3 92 8 139 8 27-1 49-18 74-25 13-4 27-4 41-3 23 2 47 2 71 0 9-1 17-4 25-7 18-8 37-12 54-18 13-5 25-8 38-11 9-2 15-11 22-16 20-15 41-30 65-36 11-3 20-12 30-15 8-2 16-4 23-9 13-9 27-17 43-21 8-3 16 2 24 3 5 0 10-1 14-3l-4-9 13 3c1 3-1 9 3 10 5 3 11 3 17 4v-5c-5 0-9-2-14-3 10-12 13-28 24-39 9-4 23 1 29-9 4-10 3-24 12-32 5-6 15-8 16-16l5-18c-1-6-6-9-9-14 1-6 5-12 5-18l-1-15c8 2 14 5 21 9 9 4 19 0 27-6-6-7-14-11-21-16l7-11c5 4 10 9 17 12 6 2 12 2 18 0 2-3 4-7 1-9-3-4-8-3-13-4l-2-9c-4 2-7 7-11 8-5 1-7-6-11-8l-6 2-1-8-11-10c-2-4-2-9-2-13 17 1 29 19 48 18-1-5-3-10-7-14-5-6-14-7-20-12-3-6-1-13-3-19-4-5-10-1-15 0 0-8-5-15-9-21h11l14-7c6 0 9 5 13 8 9 9 24 11 36 9l-4-7c-9-1-18-2-26-5l6-18-11-6c-4-5-6-12-3-18 10 4 18 11 28 15 8 3 17 2 24-3 2-5-4-7-6-10l4-9-19-3 5-6-2-12c-5 1-10 4-14 8l-6-3c-8-9-13-21-21-30 7-10 0-24 8-34 5 3 9 7 12 12h14c6 4 8 11 13 16l10 1c2-5 0-14 8-15 12-1 25-7 30-19-7-2-14-5-20-9l-11 2c-11-10-25-17-34-29 4-1 8-2 12 0 9 4 17 9 27 10l-11-13v-10c-11-6-21-16-27-27l2-8c6 2 13 5 17 10 6 8 17 8 24 15 5-5 10-12 6-19-6-8-11-17-19-23l-1-4 12-5-8-8-1-8c7 2 15 6 23 7h30c1-13-14-21-25-18l-7-9 6-6c10 2 20 4 30 3 0-11-2-22-1-32 5 6 4 15 7 23 5 5 12 6 18 8l2-23 8 7c2 9 3 18 1 27 4 6 6 12 5 18l-13 12v7l21-14 20-8c-3 8-6 16-12 22-3 4-2 10-3 15h-15c-2 7-5 13-9 20 5 1 11 0 17-2 1 4-1 11 5 12l22-5c0 3 2 6 1 10-3 9-13 14-16 23-3 8-11 12-14 20 5 0 9 1 14-1 8-3 15-11 25-8-5 3-10 5-12 10 0 5 5 6 9 7l4-9c6-2 11-6 15-11 4-1 10-2 13-5 7-4 15-7 24-7-10 8-15 19-18 31-11 0-18 11-27 16l5 9c-9 1-21 1-24 11 0 7 5 11 10 14-3 6-6 12-5 18l-14 1 4 10c-7-3-13-10-19-14-6-2-7 6-9 9l-20-13c-3-2-6-5-9-4l-3 20c-1 4 3 7 6 11l-7 8c1 4 4 5 8 6 7 4 14-3 20-6l-13-11c11 1 23 2 35 5 6 2 14 1 20-1 3-3 4-7 8-9l17-11c6-3 13-2 20-2l-8-9 2-5c13 7 28 6 43 5-1-8-8-14-16-15-5 0-9-4-12-7 3-1 5-5 9-4l22 2c-1-9-3-18 0-27 2 6 2 13 5 19 3 4 9 5 14 7l2-20 7 7 2 22c0 5 3 10 2 15-4 5-13 8-10 16 10-9 22-14 35-19-5 11-13 20-15 32l-10-1-9 16h13c2 3 1 8 5 8l18-2c4 2 2 8-1 11-5 6-11 12-13 20-4 3-12 8-6 12 10 0 18-8 28-10v3c-4 3-8 5-11 9l11 4v20l-8 8c-1 6 4 10 8 13v1c-3 4-5 9-5 13l-11 1 3 9c-6-5-12-10-18-13l-4 9c-8-6-16-12-25-16 0 9-4 20 3 27l-7 7 12 6 13-7-12-8c10 0 20 2 30 4 5 1 10 1 14-1 4 0 5-5 7-8v20l-10 6 1 5 9 3v29l-14-9 2 12-8 1c0 4-2 9 0 12 6 5 13 6 20 10v9l-10-3c-2 4-7 8-4 12l14 10v5l-14 3 5 10h-12v5l13 1-6 15c-6-3-10-7-14-11l-17 3c6 9 18 12 27 18l8-6 10 5v210H0V502l32 11c16-3 34-9 50-3 18 9 39 8 58 7 15 0 29 7 43 11l-2-58-7-1 8-4c-17-8-36-7-54-6l3 7-17 3c-5 1-11-3-16-4-6 3-10 8-15 11-6 2-13-1-20-1v-6l-12 5c-7-4-16-6-25-5 0-7 2-13 4-19l-8-8 2-6c7 2 14 5 20 10a482 482 0 0110-6c-5-3-9-7-13-12l13 5 13-4c-7-2-16 0-21-5-8-6-5-17-5-25-4 0-9 0-13-2l-8-11 4-4 8 1-14-6c1-4 2-8 5-12l14-1 13-7 6 5-5-15-11-2c3-4 4-11 10-12 5-1 10 2 14 3h15l-25 13 11 13 10-5-1-2 7-5-1-11 18 8 8-8-3-5-4 4c-23-4-44-16-67-14l9-9-16-2c-7 0-10-8-16-11l-9-1v-8l4-7 10 7 11-15c8 11 23 10 35 8v-12l-10-3-8 10c-1-8-5-17-2-25l-6-8 15-7 4 5c1-5 4-9 7-12 5 6 12 8 19 10-5-10-9-22-7-33l14-11 2 8 17 3c4-4 8-8 13-9-2-3-6-5-7-9-3-6 0-12 1-17-3 2-6 6-10 7-6 1-7-6-9-10h15l-13-18h7l5-9c6 2 12 5 17 9l8-5 8 6 10-13h-19l3-6-14-2-2-17c1-4 4-6 6-9l-1 17 11-27 17 7c0-5-2-10-4-15l8 2c2-7 5-14 11-19 1-5 4-11 8-15 4 2 4 6 5 9 5-4 9-8 11-13zm3 10c-3 1 0 6 2 4 3-2 0-6-2-4zm-19 8c-2 2 2 6 4 4s-1-6-4-4zm32 30h7l1-6-8 6zm-15 1v13l5-13h-5zm5 4c-3 6 7 1 0 0zm-42 14c-3 1-2 7 1 6 4-1 3-7-1-6zm-3 17l1 4 6-13c-5 1-9 4-7 9zm13-2c-1 3 0 4 4 3 1-3-1-4-4-3zm-15 9l4 13c3-5 2-12-4-13zm-26 16c-1 4-2 8-5 12l10-6v-6h-5zm94 29c5 2 10 2 14 0l-6-11-8 11zm-74 0c-3 0-7-1-8 3h12l2-9-6 6zm-27 1c-1 3 3 6 5 4 2-3-3-6-5-4zm45 25c6 1 12 0 18-1l-3-6c-5 1-10 4-15 7zm-80-3v8c2-2 5-4 6-8-1-2-4 0-6 0zm75-1c-3 2 1 7 4 4 3-1-1-7-4-4zm-41 15l-1 6 5-4 7 8 5-1 1-9h-17zm118-1l-1 4h6v-5l-5 1zm-95 5c-1 3 0 4 3 3 1-3 0-4-3-3zm24 3l8 3-2-5-6 2zm64 5c1 7 6-3 0 0zm-165 4l5 8 3-10-8 2zm77 8c-3 1-1 6 2 5s2-7-2-5zm-51 22l11-4 1-4c-4 2-9 4-12 8zm17-5l-10 15c2 0 4 2 5 3l4-10c10-1 20-5 31-6l-10 13 10-4c-2 7-2 13 0 20 10 2 21 0 30 5l3-5-2-5 14-2c-6-8-17-10-25-5l4-5c-10-4-19-10-28-15-2-1-5 1-7 2l-3-4c-5 3-10 4-16 3zm86 12l5 8c4-4 11-5 11-11l-16 3zm34 0c-3 6 7 0 0 0zm-117 11c5 0 10-2 13-7-5 1-13 0-13 7zm83 0l-1 8c8-2 18-1 25 4 0-3 3-9-2-10-7-2-15-5-22-2zm-88 4c2 5 3 9 6 13h12l-4 7 5 6-7 8c5-3 10-4 13-9 0-6-2-12-4-18-7 1-14-3-21-7zm136 16c-1 3 0 5 4 3 1-3 0-4-4-3zm3500 8c-1 5 4 9 6 13l4-12c-4-1-7-3-10-1zM194 340c4 3 6-2 8-5l6 3-6-5c-4 1-11 2-8 7zm-139 0c0 3 5 4 6 2 1-3-4-4-6-2zm135 2c-1 3 0 4 3 3 1-3 0-4-3-3zm-44 9l15-1-4-5c-4 1-7 4-11 6zm3656-3c-1 4 0 5 4 4 1-4 0-5-4-4zM150 366c-3 2-7 5-5 9 4 3 9 2 13 1 7-1 13 2 20 2 1-4 2-8 0-11-3-4-8-5-12-7-4 4-10 4-16 6zm-8-2c-1 3 1 4 4 3 1-3 0-4-4-3zm-116 7c-2 3 3 6 5 4 2-3-2-6-5-4zm106 2l1 5c4-1 7-4 11-6l-12 1zm27 7c0 7 6-3 0 0zm3573 1c-2 3 3 6 5 3s-3-6-5-3zm-3507 1c-1 3 0 4 3 3 1-3 0-4-3-3zm3515 6c-2 3 3 5 5 3s-3-5-5-3zM45 392c3 3 2 7 1 11l12 3v-11l-8 2-1-4-4-1zm91 6l7-1v-5l-7 6zm12-5l-2 5c5-1 10-2 15-5h-13zm25-1c-4 1-3 8 1 6 3-1 3-7-1-6zm41 0l3 7 6 1 1-6-10-2zm23 2c0 7 6-3 0 0zm-75 6c-3 6 7 1 0 0zm-50 3c-3 2 2 6 4 3 3-2-1-7-4-3zm17 0c-1 4 8 2 10 0-2-3-7-2-10 0zm77 13c4 5 9 8 15 7-1-7-10-6-15-7zm16 1c-2 2 1 6 4 4 2-2-1-5-4-4zm15 7c-3 4 3 6 5 3s-3-6-5-3zm-132 12c6 0 12 1 17 3l-1-11-16 8zm-36-6c-3 3 2 8 4 5 3-3-1-8-4-5zm60 3c1 4 2 8 1 11l-12 11 28-1 35 4 1-18c-6-1-12-3-15-7h-12l-9 7-1-5c-5 1-10 0-16-2zm20 0c1 1 1 1 0 0zm3635 13c3 9 14 7 22 6 6-2 10-8 9-14-8 0-16 0-24-3-6-2-11 6-7 11zm-32-6l1 6c2-1 6 0 7-4l-8-2zm-86 7c-3 6 7 0 0 0zm36 25c-4 1-2 7 1 6 4-1 3-7-1-6zm15 13l-4 13c2 4 6 6 10 5 7-2 15-3 21-7 0-3-1-5-3-7-5-8-16-2-24-4zm161 20l10 1 5 7c3-4 10-8 8-14-1-6-8-9-11-14-5 5-15 11-12 20zm25-16l6 12 3-11-9-1zm-155 13c-4 3-7 8-12 10-9 1-17 0-26 2v5l23 4c6-2 9-9 15-10 6-2 12-3 19-3l-2-11c-6 1-13-2-17 3zm96 12c-4 3-2 8 3 9 6 0 12-3 18-2l15 6 2-6c-7-3-12-12-20-13-6 1-13 2-18 6zm114-1c-3 6 7 0 0 0zm-130 11c3 2 7 1 11 1l1-5c-4-2-13-3-12 4zm-105 17c1 4 5 4 9 5 2-5 3-11-2-16-3 3-8 6-7 11zm83 0c6 3 11 5 16 9l4-7-14-12c-4 1-6 6-5 10zm80-6c0 3 1 4 3 3 1-3 0-4-3-3zm-97 2c-4 1-7 3-10 6-2 4 0 9 4 10 6 2 12 3 18 2 5-2 6-8 2-12-3-4-8-11-14-6zm111 3c1 7 6-3 0 0zm7 4c-5 1-2 7 1 6 5-1 2-7-1-6zm-50 7v9l-20-10c0 4 1 9 3 13l-9 2c-1 5-4 10-2 16l8 2c-1-6-1-13 3-18 4 3 8 6 10 10 4 0 8-2 12 0 4 4 6 9 10 12h9l2-8c4-4 9-3 14-5 6-2 12-7 14-14-5-1-11-3-16-7l-9 2-12-10c-6 1-11 4-17 6zm-99-3c-2 1-1 6 2 4 3-1 1-6-2-4zm59 11c-7 4 3 14 9 9 3-6-4-12-9-9zm-152 11c0 3 1 6 5 7s10 3 13-1c-2-6-3-13-8-17l-10 11zm128-10c-4 1-2 7 1 6 5-1 3-7-1-6zm-137 2v6l5-2 1-4h-6zm41 1l-1 13c-1 3 1 6 4 5 6 1 14 0 14-8l-13-2 1-9-5 1zm78 0c1 4-1 10 4 12l17 4c3-1 2-4 1-6-5-7-13-10-22-10zm-3 21c0 7 3 13 6 19 2 5 8 4 13 4-1-7 3-16-4-20-4-3-11-8-15-3zm173 1l-5 5 6 9c9 1 23 0 23-11l-24-3zm-28 3l-1 6 7-1-6-5zm-7 7c-3 6 7 0 0 0zm-224 16h8l-1-8c-3 2-5 4-7 8zm152-6c-3 2 2 7 5 5 2-3-2-8-5-5zm19 15l-7-1c3 9 13 6 20 6l-3-11c-4 0-8 2-10 6zm17-4c-3 6 7 1 0 0zm13 11l-4 11c9 7 19 0 27-3-2-3-3-9-9-10l-14 2zm-182 6l8 1-1-6c-4-1-5 3-7 5zm33-3l4 18 5-3 1-16-10 1zm112 2l9 4-7 7c4 3 9 6 14 7 5 2 11-1 16-2v-7l-6-1 5-10c-10 4-21 2-31 2zm-37 0c-2 3 2 7 5 4 2-3-3-7-5-4zm90 17c-8 1-17-2-23 3 4 5 11 3 17 5 6 1 9-5 14-7l17-4-2-9h-7c-7 1-10 9-16 12zm-173-2c-3 3 2 7 5 4s-2-7-5-4zm-7 7v9c5 1 6-4 7-8l-7-1zm258 1c-3 4 6 6 6 1 0-2-4-4-6-1zm-179 5l-2 5 15-1-13-4zm90 13c2 3 5 2 8 3 1-4 2-9-2-12-5 0-6 6-6 9zm72-10l-3 9 12 7 5-5-14-11zm-15 4l-12 7c0 10 13 11 21 10 6-6-3-17-9-17zm-206 2c-3 1-1 4-1 6l7-5-6-1zm105 4l1 4 21 2c-5-6-15-3-22-6zm-117 7c0 7 5-3 0 0zm238 6l-1 8h10c0-5-4-8-9-8zm-19 2l-2 3c2 6 9-3 2-3zm-15 3c1 3-1 9 3 9l17 4c-2-9-12-14-20-13zm-293 14l-2 7c2 3 6 6 10 7 6-1 5-6 6-10-5-2-10-4-14-4zm289 3l6 15c2 4 7 5 11 3 1-5 2-13-4-16-3-4-8-5-13-2zm-151 1v4h19c-3-8-13-3-19-4zm-162 23c6 3 12 1 17-2-2 3-4 6-4 10 6-2 11-6 11-13l-14-10c-5 4-7 10-10 15zm26 14c-4 2-2 6-2 10l8-2c2-4 1-8 1-12l-7 4zm260 1l4 14c5-4 6-11 3-17l-7 3zm63 1c0 7 5-3 0 0zm9 4c1 7 6-3 0 0zm-379 4l2 9c6 1 12 0 17-3-5-5-12-5-19-6zm73 3c-2 4 1 6 5 7v-5l-5-2zm43-1c0 7 5-3 0 0zm186 2c0 7 6-3 0 0zm-6 6c-3 3 2 7 4 4s-2-7-4-4zm-296 4c-3 8-1 17 0 25 3 2 7 0 11 0 1-3 2-6 4-7l21 1 5-9c-6-3-14-3-21-2-8 1-14-5-20-8zm311 8c-1 3 0 4 3 3 1-3 0-4-3-3zm-348 7l6 9c4-2 11-2 9-7-2-7-10-3-15-2zm8 16l-9 1c4 2 8 4 12 2l19-8-4-5c-8-1-12 6-18 10zm-4 16h7c0-3 0-6-2-8-5-1-4 5-5 8zm374-5c4 5 12 2 17 2-4-5-11-4-17-2zm-407 21l9-1c1-3 0-6-2-8l-7 9zm-26-27c2-2 4-1 4 2-2 2-4 1-4-2z" style="fill: var(--c10);"/>
</svg>
</div>
</div>
</div>
<!-- for demo -->
<main class="wrap">
<h1>Demo of Firewatch-style SVG parallax landscape</h1>
<p>You can find out more info about this at <a href="https://alistairshepherd.uk/writing/parallax-svg-landscape-1/">alistairshepherd.uk/writing/parallax-landscape-1/</a>.
</main>
// wrapping landscape
.landscape {
background: var(--c1);
height: 75vh;
overflow: hidden;
position: relative;
// make each layer fill parent
&__layer {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
// svg wrapper
&__image {
// position at bottom of element in center
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
// set sizes that work for my image
max-height: 100%;
max-width: 300%;
min-width: 100%;
width: 2500px;
// use flexbox to center SVG elements
display: flex;
flex-direction: column;
// basic styling for SVG element
svg {
display: block;
height: auto;
max-width: 100%;
}
}
}
/**
* Styles for demo
*/
// colours - keep an eye on my blog (https://alistairshepherd.uk/writing/) for animating these!
html {
--c0: #feebe2;
--c1: #ffe2a6;
--c2: #ffb06d;
--c3: #ff9d60;
--c4: #ff8f4c;
--c5: #fc813a;
--c6: #f04f30;
--c7: #d2353a;
--c8: #8b1036;
--c9: #620a38;
--c10: #2f1121;
}
// typography styles and ensure body is long enough to scroll
body {
background: var(--c10);
color: #fff;
min-height: 200vh;
}
// content section
.wrap {
margin: 5rem auto;
max-width: 70rem;
padding-left: 1rem;
padding-right: 1rem;
position: relative;
}
a {
color: inherit;
text-decoration-color: var(--c6);
}
Also see: Tab Triggers