(function(l, r) { if (l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (window.location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.getElementsByTagName('head')[0].appendChild(r) })(window.document);
var app = (function () {
    'use strict';

    function noop() { }
    const identity = x => x;
    function assign(tar, src) {
        // @ts-ignore
        for (const k in src)
            tar[k] = src[k];
        return tar;
    }
    function add_location(element, file, line, column, char) {
        element.__svelte_meta = {
            loc: { file, line, column, char }
        };
    }
    function run(fn) {
        return fn();
    }
    function blank_object() {
        return Object.create(null);
    }
    function run_all(fns) {
        fns.forEach(run);
    }
    function is_function(thing) {
        return typeof thing === 'function';
    }
    function safe_not_equal(a, b) {
        return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
    }
    function is_empty(obj) {
        return Object.keys(obj).length === 0;
    }
    function subscribe(store, ...callbacks) {
        if (store == null) {
            return noop;
        }
        const unsub = store.subscribe(...callbacks);
        return unsub.unsubscribe ? () => unsub.unsubscribe() : unsub;
    }
    function action_destroyer(action_result) {
        return action_result && is_function(action_result.destroy) ? action_result.destroy : noop;
    }

    function append(target, node) {
        target.appendChild(node);
    }
    function insert(target, node, anchor) {
        target.insertBefore(node, anchor || null);
    }
    function detach(node) {
        node.parentNode.removeChild(node);
    }
    function destroy_each(iterations, detaching) {
        for (let i = 0; i < iterations.length; i += 1) {
            if (iterations[i])
                iterations[i].d(detaching);
        }
    }
    function element(name) {
        return document.createElement(name);
    }
    function svg_element(name) {
        return document.createElementNS('http://www.w3.org/2000/svg', name);
    }
    function text(data) {
        return document.createTextNode(data);
    }
    function space() {
        return text(' ');
    }
    function empty() {
        return text('');
    }
    function listen(node, event, handler, options) {
        node.addEventListener(event, handler, options);
        return () => node.removeEventListener(event, handler, options);
    }
    function attr(node, attribute, value) {
        if (value == null)
            node.removeAttribute(attribute);
        else if (node.getAttribute(attribute) !== value)
            node.setAttribute(attribute, value);
    }
    function set_custom_element_data(node, prop, value) {
        if (prop in node) {
            node[prop] = value;
        }
        else {
            attr(node, prop, value);
        }
    }
    function xlink_attr(node, attribute, value) {
        node.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value);
    }
    function children(element) {
        return Array.from(element.childNodes);
    }
    function toggle_class(element, name, toggle) {
        element.classList[toggle ? 'add' : 'remove'](name);
    }
    function custom_event(type, detail) {
        const e = document.createEvent('CustomEvent');
        e.initCustomEvent(type, false, false, detail);
        return e;
    }
    class HtmlTag {
        constructor(anchor = null) {
            this.a = anchor;
            this.e = this.n = null;
        }
        m(html, target, anchor = null) {
            if (!this.e) {
                this.e = element(target.nodeName);
                this.t = target;
                this.h(html);
            }
            this.i(anchor);
        }
        h(html) {
            this.e.innerHTML = html;
            this.n = Array.from(this.e.childNodes);
        }
        i(anchor) {
            for (let i = 0; i < this.n.length; i += 1) {
                insert(this.t, this.n[i], anchor);
            }
        }
        p(html) {
            this.d();
            this.h(html);
            this.i(this.a);
        }
        d() {
            this.n.forEach(detach);
        }
    }

    let current_component;
    function set_current_component(component) {
        current_component = component;
    }
    function get_current_component() {
        if (!current_component)
            throw new Error('Function called outside component initialization');
        return current_component;
    }
    function onMount(fn) {
        get_current_component().$$.on_mount.push(fn);
    }
    function afterUpdate(fn) {
        get_current_component().$$.after_update.push(fn);
    }
    function createEventDispatcher() {
        const component = get_current_component();
        return (type, detail) => {
            const callbacks = component.$$.callbacks[type];
            if (callbacks) {
                // TODO are there situations where events could be dispatched
                // in a server (non-DOM) environment?
                const event = custom_event(type, detail);
                callbacks.slice().forEach(fn => {
                    fn.call(component, event);
                });
            }
        };
    }
    // TODO figure out if we still want to support
    // shorthand events, or if we want to implement
    // a real bubbling mechanism
    function bubble(component, event) {
        const callbacks = component.$$.callbacks[event.type];
        if (callbacks) {
            callbacks.slice().forEach(fn => fn(event));
        }
    }

    const dirty_components = [];
    const binding_callbacks = [];
    const render_callbacks = [];
    const flush_callbacks = [];
    const resolved_promise = Promise.resolve();
    let update_scheduled = false;
    function schedule_update() {
        if (!update_scheduled) {
            update_scheduled = true;
            resolved_promise.then(flush);
        }
    }
    function tick() {
        schedule_update();
        return resolved_promise;
    }
    function add_render_callback(fn) {
        render_callbacks.push(fn);
    }
    let flushing = false;
    const seen_callbacks = new Set();
    function flush() {
        if (flushing)
            return;
        flushing = true;
        do {
            // first, call beforeUpdate functions
            // and update components
            for (let i = 0; i < dirty_components.length; i += 1) {
                const component = dirty_components[i];
                set_current_component(component);
                update(component.$$);
            }
            set_current_component(null);
            dirty_components.length = 0;
            while (binding_callbacks.length)
                binding_callbacks.pop()();
            // then, once components are updated, call
            // afterUpdate functions. This may cause
            // subsequent updates...
            for (let i = 0; i < render_callbacks.length; i += 1) {
                const callback = render_callbacks[i];
                if (!seen_callbacks.has(callback)) {
                    // ...so guard against infinite loops
                    seen_callbacks.add(callback);
                    callback();
                }
            }
            render_callbacks.length = 0;
        } while (dirty_components.length);
        while (flush_callbacks.length) {
            flush_callbacks.pop()();
        }
        update_scheduled = false;
        flushing = false;
        seen_callbacks.clear();
    }
    function update($$) {
        if ($$.fragment !== null) {
            $$.update();
            run_all($$.before_update);
            const dirty = $$.dirty;
            $$.dirty = [-1];
            $$.fragment && $$.fragment.p($$.ctx, dirty);
            $$.after_update.forEach(add_render_callback);
        }
    }
    const outroing = new Set();
    let outros;
    function group_outros() {
        outros = {
            r: 0,
            c: [],
            p: outros // parent group
        };
    }
    function check_outros() {
        if (!outros.r) {
            run_all(outros.c);
        }
        outros = outros.p;
    }
    function transition_in(block, local) {
        if (block && block.i) {
            outroing.delete(block);
            block.i(local);
        }
    }
    function transition_out(block, local, detach, callback) {
        if (block && block.o) {
            if (outroing.has(block))
                return;
            outroing.add(block);
            outros.c.push(() => {
                outroing.delete(block);
                if (callback) {
                    if (detach)
                        block.d(1);
                    callback();
                }
            });
            block.o(local);
        }
    }

    const globals = (typeof window !== 'undefined'
        ? window
        : typeof globalThis !== 'undefined'
            ? globalThis
            : global);

    function get_spread_update(levels, updates) {
        const update = {};
        const to_null_out = {};
        const accounted_for = { $$scope: 1 };
        let i = levels.length;
        while (i--) {
            const o = levels[i];
            const n = updates[i];
            if (n) {
                for (const key in o) {
                    if (!(key in n))
                        to_null_out[key] = 1;
                }
                for (const key in n) {
                    if (!accounted_for[key]) {
                        update[key] = n[key];
                        accounted_for[key] = 1;
                    }
                }
                levels[i] = n;
            }
            else {
                for (const key in o) {
                    accounted_for[key] = 1;
                }
            }
        }
        for (const key in to_null_out) {
            if (!(key in update))
                update[key] = undefined;
        }
        return update;
    }
    function get_spread_object(spread_props) {
        return typeof spread_props === 'object' && spread_props !== null ? spread_props : {};
    }
    function create_component(block) {
        block && block.c();
    }
    function mount_component(component, target, anchor) {
        const { fragment, on_mount, on_destroy, after_update } = component.$$;
        fragment && fragment.m(target, anchor);
        // onMount happens before the initial afterUpdate
        add_render_callback(() => {
            const new_on_destroy = on_mount.map(run).filter(is_function);
            if (on_destroy) {
                on_destroy.push(...new_on_destroy);
            }
            else {
                // Edge case - component was destroyed immediately,
                // most likely as a result of a binding initialising
                run_all(new_on_destroy);
            }
            component.$$.on_mount = [];
        });
        after_update.forEach(add_render_callback);
    }
    function destroy_component(component, detaching) {
        const $$ = component.$$;
        if ($$.fragment !== null) {
            run_all($$.on_destroy);
            $$.fragment && $$.fragment.d(detaching);
            // TODO null out other refs, including component.$$ (but need to
            // preserve final state?)
            $$.on_destroy = $$.fragment = null;
            $$.ctx = [];
        }
    }
    function make_dirty(component, i) {
        if (component.$$.dirty[0] === -1) {
            dirty_components.push(component);
            schedule_update();
            component.$$.dirty.fill(0);
        }
        component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));
    }
    function init(component, options, instance, create_fragment, not_equal, props, dirty = [-1]) {
        const parent_component = current_component;
        set_current_component(component);
        const prop_values = options.props || {};
        const $$ = component.$$ = {
            fragment: null,
            ctx: null,
            // state
            props,
            update: noop,
            not_equal,
            bound: blank_object(),
            // lifecycle
            on_mount: [],
            on_destroy: [],
            before_update: [],
            after_update: [],
            context: new Map(parent_component ? parent_component.$$.context : []),
            // everything else
            callbacks: blank_object(),
            dirty,
            skip_bound: false
        };
        let ready = false;
        $$.ctx = instance
            ? instance(component, prop_values, (i, ret, ...rest) => {
                const value = rest.length ? rest[0] : ret;
                if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
                    if (!$$.skip_bound && $$.bound[i])
                        $$.bound[i](value);
                    if (ready)
                        make_dirty(component, i);
                }
                return ret;
            })
            : [];
        $$.update();
        ready = true;
        run_all($$.before_update);
        // `false` as a special case of no DOM component
        $$.fragment = create_fragment ? create_fragment($$.ctx) : false;
        if (options.target) {
            if (options.hydrate) {
                const nodes = children(options.target);
                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                $$.fragment && $$.fragment.l(nodes);
                nodes.forEach(detach);
            }
            else {
                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                $$.fragment && $$.fragment.c();
            }
            if (options.intro)
                transition_in(component.$$.fragment);
            mount_component(component, options.target, options.anchor);
            flush();
        }
        set_current_component(parent_component);
    }
    class SvelteComponent {
        $destroy() {
            destroy_component(this, 1);
            this.$destroy = noop;
        }
        $on(type, callback) {
            const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));
            callbacks.push(callback);
            return () => {
                const index = callbacks.indexOf(callback);
                if (index !== -1)
                    callbacks.splice(index, 1);
            };
        }
        $set($$props) {
            if (this.$$set && !is_empty($$props)) {
                this.$$.skip_bound = true;
                this.$$set($$props);
                this.$$.skip_bound = false;
            }
        }
    }

    function dispatch_dev(type, detail) {
        document.dispatchEvent(custom_event(type, Object.assign({ version: '3.30.0' }, detail)));
    }
    function append_dev(target, node) {
        dispatch_dev('SvelteDOMInsert', { target, node });
        append(target, node);
    }
    function insert_dev(target, node, anchor) {
        dispatch_dev('SvelteDOMInsert', { target, node, anchor });
        insert(target, node, anchor);
    }
    function detach_dev(node) {
        dispatch_dev('SvelteDOMRemove', { node });
        detach(node);
    }
    function listen_dev(node, event, handler, options, has_prevent_default, has_stop_propagation) {
        const modifiers = options === true ? ['capture'] : options ? Array.from(Object.keys(options)) : [];
        if (has_prevent_default)
            modifiers.push('preventDefault');
        if (has_stop_propagation)
            modifiers.push('stopPropagation');
        dispatch_dev('SvelteDOMAddEventListener', { node, event, handler, modifiers });
        const dispose = listen(node, event, handler, options);
        return () => {
            dispatch_dev('SvelteDOMRemoveEventListener', { node, event, handler, modifiers });
            dispose();
        };
    }
    function attr_dev(node, attribute, value) {
        attr(node, attribute, value);
        if (value == null)
            dispatch_dev('SvelteDOMRemoveAttribute', { node, attribute });
        else
            dispatch_dev('SvelteDOMSetAttribute', { node, attribute, value });
    }
    function set_data_dev(text, data) {
        data = '' + data;
        if (text.wholeText === data)
            return;
        dispatch_dev('SvelteDOMSetData', { node: text, data });
        text.data = data;
    }
    function validate_each_argument(arg) {
        if (typeof arg !== 'string' && !(arg && typeof arg === 'object' && 'length' in arg)) {
            let msg = '{#each} only iterates over array-like objects.';
            if (typeof Symbol === 'function' && arg && Symbol.iterator in arg) {
                msg += ' You can use a spread to convert this iterable into an array.';
            }
            throw new Error(msg);
        }
    }
    function validate_slots(name, slot, keys) {
        for (const slot_key of Object.keys(slot)) {
            if (!~keys.indexOf(slot_key)) {
                console.warn(`<${name}> received an unexpected slot "${slot_key}".`);
            }
        }
    }
    class SvelteComponentDev extends SvelteComponent {
        constructor(options) {
            if (!options || (!options.target && !options.$$inline)) {
                throw new Error("'target' is a required option");
            }
            super();
        }
        $destroy() {
            super.$destroy();
            this.$destroy = () => {
                console.warn('Component was already destroyed'); // eslint-disable-line no-console
            };
        }
        $capture_state() { }
        $inject_state() { }
    }

    /**
     * @typedef {Object} WrappedComponent Object returned by the `wrap` method
     * @property {SvelteComponent} component - Component to load (this is always asynchronous)
     * @property {RoutePrecondition[]} [conditions] - Route pre-conditions to validate
     * @property {Object} [props] - Optional dictionary of static props
     * @property {Object} [userData] - Optional user data dictionary
     * @property {bool} _sveltesparouter - Internal flag; always set to true
     */

    /**
     * @callback AsyncSvelteComponent
     * @returns {Promise<SvelteComponent>} Returns a Promise that resolves with a Svelte component
     */

    /**
     * @callback RoutePrecondition
     * @param {RouteDetail} detail - Route detail object
     * @returns {boolean|Promise<boolean>} If the callback returns a false-y value, it's interpreted as the precondition failed, so it aborts loading the component (and won't process other pre-condition callbacks)
     */

    /**
     * @typedef {Object} WrapOptions Options object for the call to `wrap`
     * @property {SvelteComponent} [component] - Svelte component to load (this is incompatible with `asyncComponent`)
     * @property {AsyncSvelteComponent} [asyncComponent] - Function that returns a Promise that fulfills with a Svelte component (e.g. `{asyncComponent: () => import('Foo.svelte')}`)
     * @property {SvelteComponent} [loadingComponent] - Svelte component to be displayed while the async route is loading (as a placeholder); when unset or false-y, no component is shown while component
     * @property {object} [loadingParams] - Optional dictionary passed to the `loadingComponent` component as params (for an exported prop called `params`)
     * @property {object} [userData] - Optional object that will be passed to events such as `routeLoading`, `routeLoaded`, `conditionsFailed`
     * @property {object} [props] - Optional key-value dictionary of static props that will be passed to the component. The props are expanded with {...props}, so the key in the dictionary becomes the name of the prop.
     * @property {RoutePrecondition[]|RoutePrecondition} [conditions] - Route pre-conditions to add, which will be executed in order
     */

    /**
     * Wraps a component to enable multiple capabilities:
     * 1. Using dynamically-imported component, with (e.g. `{asyncComponent: () => import('Foo.svelte')}`), which also allows bundlers to do code-splitting.
     * 2. Adding route pre-conditions (e.g. `{conditions: [...]}`)
     * 3. Adding static props that are passed to the component
     * 4. Adding custom userData, which is passed to route events (e.g. route loaded events) or to route pre-conditions (e.g. `{userData: {foo: 'bar}}`)
     * 
     * @param {WrapOptions} args - Arguments object
     * @returns {WrappedComponent} Wrapped component
     */
    function wrap(args) {
        if (!args) {
            throw Error('Parameter args is required')
        }

        // We need to have one and only one of component and asyncComponent
        // This does a "XNOR"
        if (!args.component == !args.asyncComponent) {
            throw Error('One and only one of component and asyncComponent is required')
        }

        // If the component is not async, wrap it into a function returning a Promise
        if (args.component) {
            args.asyncComponent = () => Promise.resolve(args.component);
        }

        // Parameter asyncComponent and each item of conditions must be functions
        if (typeof args.asyncComponent != 'function') {
            throw Error('Parameter asyncComponent must be a function')
        }
        if (args.conditions) {
            // Ensure it's an array
            if (!Array.isArray(args.conditions)) {
                args.conditions = [args.conditions];
            }
            for (let i = 0; i < args.conditions.length; i++) {
                if (!args.conditions[i] || typeof args.conditions[i] != 'function') {
                    throw Error('Invalid parameter conditions[' + i + ']')
                }
            }
        }

        // Check if we have a placeholder component
        if (args.loadingComponent) {
            args.asyncComponent.loading = args.loadingComponent;
            args.asyncComponent.loadingParams = args.loadingParams || undefined;
        }

        // Returns an object that contains all the functions to execute too
        // The _sveltesparouter flag is to confirm the object was created by this router
        const obj = {
            component: args.asyncComponent,
            userData: args.userData,
            conditions: (args.conditions && args.conditions.length) ? args.conditions : undefined,
            props: (args.props && Object.keys(args.props).length) ? args.props : {},
            _sveltesparouter: true
        };

        return obj
    }

    const subscriber_queue = [];
    /**
     * Creates a `Readable` store that allows reading by subscription.
     * @param value initial value
     * @param {StartStopNotifier}start start and stop notifications for subscriptions
     */
    function readable(value, start) {
        return {
            subscribe: writable(value, start).subscribe
        };
    }
    /**
     * Create a `Writable` store that allows both updating and reading by subscription.
     * @param {*=}value initial value
     * @param {StartStopNotifier=}start start and stop notifications for subscriptions
     */
    function writable(value, start = noop) {
        let stop;
        const subscribers = [];
        function set(new_value) {
            if (safe_not_equal(value, new_value)) {
                value = new_value;
                if (stop) { // store is ready
                    const run_queue = !subscriber_queue.length;
                    for (let i = 0; i < subscribers.length; i += 1) {
                        const s = subscribers[i];
                        s[1]();
                        subscriber_queue.push(s, value);
                    }
                    if (run_queue) {
                        for (let i = 0; i < subscriber_queue.length; i += 2) {
                            subscriber_queue[i][0](subscriber_queue[i + 1]);
                        }
                        subscriber_queue.length = 0;
                    }
                }
            }
        }
        function update(fn) {
            set(fn(value));
        }
        function subscribe(run, invalidate = noop) {
            const subscriber = [run, invalidate];
            subscribers.push(subscriber);
            if (subscribers.length === 1) {
                stop = start(set) || noop;
            }
            run(value);
            return () => {
                const index = subscribers.indexOf(subscriber);
                if (index !== -1) {
                    subscribers.splice(index, 1);
                }
                if (subscribers.length === 0) {
                    stop();
                    stop = null;
                }
            };
        }
        return { set, update, subscribe };
    }
    function derived(stores, fn, initial_value) {
        const single = !Array.isArray(stores);
        const stores_array = single
            ? [stores]
            : stores;
        const auto = fn.length < 2;
        return readable(initial_value, (set) => {
            let inited = false;
            const values = [];
            let pending = 0;
            let cleanup = noop;
            const sync = () => {
                if (pending) {
                    return;
                }
                cleanup();
                const result = fn(single ? values[0] : values, set);
                if (auto) {
                    set(result);
                }
                else {
                    cleanup = is_function(result) ? result : noop;
                }
            };
            const unsubscribers = stores_array.map((store, i) => subscribe(store, (value) => {
                values[i] = value;
                pending &= ~(1 << i);
                if (inited) {
                    sync();
                }
            }, () => {
                pending |= (1 << i);
            }));
            inited = true;
            sync();
            return function stop() {
                run_all(unsubscribers);
                cleanup();
            };
        });
    }

    function regexparam (str, loose) {
    	if (str instanceof RegExp) return { keys:false, pattern:str };
    	var c, o, tmp, ext, keys=[], pattern='', arr = str.split('/');
    	arr[0] || arr.shift();

    	while (tmp = arr.shift()) {
    		c = tmp[0];
    		if (c === '*') {
    			keys.push('wild');
    			pattern += '/(.*)';
    		} else if (c === ':') {
    			o = tmp.indexOf('?', 1);
    			ext = tmp.indexOf('.', 1);
    			keys.push( tmp.substring(1, !!~o ? o : !!~ext ? ext : tmp.length) );
    			pattern += !!~o && !~ext ? '(?:/([^/]+?))?' : '/([^/]+?)';
    			if (!!~ext) pattern += (!!~o ? '?' : '') + '\\' + tmp.substring(ext);
    		} else {
    			pattern += '/' + tmp;
    		}
    	}

    	return {
    		keys: keys,
    		pattern: new RegExp('^' + pattern + (loose ? '(?=$|\/)' : '\/?$'), 'i')
    	};
    }

    /* node_modules/svelte-spa-router/Router.svelte generated by Svelte v3.30.0 */

    const { Error: Error_1, Object: Object_1, console: console_1 } = globals;

    // (209:0) {:else}
    function create_else_block(ctx) {
    	let switch_instance;
    	let switch_instance_anchor;
    	let current;
    	const switch_instance_spread_levels = [/*props*/ ctx[2]];
    	var switch_value = /*component*/ ctx[0];

    	function switch_props(ctx) {
    		let switch_instance_props = {};

    		for (let i = 0; i < switch_instance_spread_levels.length; i += 1) {
    			switch_instance_props = assign(switch_instance_props, switch_instance_spread_levels[i]);
    		}

    		return {
    			props: switch_instance_props,
    			$$inline: true
    		};
    	}

    	if (switch_value) {
    		switch_instance = new switch_value(switch_props());
    		switch_instance.$on("routeEvent", /*routeEvent_handler_1*/ ctx[7]);
    	}

    	const block = {
    		c: function create() {
    			if (switch_instance) create_component(switch_instance.$$.fragment);
    			switch_instance_anchor = empty();
    		},
    		m: function mount(target, anchor) {
    			if (switch_instance) {
    				mount_component(switch_instance, target, anchor);
    			}

    			insert_dev(target, switch_instance_anchor, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const switch_instance_changes = (dirty & /*props*/ 4)
    			? get_spread_update(switch_instance_spread_levels, [get_spread_object(/*props*/ ctx[2])])
    			: {};

    			if (switch_value !== (switch_value = /*component*/ ctx[0])) {
    				if (switch_instance) {
    					group_outros();
    					const old_component = switch_instance;

    					transition_out(old_component.$$.fragment, 1, 0, () => {
    						destroy_component(old_component, 1);
    					});

    					check_outros();
    				}

    				if (switch_value) {
    					switch_instance = new switch_value(switch_props());
    					switch_instance.$on("routeEvent", /*routeEvent_handler_1*/ ctx[7]);
    					create_component(switch_instance.$$.fragment);
    					transition_in(switch_instance.$$.fragment, 1);
    					mount_component(switch_instance, switch_instance_anchor.parentNode, switch_instance_anchor);
    				} else {
    					switch_instance = null;
    				}
    			} else if (switch_value) {
    				switch_instance.$set(switch_instance_changes);
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			if (switch_instance) transition_in(switch_instance.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			if (switch_instance) transition_out(switch_instance.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(switch_instance_anchor);
    			if (switch_instance) destroy_component(switch_instance, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_else_block.name,
    		type: "else",
    		source: "(209:0) {:else}",
    		ctx
    	});

    	return block;
    }

    // (202:0) {#if componentParams}
    function create_if_block(ctx) {
    	let switch_instance;
    	let switch_instance_anchor;
    	let current;
    	const switch_instance_spread_levels = [{ params: /*componentParams*/ ctx[1] }, /*props*/ ctx[2]];
    	var switch_value = /*component*/ ctx[0];

    	function switch_props(ctx) {
    		let switch_instance_props = {};

    		for (let i = 0; i < switch_instance_spread_levels.length; i += 1) {
    			switch_instance_props = assign(switch_instance_props, switch_instance_spread_levels[i]);
    		}

    		return {
    			props: switch_instance_props,
    			$$inline: true
    		};
    	}

    	if (switch_value) {
    		switch_instance = new switch_value(switch_props());
    		switch_instance.$on("routeEvent", /*routeEvent_handler*/ ctx[6]);
    	}

    	const block = {
    		c: function create() {
    			if (switch_instance) create_component(switch_instance.$$.fragment);
    			switch_instance_anchor = empty();
    		},
    		m: function mount(target, anchor) {
    			if (switch_instance) {
    				mount_component(switch_instance, target, anchor);
    			}

    			insert_dev(target, switch_instance_anchor, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const switch_instance_changes = (dirty & /*componentParams, props*/ 6)
    			? get_spread_update(switch_instance_spread_levels, [
    					dirty & /*componentParams*/ 2 && { params: /*componentParams*/ ctx[1] },
    					dirty & /*props*/ 4 && get_spread_object(/*props*/ ctx[2])
    				])
    			: {};

    			if (switch_value !== (switch_value = /*component*/ ctx[0])) {
    				if (switch_instance) {
    					group_outros();
    					const old_component = switch_instance;

    					transition_out(old_component.$$.fragment, 1, 0, () => {
    						destroy_component(old_component, 1);
    					});

    					check_outros();
    				}

    				if (switch_value) {
    					switch_instance = new switch_value(switch_props());
    					switch_instance.$on("routeEvent", /*routeEvent_handler*/ ctx[6]);
    					create_component(switch_instance.$$.fragment);
    					transition_in(switch_instance.$$.fragment, 1);
    					mount_component(switch_instance, switch_instance_anchor.parentNode, switch_instance_anchor);
    				} else {
    					switch_instance = null;
    				}
    			} else if (switch_value) {
    				switch_instance.$set(switch_instance_changes);
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			if (switch_instance) transition_in(switch_instance.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			if (switch_instance) transition_out(switch_instance.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(switch_instance_anchor);
    			if (switch_instance) destroy_component(switch_instance, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block.name,
    		type: "if",
    		source: "(202:0) {#if componentParams}",
    		ctx
    	});

    	return block;
    }

    function create_fragment(ctx) {
    	let current_block_type_index;
    	let if_block;
    	let if_block_anchor;
    	let current;
    	const if_block_creators = [create_if_block, create_else_block];
    	const if_blocks = [];

    	function select_block_type(ctx, dirty) {
    		if (/*componentParams*/ ctx[1]) return 0;
    		return 1;
    	}

    	current_block_type_index = select_block_type(ctx);
    	if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);

    	const block = {
    		c: function create() {
    			if_block.c();
    			if_block_anchor = empty();
    		},
    		l: function claim(nodes) {
    			throw new Error_1("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			if_blocks[current_block_type_index].m(target, anchor);
    			insert_dev(target, if_block_anchor, anchor);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			let previous_block_index = current_block_type_index;
    			current_block_type_index = select_block_type(ctx);

    			if (current_block_type_index === previous_block_index) {
    				if_blocks[current_block_type_index].p(ctx, dirty);
    			} else {
    				group_outros();

    				transition_out(if_blocks[previous_block_index], 1, 1, () => {
    					if_blocks[previous_block_index] = null;
    				});

    				check_outros();
    				if_block = if_blocks[current_block_type_index];

    				if (!if_block) {
    					if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
    					if_block.c();
    				} else {
    					if_block.p(ctx, dirty);
    				}

    				transition_in(if_block, 1);
    				if_block.m(if_block_anchor.parentNode, if_block_anchor);
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(if_block);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(if_block);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if_blocks[current_block_type_index].d(detaching);
    			if (detaching) detach_dev(if_block_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function wrap$1(component, userData, ...conditions) {
    	// Use the new wrap method and show a deprecation warning
    	// eslint-disable-next-line no-console
    	console.warn("Method `wrap` from `svelte-spa-router` is deprecated and will be removed in a future version. Please use `svelte-spa-router/wrap` instead. See http://bit.ly/svelte-spa-router-upgrading");

    	return wrap({ component, userData, conditions });
    }

    /**
     * @typedef {Object} Location
     * @property {string} location - Location (page/view), for example `/book`
     * @property {string} [querystring] - Querystring from the hash, as a string not parsed
     */
    /**
     * Returns the current location from the hash.
     *
     * @returns {Location} Location object
     * @private
     */
    function getLocation() {
    	const hashPosition = window.location.href.indexOf("#/");

    	let location = hashPosition > -1
    	? window.location.href.substr(hashPosition + 1)
    	: "/";

    	// Check if there's a querystring
    	const qsPosition = location.indexOf("?");

    	let querystring = "";

    	if (qsPosition > -1) {
    		querystring = location.substr(qsPosition + 1);
    		location = location.substr(0, qsPosition);
    	}

    	return { location, querystring };
    }

    const loc = readable(null, // eslint-disable-next-line prefer-arrow-callback
    function start(set) {
    	set(getLocation());

    	const update = () => {
    		set(getLocation());
    	};

    	window.addEventListener("hashchange", update, false);

    	return function stop() {
    		window.removeEventListener("hashchange", update, false);
    	};
    });

    const location = derived(loc, $loc => $loc.location);
    const querystring = derived(loc, $loc => $loc.querystring);

    async function push(location) {
    	if (!location || location.length < 1 || location.charAt(0) != "/" && location.indexOf("#/") !== 0) {
    		throw Error("Invalid parameter location");
    	}

    	// Execute this code when the current call stack is complete
    	await tick();

    	// Note: this will include scroll state in history even when restoreScrollState is false
    	history.replaceState(
    		{
    			scrollX: window.scrollX,
    			scrollY: window.scrollY
    		},
    		undefined,
    		undefined
    	);

    	window.location.hash = (location.charAt(0) == "#" ? "" : "#") + location;
    }

    async function pop() {
    	// Execute this code when the current call stack is complete
    	await tick();

    	window.history.back();
    }

    async function replace(location) {
    	if (!location || location.length < 1 || location.charAt(0) != "/" && location.indexOf("#/") !== 0) {
    		throw Error("Invalid parameter location");
    	}

    	// Execute this code when the current call stack is complete
    	await tick();

    	const dest = (location.charAt(0) == "#" ? "" : "#") + location;

    	try {
    		window.history.replaceState(undefined, undefined, dest);
    	} catch(e) {
    		// eslint-disable-next-line no-console
    		console.warn("Caught exception while replacing the current page. If you're running this in the Svelte REPL, please note that the `replace` method might not work in this environment.");
    	}

    	// The method above doesn't trigger the hashchange event, so let's do that manually
    	window.dispatchEvent(new Event("hashchange"));
    }

    function link(node, hrefVar) {
    	// Only apply to <a> tags
    	if (!node || !node.tagName || node.tagName.toLowerCase() != "a") {
    		throw Error("Action \"link\" can only be used with <a> tags");
    	}

    	updateLink(node, hrefVar || node.getAttribute("href"));

    	return {
    		update(updated) {
    			updateLink(node, updated);
    		}
    	};
    }

    // Internal function used by the link function
    function updateLink(node, href) {
    	// Destination must start with '/'
    	if (!href || href.length < 1 || href.charAt(0) != "/") {
    		throw Error("Invalid value for \"href\" attribute: " + href);
    	}

    	// Add # to the href attribute
    	node.setAttribute("href", "#" + href);

    	node.addEventListener("click", scrollstateHistoryHandler);
    }

    /**
     * The handler attached to an anchor tag responsible for updating the
     * current history state with the current scroll state
     *
     * @param {HTMLElementEventMap} event - an onclick event attached to an anchor tag
     */
    function scrollstateHistoryHandler(event) {
    	// Prevent default anchor onclick behaviour
    	event.preventDefault();

    	const href = event.currentTarget.getAttribute("href");

    	// Setting the url (3rd arg) to href will break clicking for reasons, so don't try to do that
    	history.replaceState(
    		{
    			scrollX: window.scrollX,
    			scrollY: window.scrollY
    		},
    		undefined,
    		undefined
    	);

    	// This will force an update as desired, but this time our scroll state will be attached
    	window.location.hash = href;
    }

    function instance($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Router", slots, []);
    	let { routes = {} } = $$props;
    	let { prefix = "" } = $$props;
    	let { restoreScrollState = false } = $$props;

    	/**
     * Container for a route: path, component
     */
    	class RouteItem {
    		/**
     * Initializes the object and creates a regular expression from the path, using regexparam.
     *
     * @param {string} path - Path to the route (must start with '/' or '*')
     * @param {SvelteComponent|WrappedComponent} component - Svelte component for the route, optionally wrapped
     */
    		constructor(path, component) {
    			if (!component || typeof component != "function" && (typeof component != "object" || component._sveltesparouter !== true)) {
    				throw Error("Invalid component object");
    			}

    			// Path must be a regular or expression, or a string starting with '/' or '*'
    			if (!path || typeof path == "string" && (path.length < 1 || path.charAt(0) != "/" && path.charAt(0) != "*") || typeof path == "object" && !(path instanceof RegExp)) {
    				throw Error("Invalid value for \"path\" argument");
    			}

    			const { pattern, keys } = regexparam(path);
    			this.path = path;

    			// Check if the component is wrapped and we have conditions
    			if (typeof component == "object" && component._sveltesparouter === true) {
    				this.component = component.component;
    				this.conditions = component.conditions || [];
    				this.userData = component.userData;
    				this.props = component.props || {};
    			} else {
    				// Convert the component to a function that returns a Promise, to normalize it
    				this.component = () => Promise.resolve(component);

    				this.conditions = [];
    				this.props = {};
    			}

    			this._pattern = pattern;
    			this._keys = keys;
    		}

    		/**
     * Checks if `path` matches the current route.
     * If there's a match, will return the list of parameters from the URL (if any).
     * In case of no match, the method will return `null`.
     *
     * @param {string} path - Path to test
     * @returns {null|Object.<string, string>} List of paramters from the URL if there's a match, or `null` otherwise.
     */
    		match(path) {
    			// If there's a prefix, remove it before we run the matching
    			if (prefix) {
    				if (typeof prefix == "string" && path.startsWith(prefix)) {
    					path = path.substr(prefix.length) || "/";
    				} else if (prefix instanceof RegExp) {
    					const match = path.match(prefix);

    					if (match && match[0]) {
    						path = path.substr(match[0].length) || "/";
    					}
    				}
    			}

    			// Check if the pattern matches
    			const matches = this._pattern.exec(path);

    			if (matches === null) {
    				return null;
    			}

    			// If the input was a regular expression, this._keys would be false, so return matches as is
    			if (this._keys === false) {
    				return matches;
    			}

    			const out = {};
    			let i = 0;

    			while (i < this._keys.length) {
    				// In the match parameters, URL-decode all values
    				try {
    					out[this._keys[i]] = decodeURIComponent(matches[i + 1] || "") || null;
    				} catch(e) {
    					out[this._keys[i]] = null;
    				}

    				i++;
    			}

    			return out;
    		}

    		/**
     * Dictionary with route details passed to the pre-conditions functions, as well as the `routeLoading`, `routeLoaded` and `conditionsFailed` events
     * @typedef {Object} RouteDetail
     * @property {string|RegExp} route - Route matched as defined in the route definition (could be a string or a reguar expression object)
     * @property {string} location - Location path
     * @property {string} querystring - Querystring from the hash
     * @property {object} [userData] - Custom data passed by the user
     * @property {SvelteComponent} [component] - Svelte component (only in `routeLoaded` events)
     * @property {string} [name] - Name of the Svelte component (only in `routeLoaded` events)
     */
    		/**
     * Executes all conditions (if any) to control whether the route can be shown. Conditions are executed in the order they are defined, and if a condition fails, the following ones aren't executed.
     * 
     * @param {RouteDetail} detail - Route detail
     * @returns {bool} Returns true if all the conditions succeeded
     */
    		async checkConditions(detail) {
    			for (let i = 0; i < this.conditions.length; i++) {
    				if (!await this.conditions[i](detail)) {
    					return false;
    				}
    			}

    			return true;
    		}
    	}

    	// Set up all routes
    	const routesList = [];

    	if (routes instanceof Map) {
    		// If it's a map, iterate on it right away
    		routes.forEach((route, path) => {
    			routesList.push(new RouteItem(path, route));
    		});
    	} else {
    		// We have an object, so iterate on its own properties
    		Object.keys(routes).forEach(path => {
    			routesList.push(new RouteItem(path, routes[path]));
    		});
    	}

    	// Props for the component to render
    	let component = null;

    	let componentParams = null;
    	let props = {};

    	// Event dispatcher from Svelte
    	const dispatch = createEventDispatcher();

    	// Just like dispatch, but executes on the next iteration of the event loop
    	async function dispatchNextTick(name, detail) {
    		// Execute this code when the current call stack is complete
    		await tick();

    		dispatch(name, detail);
    	}

    	// If this is set, then that means we have popped into this var the state of our last scroll position
    	let previousScrollState = null;

    	if (restoreScrollState) {
    		window.addEventListener("popstate", event => {
    			// If this event was from our history.replaceState, event.state will contain
    			// our scroll history. Otherwise, event.state will be null (like on forward
    			// navigation)
    			if (event.state && event.state.scrollY) {
    				previousScrollState = event.state;
    			} else {
    				previousScrollState = null;
    			}
    		});

    		afterUpdate(() => {
    			// If this exists, then this is a back navigation: restore the scroll position
    			if (previousScrollState) {
    				window.scrollTo(previousScrollState.scrollX, previousScrollState.scrollY);
    			} else {
    				// Otherwise this is a forward navigation: scroll to top
    				window.scrollTo(0, 0);
    			}
    		});
    	}

    	// Always have the latest value of loc
    	let lastLoc = null;

    	// Current object of the component loaded
    	let componentObj = null;

    	// Handle hash change events
    	// Listen to changes in the $loc store and update the page
    	// Do not use the $: syntax because it gets triggered by too many things
    	loc.subscribe(async newLoc => {
    		lastLoc = newLoc;

    		// Find a route matching the location
    		let i = 0;

    		while (i < routesList.length) {
    			const match = routesList[i].match(newLoc.location);

    			if (!match) {
    				i++;
    				continue;
    			}

    			const detail = {
    				route: routesList[i].path,
    				location: newLoc.location,
    				querystring: newLoc.querystring,
    				userData: routesList[i].userData
    			};

    			// Check if the route can be loaded - if all conditions succeed
    			if (!await routesList[i].checkConditions(detail)) {
    				// Don't display anything
    				$$invalidate(0, component = null);

    				componentObj = null;

    				// Trigger an event to notify the user, then exit
    				dispatchNextTick("conditionsFailed", detail);

    				return;
    			}

    			// Trigger an event to alert that we're loading the route
    			// We need to clone the object on every event invocation so we don't risk the object to be modified in the next tick
    			dispatchNextTick("routeLoading", Object.assign({}, detail));

    			// If there's a component to show while we're loading the route, display it
    			const obj = routesList[i].component;

    			// Do not replace the component if we're loading the same one as before, to avoid the route being unmounted and re-mounted
    			if (componentObj != obj) {
    				if (obj.loading) {
    					$$invalidate(0, component = obj.loading);
    					componentObj = obj;
    					$$invalidate(1, componentParams = obj.loadingParams);
    					$$invalidate(2, props = {});

    					// Trigger the routeLoaded event for the loading component
    					// Create a copy of detail so we don't modify the object for the dynamic route (and the dynamic route doesn't modify our object too)
    					dispatchNextTick("routeLoaded", Object.assign({}, detail, { component, name: component.name }));
    				} else {
    					$$invalidate(0, component = null);
    					componentObj = null;
    				}

    				// Invoke the Promise
    				const loaded = await obj();

    				// Now that we're here, after the promise resolved, check if we still want this component, as the user might have navigated to another page in the meanwhile
    				if (newLoc != lastLoc) {
    					// Don't update the component, just exit
    					return;
    				}

    				// If there is a "default" property, which is used by async routes, then pick that
    				$$invalidate(0, component = loaded && loaded.default || loaded);

    				componentObj = obj;
    			}

    			// Set componentParams only if we have a match, to avoid a warning similar to `<Component> was created with unknown prop 'params'`
    			// Of course, this assumes that developers always add a "params" prop when they are expecting parameters
    			if (match && typeof match == "object" && Object.keys(match).length) {
    				$$invalidate(1, componentParams = match);
    			} else {
    				$$invalidate(1, componentParams = null);
    			}

    			// Set static props, if any
    			$$invalidate(2, props = routesList[i].props);

    			// Dispatch the routeLoaded event then exit
    			// We need to clone the object on every event invocation so we don't risk the object to be modified in the next tick
    			dispatchNextTick("routeLoaded", Object.assign({}, detail, { component, name: component.name }));

    			return;
    		}

    		// If we're still here, there was no match, so show the empty component
    		$$invalidate(0, component = null);

    		componentObj = null;
    	});

    	const writable_props = ["routes", "prefix", "restoreScrollState"];

    	Object_1.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console_1.warn(`<Router> was created with unknown prop '${key}'`);
    	});

    	function routeEvent_handler(event) {
    		bubble($$self, event);
    	}

    	function routeEvent_handler_1(event) {
    		bubble($$self, event);
    	}

    	$$self.$$set = $$props => {
    		if ("routes" in $$props) $$invalidate(3, routes = $$props.routes);
    		if ("prefix" in $$props) $$invalidate(4, prefix = $$props.prefix);
    		if ("restoreScrollState" in $$props) $$invalidate(5, restoreScrollState = $$props.restoreScrollState);
    	};

    	$$self.$capture_state = () => ({
    		readable,
    		derived,
    		tick,
    		_wrap: wrap,
    		wrap: wrap$1,
    		getLocation,
    		loc,
    		location,
    		querystring,
    		push,
    		pop,
    		replace,
    		link,
    		updateLink,
    		scrollstateHistoryHandler,
    		createEventDispatcher,
    		afterUpdate,
    		regexparam,
    		routes,
    		prefix,
    		restoreScrollState,
    		RouteItem,
    		routesList,
    		component,
    		componentParams,
    		props,
    		dispatch,
    		dispatchNextTick,
    		previousScrollState,
    		lastLoc,
    		componentObj
    	});

    	$$self.$inject_state = $$props => {
    		if ("routes" in $$props) $$invalidate(3, routes = $$props.routes);
    		if ("prefix" in $$props) $$invalidate(4, prefix = $$props.prefix);
    		if ("restoreScrollState" in $$props) $$invalidate(5, restoreScrollState = $$props.restoreScrollState);
    		if ("component" in $$props) $$invalidate(0, component = $$props.component);
    		if ("componentParams" in $$props) $$invalidate(1, componentParams = $$props.componentParams);
    		if ("props" in $$props) $$invalidate(2, props = $$props.props);
    		if ("previousScrollState" in $$props) previousScrollState = $$props.previousScrollState;
    		if ("lastLoc" in $$props) lastLoc = $$props.lastLoc;
    		if ("componentObj" in $$props) componentObj = $$props.componentObj;
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	$$self.$$.update = () => {
    		if ($$self.$$.dirty & /*restoreScrollState*/ 32) {
    			// Update history.scrollRestoration depending on restoreScrollState
    			 history.scrollRestoration = restoreScrollState ? "manual" : "auto";
    		}
    	};

    	return [
    		component,
    		componentParams,
    		props,
    		routes,
    		prefix,
    		restoreScrollState,
    		routeEvent_handler,
    		routeEvent_handler_1
    	];
    }

    class Router extends SvelteComponentDev {
    	constructor(options) {
    		super(options);

    		init(this, options, instance, create_fragment, safe_not_equal, {
    			routes: 3,
    			prefix: 4,
    			restoreScrollState: 5
    		});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Router",
    			options,
    			id: create_fragment.name
    		});
    	}

    	get routes() {
    		throw new Error_1("<Router>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set routes(value) {
    		throw new Error_1("<Router>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get prefix() {
    		throw new Error_1("<Router>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set prefix(value) {
    		throw new Error_1("<Router>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get restoreScrollState() {
    		throw new Error_1("<Router>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set restoreScrollState(value) {
    		throw new Error_1("<Router>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}
    }

    /* src/components/Icon.svelte generated by Svelte v3.30.0 */

    const file = "src/components/Icon.svelte";

    function create_fragment$1(ctx) {
    	let span;
    	let svg;
    	let use;
    	let use_xlink_href_value;
    	let svg_class_value;
    	let svg_stroke_value;

    	const block = {
    		c: function create() {
    			span = element("span");
    			svg = svg_element("svg");
    			use = svg_element("use");
    			xlink_attr(use, "xlink:href", use_xlink_href_value = "/icons/feather-sprite.svg#" + /*name*/ ctx[7]);
    			add_location(use, file, 32, 2, 670);
    			attr_dev(svg, "class", svg_class_value = "icon-" + /*name*/ ctx[7] + " svelte-1iby9by");
    			attr_dev(svg, "width", /*size*/ ctx[0]);
    			attr_dev(svg, "height", /*size*/ ctx[0]);
    			attr_dev(svg, "fill", /*fill*/ ctx[1]);

    			attr_dev(svg, "stroke", svg_stroke_value = /*light*/ ctx[3]
    			? /*light_color*/ ctx[9]
    			: /*color*/ ctx[2]);

    			attr_dev(svg, "stroke-width", /*width*/ ctx[4]);
    			attr_dev(svg, "stroke-linecap", /*linecap*/ ctx[5]);
    			attr_dev(svg, "stroke-linejoin", /*linejoin*/ ctx[6]);
    			toggle_class(svg, "inactive", /*inactive*/ ctx[8]);
    			add_location(svg, file, 23, 2, 436);
    			add_location(span, file, 22, 0, 427);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, span, anchor);
    			append_dev(span, svg);
    			append_dev(svg, use);
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*name*/ 128 && use_xlink_href_value !== (use_xlink_href_value = "/icons/feather-sprite.svg#" + /*name*/ ctx[7])) {
    				xlink_attr(use, "xlink:href", use_xlink_href_value);
    			}

    			if (dirty & /*name*/ 128 && svg_class_value !== (svg_class_value = "icon-" + /*name*/ ctx[7] + " svelte-1iby9by")) {
    				attr_dev(svg, "class", svg_class_value);
    			}

    			if (dirty & /*size*/ 1) {
    				attr_dev(svg, "width", /*size*/ ctx[0]);
    			}

    			if (dirty & /*size*/ 1) {
    				attr_dev(svg, "height", /*size*/ ctx[0]);
    			}

    			if (dirty & /*fill*/ 2) {
    				attr_dev(svg, "fill", /*fill*/ ctx[1]);
    			}

    			if (dirty & /*light, light_color, color*/ 524 && svg_stroke_value !== (svg_stroke_value = /*light*/ ctx[3]
    			? /*light_color*/ ctx[9]
    			: /*color*/ ctx[2])) {
    				attr_dev(svg, "stroke", svg_stroke_value);
    			}

    			if (dirty & /*width*/ 16) {
    				attr_dev(svg, "stroke-width", /*width*/ ctx[4]);
    			}

    			if (dirty & /*linecap*/ 32) {
    				attr_dev(svg, "stroke-linecap", /*linecap*/ ctx[5]);
    			}

    			if (dirty & /*linejoin*/ 64) {
    				attr_dev(svg, "stroke-linejoin", /*linejoin*/ ctx[6]);
    			}

    			if (dirty & /*name, inactive*/ 384) {
    				toggle_class(svg, "inactive", /*inactive*/ ctx[8]);
    			}
    		},
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(span);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$1.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$1($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Icon", slots, []);
    	let { size = "24" } = $$props;
    	let { fill = "none" } = $$props;
    	let { color = "var(--color)" } = $$props;
    	let { light = false } = $$props;
    	let { width = "2" } = $$props;
    	let { linecap = "round" } = $$props;
    	let { linejoin = "round" } = $$props;
    	let { name } = $$props;
    	let { inactive = false } = $$props;
    	let { light_color = "var(--color)" } = $$props;

    	const writable_props = [
    		"size",
    		"fill",
    		"color",
    		"light",
    		"width",
    		"linecap",
    		"linejoin",
    		"name",
    		"inactive",
    		"light_color"
    	];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Icon> was created with unknown prop '${key}'`);
    	});

    	$$self.$$set = $$props => {
    		if ("size" in $$props) $$invalidate(0, size = $$props.size);
    		if ("fill" in $$props) $$invalidate(1, fill = $$props.fill);
    		if ("color" in $$props) $$invalidate(2, color = $$props.color);
    		if ("light" in $$props) $$invalidate(3, light = $$props.light);
    		if ("width" in $$props) $$invalidate(4, width = $$props.width);
    		if ("linecap" in $$props) $$invalidate(5, linecap = $$props.linecap);
    		if ("linejoin" in $$props) $$invalidate(6, linejoin = $$props.linejoin);
    		if ("name" in $$props) $$invalidate(7, name = $$props.name);
    		if ("inactive" in $$props) $$invalidate(8, inactive = $$props.inactive);
    		if ("light_color" in $$props) $$invalidate(9, light_color = $$props.light_color);
    	};

    	$$self.$capture_state = () => ({
    		size,
    		fill,
    		color,
    		light,
    		width,
    		linecap,
    		linejoin,
    		name,
    		inactive,
    		light_color
    	});

    	$$self.$inject_state = $$props => {
    		if ("size" in $$props) $$invalidate(0, size = $$props.size);
    		if ("fill" in $$props) $$invalidate(1, fill = $$props.fill);
    		if ("color" in $$props) $$invalidate(2, color = $$props.color);
    		if ("light" in $$props) $$invalidate(3, light = $$props.light);
    		if ("width" in $$props) $$invalidate(4, width = $$props.width);
    		if ("linecap" in $$props) $$invalidate(5, linecap = $$props.linecap);
    		if ("linejoin" in $$props) $$invalidate(6, linejoin = $$props.linejoin);
    		if ("name" in $$props) $$invalidate(7, name = $$props.name);
    		if ("inactive" in $$props) $$invalidate(8, inactive = $$props.inactive);
    		if ("light_color" in $$props) $$invalidate(9, light_color = $$props.light_color);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [
    		size,
    		fill,
    		color,
    		light,
    		width,
    		linecap,
    		linejoin,
    		name,
    		inactive,
    		light_color
    	];
    }

    class Icon extends SvelteComponentDev {
    	constructor(options) {
    		super(options);

    		init(this, options, instance$1, create_fragment$1, safe_not_equal, {
    			size: 0,
    			fill: 1,
    			color: 2,
    			light: 3,
    			width: 4,
    			linecap: 5,
    			linejoin: 6,
    			name: 7,
    			inactive: 8,
    			light_color: 9
    		});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Icon",
    			options,
    			id: create_fragment$1.name
    		});

    		const { ctx } = this.$$;
    		const props = options.props || {};

    		if (/*name*/ ctx[7] === undefined && !("name" in props)) {
    			console.warn("<Icon> was created without expected prop 'name'");
    		}
    	}

    	get size() {
    		throw new Error("<Icon>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set size(value) {
    		throw new Error("<Icon>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get fill() {
    		throw new Error("<Icon>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set fill(value) {
    		throw new Error("<Icon>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get color() {
    		throw new Error("<Icon>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set color(value) {
    		throw new Error("<Icon>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get light() {
    		throw new Error("<Icon>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set light(value) {
    		throw new Error("<Icon>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get width() {
    		throw new Error("<Icon>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set width(value) {
    		throw new Error("<Icon>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get linecap() {
    		throw new Error("<Icon>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set linecap(value) {
    		throw new Error("<Icon>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get linejoin() {
    		throw new Error("<Icon>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set linejoin(value) {
    		throw new Error("<Icon>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get name() {
    		throw new Error("<Icon>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set name(value) {
    		throw new Error("<Icon>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get inactive() {
    		throw new Error("<Icon>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set inactive(value) {
    		throw new Error("<Icon>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get light_color() {
    		throw new Error("<Icon>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set light_color(value) {
    		throw new Error("<Icon>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}
    }

    /* src/Home.svelte generated by Svelte v3.30.0 */
    const file$1 = "src/Home.svelte";

    function create_fragment$2(ctx) {
    	let hero;
    	let h10;
    	let t1;
    	let p0;
    	let t2;
    	let b0;
    	let t4;
    	let b1;
    	let t6;
    	let t7;
    	let hr0;
    	let t8;
    	let section0;
    	let aside0;
    	let h30;
    	let t10;
    	let icon0;
    	let t11;
    	let p1;
    	let t12;
    	let a0;
    	let t14;
    	let t15;
    	let aside1;
    	let h31;
    	let t17;
    	let icon1;
    	let t18;
    	let p2;
    	let t19;
    	let a1;
    	let t21;
    	let a2;
    	let t23;
    	let t24;
    	let aside2;
    	let h32;
    	let t26;
    	let icon2;
    	let t27;
    	let p3;
    	let t29;
    	let rationale;
    	let section1;
    	let h11;
    	let t31;
    	let p4;
    	let t32;
    	let b2;
    	let t34;
    	let t35;
    	let p5;
    	let t37;
    	let section2;
    	let aside3;
    	let pre0;
    	let t39;
    	let p6;
    	let t41;
    	let section3;
    	let aside4;
    	let pre1;
    	let t43;
    	let hr1;
    	let t44;
    	let section4;
    	let p7;
    	let t45;
    	let a3;
    	let t47;
    	let t48;
    	let a4;
    	let button;
    	let link_action;
    	let t50;
    	let hr2;
    	let t51;
    	let h12;
    	let t53;
    	let p8;
    	let t55;
    	let ol0;
    	let li0;
    	let t56;
    	let b3;
    	let t58;
    	let t59;
    	let li1;
    	let t60;
    	let b4;
    	let t62;
    	let b5;
    	let t64;
    	let t65;
    	let li2;
    	let t67;
    	let h20;
    	let t69;
    	let p9;
    	let t70;
    	let b6;
    	let t72;
    	let a5;
    	let t74;
    	let t75;
    	let pre2;
    	let code0;
    	let t77;
    	let p10;
    	let t78;
    	let b7;
    	let t80;
    	let b8;
    	let t82;
    	let t83;
    	let pre3;
    	let code1;
    	let t85;
    	let p11;
    	let t86;
    	let b9;
    	let t88;
    	let b10;
    	let t90;
    	let t91;
    	let pre4;
    	let code2;
    	let t93;
    	let p12;
    	let t95;
    	let p13;
    	let t96;
    	let a6;
    	let t98;
    	let t99;
    	let quote0;
    	let t101;
    	let p14;
    	let t102;
    	let a7;
    	let t104;
    	let t105;
    	let p15;
    	let t106;
    	let b11;
    	let t108;
    	let t109;
    	let h33;
    	let t111;
    	let p16;
    	let t112;
    	let b12;
    	let t114;
    	let t115;
    	let ol1;
    	let li3;
    	let t117;
    	let li4;
    	let t119;
    	let li5;
    	let t120;
    	let b13;
    	let t122;
    	let b14;
    	let t124;
    	let t125;
    	let li6;
    	let t127;
    	let li7;
    	let t129;
    	let p17;
    	let t131;
    	let ol2;
    	let li8;
    	let t133;
    	let li9;
    	let t134;
    	let b15;
    	let t136;
    	let li10;
    	let t138;
    	let p18;
    	let t140;
    	let h21;
    	let t142;
    	let p19;
    	let t143;
    	let a8;
    	let t145;
    	let t146;
    	let pre5;
    	let code3;
    	let t148;
    	let p20;
    	let t149;
    	let b16;
    	let t151;
    	let b17;
    	let t153;
    	let t154;
    	let ol3;
    	let li11;
    	let b18;
    	let t156;
    	let t157;
    	let li12;
    	let b19;
    	let t159;
    	let t160;
    	let li13;
    	let t161;
    	let b20;
    	let t163;
    	let b21;
    	let t165;
    	let a9;
    	let t167;
    	let h34;
    	let t169;
    	let p21;
    	let t170;
    	let b22;
    	let t172;
    	let a10;
    	let t174;
    	let b23;
    	let t176;
    	let b24;
    	let t178;
    	let t179;
    	let pre6;
    	let code4;
    	let t181;
    	let pre7;
    	let code5;
    	let t183;
    	let p22;
    	let t184;
    	let b25;
    	let t186;
    	let b26;
    	let t188;
    	let b27;
    	let t190;
    	let b28;
    	let t192;
    	let t193;
    	let p23;
    	let t195;
    	let pre8;
    	let code6;
    	let t197;
    	let p24;
    	let t198;
    	let b29;
    	let t200;
    	let b30;
    	let t202;
    	let t203;
    	let h35;
    	let t205;
    	let p25;
    	let t206;
    	let b31;
    	let t208;
    	let b32;
    	let t210;
    	let b33;
    	let t212;
    	let t213;
    	let pre9;
    	let code7;
    	let t215;
    	let p26;
    	let t216;
    	let b34;
    	let t218;
    	let b35;
    	let t220;
    	let b36;
    	let t222;
    	let t223;
    	let p27;
    	let t224;
    	let a11;
    	let t226;
    	let t227;
    	let pre10;
    	let code8;
    	let t229;
    	let p28;
    	let t230;
    	let b37;
    	let t232;
    	let b38;
    	let t234;
    	let b39;
    	let t236;
    	let b40;
    	let t238;
    	let t239;
    	let h22;
    	let t241;
    	let p29;
    	let t242;
    	let a12;
    	let t244;
    	let a13;
    	let t246;
    	let t247;
    	let quote1;
    	let p30;
    	let t249;
    	let p31;
    	let t251;
    	let p32;
    	let t253;
    	let p33;
    	let t254;
    	let b41;
    	let t256;
    	let em;
    	let t258;
    	let t259;
    	let p34;
    	let t261;
    	let quote2;
    	let ol4;
    	let li14;
    	let t263;
    	let li15;
    	let t265;
    	let li16;
    	let t267;
    	let p35;
    	let t269;
    	let quote3;
    	let ol5;
    	let li17;
    	let t271;
    	let li18;
    	let t273;
    	let li19;
    	let t275;
    	let li20;
    	let t277;
    	let li21;
    	let t279;
    	let li22;
    	let t281;
    	let li23;
    	let t283;
    	let li24;
    	let t285;
    	let p36;
    	let t286;
    	let b42;
    	let t288;
    	let b43;
    	let t290;
    	let b44;
    	let t292;
    	let a14;
    	let t294;
    	let b45;
    	let t296;
    	let t297;
    	let p37;
    	let t298;
    	let b46;
    	let t300;
    	let t301;
    	let ol6;
    	let li25;
    	let t303;
    	let li26;
    	let t305;
    	let li27;
    	let t307;
    	let p38;
    	let t309;
    	let p39;
    	let t310;
    	let b47;
    	let t312;
    	let t313;
    	let ol7;
    	let li28;
    	let t315;
    	let li29;
    	let t317;
    	let p40;
    	let t318;
    	let b48;
    	let t320;
    	let t321;
    	let h23;
    	let t323;
    	let p41;
    	let t325;
    	let ol8;
    	let li30;
    	let t327;
    	let li31;
    	let t328;
    	let b49;
    	let t330;
    	let b50;
    	let t332;
    	let t333;
    	let li32;
    	let t334;
    	let b51;
    	let t336;
    	let t337;
    	let p42;
    	let t338;
    	let b52;
    	let t340;
    	let b53;
    	let t342;
    	let t343;
    	let h24;
    	let t345;
    	let p43;
    	let t347;
    	let ol9;
    	let li33;
    	let b54;
    	let t349;
    	let b55;
    	let t351;
    	let t352;
    	let li34;
    	let b56;
    	let t354;
    	let b57;
    	let t356;
    	let b58;
    	let t358;
    	let t359;
    	let li35;
    	let b59;
    	let t361;
    	let b60;
    	let t363;
    	let t364;
    	let li36;
    	let b61;
    	let t366;
    	let t367;
    	let li37;
    	let b62;
    	let t369;
    	let b63;
    	let t371;
    	let t372;
    	let li38;
    	let b64;
    	let t374;
    	let b65;
    	let t376;
    	let t377;
    	let li39;
    	let b66;
    	let t379;
    	let b67;
    	let t381;
    	let t382;
    	let current;
    	let mounted;
    	let dispose;

    	icon0 = new Icon({
    			props: { name: "code", size: "64" },
    			$$inline: true
    		});

    	icon1 = new Icon({
    			props: { name: "box", size: "64" },
    			$$inline: true
    		});

    	icon2 = new Icon({
    			props: { name: "sliders", size: "64" },
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			hero = element("hero");
    			h10 = element("h1");
    			h10.textContent = "fsck CSS";
    			t1 = space();
    			p0 = element("p");
    			t2 = text("An experiment in cleaning up CSS and HTML with modern tools like ");
    			b0 = element("b");
    			b0.textContent = "flexbox";
    			t4 = text(" and ");
    			b1 = element("b");
    			b1.textContent = "grids";
    			t6 = text(".");
    			t7 = space();
    			hr0 = element("hr");
    			t8 = space();
    			section0 = element("section");
    			aside0 = element("aside");
    			h30 = element("h3");
    			h30.textContent = "Remove Classes";
    			t10 = space();
    			create_component(icon0.$$.fragment);
    			t11 = space();
    			p1 = element("p");
    			t12 = text("Using a classless style like ");
    			a0 = element("a");
    			a0.textContent = "MVP.css";
    			t14 = text(", you\n      bring back CSS specificity to its original intent.");
    			t15 = space();
    			aside1 = element("aside");
    			h31 = element("h3");
    			h31.textContent = "Add Flexbox + Grids";
    			t17 = space();
    			create_component(icon1.$$.fragment);
    			t18 = space();
    			p2 = element("p");
    			t19 = text("Using ");
    			a1 = element("a");
    			a1.textContent = "flexbox";
    			t21 = text(" and ");
    			a2 = element("a");
    			a2.textContent = "CSS grids";
    			t23 = text(" you can layout anything you want without structure divs.");
    			t24 = space();
    			aside2 = element("aside");
    			h32 = element("h3");
    			h32.textContent = "Modify with Variables";
    			t26 = space();
    			create_component(icon2.$$.fragment);
    			t27 = space();
    			p3 = element("p");
    			p3.textContent = "Using CSS variables you can replace many uses of classes and ids, avoiding most specificity\n      issues. Try the dark mode button below.";
    			t29 = space();
    			rationale = element("rationale");
    			section1 = element("section");
    			h11 = element("h1");
    			h11.textContent = "Cleaner CSS";
    			t31 = space();
    			p4 = element("p");
    			t32 = text("This website is nothing more than a set of small demos for the idea of\n  using flexbox and grids to clean up and simplify CSS. Most everything else\n  about CSS stays.  Filters, transforms, attributes, and everything that\n  applies to the visual display of the components of a design.  What gets\n  removed is ");
    			b2 = element("b");
    			b2.textContent = "div";
    			t34 = text(" heavy, class heavy, not-semantic-at-all layout\n  systems cluttering the real information available through simple HTML\n  tags.");
    			t35 = space();
    			p5 = element("p");
    			p5.textContent = "In short, if you're writing this:";
    			t37 = space();
    			section2 = element("section");
    			aside3 = element("aside");
    			pre0 = element("pre");
    			pre0.textContent = "<div class=\"grid col-1\">\n  <div class=\"card\">\n  ...\n  </div>\n</div>";
    			t39 = space();
    			p6 = element("p");
    			p6.textContent = "You could write this if you use flexbox, grids, and variables:";
    			t41 = space();
    			section3 = element("section");
    			aside4 = element("aside");
    			pre1 = element("pre");
    			pre1.textContent = "<card>\n  ...\n</card>";
    			t43 = space();
    			hr1 = element("hr");
    			t44 = space();
    			section4 = element("section");
    			p7 = element("p");
    			t45 = text("I demonstrate the idea with a series of copies of existing websites and other layout problems \n    people frequently encounter.  If you have a suggested layout challenge for me, then tell me on Twitter ");
    			a3 = element("a");
    			a3.textContent = "@lzsthw";
    			t47 = text(" and I'll give it a shot.");
    			t48 = space();
    			a4 = element("a");
    			button = element("button");
    			button.textContent = "View The Demos";
    			t50 = space();
    			hr2 = element("hr");
    			t51 = space();
    			h12 = element("h1");
    			h12.textContent = "Discussion";
    			t53 = space();
    			p8 = element("p");
    			p8.textContent = "We can analyze the problems with modern CSS by looking at how popular frameworks use specificity and the cascade:";
    			t55 = space();
    			ol0 = element("ol");
    			li0 = element("li");
    			t56 = text("Relying on ");
    			b3 = element("b");
    			b3.textContent = "div";
    			t58 = text(" to structure layout, which breaks the separation between display and content originally intended for CSS and HTML.");
    			t59 = space();
    			li1 = element("li");
    			t60 = text("Relying on ");
    			b4 = element("b");
    			b4.textContent = "class";
    			t62 = text(" (or worse ");
    			b5 = element("b");
    			b5.textContent = "tag.class=tag";
    			t64 = text(") which subverts the normal specificity rules originally intended to reduce duplication.");
    			t65 = space();
    			li2 = element("li");
    			li2.textContent = "Relying on the vaguely defined cascade rules to dominate the entire CSS cascade using #1 and #2.";
    			t67 = space();
    			h20 = element("h2");
    			h20.textContent = "<div> as Structure";
    			t69 = space();
    			p9 = element("p");
    			t70 = text("The simplest criticism is the use of ");
    			b6 = element("b");
    			b6.textContent = "div";
    			t72 = text(" as a structure element in the HTML.  Take this example from ");
    			a5 = element("a");
    			a5.textContent = "Bootstrap";
    			t74 = text(":");
    			t75 = space();
    			pre2 = element("pre");
    			code0 = element("code");
    			code0.textContent = "<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"col\">Column</div>\n    <div class=\"col\">Column</div>\n    <div class=\"w-100\"></div>\n    <div class=\"col\">Column</div>\n    <div class=\"col\">Column</div>\n  </div>\n</div>";
    			t77 = space();
    			p10 = element("p");
    			t78 = text("This simple example shows how a large proportion of modern CSS frameworks rely on ");
    			b7 = element("b");
    			b7.textContent = "div";
    			t80 = text(" to create structure and layouts when the ");
    			b8 = element("b");
    			b8.textContent = "div";
    			t82 = text(" has absolutely nothing to do with the content.  Another example from bootstrap is their image carousel:");
    			t83 = space();
    			pre3 = element("pre");
    			code1 = element("code");
    			code1.textContent = "<div id=\"carouselExampleSlidesOnly\" class=\"carousel slide\" data-ride=\"carousel\">\n  <div class=\"carousel-inner\">\n    <div class=\"carousel-item active\">\n      <img class=\"d-block w-100\" src=\"...\" alt=\"First slide\">\n    </div>\n    <div class=\"carousel-item\">\n      <img class=\"d-block w-100\" src=\"...\" alt=\"Second slide\">\n    </div>\n    <div class=\"carousel-item\">\n      <img class=\"d-block w-100\" src=\"...\" alt=\"Third slide\">\n    </div>\n  </div>\n</div>";
    			t85 = space();
    			p11 = element("p");
    			t86 = text("This snippet of code is 13 lines long of which only 3 are actually image content.  It also contains both ");
    			b9 = element("b");
    			b9.textContent = "id";
    			t88 = text(" and ");
    			b10 = element("b");
    			b10.textContent = "class";
    			t90 = text(" specificity, making it nearly impossible to override when used locally. If you compare that my Carousel demo you can see it much simpler:");
    			t91 = space();
    			pre4 = element("pre");
    			code2 = element("code");
    			code2.textContent = "<carousel>\n  <figure class=\"active\">\n    <img alt=\"Stock photo\" src=\"...\">\n    <figcaption>Image 1</figcaption>\n  </figure> \n\n  <!-- this image is not seen until set active -->\n  <figure>\n    <img alt=\"Stock photo\" src=\"...\">\n    <figcaption>Image 2</figcaption>\n  </figure> \n  <prev><Icon name=\"arrow-left\" size=\"48\" /></prev>\n  <next><Icon name=\"arrow-right\" size=\"48\" /></next>\n</carousel>";
    			t93 = space();
    			p12 = element("p");
    			p12.textContent = "This is the same numbe of lines of code, but every line is clearly idenfitied and easy to understand. Each part of the display is named, matches its use in the display, and is semantically related to the concept of images.";
    			t95 = space();
    			p13 = element("p");
    			t96 = text("CSS was designed to be a style sheet language used for describing the presentation of a document.  You can read from ");
    			a6 = element("a");
    			a6.textContent = "Mozilla their own explanation as well";
    			t98 = text(":");
    			t99 = space();
    			quote0 = element("quote");
    			quote0.textContent = "While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. For example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.";
    			t101 = space();
    			p14 = element("p");
    			t102 = text("The original intent of CSS--and still a major factor in its design--is that the HTML content doesn't have to change to alter the display for different situations.  ");
    			a7 = element("a");
    			a7.textContent = "CSS Zen Garden";
    			t104 = text(" is the classic example of the principle, with a single HTML document being styled in many different ways using only CSS.");
    			t105 = space();
    			p15 = element("p");
    			t106 = text("The above examples from Bootstrap (and most other CSS frameworks) subverts this original CSS design by forcing you to add non-semantic ");
    			b11 = element("b");
    			b11.textContent = "div";
    			t108 = text(" tags only to create a display structure (not information structure) for their CSS properties.");
    			t109 = space();
    			h33 = element("h3");
    			h33.textContent = "The Impact";
    			t111 = space();
    			p16 = element("p");
    			t112 = text("What's the impact of this ");
    			b12 = element("b");
    			b12.textContent = "div.class";
    			t114 = text(" heavy design?  By subverting CSS's original separation from the HTML you end up with the following usability problems:");
    			t115 = space();
    			ol1 = element("ol");
    			li3 = element("li");
    			li3.textContent = "Reasoning about the CSS visuals becomes more difficult due to the overlay of complicated boxes that have nothing to do with the visually perceived content.";
    			t117 = space();
    			li4 = element("li");
    			li4.textContent = "Understanding the document structure is more difficult because of the semantically irrelevant structure divs adding noise.";
    			t119 = space();
    			li5 = element("li");
    			t120 = text("Changing the structure--or even just fixing it--becomes more challenging since you have to alter ");
    			b13 = element("b");
    			b13.textContent = "both";
    			t122 = text(" your own CSS ");
    			b14 = element("b");
    			b14.textContent = "and";
    			t124 = text(" the HTML that uses their CSS structure divs.");
    			t125 = space();
    			li6 = element("li");
    			li6.textContent = "Debugging layout issues using the browser inspector tool is more difficult because you have to troll through the entire CSS structure div tree to find the style impacting your design decision.";
    			t127 = space();
    			li7 = element("li");
    			li7.textContent = "Debugging why your local design changes aren't working becomes a process of trolling through the CSS via the structure divs and slowly turning off CSS rules until you find the one breaking your design.";
    			t129 = space();
    			p17 = element("p");
    			p17.textContent = "A succinct way to put all of the above is this infection of CSS rules into the HTML document means you no longer have a single place to go when there's a problem with one, but instead have to constantly work in both to fix anything.  If a button isn't the right size, you can't simply go to the CSS and fix it.  You have to go to:";
    			t131 = space();
    			ol2 = element("ol");
    			li8 = element("li");
    			li8.textContent = "Your local CSS";
    			t133 = space();
    			li9 = element("li");
    			t134 = text("Your HTML with their ");
    			b15 = element("b");
    			b15.textContent = "divs";
    			t136 = space();
    			li10 = element("li");
    			li10.textContent = "Their CSS classes for each div";
    			t138 = space();
    			p18 = element("p");
    			p18.textContent = "This turns one target area for debugging the presentation (the CSS), into 3 potential interacting locations making it more difficult to solve the problem.  If you stick to \"layout and style is in CSS\" then when you have a problem with the layout or style...you just go to the CSS.";
    			t140 = space();
    			h21 = element("h2");
    			h21.textContent = "class as Configuration";
    			t142 = space();
    			p19 = element("p");
    			t143 = text("Let's take a look at a simple example from ");
    			a8 = element("a");
    			a8.textContent = "Bulma";
    			t145 = text(" to explain what's happening:");
    			t146 = space();
    			pre5 = element("pre");
    			code3 = element("code");
    			code3.textContent = "<button class=\"button\">\n  Button\n</button>\n\n<button class=\"button is-primary\">\n  Primary button\n</button>";
    			t148 = space();
    			p20 = element("p");
    			t149 = text("In this example we see that Bulma is using ");
    			b16 = element("b");
    			b16.textContent = "both";
    			t151 = text(" tags ");
    			b17 = element("b");
    			b17.textContent = "and";
    			t153 = text(" classes to style buttons.  This means that Bulma effectively corrupts 2/3rds of the specificity rules for its design (not to mention is needlessly repetitive).  If you used this code in a part of your app, but needed to slightly change the padding, you'd be forced to struggle with Bulma taking over 2 of the 3 slots reserved for specificity:");
    			t154 = space();
    			ol3 = element("ol");
    			li11 = element("li");
    			b18 = element("b");
    			b18.textContent = "button as a tag";
    			t156 = text(" means Bulma has taken over the specificity at the tag level.");
    			t157 = space();
    			li12 = element("li");
    			b19 = element("b");
    			b19.textContent = "class=button";
    			t159 = text(" means it's also taken the primary slot of class specificity.");
    			t160 = space();
    			li13 = element("li");
    			t161 = text("That leaves you with ");
    			b20 = element("b");
    			b20.textContent = "id";
    			t163 = text(" as your only way to modify a button, ");
    			b21 = element("b");
    			b21.textContent = "!important";
    			t165 = text(", or strange specificity hacks like doubling your ");
    			a9 = element("a");
    			a9.textContent = "classes as recommended by Mozilla.";
    			t167 = space();
    			h34 = element("h3");
    			h34.textContent = "Mozilla as Patient Zero";
    			t169 = space();
    			p21 = element("p");
    			t170 = text("Mozilla's recommendations are another source of confusion in CSS frameworks and is most likely the ");
    			b22 = element("b");
    			b22.textContent = "cause of frameworks using structure divs";
    			t172 = text(".  ");
    			a10 = element("a");
    			a10.textContent = "Mozilla recommends";
    			t174 = text(" that instead of using ");
    			b23 = element("b");
    			b23.textContent = "!important";
    			t176 = text(" you add a structure ");
    			b24 = element("b");
    			b24.textContent = "div";
    			t178 = text(" to get one more level of specificity:");
    			t179 = space();
    			pre6 = element("pre");
    			code4 = element("code");
    			code4.textContent = "<div id=\"test\">\n  <span>Text</span>\n</div>";
    			t181 = space();
    			pre7 = element("pre");
    			code5 = element("code");
    			code5.textContent = "div#test span { color: green; }\ndiv span { color: blue; }\nspan { color: red; }";
    			t183 = space();
    			p22 = element("p");
    			t184 = text("In this \"fix\" for ");
    			b25 = element("b");
    			b25.textContent = "!important";
    			t186 = text(" your only choice is to wrap the component you want to modify with even more ");
    			b26 = element("b");
    			b26.textContent = "div";
    			t188 = text(" structure and then create a more specific path with the new class.  The problem with this fix is it overcomplicates the HTML but ");
    			b27 = element("b");
    			b27.textContent = "also";
    			t190 = text(" breaks separation of content from style.  Rather than keep your content in HTML, and your style in CSS, you're now forced to infect your HTML with helpers for CSS, all because someone else thinks you shouldn't use ");
    			b28 = element("b");
    			b28.textContent = "!important";
    			t192 = text(" to override their classes.");
    			t193 = space();
    			p23 = element("p");
    			p23.textContent = "The other odd hack they recommend is simply doubling the class:";
    			t195 = space();
    			pre8 = element("pre");
    			code6 = element("code");
    			code6.textContent = "#myId#myId span { color: yellow; }\n.myClass.myClass span { color: orange; }";
    			t197 = space();
    			p24 = element("p");
    			t198 = text("There's no explanation regarding why this odd quirk of browsers isn't just a hack, but it's put forward as superior to the very clear ");
    			b29 = element("b");
    			b29.textContent = "!important";
    			t200 = text(".  It'd be incredibly easy to miss this double-class hack if you were trying to find it in the CSS, but finding ");
    			b30 = element("b");
    			b30.textContent = "!important";
    			t202 = text(" is trivial to find and fix later if you want. In fact, I can't actually see why this is better if it does the same thing as !important but in a sneaky way.");
    			t203 = space();
    			h35 = element("h3");
    			h35.textContent = "The Impact";
    			t205 = space();
    			p25 = element("p");
    			t206 = text("The end result of these recommendations from Mozilla is people solve specificity by adding on more and more ");
    			b31 = element("b");
    			b31.textContent = "divs";
    			t208 = text(" because they've used ");
    			b32 = element("b");
    			b32.textContent = "class";
    			t210 = text(" everywhere and can't get around the specificity calculations any other way. You can see this in how Bulma uses extra ");
    			b33 = element("b");
    			b33.textContent = "divs";
    			t212 = text(" in its forms:");
    			t213 = space();
    			pre9 = element("pre");
    			code7 = element("code");
    			code7.textContent = "<div class=\"field\">\n  <label class=\"label\">Subject</label>\n  <div class=\"control\">\n    <div class=\"select\">\n      <select>\n        <option>Select dropdown</option>\n        <option>With options</option>\n      </select>\n    </div>\n  </div>\n</div>";
    			t215 = space();
    			p26 = element("p");
    			t216 = text("You have three levels of ");
    			b34 = element("b");
    			b34.textContent = "divs";
    			t218 = text(" just to style a plain ");
    			b35 = element("b");
    			b35.textContent = "select";
    			t220 = text(" tag.  Most likely the use of classes forces Bulma to add more divs to increase specificity because they have hijacked the class ");
    			b36 = element("b");
    			b36.textContent = "specificity";
    			t222 = text(" everywhere.");
    			t223 = space();
    			p27 = element("p");
    			t224 = text("Meanwhile, similar styling is done in ");
    			a11 = element("a");
    			a11.textContent = "MVP.css";
    			t226 = text(" and other \"classless\" frameworks by using perfectly normal and valid tag based selectors:");
    			t227 = space();
    			pre10 = element("pre");
    			code8 = element("code");
    			code8.textContent = "select {\n    display: block;\n    font-size: inherit;\n    max-width: var(--width-card-wide);\n    border: 1px solid var(--color-bg-secondary);\n    border-radius: var(--border-radius);\n    margin-bottom: 1rem;\n    padding: 0.4rem 0.8rem;\n}";
    			t229 = space();
    			p28 = element("p");
    			t230 = text("We can also say that ");
    			b37 = element("b");
    			b37.textContent = "if";
    			t232 = text(" there is some failing of CSS that requires extra class divs then where is the explanation for this limitation?  Why can't we just use a simple tag selector to completely alter the appearance of a ");
    			b38 = element("b");
    			b38.textContent = "select";
    			t234 = text("?  Why is it suddenly these problems go away when I slather on a mountain of ");
    			b39 = element("b");
    			b39.textContent = "divs";
    			t236 = text("?  If this is really the situation then that means CSS has a serious flaw as the \"styling and layout\" component of the web and everyone advocating for it needs to be honest and stop blaming others for not knowing it well enough.  My understanding though is CSS is perfectly fine at styling a ");
    			b40 = element("b");
    			b40.textContent = "select";
    			t238 = text(" tag all you want, and it's the way CSS is used today that's causing the problems.");
    			t239 = space();
    			h22 = element("h2");
    			h22.textContent = "The Cascade";
    			t241 = space();
    			p29 = element("p");
    			t242 = text("At first glance most of the criticism might seem minor.  Who cares if a single .class in a single .css file overrides my local CSS?  That'd be fairly easy to find right?  Where this turns into a usability nightmare is when ");
    			a12 = element("a");
    			a12.textContent = "the cascade";
    			t244 = text(" is added to the system.  The cascade's purpose is to allow for CSS styles to come from different sources, but combine in a kind of hierarchy of importance.  From ");
    			a13 = element("a");
    			a13.textContent = "Mozilla's documentation";
    			t246 = text(" we can see an initial problem:");
    			t247 = space();
    			quote1 = element("quote");
    			p30 = element("p");
    			p30.textContent = "Only CSS declarations, that is property/value pairs, participate in the cascade. This means that at-rules containing entities other than declarations, such as a @font-face rule containing descriptors, don't participate in the cascade. In these cases, only the at-rule as a whole participates in the cascade: here, the @font-face identified by its font-family descriptor. If several @font-face rules with the same descriptor are defined, only the most appropriate @font-face, as a whole, is considered.";
    			t249 = space();
    			p31 = element("p");
    			p31.textContent = "While the declarations contained in most at-rules — such as those in @media, @document, or @supports — participate in the cascade, declarations contained in @keyframes don't. As with @font-face, only the at-rule as a whole is selected via the cascade algorithm.";
    			t251 = space();
    			p32 = element("p");
    			p32.textContent = "Finally, note that @import and @charset obey specific algorithms and aren't affected by the cascade algorithm.";
    			t253 = space();
    			p33 = element("p");
    			t254 = text("So the cascade combines properties from ");
    			b41 = element("b");
    			b41.textContent = "different sources";
    			t256 = text(" but only properties that aren't @at-rules containing ");
    			em = element("em");
    			em.textContent = "descriptors";
    			t258 = text(", and @import or @charset follow another set of rules entirely.  Got it?  Great. So easy and consistent, and we're not done yet.");
    			t259 = space();
    			p34 = element("p");
    			p34.textContent = "Mozilla goes on to define the order these rules are processed (minus all the edge cases of @at-rules):";
    			t261 = space();
    			quote2 = element("quote");
    			ol4 = element("ol");
    			li14 = element("li");
    			li14.textContent = "It first filters all the rules from the different sources to keep only the rules that apply to a given element.";
    			t263 = space();
    			li15 = element("li");
    			li15.textContent = "Then it sorts these rules according to their importance, that is, whether or not they are followed by !important, and by their origin.";
    			t265 = space();
    			li16 = element("li");
    			li16.textContent = "In case of equality, the specificity of a value is considered to choose one or the other.";
    			t267 = space();
    			p35 = element("p");
    			p35.textContent = "What is this ordering of rules?  Why a handy list in this order (which isn't clearly described as being in most or least important ordering):";
    			t269 = space();
    			quote3 = element("quote");
    			ol5 = element("ol");
    			li17 = element("li");
    			li17.textContent = "user agent == normal";
    			t271 = space();
    			li18 = element("li");
    			li18.textContent = "user == normal";
    			t273 = space();
    			li19 = element("li");
    			li19.textContent = "author == normal";
    			t275 = space();
    			li20 = element("li");
    			li20.textContent = "animations ==";
    			t277 = space();
    			li21 = element("li");
    			li21.textContent = "author == !important";
    			t279 = space();
    			li22 = element("li");
    			li22.textContent = "user == !important";
    			t281 = space();
    			li23 = element("li");
    			li23.textContent = "user agent == !important";
    			t283 = space();
    			li24 = element("li");
    			li24.textContent = "transitions";
    			t285 = space();
    			p36 = element("p");
    			t286 = text("However, these calculations are completely pointless because ");
    			b42 = element("b");
    			b42.textContent = "user style sheets have been slowly phased out.";
    			t288 = text(" A \"user style\" is a piece of CSS that someone who is ");
    			b43 = element("b");
    			b43.textContent = "using";
    			t290 = text(" a browser adds--on their own computer--to change the defaults set by the ");
    			b44 = element("b");
    			b44.textContent = "author";
    			t292 = text(" of the site. The catch is, Chrome ");
    			a14 = element("a");
    			a14.textContent = "does not support user style sheets";
    			t294 = text(", and it's the most popular browser. That means they are completely dead for practical purposes.  That leaves the user agent, which is usually reset by designers anyway, and \"author\" styles which is simply, ");
    			b45 = element("b");
    			b45.textContent = "\"all of the CSS you write\"";
    			t296 = text(".");
    			t297 = space();
    			p37 = element("p");
    			t298 = text("The confusing part of this description is it makes it ");
    			b46 = element("b");
    			b46.textContent = "seem";
    			t300 = text(" like someone writing a web page is having to contend with these rules that include user styles when you actually have zero control over them, so they don't matter.  The real calculations for practical purposes should be (from least to most important):");
    			t301 = space();
    			ol6 = element("ol");
    			li25 = element("li");
    			li25.textContent = "Sort by !important.";
    			t303 = space();
    			li26 = element("li");
    			li26.textContent = "Sort by specificity.";
    			t305 = space();
    			li27 = element("li");
    			li27.textContent = "Sort by order, later wins over earlier.";
    			t307 = space();
    			p38 = element("p");
    			p38.textContent = "That's it.  User agent styles are so low level they are easily replaced with a reset style.  No user agents have !important rules (that I know of), and if they do this means you probably can't change them anyway.  You can't control user styles as that's added by the user out of your control, so trying to add them to your calculations is meaningless.  That leaves only the rules for cascade precedence in the CSS you write, and this simplifies the ordering.";
    			t309 = space();
    			p39 = element("p");
    			t310 = text("Remember how you were admonished to never use ");
    			b47 = element("b");
    			b47.textContent = "!important";
    			t312 = text("?  If you follow that edict, then, that means we finally arrive at only two sorting rules:");
    			t313 = space();
    			ol7 = element("ol");
    			li28 = element("li");
    			li28.textContent = "Sort by specificity.";
    			t315 = space();
    			li29 = element("li");
    			li29.textContent = "Sort by order, later wins over earlier.";
    			t317 = space();
    			p40 = element("p");
    			t318 = text("But finally, the last rule of sorting by order is ");
    			b48 = element("b");
    			b48.textContent = "only if there's a tie";
    			t320 = text(" in the previous sorting.  That means there's really only 1 rule, or maybe 1.5 rules, where you sort by specificity only and then order wins in a tie.");
    			t321 = space();
    			h23 = element("h2");
    			h23.textContent = "The Impact";
    			t323 = space();
    			p41 = element("p");
    			p41.textContent = "I call these simplified practical rules the \"real cascade\" because they're the practical sorting rules you actually have to deal with, and they also help finally describe how modern CSS breaks this sorting cascade to make CSS harder:";
    			t325 = space();
    			ol8 = element("ol");
    			li30 = element("li");
    			li30.textContent = "If we sort by !important, but nobody uses !important, then the only sorting done is by specificity.";
    			t327 = space();
    			li31 = element("li");
    			t328 = text("If we sort by specificity 99% of the time, then modern CSS forces itself into the second highest priority of the sorting calculation leaving no room for your own local ");
    			b49 = element("b");
    			b49.textContent = "class";
    			t330 = text(" or ");
    			b50 = element("b");
    			b50.textContent = "tag";
    			t332 = text(" styles.");
    			t333 = space();
    			li32 = element("li");
    			t334 = text("If we then sort by order of declaration ");
    			b51 = element("b");
    			b51.textContent = "on specificity ties";
    			t336 = text(" it doesn't matter because #2 means the CSS framework will win unless we add an additional structure div to increase specificity, use the double-class trick, or add !important (which everyone says not to do).");
    			t337 = space();
    			p42 = element("p");
    			t338 = text("Effectively, this situation promotes CSS frameworks winning over your own styles, encourages convoluted nested ");
    			b52 = element("b");
    			b52.textContent = "div";
    			t340 = text(" structure to hack specificity, and complicates cascade calculations needlessly by changing the priority of an author style that uses ");
    			b53 = element("b");
    			b53.textContent = "div.class";
    			t342 = text(" such that it's difficult to modify design elements locally.");
    			t343 = space();
    			h24 = element("h2");
    			h24.textContent = "An Alternative Approach";
    			t345 = space();
    			p43 = element("p");
    			p43.textContent = "Can we simplify CSS usage to avoid as many pitfalls as possible while still allowing for modern visual presentation?  Since CSS lacks clear rules for the cascade, and has overly complicated rules governing the calculations of specificity using these unclear cascade rules, a good approach is to simply avoid as many of these rules as possible.  We can do this by realizing that...we can just not use most of this:";
    			t347 = space();
    			ol9 = element("ol");
    			li33 = element("li");
    			b54 = element("b");
    			b54.textContent = "Simplify specificity";
    			t349 = text(" by using tag selectors (aka type selectors) instead ");
    			b55 = element("b");
    			b55.textContent = "classes";
    			t351 = text(".");
    			t352 = space();
    			li34 = element("li");
    			b56 = element("b");
    			b56.textContent = "Simplify HTML";
    			t354 = text(" by using actual ");
    			b57 = element("b");
    			b57.textContent = "<tags>";
    			t356 = text(" instead of ");
    			b58 = element("b");
    			b58.textContent = "<div.class=\"basically-a-tag\">";
    			t358 = text(".");
    			t359 = space();
    			li35 = element("li");
    			b59 = element("b");
    			b59.textContent = "Simplify layout and HTML";
    			t361 = text(" by using flexbox and CSS grids instead of convoluted structure ");
    			b60 = element("b");
    			b60.textContent = "divs";
    			t363 = text(".");
    			t364 = space();
    			li36 = element("li");
    			b61 = element("b");
    			b61.textContent = "Simplify visual reasoning";
    			t366 = text(" by naming tags to match their actual role in the visual display.");
    			t367 = space();
    			li37 = element("li");
    			b62 = element("b");
    			b62.textContent = "Simplify interactions";
    			t369 = text(" by using ");
    			b63 = element("b");
    			b63.textContent = "class";
    			t371 = text(" sparingly for variants or state changes.");
    			t372 = space();
    			li38 = element("li");
    			b64 = element("b");
    			b64.textContent = "Simplify extension and modification";
    			t374 = text(" by using ");
    			b65 = element("b");
    			b65.textContent = "id";
    			t376 = text(" for specific local elements that have their own style changes overriding the previous definitions.");
    			t377 = space();
    			li39 = element("li");
    			b66 = element("b");
    			b66.textContent = "Simplify development";
    			t379 = text(" by adding more complicated CSS ");
    			b67 = element("b");
    			b67.textContent = "after";
    			t381 = text(" you get simpler CSS working.");
    			t382 = text("\n\nLinks:\n\nhttps://www.w3.org/TR/CSS22/cascade.html#specificity");
    			attr_dev(h10, "class", "svelte-1nza6iy");
    			add_location(h10, file$1, 41, 0, 660);
    			add_location(b0, file$1, 42, 68, 746);
    			add_location(b1, file$1, 42, 87, 765);
    			add_location(p0, file$1, 42, 0, 678);
    			attr_dev(hero, "class", "svelte-1nza6iy");
    			add_location(hero, file$1, 40, 0, 653);
    			add_location(hr0, file$1, 45, 0, 792);
    			add_location(h30, file$1, 49, 4, 822);
    			attr_dev(a0, "href", "https://andybrewer.github.io/mvp/");
    			attr_dev(a0, "class", "svelte-1nza6iy");
    			add_location(a0, file$1, 51, 36, 917);
    			add_location(p1, file$1, 51, 4, 885);
    			attr_dev(aside0, "class", "svelte-1nza6iy");
    			add_location(aside0, file$1, 48, 2, 810);
    			add_location(h31, file$1, 56, 4, 1065);
    			attr_dev(a1, "href", "https://css-tricks.com/snippets/css/a-guide-to-flexbox/");
    			attr_dev(a1, "class", "svelte-1nza6iy");
    			add_location(a1, file$1, 58, 13, 1141);
    			attr_dev(a2, "href", "https://css-tricks.com/snippets/css/complete-guide-grid/");
    			attr_dev(a2, "class", "svelte-1nza6iy");
    			add_location(a2, file$1, 58, 95, 1223);
    			add_location(p2, file$1, 58, 4, 1132);
    			attr_dev(aside1, "class", "svelte-1nza6iy");
    			add_location(aside1, file$1, 55, 2, 1053);
    			add_location(h32, file$1, 62, 4, 1391);
    			add_location(p3, file$1, 64, 4, 1464);
    			add_location(aside2, file$1, 61, 2, 1379);
    			add_location(section0, file$1, 47, 0, 798);
    			add_location(h11, file$1, 73, 2, 1662);
    			add_location(section1, file$1, 72, 0, 1650);
    			add_location(b2, file$1, 80, 13, 2006);
    			add_location(p4, file$1, 76, 0, 1695);
    			add_location(p5, file$1, 84, 0, 2149);
    			add_location(pre0, file$1, 88, 4, 2215);
    			add_location(aside3, file$1, 87, 2, 2203);
    			add_location(section2, file$1, 86, 0, 2191);
    			add_location(p6, file$1, 98, 0, 2347);
    			add_location(pre1, file$1, 102, 4, 2442);
    			add_location(aside4, file$1, 101, 2, 2430);
    			add_location(section3, file$1, 100, 0, 2418);
    			add_location(hr1, file$1, 110, 0, 2515);
    			attr_dev(a3, "href", "https://twitter.com/lzsthw");
    			add_location(a3, file$1, 113, 107, 2737);
    			add_location(p7, file$1, 112, 2, 2532);
    			add_location(button, file$1, 115, 28, 2846);
    			attr_dev(a4, "href", "/demos");
    			add_location(a4, file$1, 115, 2, 2820);
    			add_location(section4, file$1, 111, 0, 2520);
    			add_location(hr2, file$1, 118, 0, 2894);
    			add_location(h12, file$1, 119, 0, 2899);
    			add_location(p8, file$1, 121, 0, 2920);
    			add_location(b3, file$1, 123, 17, 3063);
    			add_location(li0, file$1, 123, 2, 3048);
    			add_location(b4, file$1, 124, 17, 3211);
    			add_location(b5, file$1, 124, 40, 3234);
    			add_location(li1, file$1, 124, 2, 3196);
    			add_location(li2, file$1, 125, 2, 3350);
    			add_location(ol0, file$1, 122, 0, 3041);
    			add_location(h20, file$1, 128, 0, 3463);
    			add_location(b6, file$1, 130, 40, 3538);
    			attr_dev(a5, "href", "https://getbootstrap.com/docs/4.0/layout/grid/");
    			add_location(a5, file$1, 130, 111, 3609);
    			add_location(p9, file$1, 130, 0, 3498);
    			attr_dev(code0, "class", "language-html svelte-1nza6iy");
    			add_location(code0, file$1, 133, 0, 3692);
    			attr_dev(pre2, "class", "svelte-1nza6iy");
    			add_location(pre2, file$1, 132, 0, 3686);
    			add_location(b7, file$1, 146, 85, 4132);
    			add_location(b8, file$1, 146, 137, 4184);
    			add_location(p10, file$1, 146, 0, 4047);
    			attr_dev(code1, "class", "language-html svelte-1nza6iy");
    			add_location(code1, file$1, 149, 0, 4310);
    			attr_dev(pre3, "class", "svelte-1nza6iy");
    			add_location(pre3, file$1, 148, 0, 4304);
    			add_location(b9, file$1, 166, 108, 4992);
    			add_location(b10, file$1, 166, 122, 5006);
    			add_location(p11, file$1, 166, 0, 4884);
    			attr_dev(code2, "class", "language-html svelte-1nza6iy");
    			add_location(code2, file$1, 169, 0, 5168);
    			attr_dev(pre4, "class", "svelte-1nza6iy");
    			add_location(pre4, file$1, 168, 0, 5162);
    			add_location(p12, file$1, 187, 0, 5720);
    			attr_dev(a6, "href", "https://developer.mozilla.org/en-US/docs/Learn/CSS");
    			add_location(a6, file$1, 189, 120, 6071);
    			add_location(p13, file$1, 189, 0, 5951);
    			attr_dev(quote0, "class", "svelte-1nza6iy");
    			add_location(quote0, file$1, 191, 0, 6180);
    			attr_dev(a7, "href", "https://developer.mozilla.org/en-US/docs/Learn/CSS");
    			add_location(a7, file$1, 195, 167, 6652);
    			add_location(p14, file$1, 195, 0, 6485);
    			add_location(b11, file$1, 197, 138, 6996);
    			add_location(p15, file$1, 197, 0, 6858);
    			add_location(h33, file$1, 199, 0, 7106);
    			add_location(b12, file$1, 201, 29, 7156);
    			add_location(p16, file$1, 201, 0, 7127);
    			add_location(li3, file$1, 204, 2, 7304);
    			add_location(li4, file$1, 205, 2, 7471);
    			add_location(b13, file$1, 206, 103, 7706);
    			add_location(b14, file$1, 206, 128, 7731);
    			add_location(li5, file$1, 206, 2, 7605);
    			add_location(li6, file$1, 207, 2, 7794);
    			add_location(li7, file$1, 208, 2, 7998);
    			add_location(ol1, file$1, 203, 0, 7297);
    			add_location(p17, file$1, 211, 0, 8216);
    			add_location(li8, file$1, 214, 2, 8562);
    			add_location(b15, file$1, 215, 27, 8613);
    			add_location(li9, file$1, 215, 2, 8588);
    			add_location(li10, file$1, 216, 2, 8632);
    			add_location(ol2, file$1, 213, 0, 8555);
    			add_location(p18, file$1, 219, 0, 8679);
    			add_location(h21, file$1, 221, 0, 8968);
    			attr_dev(a8, "href", "https://bulma.io/documentation/overview/modular/");
    			add_location(a8, file$1, 223, 46, 9047);
    			add_location(p19, file$1, 223, 0, 9001);
    			attr_dev(code3, "class", "language-html svelte-1nza6iy");
    			add_location(code3, file$1, 226, 4, 9160);
    			attr_dev(pre5, "class", "svelte-1nza6iy");
    			add_location(pre5, file$1, 225, 0, 9150);
    			add_location(b16, file$1, 237, 46, 9385);
    			add_location(b17, file$1, 237, 63, 9402);
    			add_location(p20, file$1, 237, 0, 9339);
    			add_location(b18, file$1, 240, 6, 9772);
    			add_location(li11, file$1, 240, 2, 9768);
    			add_location(b19, file$1, 241, 6, 9867);
    			add_location(li12, file$1, 241, 2, 9863);
    			add_location(b20, file$1, 242, 27, 9980);
    			add_location(b21, file$1, 242, 74, 10027);
    			attr_dev(a9, "href", "https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception");
    			add_location(a9, file$1, 242, 141, 10094);
    			add_location(li13, file$1, 242, 2, 9955);
    			add_location(ol3, file$1, 239, 0, 9761);
    			add_location(h34, file$1, 245, 0, 10241);
    			add_location(b22, file$1, 247, 102, 10377);
    			attr_dev(a10, "href", "https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception");
    			add_location(a10, file$1, 247, 152, 10427);
    			add_location(b23, file$1, 247, 293, 10568);
    			add_location(b24, file$1, 247, 331, 10606);
    			add_location(p21, file$1, 247, 0, 10275);
    			attr_dev(code4, "class", "language-html svelte-1nza6iy");
    			add_location(code4, file$1, 250, 0, 10666);
    			attr_dev(pre6, "class", "svelte-1nza6iy");
    			add_location(pre6, file$1, 249, 0, 10660);
    			attr_dev(code5, "class", "language-css svelte-1nza6iy");
    			add_location(code5, file$1, 258, 0, 10784);
    			attr_dev(pre7, "class", "svelte-1nza6iy");
    			add_location(pre7, file$1, 257, 0, 10778);
    			add_location(b25, file$1, 265, 21, 10970);
    			add_location(b26, file$1, 265, 115, 11064);
    			add_location(b27, file$1, 265, 255, 11204);
    			add_location(b28, file$1, 265, 481, 11430);
    			add_location(p22, file$1, 265, 0, 10949);
    			add_location(p23, file$1, 267, 0, 11480);
    			attr_dev(code6, "class", "language-css svelte-1nza6iy");
    			add_location(code6, file$1, 270, 0, 11558);
    			attr_dev(pre8, "class", "svelte-1nza6iy");
    			add_location(pre8, file$1, 269, 0, 11552);
    			add_location(b29, file$1, 276, 137, 11829);
    			add_location(b30, file$1, 276, 266, 11958);
    			add_location(p24, file$1, 276, 0, 11692);
    			add_location(h35, file$1, 278, 0, 12137);
    			add_location(b31, file$1, 280, 111, 12269);
    			add_location(b32, file$1, 280, 144, 12302);
    			add_location(b33, file$1, 280, 274, 12432);
    			add_location(p25, file$1, 280, 0, 12158);
    			attr_dev(code7, "class", "language-html svelte-1nza6iy");
    			add_location(code7, file$1, 283, 0, 12469);
    			attr_dev(pre9, "class", "svelte-1nza6iy");
    			add_location(pre9, file$1, 282, 0, 12463);
    			add_location(b34, file$1, 298, 28, 12871);
    			add_location(b35, file$1, 298, 62, 12905);
    			add_location(b36, file$1, 298, 204, 13047);
    			add_location(p26, file$1, 298, 0, 12843);
    			attr_dev(a11, "href", "https://andybrewer.github.io/mvp/");
    			add_location(a11, file$1, 301, 41, 13125);
    			add_location(p27, file$1, 301, 0, 13084);
    			attr_dev(code8, "class", "language-css svelte-1nza6iy");
    			add_location(code8, file$1, 304, 0, 13282);
    			attr_dev(pre10, "class", "svelte-1nza6iy");
    			add_location(pre10, file$1, 303, 0, 13276);
    			add_location(b37, file$1, 317, 24, 13601);
    			add_location(b38, file$1, 317, 230, 13807);
    			add_location(b39, file$1, 317, 320, 13897);
    			add_location(b40, file$1, 317, 623, 14200);
    			add_location(p28, file$1, 317, 0, 13577);
    			add_location(h22, file$1, 319, 0, 14301);
    			attr_dev(a12, "href", "https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade");
    			add_location(a12, file$1, 321, 226, 14549);
    			attr_dev(a13, "href", "https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade");
    			add_location(a13, file$1, 321, 471, 14794);
    			add_location(p29, file$1, 321, 0, 14323);
    			add_location(p30, file$1, 324, 0, 14933);
    			add_location(p31, file$1, 326, 0, 15443);
    			add_location(p32, file$1, 328, 0, 15713);
    			attr_dev(quote1, "class", "svelte-1nza6iy");
    			add_location(quote1, file$1, 323, 0, 14925);
    			add_location(b41, file$1, 331, 43, 15884);
    			add_location(em, file$1, 331, 121, 15962);
    			add_location(p33, file$1, 331, 0, 15841);
    			add_location(p34, file$1, 333, 0, 16116);
    			add_location(li14, file$1, 337, 2, 16242);
    			add_location(li15, file$1, 338, 2, 16365);
    			add_location(li16, file$1, 339, 2, 16511);
    			add_location(ol4, file$1, 336, 0, 16235);
    			attr_dev(quote2, "class", "svelte-1nza6iy");
    			add_location(quote2, file$1, 335, 0, 16227);
    			add_location(p35, file$1, 343, 0, 16626);
    			add_location(li17, file$1, 347, 2, 16791);
    			add_location(li18, file$1, 348, 2, 16823);
    			add_location(li19, file$1, 349, 2, 16849);
    			add_location(li20, file$1, 350, 2, 16877);
    			add_location(li21, file$1, 351, 2, 16903);
    			add_location(li22, file$1, 352, 2, 16935);
    			add_location(li23, file$1, 353, 2, 16965);
    			add_location(li24, file$1, 354, 2, 17001);
    			add_location(ol5, file$1, 346, 0, 16784);
    			attr_dev(quote3, "class", "svelte-1nza6iy");
    			add_location(quote3, file$1, 345, 0, 16776);
    			add_location(b42, file$1, 358, 64, 17102);
    			add_location(b43, file$1, 358, 171, 17209);
    			add_location(b44, file$1, 358, 257, 17295);
    			attr_dev(a14, "href", "https://bugs.chromium.org/p/chromium/issues/detail?id=347016");
    			add_location(a14, file$1, 358, 305, 17343);
    			add_location(b45, file$1, 358, 621, 17659);
    			add_location(p36, file$1, 358, 0, 17038);
    			add_location(b46, file$1, 360, 57, 17756);
    			add_location(p37, file$1, 360, 0, 17699);
    			add_location(li25, file$1, 363, 2, 18032);
    			add_location(li26, file$1, 364, 2, 18063);
    			add_location(li27, file$1, 365, 2, 18095);
    			add_location(ol6, file$1, 362, 0, 18025);
    			add_location(p38, file$1, 368, 0, 18151);
    			add_location(b47, file$1, 370, 49, 18667);
    			add_location(p39, file$1, 370, 0, 18618);
    			add_location(li28, file$1, 373, 2, 18787);
    			add_location(li29, file$1, 374, 2, 18819);
    			add_location(ol7, file$1, 372, 0, 18780);
    			add_location(b48, file$1, 377, 53, 18928);
    			add_location(p40, file$1, 377, 0, 18875);
    			add_location(h23, file$1, 380, 0, 19113);
    			add_location(p41, file$1, 382, 0, 19134);
    			add_location(li30, file$1, 385, 2, 19383);
    			add_location(b49, file$1, 386, 174, 19666);
    			add_location(b50, file$1, 386, 190, 19682);
    			add_location(li31, file$1, 386, 2, 19494);
    			add_location(b51, file$1, 387, 46, 19752);
    			add_location(li32, file$1, 387, 2, 19708);
    			add_location(ol8, file$1, 384, 0, 19376);
    			add_location(b52, file$1, 390, 114, 20113);
    			add_location(b53, file$1, 390, 258, 20257);
    			add_location(p42, file$1, 390, 0, 19999);
    			add_location(h24, file$1, 392, 0, 20339);
    			add_location(p43, file$1, 394, 0, 20373);
    			add_location(b54, file$1, 397, 6, 20806);
    			add_location(b55, file$1, 397, 86, 20886);
    			add_location(li33, file$1, 397, 2, 20802);
    			add_location(b56, file$1, 398, 6, 20913);
    			add_location(b57, file$1, 398, 43, 20950);
    			add_location(b58, file$1, 398, 74, 20981);
    			add_location(li34, file$1, 398, 2, 20909);
    			add_location(b59, file$1, 399, 6, 21036);
    			add_location(b60, file$1, 399, 101, 21131);
    			add_location(li35, file$1, 399, 2, 21032);
    			add_location(b61, file$1, 400, 6, 21155);
    			add_location(li36, file$1, 400, 2, 21151);
    			add_location(b62, file$1, 401, 6, 21264);
    			add_location(b63, file$1, 401, 44, 21302);
    			add_location(li37, file$1, 401, 2, 21260);
    			add_location(b64, file$1, 402, 6, 21367);
    			add_location(b65, file$1, 402, 58, 21419);
    			add_location(li38, file$1, 402, 2, 21363);
    			add_location(b66, file$1, 403, 6, 21539);
    			add_location(b67, file$1, 403, 65, 21598);
    			add_location(li39, file$1, 403, 2, 21535);
    			add_location(ol9, file$1, 396, 0, 20795);
    			attr_dev(rationale, "class", "svelte-1nza6iy");
    			add_location(rationale, file$1, 71, 0, 1638);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, hero, anchor);
    			append_dev(hero, h10);
    			append_dev(hero, t1);
    			append_dev(hero, p0);
    			append_dev(p0, t2);
    			append_dev(p0, b0);
    			append_dev(p0, t4);
    			append_dev(p0, b1);
    			append_dev(p0, t6);
    			insert_dev(target, t7, anchor);
    			insert_dev(target, hr0, anchor);
    			insert_dev(target, t8, anchor);
    			insert_dev(target, section0, anchor);
    			append_dev(section0, aside0);
    			append_dev(aside0, h30);
    			append_dev(aside0, t10);
    			mount_component(icon0, aside0, null);
    			append_dev(aside0, t11);
    			append_dev(aside0, p1);
    			append_dev(p1, t12);
    			append_dev(p1, a0);
    			append_dev(p1, t14);
    			append_dev(section0, t15);
    			append_dev(section0, aside1);
    			append_dev(aside1, h31);
    			append_dev(aside1, t17);
    			mount_component(icon1, aside1, null);
    			append_dev(aside1, t18);
    			append_dev(aside1, p2);
    			append_dev(p2, t19);
    			append_dev(p2, a1);
    			append_dev(p2, t21);
    			append_dev(p2, a2);
    			append_dev(p2, t23);
    			append_dev(section0, t24);
    			append_dev(section0, aside2);
    			append_dev(aside2, h32);
    			append_dev(aside2, t26);
    			mount_component(icon2, aside2, null);
    			append_dev(aside2, t27);
    			append_dev(aside2, p3);
    			insert_dev(target, t29, anchor);
    			insert_dev(target, rationale, anchor);
    			append_dev(rationale, section1);
    			append_dev(section1, h11);
    			append_dev(rationale, t31);
    			append_dev(rationale, p4);
    			append_dev(p4, t32);
    			append_dev(p4, b2);
    			append_dev(p4, t34);
    			append_dev(rationale, t35);
    			append_dev(rationale, p5);
    			append_dev(rationale, t37);
    			append_dev(rationale, section2);
    			append_dev(section2, aside3);
    			append_dev(aside3, pre0);
    			append_dev(rationale, t39);
    			append_dev(rationale, p6);
    			append_dev(rationale, t41);
    			append_dev(rationale, section3);
    			append_dev(section3, aside4);
    			append_dev(aside4, pre1);
    			append_dev(rationale, t43);
    			append_dev(rationale, hr1);
    			append_dev(rationale, t44);
    			append_dev(rationale, section4);
    			append_dev(section4, p7);
    			append_dev(p7, t45);
    			append_dev(p7, a3);
    			append_dev(p7, t47);
    			append_dev(section4, t48);
    			append_dev(section4, a4);
    			append_dev(a4, button);
    			append_dev(rationale, t50);
    			append_dev(rationale, hr2);
    			append_dev(rationale, t51);
    			append_dev(rationale, h12);
    			append_dev(rationale, t53);
    			append_dev(rationale, p8);
    			append_dev(rationale, t55);
    			append_dev(rationale, ol0);
    			append_dev(ol0, li0);
    			append_dev(li0, t56);
    			append_dev(li0, b3);
    			append_dev(li0, t58);
    			append_dev(ol0, t59);
    			append_dev(ol0, li1);
    			append_dev(li1, t60);
    			append_dev(li1, b4);
    			append_dev(li1, t62);
    			append_dev(li1, b5);
    			append_dev(li1, t64);
    			append_dev(ol0, t65);
    			append_dev(ol0, li2);
    			append_dev(rationale, t67);
    			append_dev(rationale, h20);
    			append_dev(rationale, t69);
    			append_dev(rationale, p9);
    			append_dev(p9, t70);
    			append_dev(p9, b6);
    			append_dev(p9, t72);
    			append_dev(p9, a5);
    			append_dev(p9, t74);
    			append_dev(rationale, t75);
    			append_dev(rationale, pre2);
    			append_dev(pre2, code0);
    			append_dev(rationale, t77);
    			append_dev(rationale, p10);
    			append_dev(p10, t78);
    			append_dev(p10, b7);
    			append_dev(p10, t80);
    			append_dev(p10, b8);
    			append_dev(p10, t82);
    			append_dev(rationale, t83);
    			append_dev(rationale, pre3);
    			append_dev(pre3, code1);
    			append_dev(rationale, t85);
    			append_dev(rationale, p11);
    			append_dev(p11, t86);
    			append_dev(p11, b9);
    			append_dev(p11, t88);
    			append_dev(p11, b10);
    			append_dev(p11, t90);
    			append_dev(rationale, t91);
    			append_dev(rationale, pre4);
    			append_dev(pre4, code2);
    			append_dev(rationale, t93);
    			append_dev(rationale, p12);
    			append_dev(rationale, t95);
    			append_dev(rationale, p13);
    			append_dev(p13, t96);
    			append_dev(p13, a6);
    			append_dev(p13, t98);
    			append_dev(rationale, t99);
    			append_dev(rationale, quote0);
    			append_dev(rationale, t101);
    			append_dev(rationale, p14);
    			append_dev(p14, t102);
    			append_dev(p14, a7);
    			append_dev(p14, t104);
    			append_dev(rationale, t105);
    			append_dev(rationale, p15);
    			append_dev(p15, t106);
    			append_dev(p15, b11);
    			append_dev(p15, t108);
    			append_dev(rationale, t109);
    			append_dev(rationale, h33);
    			append_dev(rationale, t111);
    			append_dev(rationale, p16);
    			append_dev(p16, t112);
    			append_dev(p16, b12);
    			append_dev(p16, t114);
    			append_dev(rationale, t115);
    			append_dev(rationale, ol1);
    			append_dev(ol1, li3);
    			append_dev(ol1, t117);
    			append_dev(ol1, li4);
    			append_dev(ol1, t119);
    			append_dev(ol1, li5);
    			append_dev(li5, t120);
    			append_dev(li5, b13);
    			append_dev(li5, t122);
    			append_dev(li5, b14);
    			append_dev(li5, t124);
    			append_dev(ol1, t125);
    			append_dev(ol1, li6);
    			append_dev(ol1, t127);
    			append_dev(ol1, li7);
    			append_dev(rationale, t129);
    			append_dev(rationale, p17);
    			append_dev(rationale, t131);
    			append_dev(rationale, ol2);
    			append_dev(ol2, li8);
    			append_dev(ol2, t133);
    			append_dev(ol2, li9);
    			append_dev(li9, t134);
    			append_dev(li9, b15);
    			append_dev(ol2, t136);
    			append_dev(ol2, li10);
    			append_dev(rationale, t138);
    			append_dev(rationale, p18);
    			append_dev(rationale, t140);
    			append_dev(rationale, h21);
    			append_dev(rationale, t142);
    			append_dev(rationale, p19);
    			append_dev(p19, t143);
    			append_dev(p19, a8);
    			append_dev(p19, t145);
    			append_dev(rationale, t146);
    			append_dev(rationale, pre5);
    			append_dev(pre5, code3);
    			append_dev(rationale, t148);
    			append_dev(rationale, p20);
    			append_dev(p20, t149);
    			append_dev(p20, b16);
    			append_dev(p20, t151);
    			append_dev(p20, b17);
    			append_dev(p20, t153);
    			append_dev(rationale, t154);
    			append_dev(rationale, ol3);
    			append_dev(ol3, li11);
    			append_dev(li11, b18);
    			append_dev(li11, t156);
    			append_dev(ol3, t157);
    			append_dev(ol3, li12);
    			append_dev(li12, b19);
    			append_dev(li12, t159);
    			append_dev(ol3, t160);
    			append_dev(ol3, li13);
    			append_dev(li13, t161);
    			append_dev(li13, b20);
    			append_dev(li13, t163);
    			append_dev(li13, b21);
    			append_dev(li13, t165);
    			append_dev(li13, a9);
    			append_dev(rationale, t167);
    			append_dev(rationale, h34);
    			append_dev(rationale, t169);
    			append_dev(rationale, p21);
    			append_dev(p21, t170);
    			append_dev(p21, b22);
    			append_dev(p21, t172);
    			append_dev(p21, a10);
    			append_dev(p21, t174);
    			append_dev(p21, b23);
    			append_dev(p21, t176);
    			append_dev(p21, b24);
    			append_dev(p21, t178);
    			append_dev(rationale, t179);
    			append_dev(rationale, pre6);
    			append_dev(pre6, code4);
    			append_dev(rationale, t181);
    			append_dev(rationale, pre7);
    			append_dev(pre7, code5);
    			append_dev(rationale, t183);
    			append_dev(rationale, p22);
    			append_dev(p22, t184);
    			append_dev(p22, b25);
    			append_dev(p22, t186);
    			append_dev(p22, b26);
    			append_dev(p22, t188);
    			append_dev(p22, b27);
    			append_dev(p22, t190);
    			append_dev(p22, b28);
    			append_dev(p22, t192);
    			append_dev(rationale, t193);
    			append_dev(rationale, p23);
    			append_dev(rationale, t195);
    			append_dev(rationale, pre8);
    			append_dev(pre8, code6);
    			append_dev(rationale, t197);
    			append_dev(rationale, p24);
    			append_dev(p24, t198);
    			append_dev(p24, b29);
    			append_dev(p24, t200);
    			append_dev(p24, b30);
    			append_dev(p24, t202);
    			append_dev(rationale, t203);
    			append_dev(rationale, h35);
    			append_dev(rationale, t205);
    			append_dev(rationale, p25);
    			append_dev(p25, t206);
    			append_dev(p25, b31);
    			append_dev(p25, t208);
    			append_dev(p25, b32);
    			append_dev(p25, t210);
    			append_dev(p25, b33);
    			append_dev(p25, t212);
    			append_dev(rationale, t213);
    			append_dev(rationale, pre9);
    			append_dev(pre9, code7);
    			append_dev(rationale, t215);
    			append_dev(rationale, p26);
    			append_dev(p26, t216);
    			append_dev(p26, b34);
    			append_dev(p26, t218);
    			append_dev(p26, b35);
    			append_dev(p26, t220);
    			append_dev(p26, b36);
    			append_dev(p26, t222);
    			append_dev(rationale, t223);
    			append_dev(rationale, p27);
    			append_dev(p27, t224);
    			append_dev(p27, a11);
    			append_dev(p27, t226);
    			append_dev(rationale, t227);
    			append_dev(rationale, pre10);
    			append_dev(pre10, code8);
    			append_dev(rationale, t229);
    			append_dev(rationale, p28);
    			append_dev(p28, t230);
    			append_dev(p28, b37);
    			append_dev(p28, t232);
    			append_dev(p28, b38);
    			append_dev(p28, t234);
    			append_dev(p28, b39);
    			append_dev(p28, t236);
    			append_dev(p28, b40);
    			append_dev(p28, t238);
    			append_dev(rationale, t239);
    			append_dev(rationale, h22);
    			append_dev(rationale, t241);
    			append_dev(rationale, p29);
    			append_dev(p29, t242);
    			append_dev(p29, a12);
    			append_dev(p29, t244);
    			append_dev(p29, a13);
    			append_dev(p29, t246);
    			append_dev(rationale, t247);
    			append_dev(rationale, quote1);
    			append_dev(quote1, p30);
    			append_dev(quote1, t249);
    			append_dev(quote1, p31);
    			append_dev(quote1, t251);
    			append_dev(quote1, p32);
    			append_dev(rationale, t253);
    			append_dev(rationale, p33);
    			append_dev(p33, t254);
    			append_dev(p33, b41);
    			append_dev(p33, t256);
    			append_dev(p33, em);
    			append_dev(p33, t258);
    			append_dev(rationale, t259);
    			append_dev(rationale, p34);
    			append_dev(rationale, t261);
    			append_dev(rationale, quote2);
    			append_dev(quote2, ol4);
    			append_dev(ol4, li14);
    			append_dev(ol4, t263);
    			append_dev(ol4, li15);
    			append_dev(ol4, t265);
    			append_dev(ol4, li16);
    			append_dev(rationale, t267);
    			append_dev(rationale, p35);
    			append_dev(rationale, t269);
    			append_dev(rationale, quote3);
    			append_dev(quote3, ol5);
    			append_dev(ol5, li17);
    			append_dev(ol5, t271);
    			append_dev(ol5, li18);
    			append_dev(ol5, t273);
    			append_dev(ol5, li19);
    			append_dev(ol5, t275);
    			append_dev(ol5, li20);
    			append_dev(ol5, t277);
    			append_dev(ol5, li21);
    			append_dev(ol5, t279);
    			append_dev(ol5, li22);
    			append_dev(ol5, t281);
    			append_dev(ol5, li23);
    			append_dev(ol5, t283);
    			append_dev(ol5, li24);
    			append_dev(rationale, t285);
    			append_dev(rationale, p36);
    			append_dev(p36, t286);
    			append_dev(p36, b42);
    			append_dev(p36, t288);
    			append_dev(p36, b43);
    			append_dev(p36, t290);
    			append_dev(p36, b44);
    			append_dev(p36, t292);
    			append_dev(p36, a14);
    			append_dev(p36, t294);
    			append_dev(p36, b45);
    			append_dev(p36, t296);
    			append_dev(rationale, t297);
    			append_dev(rationale, p37);
    			append_dev(p37, t298);
    			append_dev(p37, b46);
    			append_dev(p37, t300);
    			append_dev(rationale, t301);
    			append_dev(rationale, ol6);
    			append_dev(ol6, li25);
    			append_dev(ol6, t303);
    			append_dev(ol6, li26);
    			append_dev(ol6, t305);
    			append_dev(ol6, li27);
    			append_dev(rationale, t307);
    			append_dev(rationale, p38);
    			append_dev(rationale, t309);
    			append_dev(rationale, p39);
    			append_dev(p39, t310);
    			append_dev(p39, b47);
    			append_dev(p39, t312);
    			append_dev(rationale, t313);
    			append_dev(rationale, ol7);
    			append_dev(ol7, li28);
    			append_dev(ol7, t315);
    			append_dev(ol7, li29);
    			append_dev(rationale, t317);
    			append_dev(rationale, p40);
    			append_dev(p40, t318);
    			append_dev(p40, b48);
    			append_dev(p40, t320);
    			append_dev(rationale, t321);
    			append_dev(rationale, h23);
    			append_dev(rationale, t323);
    			append_dev(rationale, p41);
    			append_dev(rationale, t325);
    			append_dev(rationale, ol8);
    			append_dev(ol8, li30);
    			append_dev(ol8, t327);
    			append_dev(ol8, li31);
    			append_dev(li31, t328);
    			append_dev(li31, b49);
    			append_dev(li31, t330);
    			append_dev(li31, b50);
    			append_dev(li31, t332);
    			append_dev(ol8, t333);
    			append_dev(ol8, li32);
    			append_dev(li32, t334);
    			append_dev(li32, b51);
    			append_dev(li32, t336);
    			append_dev(rationale, t337);
    			append_dev(rationale, p42);
    			append_dev(p42, t338);
    			append_dev(p42, b52);
    			append_dev(p42, t340);
    			append_dev(p42, b53);
    			append_dev(p42, t342);
    			append_dev(rationale, t343);
    			append_dev(rationale, h24);
    			append_dev(rationale, t345);
    			append_dev(rationale, p43);
    			append_dev(rationale, t347);
    			append_dev(rationale, ol9);
    			append_dev(ol9, li33);
    			append_dev(li33, b54);
    			append_dev(li33, t349);
    			append_dev(li33, b55);
    			append_dev(li33, t351);
    			append_dev(ol9, t352);
    			append_dev(ol9, li34);
    			append_dev(li34, b56);
    			append_dev(li34, t354);
    			append_dev(li34, b57);
    			append_dev(li34, t356);
    			append_dev(li34, b58);
    			append_dev(li34, t358);
    			append_dev(ol9, t359);
    			append_dev(ol9, li35);
    			append_dev(li35, b59);
    			append_dev(li35, t361);
    			append_dev(li35, b60);
    			append_dev(li35, t363);
    			append_dev(ol9, t364);
    			append_dev(ol9, li36);
    			append_dev(li36, b61);
    			append_dev(li36, t366);
    			append_dev(ol9, t367);
    			append_dev(ol9, li37);
    			append_dev(li37, b62);
    			append_dev(li37, t369);
    			append_dev(li37, b63);
    			append_dev(li37, t371);
    			append_dev(ol9, t372);
    			append_dev(ol9, li38);
    			append_dev(li38, b64);
    			append_dev(li38, t374);
    			append_dev(li38, b65);
    			append_dev(li38, t376);
    			append_dev(ol9, t377);
    			append_dev(ol9, li39);
    			append_dev(li39, b66);
    			append_dev(li39, t379);
    			append_dev(li39, b67);
    			append_dev(li39, t381);
    			append_dev(rationale, t382);
    			current = true;

    			if (!mounted) {
    				dispose = action_destroyer(link_action = link.call(null, a4));
    				mounted = true;
    			}
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon0.$$.fragment, local);
    			transition_in(icon1.$$.fragment, local);
    			transition_in(icon2.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon0.$$.fragment, local);
    			transition_out(icon1.$$.fragment, local);
    			transition_out(icon2.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(hero);
    			if (detaching) detach_dev(t7);
    			if (detaching) detach_dev(hr0);
    			if (detaching) detach_dev(t8);
    			if (detaching) detach_dev(section0);
    			destroy_component(icon0);
    			destroy_component(icon1);
    			destroy_component(icon2);
    			if (detaching) detach_dev(t29);
    			if (detaching) detach_dev(rationale);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$2.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$2($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Home", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Home> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ link, Icon });
    	return [];
    }

    class Home extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$2, create_fragment$2, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Home",
    			options,
    			id: create_fragment$2.name
    		});
    	}
    }

    /* src/thumbs/Google.svelte generated by Svelte v3.30.0 */
    const file$2 = "src/thumbs/Google.svelte";

    function create_fragment$3(ctx) {
    	let content;
    	let header;
    	let nav;
    	let nav_left;
    	let a0;
    	let t1;
    	let a1;
    	let t3;
    	let ul;
    	let li0;
    	let t5;
    	let li1;
    	let t7;
    	let li2;
    	let icon;
    	let t8;
    	let li3;
    	let button0;
    	let t10;
    	let figure;
    	let a2;
    	let img;
    	let img_src_value;
    	let link_action;
    	let t11;
    	let search;
    	let input;
    	let t12;
    	let buttons;
    	let button1;
    	let t14;
    	let button2;
    	let current;
    	let mounted;
    	let dispose;

    	icon = new Icon({
    			props: { name: "grid", color: "#000" },
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			header = element("header");
    			nav = element("nav");
    			nav_left = element("nav-left");
    			a0 = element("a");
    			a0.textContent = "About";
    			t1 = space();
    			a1 = element("a");
    			a1.textContent = "Store";
    			t3 = space();
    			ul = element("ul");
    			li0 = element("li");
    			li0.textContent = "Gmail";
    			t5 = space();
    			li1 = element("li");
    			li1.textContent = "Image";
    			t7 = space();
    			li2 = element("li");
    			create_component(icon.$$.fragment);
    			t8 = space();
    			li3 = element("li");
    			button0 = element("button");
    			button0.textContent = "Sign In";
    			t10 = space();
    			figure = element("figure");
    			a2 = element("a");
    			img = element("img");
    			t11 = space();
    			search = element("search");
    			input = element("input");
    			t12 = space();
    			buttons = element("buttons");
    			button1 = element("button");
    			button1.textContent = "Google Search";
    			t14 = space();
    			button2 = element("button");
    			button2.textContent = "I'm Feeling Lucky";
    			attr_dev(a0, "class", "svelte-1xw0xeo");
    			add_location(a0, file$2, 74, 8, 1064);
    			attr_dev(a1, "class", "svelte-1xw0xeo");
    			add_location(a1, file$2, 75, 8, 1085);
    			add_location(nav_left, file$2, 73, 6, 1045);
    			add_location(li0, file$2, 78, 6, 1133);
    			add_location(li1, file$2, 79, 6, 1154);
    			add_location(li2, file$2, 80, 6, 1175);
    			attr_dev(button0, "class", "svelte-1xw0xeo");
    			add_location(button0, file$2, 81, 10, 1228);
    			add_location(li3, file$2, 81, 6, 1224);
    			add_location(ul, file$2, 77, 6, 1122);
    			attr_dev(nav, "class", "svelte-1xw0xeo");
    			add_location(nav, file$2, 72, 4, 1033);
    			attr_dev(header, "class", "svelte-1xw0xeo");
    			add_location(header, file$2, 71, 2, 1020);
    			if (img.src !== (img_src_value = "http://via.placeholder.com/500x200?text=Google+Doodle")) attr_dev(img, "src", img_src_value);
    			add_location(img, file$2, 88, 6, 1349);
    			attr_dev(a2, "href", "/demos/google");
    			attr_dev(a2, "class", "svelte-1xw0xeo");
    			add_location(a2, file$2, 87, 4, 1309);
    			attr_dev(figure, "class", "svelte-1xw0xeo");
    			add_location(figure, file$2, 86, 2, 1296);
    			attr_dev(input, "type", "text");
    			attr_dev(input, "class", "svelte-1xw0xeo");
    			add_location(input, file$2, 93, 2, 1450);
    			attr_dev(button1, "class", "svelte-1xw0xeo");
    			add_location(button1, file$2, 95, 6, 1490);
    			attr_dev(button2, "class", "svelte-1xw0xeo");
    			add_location(button2, file$2, 96, 6, 1527);
    			attr_dev(buttons, "class", "svelte-1xw0xeo");
    			add_location(buttons, file$2, 94, 4, 1474);
    			attr_dev(search, "class", "svelte-1xw0xeo");
    			add_location(search, file$2, 92, 2, 1439);
    			attr_dev(content, "class", "svelte-1xw0xeo");
    			add_location(content, file$2, 70, 0, 1008);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, header);
    			append_dev(header, nav);
    			append_dev(nav, nav_left);
    			append_dev(nav_left, a0);
    			append_dev(nav_left, t1);
    			append_dev(nav_left, a1);
    			append_dev(nav, t3);
    			append_dev(nav, ul);
    			append_dev(ul, li0);
    			append_dev(ul, t5);
    			append_dev(ul, li1);
    			append_dev(ul, t7);
    			append_dev(ul, li2);
    			mount_component(icon, li2, null);
    			append_dev(ul, t8);
    			append_dev(ul, li3);
    			append_dev(li3, button0);
    			append_dev(content, t10);
    			append_dev(content, figure);
    			append_dev(figure, a2);
    			append_dev(a2, img);
    			append_dev(content, t11);
    			append_dev(content, search);
    			append_dev(search, input);
    			append_dev(search, t12);
    			append_dev(search, buttons);
    			append_dev(buttons, button1);
    			append_dev(buttons, t14);
    			append_dev(buttons, button2);
    			current = true;

    			if (!mounted) {
    				dispose = action_destroyer(link_action = link.call(null, a2));
    				mounted = true;
    			}
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_component(icon);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$3.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$3($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Google", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Google> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ link, Icon });
    	return [];
    }

    class Google extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$3, create_fragment$3, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Google",
    			options,
    			id: create_fragment$3.name
    		});
    	}
    }

    /* src/thumbs/Twitter.svelte generated by Svelte v3.30.0 */
    const file$3 = "src/thumbs/Twitter.svelte";

    function create_fragment$4(ctx) {
    	let content;
    	let middle;
    	let header;
    	let nav;
    	let back;
    	let icon0;
    	let t0;
    	let name;
    	let h4;
    	let t2;
    	let span;
    	let t4;
    	let images;
    	let figure0;
    	let img0;
    	let img0_src_value;
    	let t5;
    	let figure1;
    	let img1;
    	let img1_src_value;
    	let t6;
    	let button;
    	let t8;
    	let profile;
    	let h3;
    	let t10;
    	let p0;
    	let t12;
    	let p1;
    	let t14;
    	let p2;
    	let icon1;
    	let t15;
    	let icon2;
    	let t16;
    	let a;
    	let t18;
    	let icon3;
    	let t19;
    	let t20;
    	let p3;
    	let b0;
    	let t22;
    	let b1;
    	let t24;
    	let current;

    	icon0 = new Icon({
    			props: { name: "arrow-left" },
    			$$inline: true
    		});

    	icon1 = new Icon({
    			props: {
    				name: "map",
    				size: "24",
    				color: "var(--color-bg-secondary)"
    			},
    			$$inline: true
    		});

    	icon2 = new Icon({
    			props: {
    				name: "link",
    				size: "24",
    				color: "var(--color-bg-secondary)"
    			},
    			$$inline: true
    		});

    	icon3 = new Icon({
    			props: {
    				name: "calendar",
    				size: "24",
    				color: "var(--color-bg-secondary)"
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			middle = element("middle");
    			header = element("header");
    			nav = element("nav");
    			back = element("back");
    			create_component(icon0.$$.fragment);
    			t0 = space();
    			name = element("name");
    			h4 = element("h4");
    			h4.textContent = "Zed A. Shaw, Writer";
    			t2 = space();
    			span = element("span");
    			span.textContent = "7,754 Tweets";
    			t4 = space();
    			images = element("images");
    			figure0 = element("figure");
    			img0 = element("img");
    			t5 = space();
    			figure1 = element("figure");
    			img1 = element("img");
    			t6 = space();
    			button = element("button");
    			button.textContent = "Follow";
    			t8 = space();
    			profile = element("profile");
    			h3 = element("h3");
    			h3.textContent = "Zed A. Shaw, Writer";
    			t10 = space();
    			p0 = element("p");
    			p0.textContent = "@lzsthw";
    			t12 = space();
    			p1 = element("p");
    			p1.textContent = "The author of The Hard Way Series published by Addison/Wesley including Learn Python The Hard Way and many more. Follow me here for coding tips and book news.";
    			t14 = space();
    			p2 = element("p");
    			create_component(icon1.$$.fragment);
    			t15 = text(" Some Place, KY ");
    			create_component(icon2.$$.fragment);
    			t16 = space();
    			a = element("a");
    			a.textContent = "learnjsthehardway.org";
    			t18 = space();
    			create_component(icon3.$$.fragment);
    			t19 = text(" Joined Jan, 1999.");
    			t20 = space();
    			p3 = element("p");
    			b0 = element("b");
    			b0.textContent = "167";
    			t22 = text(" Following ");
    			b1 = element("b");
    			b1.textContent = "10.4k";
    			t24 = text(" Followers");
    			attr_dev(back, "class", "svelte-1prpjq7");
    			add_location(back, file$3, 103, 8, 1582);
    			attr_dev(h4, "class", "svelte-1prpjq7");
    			add_location(h4, file$3, 105, 10, 1647);
    			attr_dev(span, "class", "svelte-1prpjq7");
    			add_location(span, file$3, 106, 10, 1686);
    			add_location(name, file$3, 104, 8, 1630);
    			attr_dev(nav, "class", "svelte-1prpjq7");
    			add_location(nav, file$3, 102, 6, 1568);
    			attr_dev(header, "class", "svelte-1prpjq7");
    			add_location(header, file$3, 101, 4, 1553);
    			attr_dev(img0, "alt", "Profile background");
    			if (img0.src !== (img0_src_value = "/header_pic.jpg")) attr_dev(img0, "src", img0_src_value);
    			attr_dev(img0, "class", "svelte-1prpjq7");
    			add_location(img0, file$3, 113, 8, 1808);
    			attr_dev(figure0, "id", "background");
    			attr_dev(figure0, "class", "svelte-1prpjq7");
    			add_location(figure0, file$3, 112, 6, 1775);
    			attr_dev(img1, "alt", "Profile picture");
    			if (img1.src !== (img1_src_value = "/profile_pic.jpg")) attr_dev(img1, "src", img1_src_value);
    			attr_dev(img1, "class", "svelte-1prpjq7");
    			add_location(img1, file$3, 117, 8, 1913);
    			attr_dev(button, "id", "follow");
    			attr_dev(button, "class", "svelte-1prpjq7");
    			add_location(button, file$3, 118, 8, 1972);
    			attr_dev(figure1, "id", "avatar");
    			attr_dev(figure1, "class", "svelte-1prpjq7");
    			add_location(figure1, file$3, 116, 6, 1884);
    			attr_dev(images, "class", "svelte-1prpjq7");
    			add_location(images, file$3, 111, 4, 1760);
    			add_location(h3, file$3, 123, 6, 2059);
    			add_location(p0, file$3, 124, 6, 2094);
    			add_location(p1, file$3, 125, 6, 2115);
    			add_location(a, file$3, 126, 153, 2434);
    			add_location(p2, file$3, 126, 6, 2287);
    			add_location(b0, file$3, 127, 9, 2564);
    			add_location(b1, file$3, 127, 30, 2585);
    			add_location(p3, file$3, 127, 6, 2561);
    			attr_dev(profile, "class", "svelte-1prpjq7");
    			add_location(profile, file$3, 122, 4, 2043);
    			attr_dev(middle, "class", "svelte-1prpjq7");
    			add_location(middle, file$3, 100, 2, 1540);
    			attr_dev(content, "class", "svelte-1prpjq7");
    			add_location(content, file$3, 99, 0, 1528);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, middle);
    			append_dev(middle, header);
    			append_dev(header, nav);
    			append_dev(nav, back);
    			mount_component(icon0, back, null);
    			append_dev(nav, t0);
    			append_dev(nav, name);
    			append_dev(name, h4);
    			append_dev(name, t2);
    			append_dev(name, span);
    			append_dev(middle, t4);
    			append_dev(middle, images);
    			append_dev(images, figure0);
    			append_dev(figure0, img0);
    			append_dev(images, t5);
    			append_dev(images, figure1);
    			append_dev(figure1, img1);
    			append_dev(figure1, t6);
    			append_dev(figure1, button);
    			append_dev(middle, t8);
    			append_dev(middle, profile);
    			append_dev(profile, h3);
    			append_dev(profile, t10);
    			append_dev(profile, p0);
    			append_dev(profile, t12);
    			append_dev(profile, p1);
    			append_dev(profile, t14);
    			append_dev(profile, p2);
    			mount_component(icon1, p2, null);
    			append_dev(p2, t15);
    			mount_component(icon2, p2, null);
    			append_dev(p2, t16);
    			append_dev(p2, a);
    			append_dev(p2, t18);
    			mount_component(icon3, p2, null);
    			append_dev(p2, t19);
    			append_dev(profile, t20);
    			append_dev(profile, p3);
    			append_dev(p3, b0);
    			append_dev(p3, t22);
    			append_dev(p3, b1);
    			append_dev(p3, t24);
    			current = true;
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon0.$$.fragment, local);
    			transition_in(icon1.$$.fragment, local);
    			transition_in(icon2.$$.fragment, local);
    			transition_in(icon3.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon0.$$.fragment, local);
    			transition_out(icon1.$$.fragment, local);
    			transition_out(icon2.$$.fragment, local);
    			transition_out(icon3.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_component(icon0);
    			destroy_component(icon1);
    			destroy_component(icon2);
    			destroy_component(icon3);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$4.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$4($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Twitter", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Twitter> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ Icon });
    	return [];
    }

    class Twitter extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$4, create_fragment$4, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Twitter",
    			options,
    			id: create_fragment$4.name
    		});
    	}
    }

    /* src/thumbs/Youtube.svelte generated by Svelte v3.30.0 */
    const file$4 = "src/thumbs/Youtube.svelte";

    function create_fragment$5(ctx) {
    	let content;
    	let header;
    	let nav;
    	let nav_left;
    	let a0;
    	let icon0;
    	let t0;
    	let icon1;
    	let t1;
    	let logo;
    	let t3;
    	let input;
    	let t4;
    	let ul;
    	let li0;
    	let icon2;
    	let t5;
    	let li1;
    	let icon3;
    	let t6;
    	let li2;
    	let icon4;
    	let t7;
    	let li3;
    	let button;
    	let icon5;
    	let t8;
    	let t9;
    	let main;
    	let left;
    	let figure;
    	let img;
    	let img_src_value;
    	let t10;
    	let figcaption;
    	let a1;
    	let t12;
    	let a2;
    	let t14;
    	let p;
    	let t16;
    	let video_actions;
    	let likes;
    	let t18;
    	let video_buttons;
    	let icon6;
    	let t19;
    	let icon7;
    	let t20;
    	let icon8;
    	let t21;
    	let icon9;
    	let t22;
    	let icon10;
    	let current;
    	icon0 = new Icon({ props: { name: "menu" }, $$inline: true });

    	icon1 = new Icon({
    			props: { name: "youtube" },
    			$$inline: true
    		});

    	icon2 = new Icon({
    			props: { name: "camera", color: "#000" },
    			$$inline: true
    		});

    	icon3 = new Icon({
    			props: { name: "more-vertical", color: "#000" },
    			$$inline: true
    		});

    	icon4 = new Icon({
    			props: { name: "grid", color: "#000" },
    			$$inline: true
    		});

    	icon5 = new Icon({ props: { name: "user" }, $$inline: true });

    	icon6 = new Icon({
    			props: { name: "thumbs-up", color: "#999" },
    			$$inline: true
    		});

    	icon7 = new Icon({
    			props: { name: "thumbs-down", color: "#999" },
    			$$inline: true
    		});

    	icon8 = new Icon({
    			props: { name: "corner-up-right", color: "#999" },
    			$$inline: true
    		});

    	icon9 = new Icon({
    			props: { name: "menu", color: "#999" },
    			$$inline: true
    		});

    	icon10 = new Icon({
    			props: { name: "vertical-more" },
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			header = element("header");
    			nav = element("nav");
    			nav_left = element("nav-left");
    			a0 = element("a");
    			create_component(icon0.$$.fragment);
    			t0 = space();
    			create_component(icon1.$$.fragment);
    			t1 = space();
    			logo = element("logo");
    			logo.textContent = "Youtube";
    			t3 = space();
    			input = element("input");
    			t4 = space();
    			ul = element("ul");
    			li0 = element("li");
    			create_component(icon2.$$.fragment);
    			t5 = space();
    			li1 = element("li");
    			create_component(icon3.$$.fragment);
    			t6 = space();
    			li2 = element("li");
    			create_component(icon4.$$.fragment);
    			t7 = space();
    			li3 = element("li");
    			button = element("button");
    			create_component(icon5.$$.fragment);
    			t8 = text(" Sign In");
    			t9 = space();
    			main = element("main");
    			left = element("left");
    			figure = element("figure");
    			img = element("img");
    			t10 = space();
    			figcaption = element("figcaption");
    			a1 = element("a");
    			a1.textContent = "#tag";
    			t12 = space();
    			a2 = element("a");
    			a2.textContent = "#anothertag";
    			t14 = space();
    			p = element("p");
    			p.textContent = "Title And Stuff";
    			t16 = space();
    			video_actions = element("video-actions");
    			likes = element("likes");
    			likes.textContent = "Stats Stats";
    			t18 = space();
    			video_buttons = element("video-buttons");
    			create_component(icon6.$$.fragment);
    			t19 = text(" 1.1K\n              ");
    			create_component(icon7.$$.fragment);
    			t20 = text(" 22\n              ");
    			create_component(icon8.$$.fragment);
    			t21 = text(" SHARE\n              ");
    			create_component(icon9.$$.fragment);
    			t22 = text(" SAVE\n              ");
    			create_component(icon10.$$.fragment);
    			attr_dev(logo, "class", "svelte-oxwxiv");
    			add_location(logo, file$4, 78, 56, 1184);
    			add_location(a0, file$4, 78, 8, 1136);
    			add_location(nav_left, file$4, 77, 6, 1117);
    			attr_dev(input, "id", "search");
    			attr_dev(input, "placeholder", "Search");
    			attr_dev(input, "name", "search");
    			attr_dev(input, "class", "svelte-oxwxiv");
    			add_location(input, file$4, 80, 6, 1233);
    			add_location(li0, file$4, 82, 8, 1307);
    			add_location(li1, file$4, 83, 8, 1360);
    			add_location(li2, file$4, 84, 8, 1420);
    			attr_dev(button, "class", "svelte-oxwxiv");
    			add_location(button, file$4, 85, 12, 1475);
    			add_location(li3, file$4, 85, 8, 1471);
    			add_location(ul, file$4, 81, 6, 1294);
    			attr_dev(nav, "class", "svelte-oxwxiv");
    			add_location(nav, file$4, 76, 4, 1105);
    			attr_dev(header, "class", "svelte-oxwxiv");
    			add_location(header, file$4, 75, 2, 1092);
    			if (img.src !== (img_src_value = "http://via.placeholder.com/800x450?text=Video")) attr_dev(img, "src", img_src_value);
    			add_location(img, file$4, 92, 8, 1604);
    			attr_dev(a1, "class", "svelte-oxwxiv");
    			add_location(a1, file$4, 94, 10, 1693);
    			attr_dev(a2, "class", "svelte-oxwxiv");
    			add_location(a2, file$4, 94, 22, 1705);
    			attr_dev(p, "class", "svelte-oxwxiv");
    			add_location(p, file$4, 95, 10, 1734);
    			add_location(likes, file$4, 97, 12, 1795);
    			add_location(video_buttons, file$4, 98, 12, 1834);
    			set_custom_element_data(video_actions, "class", "svelte-oxwxiv");
    			add_location(video_actions, file$4, 96, 10, 1767);
    			attr_dev(figcaption, "class", "svelte-oxwxiv");
    			add_location(figcaption, file$4, 93, 8, 1670);
    			add_location(figure, file$4, 91, 6, 1587);
    			add_location(left, file$4, 90, 4, 1574);
    			attr_dev(main, "class", "svelte-oxwxiv");
    			add_location(main, file$4, 89, 2, 1563);
    			attr_dev(content, "class", "svelte-oxwxiv");
    			add_location(content, file$4, 74, 0, 1080);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, header);
    			append_dev(header, nav);
    			append_dev(nav, nav_left);
    			append_dev(nav_left, a0);
    			mount_component(icon0, a0, null);
    			append_dev(a0, t0);
    			mount_component(icon1, a0, null);
    			append_dev(a0, t1);
    			append_dev(a0, logo);
    			append_dev(nav, t3);
    			append_dev(nav, input);
    			append_dev(nav, t4);
    			append_dev(nav, ul);
    			append_dev(ul, li0);
    			mount_component(icon2, li0, null);
    			append_dev(ul, t5);
    			append_dev(ul, li1);
    			mount_component(icon3, li1, null);
    			append_dev(ul, t6);
    			append_dev(ul, li2);
    			mount_component(icon4, li2, null);
    			append_dev(ul, t7);
    			append_dev(ul, li3);
    			append_dev(li3, button);
    			mount_component(icon5, button, null);
    			append_dev(button, t8);
    			append_dev(content, t9);
    			append_dev(content, main);
    			append_dev(main, left);
    			append_dev(left, figure);
    			append_dev(figure, img);
    			append_dev(figure, t10);
    			append_dev(figure, figcaption);
    			append_dev(figcaption, a1);
    			append_dev(figcaption, t12);
    			append_dev(figcaption, a2);
    			append_dev(figcaption, t14);
    			append_dev(figcaption, p);
    			append_dev(figcaption, t16);
    			append_dev(figcaption, video_actions);
    			append_dev(video_actions, likes);
    			append_dev(video_actions, t18);
    			append_dev(video_actions, video_buttons);
    			mount_component(icon6, video_buttons, null);
    			append_dev(video_buttons, t19);
    			mount_component(icon7, video_buttons, null);
    			append_dev(video_buttons, t20);
    			mount_component(icon8, video_buttons, null);
    			append_dev(video_buttons, t21);
    			mount_component(icon9, video_buttons, null);
    			append_dev(video_buttons, t22);
    			mount_component(icon10, video_buttons, null);
    			current = true;
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon0.$$.fragment, local);
    			transition_in(icon1.$$.fragment, local);
    			transition_in(icon2.$$.fragment, local);
    			transition_in(icon3.$$.fragment, local);
    			transition_in(icon4.$$.fragment, local);
    			transition_in(icon5.$$.fragment, local);
    			transition_in(icon6.$$.fragment, local);
    			transition_in(icon7.$$.fragment, local);
    			transition_in(icon8.$$.fragment, local);
    			transition_in(icon9.$$.fragment, local);
    			transition_in(icon10.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon0.$$.fragment, local);
    			transition_out(icon1.$$.fragment, local);
    			transition_out(icon2.$$.fragment, local);
    			transition_out(icon3.$$.fragment, local);
    			transition_out(icon4.$$.fragment, local);
    			transition_out(icon5.$$.fragment, local);
    			transition_out(icon6.$$.fragment, local);
    			transition_out(icon7.$$.fragment, local);
    			transition_out(icon8.$$.fragment, local);
    			transition_out(icon9.$$.fragment, local);
    			transition_out(icon10.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_component(icon0);
    			destroy_component(icon1);
    			destroy_component(icon2);
    			destroy_component(icon3);
    			destroy_component(icon4);
    			destroy_component(icon5);
    			destroy_component(icon6);
    			destroy_component(icon7);
    			destroy_component(icon8);
    			destroy_component(icon9);
    			destroy_component(icon10);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$5.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$5($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Youtube", slots, []);
    	let cards = [1, 2, 3, 4];
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Youtube> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ Icon, cards });

    	$$self.$inject_state = $$props => {
    		if ("cards" in $$props) cards = $$props.cards;
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [];
    }

    class Youtube extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$5, create_fragment$5, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Youtube",
    			options,
    			id: create_fragment$5.name
    		});
    	}
    }

    /* src/thumbs/Instagram.svelte generated by Svelte v3.30.0 */
    const file$5 = "src/thumbs/Instagram.svelte";

    function get_each_context(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[1] = list[i];
    	return child_ctx;
    }

    // (108:2) {#each pins as pin}
    function create_each_block(ctx) {
    	let figure;
    	let img;
    	let img_src_value;
    	let t;

    	const block = {
    		c: function create() {
    			figure = element("figure");
    			img = element("img");
    			t = space();
    			attr_dev(img, "alt", "Stock photo");
    			if (img.src !== (img_src_value = "http://via.placeholder.com/82x82?text=Story")) attr_dev(img, "src", img_src_value);
    			add_location(img, file$5, 109, 6, 1888);
    			add_location(figure, file$5, 108, 4, 1873);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, figure, anchor);
    			append_dev(figure, img);
    			append_dev(figure, t);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(figure);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block.name,
    		type: "each",
    		source: "(108:2) {#each pins as pin}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$6(ctx) {
    	let content;
    	let header;
    	let nav;
    	let b0;
    	let icon;
    	let t0;
    	let t1;
    	let input;
    	let t2;
    	let ul;
    	let li0;
    	let button0;
    	let t4;
    	let li1;
    	let a0;
    	let t6;
    	let profile;
    	let figure;
    	let img;
    	let img_src_value;
    	let t7;
    	let info;
    	let p0;
    	let b1;
    	let t9;
    	let button1;
    	let t11;
    	let p1;
    	let b2;
    	let t13;
    	let b3;
    	let t15;
    	let b4;
    	let t17;
    	let p2;
    	let b5;
    	let t19;
    	let p3;
    	let t20;
    	let br;
    	let t21;
    	let a1;
    	let t23;
    	let pins_1;
    	let current;

    	icon = new Icon({
    			props: {
    				name: "instagram",
    				color: "var(--color-text)"
    			},
    			$$inline: true
    		});

    	let each_value = /*pins*/ ctx[0];
    	validate_each_argument(each_value);
    	let each_blocks = [];

    	for (let i = 0; i < each_value.length; i += 1) {
    		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
    	}

    	const block = {
    		c: function create() {
    			content = element("content");
    			header = element("header");
    			nav = element("nav");
    			b0 = element("b");
    			create_component(icon.$$.fragment);
    			t0 = text(" Instagram");
    			t1 = space();
    			input = element("input");
    			t2 = space();
    			ul = element("ul");
    			li0 = element("li");
    			button0 = element("button");
    			button0.textContent = "Log In";
    			t4 = space();
    			li1 = element("li");
    			a0 = element("a");
    			a0.textContent = "Sign Up";
    			t6 = space();
    			profile = element("profile");
    			figure = element("figure");
    			img = element("img");
    			t7 = space();
    			info = element("info");
    			p0 = element("p");
    			b1 = element("b");
    			b1.textContent = "zedshaw";
    			t9 = space();
    			button1 = element("button");
    			button1.textContent = "follow";
    			t11 = space();
    			p1 = element("p");
    			b2 = element("b");
    			b2.textContent = "280";
    			t13 = text(" posts ");
    			b3 = element("b");
    			b3.textContent = "4,695 followers";
    			t15 = space();
    			b4 = element("b");
    			b4.textContent = "1,778 following";
    			t17 = space();
    			p2 = element("p");
    			b5 = element("b");
    			b5.textContent = "Zed A. Shaw";
    			t19 = space();
    			p3 = element("p");
    			t20 = text("Painter in oil, watercolor, and pastel. I’m doing live streams of little paintings on Twitch:");
    			br = element("br");
    			t21 = space();
    			a1 = element("a");
    			a1.textContent = "www.twitch.tv/zedashaw";
    			t23 = space();
    			pins_1 = element("pins");

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			add_location(b0, file$5, 76, 6, 1071);
    			attr_dev(input, "placeholder", "Search");
    			add_location(input, file$5, 77, 6, 1146);
    			attr_dev(button0, "class", "svelte-oov5yx");
    			add_location(button0, file$5, 79, 12, 1198);
    			add_location(li0, file$5, 79, 8, 1194);
    			attr_dev(a0, "class", "svelte-oov5yx");
    			add_location(a0, file$5, 80, 12, 1239);
    			add_location(li1, file$5, 80, 8, 1235);
    			add_location(ul, file$5, 78, 6, 1181);
    			attr_dev(nav, "class", "svelte-oov5yx");
    			add_location(nav, file$5, 75, 4, 1059);
    			attr_dev(header, "class", "svelte-oov5yx");
    			add_location(header, file$5, 74, 2, 1046);
    			attr_dev(img, "alt", "Zed's Face");
    			if (img.src !== (img_src_value = "http://via.placeholder.com/256x256?text=Zed's Face")) attr_dev(img, "src", img_src_value);
    			add_location(img, file$5, 87, 6, 1326);
    			attr_dev(figure, "class", "svelte-oov5yx");
    			add_location(figure, file$5, 86, 4, 1311);
    			add_location(b1, file$5, 92, 8, 1450);
    			attr_dev(button1, "class", "svelte-oov5yx");
    			add_location(button1, file$5, 92, 23, 1465);
    			attr_dev(p0, "class", "svelte-oov5yx");
    			add_location(p0, file$5, 91, 6, 1438);
    			add_location(b2, file$5, 96, 8, 1519);
    			add_location(b3, file$5, 96, 25, 1536);
    			add_location(b4, file$5, 96, 48, 1559);
    			attr_dev(p1, "class", "svelte-oov5yx");
    			add_location(p1, file$5, 95, 6, 1507);
    			add_location(b5, file$5, 99, 9, 1603);
    			attr_dev(p2, "class", "svelte-oov5yx");
    			add_location(p2, file$5, 99, 6, 1600);
    			add_location(br, file$5, 100, 102, 1728);
    			attr_dev(a1, "href", "www.twitch.tv/zedashaw");
    			attr_dev(a1, "class", "svelte-oov5yx");
    			add_location(a1, file$5, 101, 8, 1741);
    			attr_dev(p3, "class", "svelte-oov5yx");
    			add_location(p3, file$5, 100, 6, 1632);
    			attr_dev(info, "class", "svelte-oov5yx");
    			add_location(info, file$5, 90, 4, 1425);
    			attr_dev(profile, "class", "svelte-oov5yx");
    			add_location(profile, file$5, 85, 2, 1297);
    			attr_dev(pins_1, "class", "svelte-oov5yx");
    			add_location(pins_1, file$5, 106, 2, 1840);
    			attr_dev(content, "class", "svelte-oov5yx");
    			add_location(content, file$5, 73, 0, 1034);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, header);
    			append_dev(header, nav);
    			append_dev(nav, b0);
    			mount_component(icon, b0, null);
    			append_dev(b0, t0);
    			append_dev(nav, t1);
    			append_dev(nav, input);
    			append_dev(nav, t2);
    			append_dev(nav, ul);
    			append_dev(ul, li0);
    			append_dev(li0, button0);
    			append_dev(ul, t4);
    			append_dev(ul, li1);
    			append_dev(li1, a0);
    			append_dev(content, t6);
    			append_dev(content, profile);
    			append_dev(profile, figure);
    			append_dev(figure, img);
    			append_dev(profile, t7);
    			append_dev(profile, info);
    			append_dev(info, p0);
    			append_dev(p0, b1);
    			append_dev(p0, t9);
    			append_dev(p0, button1);
    			append_dev(info, t11);
    			append_dev(info, p1);
    			append_dev(p1, b2);
    			append_dev(p1, t13);
    			append_dev(p1, b3);
    			append_dev(p1, t15);
    			append_dev(p1, b4);
    			append_dev(info, t17);
    			append_dev(info, p2);
    			append_dev(p2, b5);
    			append_dev(info, t19);
    			append_dev(info, p3);
    			append_dev(p3, t20);
    			append_dev(p3, br);
    			append_dev(p3, t21);
    			append_dev(p3, a1);
    			append_dev(content, t23);
    			append_dev(content, pins_1);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].m(pins_1, null);
    			}

    			current = true;
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_component(icon);
    			destroy_each(each_blocks, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$6.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$6($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Instagram", slots, []);
    	let pins = [1, 2, 3, 4];
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Instagram> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ link, Icon, pins });

    	$$self.$inject_state = $$props => {
    		if ("pins" in $$props) $$invalidate(0, pins = $$props.pins);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [pins];
    }

    class Instagram extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$6, create_fragment$6, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Instagram",
    			options,
    			id: create_fragment$6.name
    		});
    	}
    }

    /* src/thumbs/Pinterest.svelte generated by Svelte v3.30.0 */
    const file$6 = "src/thumbs/Pinterest.svelte";

    function create_fragment$7(ctx) {
    	let content;
    	let header;
    	let nav;
    	let left;
    	let logo;
    	let icon;
    	let t0;
    	let t1;
    	let a0;
    	let t3;
    	let a1;
    	let t5;
    	let input;
    	let t6;
    	let ul;
    	let li0;
    	let button0;
    	let t8;
    	let li1;
    	let button1;
    	let t10;
    	let profile;
    	let info;
    	let h1;
    	let t12;
    	let p0;
    	let t14;
    	let p1;
    	let b0;
    	let t16;
    	let b1;
    	let t18;
    	let t19;
    	let p2;
    	let t21;
    	let figure;
    	let img;
    	let img_src_value;
    	let current;

    	icon = new Icon({
    			props: { name: "pinterest", color: "var(--color)" },
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			header = element("header");
    			nav = element("nav");
    			left = element("left");
    			logo = element("logo");
    			create_component(icon.$$.fragment);
    			t0 = text(" Pinterest");
    			t1 = space();
    			a0 = element("a");
    			a0.textContent = "Today";
    			t3 = space();
    			a1 = element("a");
    			a1.textContent = "Explore";
    			t5 = space();
    			input = element("input");
    			t6 = space();
    			ul = element("ul");
    			li0 = element("li");
    			button0 = element("button");
    			button0.textContent = "Log In";
    			t8 = space();
    			li1 = element("li");
    			button1 = element("button");
    			button1.textContent = "Sign Up";
    			t10 = space();
    			profile = element("profile");
    			info = element("info");
    			h1 = element("h1");
    			h1.textContent = "Vincent van Gogh";
    			t12 = space();
    			p0 = element("p");
    			p0.textContent = "Collection by A Person";
    			t14 = space();
    			p1 = element("p");
    			b0 = element("b");
    			b0.textContent = "420";
    			t16 = text(" Pins • ");
    			b1 = element("b");
    			b1.textContent = "3.59k";
    			t18 = text(" Followers");
    			t19 = space();
    			p2 = element("p");
    			p2.textContent = "\"I dream my painting and I paint my dream.\" ~ Vincent van Gogh";
    			t21 = space();
    			figure = element("figure");
    			img = element("img");
    			attr_dev(logo, "class", "svelte-1w7ltga");
    			add_location(logo, file$6, 99, 6, 1437);
    			attr_dev(a0, "class", "svelte-1w7ltga");
    			add_location(a0, file$6, 100, 8, 1515);
    			attr_dev(a1, "class", "svelte-1w7ltga");
    			add_location(a1, file$6, 101, 8, 1536);
    			attr_dev(left, "class", "svelte-1w7ltga");
    			add_location(left, file$6, 98, 6, 1424);
    			attr_dev(input, "placeholder", "Search");
    			attr_dev(input, "class", "svelte-1w7ltga");
    			add_location(input, file$6, 104, 6, 1572);
    			attr_dev(button0, "class", "svelte-1w7ltga");
    			add_location(button0, file$6, 107, 12, 1625);
    			attr_dev(li0, "class", "svelte-1w7ltga");
    			add_location(li0, file$6, 107, 8, 1621);
    			attr_dev(button1, "id", "signup");
    			attr_dev(button1, "class", "svelte-1w7ltga");
    			add_location(button1, file$6, 108, 12, 1666);
    			attr_dev(li1, "class", "svelte-1w7ltga");
    			add_location(li1, file$6, 108, 8, 1662);
    			attr_dev(ul, "class", "svelte-1w7ltga");
    			add_location(ul, file$6, 106, 6, 1608);
    			attr_dev(nav, "class", "svelte-1w7ltga");
    			add_location(nav, file$6, 97, 4, 1412);
    			attr_dev(header, "class", "svelte-1w7ltga");
    			add_location(header, file$6, 96, 2, 1399);
    			attr_dev(h1, "class", "svelte-1w7ltga");
    			add_location(h1, file$6, 115, 2, 1767);
    			attr_dev(p0, "class", "svelte-1w7ltga");
    			add_location(p0, file$6, 116, 2, 1795);
    			attr_dev(b0, "class", "svelte-1w7ltga");
    			add_location(b0, file$6, 117, 5, 1830);
    			attr_dev(b1, "class", "svelte-1w7ltga");
    			add_location(b1, file$6, 117, 23, 1848);
    			attr_dev(p1, "class", "svelte-1w7ltga");
    			add_location(p1, file$6, 117, 2, 1827);
    			attr_dev(p2, "class", "svelte-1w7ltga");
    			add_location(p2, file$6, 118, 2, 1877);
    			attr_dev(info, "class", "svelte-1w7ltga");
    			add_location(info, file$6, 114, 2, 1758);
    			attr_dev(img, "alt", "Zed's Face");
    			if (img.src !== (img_src_value = "http://via.placeholder.com/128x128?text=Zed's Face")) attr_dev(img, "src", img_src_value);
    			attr_dev(img, "class", "svelte-1w7ltga");
    			add_location(img, file$6, 122, 4, 1969);
    			attr_dev(figure, "class", "svelte-1w7ltga");
    			add_location(figure, file$6, 121, 2, 1956);
    			attr_dev(profile, "class", "svelte-1w7ltga");
    			add_location(profile, file$6, 113, 2, 1746);
    			attr_dev(content, "class", "svelte-1w7ltga");
    			add_location(content, file$6, 95, 0, 1387);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, header);
    			append_dev(header, nav);
    			append_dev(nav, left);
    			append_dev(left, logo);
    			mount_component(icon, logo, null);
    			append_dev(logo, t0);
    			append_dev(left, t1);
    			append_dev(left, a0);
    			append_dev(left, t3);
    			append_dev(left, a1);
    			append_dev(nav, t5);
    			append_dev(nav, input);
    			append_dev(nav, t6);
    			append_dev(nav, ul);
    			append_dev(ul, li0);
    			append_dev(li0, button0);
    			append_dev(ul, t8);
    			append_dev(ul, li1);
    			append_dev(li1, button1);
    			append_dev(content, t10);
    			append_dev(content, profile);
    			append_dev(profile, info);
    			append_dev(info, h1);
    			append_dev(info, t12);
    			append_dev(info, p0);
    			append_dev(info, t14);
    			append_dev(info, p1);
    			append_dev(p1, b0);
    			append_dev(p1, t16);
    			append_dev(p1, b1);
    			append_dev(p1, t18);
    			append_dev(info, t19);
    			append_dev(info, p2);
    			append_dev(profile, t21);
    			append_dev(profile, figure);
    			append_dev(figure, img);
    			current = true;
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_component(icon);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$7.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$7($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Pinterest", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Pinterest> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ Icon });
    	return [];
    }

    class Pinterest extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$7, create_fragment$7, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Pinterest",
    			options,
    			id: create_fragment$7.name
    		});
    	}
    }

    /* src/thumbs/Login.svelte generated by Svelte v3.30.0 */

    const file$7 = "src/thumbs/Login.svelte";

    function create_fragment$8(ctx) {
    	let content;
    	let spacer0;
    	let t0;
    	let form;
    	let header;
    	let t2;
    	let label0;
    	let t4;
    	let input0;
    	let t5;
    	let label1;
    	let t7;
    	let input1;
    	let t8;
    	let br;
    	let t9;
    	let button;
    	let t11;
    	let spacer1;

    	const block = {
    		c: function create() {
    			content = element("content");
    			spacer0 = element("spacer");
    			t0 = space();
    			form = element("form");
    			header = element("header");
    			header.textContent = "Login";
    			t2 = space();
    			label0 = element("label");
    			label0.textContent = "Username";
    			t4 = space();
    			input0 = element("input");
    			t5 = space();
    			label1 = element("label");
    			label1.textContent = "Password";
    			t7 = space();
    			input1 = element("input");
    			t8 = space();
    			br = element("br");
    			t9 = space();
    			button = element("button");
    			button.textContent = "Login";
    			t11 = space();
    			spacer1 = element("spacer");
    			add_location(spacer0, file$7, 10, 2, 135);
    			add_location(header, file$7, 12, 4, 166);
    			attr_dev(label0, "for", "username");
    			add_location(label0, file$7, 13, 4, 193);
    			attr_dev(input0, "type", "text");
    			attr_dev(input0, "id", "username");
    			attr_dev(input0, "name", "username");
    			attr_dev(input0, "size", "32");
    			attr_dev(input0, "placeholder", "Username");
    			add_location(input0, file$7, 14, 4, 236);
    			attr_dev(label1, "for", "password");
    			add_location(label1, file$7, 15, 4, 323);
    			attr_dev(input1, "type", "password");
    			attr_dev(input1, "id", "password");
    			attr_dev(input1, "name", "password");
    			attr_dev(input1, "size", "32");
    			attr_dev(input1, "placeholder", "Password");
    			add_location(input1, file$7, 16, 4, 366);
    			add_location(br, file$7, 17, 4, 457);
    			attr_dev(button, "type", "submit");
    			add_location(button, file$7, 18, 4, 466);
    			add_location(form, file$7, 11, 2, 155);
    			add_location(spacer1, file$7, 20, 2, 515);
    			attr_dev(content, "class", "svelte-t7gl8c");
    			add_location(content, file$7, 9, 0, 123);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, spacer0);
    			append_dev(content, t0);
    			append_dev(content, form);
    			append_dev(form, header);
    			append_dev(form, t2);
    			append_dev(form, label0);
    			append_dev(form, t4);
    			append_dev(form, input0);
    			append_dev(form, t5);
    			append_dev(form, label1);
    			append_dev(form, t7);
    			append_dev(form, input1);
    			append_dev(form, t8);
    			append_dev(form, br);
    			append_dev(form, t9);
    			append_dev(form, button);
    			append_dev(content, t11);
    			append_dev(content, spacer1);
    		},
    		p: noop,
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$8.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$8($$self, $$props) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Login", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Login> was created with unknown prop '${key}'`);
    	});

    	return [];
    }

    class Login extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$8, create_fragment$8, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Login",
    			options,
    			id: create_fragment$8.name
    		});
    	}
    }

    function simpleSvgPlaceholder({
      width = 300,
      height = 150,
      text = `${width}×${height}`,
      fontFamily = 'sans-serif',
      fontWeight = 'bold',
      fontSize = Math.floor(Math.min(width, height) * 0.2),
      dy = fontSize * 0.35,
      bgColor = '#ddd',
      textColor = 'rgba(0,0,0,0.5)',
      dataUri = true,
      charset = 'UTF-8'
    } = {}) {
      const str = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
    <rect fill="${bgColor}" width="${width}" height="${height}"/>
    <text fill="${textColor}" font-family="${fontFamily}" font-size="${fontSize}" dy="${dy}" font-weight="${fontWeight}" x="50%" y="50%" text-anchor="middle">${text}</text>
  </svg>`;

      // Thanks to: filamentgroup/directory-encoder
      const cleaned = str
        .replace(/[\t\n\r]/gim, '') // Strip newlines and tabs
        .replace(/\s\s+/g, ' ') // Condense multiple spaces
        .replace(/'/gim, '\\i'); // Normalize quotes

      if (dataUri) {
        const encoded = encodeURIComponent(cleaned)
          .replace(/\(/g, '%28') // Encode brackets
          .replace(/\)/g, '%29');

        return `data:image/svg+xml;charset=${charset},${encoded}`;
      }

      return cleaned;
    }

    var simpleSvgPlaceholder_1 = simpleSvgPlaceholder;

    const defaults = {
      bgColor: '#ccc',
      textColor: '#888',
    };

    const holder = (x, y) => simpleSvgPlaceholder_1({...defaults, width: x, height: y});

    /* src/thumbs/Tiles.svelte generated by Svelte v3.30.0 */
    const file$8 = "src/thumbs/Tiles.svelte";

    function create_fragment$9(ctx) {
    	let content;
    	let tile;
    	let left;
    	let img;
    	let img_src_value;
    	let t0;
    	let middle;
    	let h4;
    	let t2;
    	let p;
    	let t4;
    	let right;
    	let button0;
    	let icon0;
    	let t5;
    	let button1;
    	let icon1;
    	let current;

    	icon0 = new Icon({
    			props: {
    				name: "check-circle",
    				color: "var(--color-bg)",
    				size: "24"
    			},
    			$$inline: true
    		});

    	icon1 = new Icon({
    			props: {
    				name: "x-circle",
    				color: "var(--color-bg)",
    				size: "24"
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			tile = element("tile");
    			left = element("left");
    			img = element("img");
    			t0 = space();
    			middle = element("middle");
    			h4 = element("h4");
    			h4.textContent = "Tile Example";
    			t2 = space();
    			p = element("p");
    			p.textContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
    			t4 = space();
    			right = element("right");
    			button0 = element("button");
    			create_component(icon0.$$.fragment);
    			t5 = space();
    			button1 = element("button");
    			create_component(icon1.$$.fragment);
    			if (img.src !== (img_src_value = holder(48, 48))) attr_dev(img, "src", img_src_value);
    			add_location(img, file$8, 46, 6, 779);
    			add_location(left, file$8, 45, 4, 766);
    			attr_dev(h4, "class", "svelte-fwzpwr");
    			add_location(h4, file$8, 50, 6, 841);
    			add_location(p, file$8, 53, 6, 885);
    			attr_dev(middle, "class", "svelte-fwzpwr");
    			add_location(middle, file$8, 49, 4, 826);
    			attr_dev(button0, "class", "svelte-fwzpwr");
    			add_location(button0, file$8, 57, 4, 1047);
    			attr_dev(button1, "class", "svelte-fwzpwr");
    			add_location(button1, file$8, 58, 4, 1131);
    			attr_dev(right, "class", "svelte-fwzpwr");
    			add_location(right, file$8, 56, 4, 1035);
    			attr_dev(tile, "class", "svelte-fwzpwr");
    			add_location(tile, file$8, 44, 2, 755);
    			attr_dev(content, "class", "svelte-fwzpwr");
    			add_location(content, file$8, 43, 0, 743);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, tile);
    			append_dev(tile, left);
    			append_dev(left, img);
    			append_dev(tile, t0);
    			append_dev(tile, middle);
    			append_dev(middle, h4);
    			append_dev(middle, t2);
    			append_dev(middle, p);
    			append_dev(tile, t4);
    			append_dev(tile, right);
    			append_dev(right, button0);
    			mount_component(icon0, button0, null);
    			append_dev(right, t5);
    			append_dev(right, button1);
    			mount_component(icon1, button1, null);
    			current = true;
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon0.$$.fragment, local);
    			transition_in(icon1.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon0.$$.fragment, local);
    			transition_out(icon1.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_component(icon0);
    			destroy_component(icon1);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$9.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$9($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Tiles", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Tiles> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ Icon, holder });
    	return [];
    }

    class Tiles extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$9, create_fragment$9, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Tiles",
    			options,
    			id: create_fragment$9.name
    		});
    	}
    }

    var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

    function createCommonjsModule(fn, basedir, module) {
    	return module = {
    		path: basedir,
    		exports: {},
    		require: function (path, base) {
    			return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
    		}
    	}, fn(module, module.exports), module.exports;
    }

    function commonjsRequire () {
    	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
    }

    var prism = createCommonjsModule(function (module) {
    /* **********************************************
         Begin prism-core.js
    ********************************************** */

    /// <reference lib="WebWorker"/>

    var _self = (typeof window !== 'undefined')
    	? window   // if in browser
    	: (
    		(typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope)
    		? self // if in worker
    		: {}   // if in node js
    	);

    /**
     * Prism: Lightweight, robust, elegant syntax highlighting
     *
     * @license MIT <https://opensource.org/licenses/MIT>
     * @author Lea Verou <https://lea.verou.me>
     * @namespace
     * @public
     */
    var Prism = (function (_self){

    // Private helper vars
    var lang = /\blang(?:uage)?-([\w-]+)\b/i;
    var uniqueId = 0;


    var _ = {
    	/**
    	 * By default, Prism will attempt to highlight all code elements (by calling {@link Prism.highlightAll}) on the
    	 * current page after the page finished loading. This might be a problem if e.g. you wanted to asynchronously load
    	 * additional languages or plugins yourself.
    	 *
    	 * By setting this value to `true`, Prism will not automatically highlight all code elements on the page.
    	 *
    	 * You obviously have to change this value before the automatic highlighting started. To do this, you can add an
    	 * empty Prism object into the global scope before loading the Prism script like this:
    	 *
    	 * ```js
    	 * window.Prism = window.Prism || {};
    	 * Prism.manual = true;
    	 * // add a new <script> to load Prism's script
    	 * ```
    	 *
    	 * @default false
    	 * @type {boolean}
    	 * @memberof Prism
    	 * @public
    	 */
    	manual: _self.Prism && _self.Prism.manual,
    	disableWorkerMessageHandler: _self.Prism && _self.Prism.disableWorkerMessageHandler,

    	/**
    	 * A namespace for utility methods.
    	 *
    	 * All function in this namespace that are not explicitly marked as _public_ are for __internal use only__ and may
    	 * change or disappear at any time.
    	 *
    	 * @namespace
    	 * @memberof Prism
    	 */
    	util: {
    		encode: function encode(tokens) {
    			if (tokens instanceof Token) {
    				return new Token(tokens.type, encode(tokens.content), tokens.alias);
    			} else if (Array.isArray(tokens)) {
    				return tokens.map(encode);
    			} else {
    				return tokens.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\u00a0/g, ' ');
    			}
    		},

    		/**
    		 * Returns the name of the type of the given value.
    		 *
    		 * @param {any} o
    		 * @returns {string}
    		 * @example
    		 * type(null)      === 'Null'
    		 * type(undefined) === 'Undefined'
    		 * type(123)       === 'Number'
    		 * type('foo')     === 'String'
    		 * type(true)      === 'Boolean'
    		 * type([1, 2])    === 'Array'
    		 * type({})        === 'Object'
    		 * type(String)    === 'Function'
    		 * type(/abc+/)    === 'RegExp'
    		 */
    		type: function (o) {
    			return Object.prototype.toString.call(o).slice(8, -1);
    		},

    		/**
    		 * Returns a unique number for the given object. Later calls will still return the same number.
    		 *
    		 * @param {Object} obj
    		 * @returns {number}
    		 */
    		objId: function (obj) {
    			if (!obj['__id']) {
    				Object.defineProperty(obj, '__id', { value: ++uniqueId });
    			}
    			return obj['__id'];
    		},

    		/**
    		 * Creates a deep clone of the given object.
    		 *
    		 * The main intended use of this function is to clone language definitions.
    		 *
    		 * @param {T} o
    		 * @param {Record<number, any>} [visited]
    		 * @returns {T}
    		 * @template T
    		 */
    		clone: function deepClone(o, visited) {
    			visited = visited || {};

    			var clone, id;
    			switch (_.util.type(o)) {
    				case 'Object':
    					id = _.util.objId(o);
    					if (visited[id]) {
    						return visited[id];
    					}
    					clone = /** @type {Record<string, any>} */ ({});
    					visited[id] = clone;

    					for (var key in o) {
    						if (o.hasOwnProperty(key)) {
    							clone[key] = deepClone(o[key], visited);
    						}
    					}

    					return /** @type {any} */ (clone);

    				case 'Array':
    					id = _.util.objId(o);
    					if (visited[id]) {
    						return visited[id];
    					}
    					clone = [];
    					visited[id] = clone;

    					(/** @type {Array} */(/** @type {any} */(o))).forEach(function (v, i) {
    						clone[i] = deepClone(v, visited);
    					});

    					return /** @type {any} */ (clone);

    				default:
    					return o;
    			}
    		},

    		/**
    		 * Returns the Prism language of the given element set by a `language-xxxx` or `lang-xxxx` class.
    		 *
    		 * If no language is set for the element or the element is `null` or `undefined`, `none` will be returned.
    		 *
    		 * @param {Element} element
    		 * @returns {string}
    		 */
    		getLanguage: function (element) {
    			while (element && !lang.test(element.className)) {
    				element = element.parentElement;
    			}
    			if (element) {
    				return (element.className.match(lang) || [, 'none'])[1].toLowerCase();
    			}
    			return 'none';
    		},

    		/**
    		 * Returns the script element that is currently executing.
    		 *
    		 * This does __not__ work for line script element.
    		 *
    		 * @returns {HTMLScriptElement | null}
    		 */
    		currentScript: function () {
    			if (typeof document === 'undefined') {
    				return null;
    			}
    			if ('currentScript' in document && 1 < 2 /* hack to trip TS' flow analysis */) {
    				return /** @type {any} */ (document.currentScript);
    			}

    			// IE11 workaround
    			// we'll get the src of the current script by parsing IE11's error stack trace
    			// this will not work for inline scripts

    			try {
    				throw new Error();
    			} catch (err) {
    				// Get file src url from stack. Specifically works with the format of stack traces in IE.
    				// A stack will look like this:
    				//
    				// Error
    				//    at _.util.currentScript (http://localhost/components/prism-core.js:119:5)
    				//    at Global code (http://localhost/components/prism-core.js:606:1)

    				var src = (/at [^(\r\n]*\((.*):.+:.+\)$/i.exec(err.stack) || [])[1];
    				if (src) {
    					var scripts = document.getElementsByTagName('script');
    					for (var i in scripts) {
    						if (scripts[i].src == src) {
    							return scripts[i];
    						}
    					}
    				}
    				return null;
    			}
    		},

    		/**
    		 * Returns whether a given class is active for `element`.
    		 *
    		 * The class can be activated if `element` or one of its ancestors has the given class and it can be deactivated
    		 * if `element` or one of its ancestors has the negated version of the given class. The _negated version_ of the
    		 * given class is just the given class with a `no-` prefix.
    		 *
    		 * Whether the class is active is determined by the closest ancestor of `element` (where `element` itself is
    		 * closest ancestor) that has the given class or the negated version of it. If neither `element` nor any of its
    		 * ancestors have the given class or the negated version of it, then the default activation will be returned.
    		 *
    		 * In the paradoxical situation where the closest ancestor contains __both__ the given class and the negated
    		 * version of it, the class is considered active.
    		 *
    		 * @param {Element} element
    		 * @param {string} className
    		 * @param {boolean} [defaultActivation=false]
    		 * @returns {boolean}
    		 */
    		isActive: function (element, className, defaultActivation) {
    			var no = 'no-' + className;

    			while (element) {
    				var classList = element.classList;
    				if (classList.contains(className)) {
    					return true;
    				}
    				if (classList.contains(no)) {
    					return false;
    				}
    				element = element.parentElement;
    			}
    			return !!defaultActivation;
    		}
    	},

    	/**
    	 * This namespace contains all currently loaded languages and the some helper functions to create and modify languages.
    	 *
    	 * @namespace
    	 * @memberof Prism
    	 * @public
    	 */
    	languages: {
    		/**
    		 * Creates a deep copy of the language with the given id and appends the given tokens.
    		 *
    		 * If a token in `redef` also appears in the copied language, then the existing token in the copied language
    		 * will be overwritten at its original position.
    		 *
    		 * ## Best practices
    		 *
    		 * Since the position of overwriting tokens (token in `redef` that overwrite tokens in the copied language)
    		 * doesn't matter, they can technically be in any order. However, this can be confusing to others that trying to
    		 * understand the language definition because, normally, the order of tokens matters in Prism grammars.
    		 *
    		 * Therefore, it is encouraged to order overwriting tokens according to the positions of the overwritten tokens.
    		 * Furthermore, all non-overwriting tokens should be placed after the overwriting ones.
    		 *
    		 * @param {string} id The id of the language to extend. This has to be a key in `Prism.languages`.
    		 * @param {Grammar} redef The new tokens to append.
    		 * @returns {Grammar} The new language created.
    		 * @public
    		 * @example
    		 * Prism.languages['css-with-colors'] = Prism.languages.extend('css', {
    		 *     // Prism.languages.css already has a 'comment' token, so this token will overwrite CSS' 'comment' token
    		 *     // at its original position
    		 *     'comment': { ... },
    		 *     // CSS doesn't have a 'color' token, so this token will be appended
    		 *     'color': /\b(?:red|green|blue)\b/
    		 * });
    		 */
    		extend: function (id, redef) {
    			var lang = _.util.clone(_.languages[id]);

    			for (var key in redef) {
    				lang[key] = redef[key];
    			}

    			return lang;
    		},

    		/**
    		 * Inserts tokens _before_ another token in a language definition or any other grammar.
    		 *
    		 * ## Usage
    		 *
    		 * This helper method makes it easy to modify existing languages. For example, the CSS language definition
    		 * not only defines CSS highlighting for CSS documents, but also needs to define highlighting for CSS embedded
    		 * in HTML through `<style>` elements. To do this, it needs to modify `Prism.languages.markup` and add the
    		 * appropriate tokens. However, `Prism.languages.markup` is a regular JavaScript object literal, so if you do
    		 * this:
    		 *
    		 * ```js
    		 * Prism.languages.markup.style = {
    		 *     // token
    		 * };
    		 * ```
    		 *
    		 * then the `style` token will be added (and processed) at the end. `insertBefore` allows you to insert tokens
    		 * before existing tokens. For the CSS example above, you would use it like this:
    		 *
    		 * ```js
    		 * Prism.languages.insertBefore('markup', 'cdata', {
    		 *     'style': {
    		 *         // token
    		 *     }
    		 * });
    		 * ```
    		 *
    		 * ## Special cases
    		 *
    		 * If the grammars of `inside` and `insert` have tokens with the same name, the tokens in `inside`'s grammar
    		 * will be ignored.
    		 *
    		 * This behavior can be used to insert tokens after `before`:
    		 *
    		 * ```js
    		 * Prism.languages.insertBefore('markup', 'comment', {
    		 *     'comment': Prism.languages.markup.comment,
    		 *     // tokens after 'comment'
    		 * });
    		 * ```
    		 *
    		 * ## Limitations
    		 *
    		 * The main problem `insertBefore` has to solve is iteration order. Since ES2015, the iteration order for object
    		 * properties is guaranteed to be the insertion order (except for integer keys) but some browsers behave
    		 * differently when keys are deleted and re-inserted. So `insertBefore` can't be implemented by temporarily
    		 * deleting properties which is necessary to insert at arbitrary positions.
    		 *
    		 * To solve this problem, `insertBefore` doesn't actually insert the given tokens into the target object.
    		 * Instead, it will create a new object and replace all references to the target object with the new one. This
    		 * can be done without temporarily deleting properties, so the iteration order is well-defined.
    		 *
    		 * However, only references that can be reached from `Prism.languages` or `insert` will be replaced. I.e. if
    		 * you hold the target object in a variable, then the value of the variable will not change.
    		 *
    		 * ```js
    		 * var oldMarkup = Prism.languages.markup;
    		 * var newMarkup = Prism.languages.insertBefore('markup', 'comment', { ... });
    		 *
    		 * assert(oldMarkup !== Prism.languages.markup);
    		 * assert(newMarkup === Prism.languages.markup);
    		 * ```
    		 *
    		 * @param {string} inside The property of `root` (e.g. a language id in `Prism.languages`) that contains the
    		 * object to be modified.
    		 * @param {string} before The key to insert before.
    		 * @param {Grammar} insert An object containing the key-value pairs to be inserted.
    		 * @param {Object<string, any>} [root] The object containing `inside`, i.e. the object that contains the
    		 * object to be modified.
    		 *
    		 * Defaults to `Prism.languages`.
    		 * @returns {Grammar} The new grammar object.
    		 * @public
    		 */
    		insertBefore: function (inside, before, insert, root) {
    			root = root || /** @type {any} */ (_.languages);
    			var grammar = root[inside];
    			/** @type {Grammar} */
    			var ret = {};

    			for (var token in grammar) {
    				if (grammar.hasOwnProperty(token)) {

    					if (token == before) {
    						for (var newToken in insert) {
    							if (insert.hasOwnProperty(newToken)) {
    								ret[newToken] = insert[newToken];
    							}
    						}
    					}

    					// Do not insert token which also occur in insert. See #1525
    					if (!insert.hasOwnProperty(token)) {
    						ret[token] = grammar[token];
    					}
    				}
    			}

    			var old = root[inside];
    			root[inside] = ret;

    			// Update references in other language definitions
    			_.languages.DFS(_.languages, function(key, value) {
    				if (value === old && key != inside) {
    					this[key] = ret;
    				}
    			});

    			return ret;
    		},

    		// Traverse a language definition with Depth First Search
    		DFS: function DFS(o, callback, type, visited) {
    			visited = visited || {};

    			var objId = _.util.objId;

    			for (var i in o) {
    				if (o.hasOwnProperty(i)) {
    					callback.call(o, i, o[i], type || i);

    					var property = o[i],
    					    propertyType = _.util.type(property);

    					if (propertyType === 'Object' && !visited[objId(property)]) {
    						visited[objId(property)] = true;
    						DFS(property, callback, null, visited);
    					}
    					else if (propertyType === 'Array' && !visited[objId(property)]) {
    						visited[objId(property)] = true;
    						DFS(property, callback, i, visited);
    					}
    				}
    			}
    		}
    	},

    	plugins: {},

    	/**
    	 * This is the most high-level function in Prism’s API.
    	 * It fetches all the elements that have a `.language-xxxx` class and then calls {@link Prism.highlightElement} on
    	 * each one of them.
    	 *
    	 * This is equivalent to `Prism.highlightAllUnder(document, async, callback)`.
    	 *
    	 * @param {boolean} [async=false] Same as in {@link Prism.highlightAllUnder}.
    	 * @param {HighlightCallback} [callback] Same as in {@link Prism.highlightAllUnder}.
    	 * @memberof Prism
    	 * @public
    	 */
    	highlightAll: function(async, callback) {
    		_.highlightAllUnder(document, async, callback);
    	},

    	/**
    	 * Fetches all the descendants of `container` that have a `.language-xxxx` class and then calls
    	 * {@link Prism.highlightElement} on each one of them.
    	 *
    	 * The following hooks will be run:
    	 * 1. `before-highlightall`
    	 * 2. `before-all-elements-highlight`
    	 * 3. All hooks of {@link Prism.highlightElement} for each element.
    	 *
    	 * @param {ParentNode} container The root element, whose descendants that have a `.language-xxxx` class will be highlighted.
    	 * @param {boolean} [async=false] Whether each element is to be highlighted asynchronously using Web Workers.
    	 * @param {HighlightCallback} [callback] An optional callback to be invoked on each element after its highlighting is done.
    	 * @memberof Prism
    	 * @public
    	 */
    	highlightAllUnder: function(container, async, callback) {
    		var env = {
    			callback: callback,
    			container: container,
    			selector: 'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'
    		};

    		_.hooks.run('before-highlightall', env);

    		env.elements = Array.prototype.slice.apply(env.container.querySelectorAll(env.selector));

    		_.hooks.run('before-all-elements-highlight', env);

    		for (var i = 0, element; element = env.elements[i++];) {
    			_.highlightElement(element, async === true, env.callback);
    		}
    	},

    	/**
    	 * Highlights the code inside a single element.
    	 *
    	 * The following hooks will be run:
    	 * 1. `before-sanity-check`
    	 * 2. `before-highlight`
    	 * 3. All hooks of {@link Prism.highlight}. These hooks will be run by an asynchronous worker if `async` is `true`.
    	 * 4. `before-insert`
    	 * 5. `after-highlight`
    	 * 6. `complete`
    	 *
    	 * Some the above hooks will be skipped if the element doesn't contain any text or there is no grammar loaded for
    	 * the element's language.
    	 *
    	 * @param {Element} element The element containing the code.
    	 * It must have a class of `language-xxxx` to be processed, where `xxxx` is a valid language identifier.
    	 * @param {boolean} [async=false] Whether the element is to be highlighted asynchronously using Web Workers
    	 * to improve performance and avoid blocking the UI when highlighting very large chunks of code. This option is
    	 * [disabled by default](https://prismjs.com/faq.html#why-is-asynchronous-highlighting-disabled-by-default).
    	 *
    	 * Note: All language definitions required to highlight the code must be included in the main `prism.js` file for
    	 * asynchronous highlighting to work. You can build your own bundle on the
    	 * [Download page](https://prismjs.com/download.html).
    	 * @param {HighlightCallback} [callback] An optional callback to be invoked after the highlighting is done.
    	 * Mostly useful when `async` is `true`, since in that case, the highlighting is done asynchronously.
    	 * @memberof Prism
    	 * @public
    	 */
    	highlightElement: function(element, async, callback) {
    		// Find language
    		var language = _.util.getLanguage(element);
    		var grammar = _.languages[language];

    		// Set language on the element, if not present
    		element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;

    		// Set language on the parent, for styling
    		var parent = element.parentElement;
    		if (parent && parent.nodeName.toLowerCase() === 'pre') {
    			parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
    		}

    		var code = element.textContent;

    		var env = {
    			element: element,
    			language: language,
    			grammar: grammar,
    			code: code
    		};

    		function insertHighlightedCode(highlightedCode) {
    			env.highlightedCode = highlightedCode;

    			_.hooks.run('before-insert', env);

    			env.element.innerHTML = env.highlightedCode;

    			_.hooks.run('after-highlight', env);
    			_.hooks.run('complete', env);
    			callback && callback.call(env.element);
    		}

    		_.hooks.run('before-sanity-check', env);

    		if (!env.code) {
    			_.hooks.run('complete', env);
    			callback && callback.call(env.element);
    			return;
    		}

    		_.hooks.run('before-highlight', env);

    		if (!env.grammar) {
    			insertHighlightedCode(_.util.encode(env.code));
    			return;
    		}

    		if (async && _self.Worker) {
    			var worker = new Worker(_.filename);

    			worker.onmessage = function(evt) {
    				insertHighlightedCode(evt.data);
    			};

    			worker.postMessage(JSON.stringify({
    				language: env.language,
    				code: env.code,
    				immediateClose: true
    			}));
    		}
    		else {
    			insertHighlightedCode(_.highlight(env.code, env.grammar, env.language));
    		}
    	},

    	/**
    	 * Low-level function, only use if you know what you’re doing. It accepts a string of text as input
    	 * and the language definitions to use, and returns a string with the HTML produced.
    	 *
    	 * The following hooks will be run:
    	 * 1. `before-tokenize`
    	 * 2. `after-tokenize`
    	 * 3. `wrap`: On each {@link Token}.
    	 *
    	 * @param {string} text A string with the code to be highlighted.
    	 * @param {Grammar} grammar An object containing the tokens to use.
    	 *
    	 * Usually a language definition like `Prism.languages.markup`.
    	 * @param {string} language The name of the language definition passed to `grammar`.
    	 * @returns {string} The highlighted HTML.
    	 * @memberof Prism
    	 * @public
    	 * @example
    	 * Prism.highlight('var foo = true;', Prism.languages.javascript, 'javascript');
    	 */
    	highlight: function (text, grammar, language) {
    		var env = {
    			code: text,
    			grammar: grammar,
    			language: language
    		};
    		_.hooks.run('before-tokenize', env);
    		env.tokens = _.tokenize(env.code, env.grammar);
    		_.hooks.run('after-tokenize', env);
    		return Token.stringify(_.util.encode(env.tokens), env.language);
    	},

    	/**
    	 * This is the heart of Prism, and the most low-level function you can use. It accepts a string of text as input
    	 * and the language definitions to use, and returns an array with the tokenized code.
    	 *
    	 * When the language definition includes nested tokens, the function is called recursively on each of these tokens.
    	 *
    	 * This method could be useful in other contexts as well, as a very crude parser.
    	 *
    	 * @param {string} text A string with the code to be highlighted.
    	 * @param {Grammar} grammar An object containing the tokens to use.
    	 *
    	 * Usually a language definition like `Prism.languages.markup`.
    	 * @returns {TokenStream} An array of strings and tokens, a token stream.
    	 * @memberof Prism
    	 * @public
    	 * @example
    	 * let code = `var foo = 0;`;
    	 * let tokens = Prism.tokenize(code, Prism.languages.javascript);
    	 * tokens.forEach(token => {
    	 *     if (token instanceof Prism.Token && token.type === 'number') {
    	 *         console.log(`Found numeric literal: ${token.content}`);
    	 *     }
    	 * });
    	 */
    	tokenize: function(text, grammar) {
    		var rest = grammar.rest;
    		if (rest) {
    			for (var token in rest) {
    				grammar[token] = rest[token];
    			}

    			delete grammar.rest;
    		}

    		var tokenList = new LinkedList();
    		addAfter(tokenList, tokenList.head, text);

    		matchGrammar(text, tokenList, grammar, tokenList.head, 0);

    		return toArray(tokenList);
    	},

    	/**
    	 * @namespace
    	 * @memberof Prism
    	 * @public
    	 */
    	hooks: {
    		all: {},

    		/**
    		 * Adds the given callback to the list of callbacks for the given hook.
    		 *
    		 * The callback will be invoked when the hook it is registered for is run.
    		 * Hooks are usually directly run by a highlight function but you can also run hooks yourself.
    		 *
    		 * One callback function can be registered to multiple hooks and the same hook multiple times.
    		 *
    		 * @param {string} name The name of the hook.
    		 * @param {HookCallback} callback The callback function which is given environment variables.
    		 * @public
    		 */
    		add: function (name, callback) {
    			var hooks = _.hooks.all;

    			hooks[name] = hooks[name] || [];

    			hooks[name].push(callback);
    		},

    		/**
    		 * Runs a hook invoking all registered callbacks with the given environment variables.
    		 *
    		 * Callbacks will be invoked synchronously and in the order in which they were registered.
    		 *
    		 * @param {string} name The name of the hook.
    		 * @param {Object<string, any>} env The environment variables of the hook passed to all callbacks registered.
    		 * @public
    		 */
    		run: function (name, env) {
    			var callbacks = _.hooks.all[name];

    			if (!callbacks || !callbacks.length) {
    				return;
    			}

    			for (var i=0, callback; callback = callbacks[i++];) {
    				callback(env);
    			}
    		}
    	},

    	Token: Token
    };
    _self.Prism = _;


    // Typescript note:
    // The following can be used to import the Token type in JSDoc:
    //
    //   @typedef {InstanceType<import("./prism-core")["Token"]>} Token

    /**
     * Creates a new token.
     *
     * @param {string} type See {@link Token#type type}
     * @param {string | TokenStream} content See {@link Token#content content}
     * @param {string|string[]} [alias] The alias(es) of the token.
     * @param {string} [matchedStr=""] A copy of the full string this token was created from.
     * @class
     * @global
     * @public
     */
    function Token(type, content, alias, matchedStr) {
    	/**
    	 * The type of the token.
    	 *
    	 * This is usually the key of a pattern in a {@link Grammar}.
    	 *
    	 * @type {string}
    	 * @see GrammarToken
    	 * @public
    	 */
    	this.type = type;
    	/**
    	 * The strings or tokens contained by this token.
    	 *
    	 * This will be a token stream if the pattern matched also defined an `inside` grammar.
    	 *
    	 * @type {string | TokenStream}
    	 * @public
    	 */
    	this.content = content;
    	/**
    	 * The alias(es) of the token.
    	 *
    	 * @type {string|string[]}
    	 * @see GrammarToken
    	 * @public
    	 */
    	this.alias = alias;
    	// Copy of the full string this token was created from
    	this.length = (matchedStr || '').length | 0;
    }

    /**
     * A token stream is an array of strings and {@link Token Token} objects.
     *
     * Token streams have to fulfill a few properties that are assumed by most functions (mostly internal ones) that process
     * them.
     *
     * 1. No adjacent strings.
     * 2. No empty strings.
     *
     *    The only exception here is the token stream that only contains the empty string and nothing else.
     *
     * @typedef {Array<string | Token>} TokenStream
     * @global
     * @public
     */

    /**
     * Converts the given token or token stream to an HTML representation.
     *
     * The following hooks will be run:
     * 1. `wrap`: On each {@link Token}.
     *
     * @param {string | Token | TokenStream} o The token or token stream to be converted.
     * @param {string} language The name of current language.
     * @returns {string} The HTML representation of the token or token stream.
     * @memberof Token
     * @static
     */
    Token.stringify = function stringify(o, language) {
    	if (typeof o == 'string') {
    		return o;
    	}
    	if (Array.isArray(o)) {
    		var s = '';
    		o.forEach(function (e) {
    			s += stringify(e, language);
    		});
    		return s;
    	}

    	var env = {
    		type: o.type,
    		content: stringify(o.content, language),
    		tag: 'span',
    		classes: ['token', o.type],
    		attributes: {},
    		language: language
    	};

    	var aliases = o.alias;
    	if (aliases) {
    		if (Array.isArray(aliases)) {
    			Array.prototype.push.apply(env.classes, aliases);
    		} else {
    			env.classes.push(aliases);
    		}
    	}

    	_.hooks.run('wrap', env);

    	var attributes = '';
    	for (var name in env.attributes) {
    		attributes += ' ' + name + '="' + (env.attributes[name] || '').replace(/"/g, '&quot;') + '"';
    	}

    	return '<' + env.tag + ' class="' + env.classes.join(' ') + '"' + attributes + '>' + env.content + '</' + env.tag + '>';
    };

    /**
     * @param {string} text
     * @param {LinkedList<string | Token>} tokenList
     * @param {any} grammar
     * @param {LinkedListNode<string | Token>} startNode
     * @param {number} startPos
     * @param {RematchOptions} [rematch]
     * @returns {void}
     * @private
     *
     * @typedef RematchOptions
     * @property {string} cause
     * @property {number} reach
     */
    function matchGrammar(text, tokenList, grammar, startNode, startPos, rematch) {
    	for (var token in grammar) {
    		if (!grammar.hasOwnProperty(token) || !grammar[token]) {
    			continue;
    		}

    		var patterns = grammar[token];
    		patterns = Array.isArray(patterns) ? patterns : [patterns];

    		for (var j = 0; j < patterns.length; ++j) {
    			if (rematch && rematch.cause == token + ',' + j) {
    				return;
    			}

    			var patternObj = patterns[j],
    				inside = patternObj.inside,
    				lookbehind = !!patternObj.lookbehind,
    				greedy = !!patternObj.greedy,
    				lookbehindLength = 0,
    				alias = patternObj.alias;

    			if (greedy && !patternObj.pattern.global) {
    				// Without the global flag, lastIndex won't work
    				var flags = patternObj.pattern.toString().match(/[imsuy]*$/)[0];
    				patternObj.pattern = RegExp(patternObj.pattern.source, flags + 'g');
    			}

    			/** @type {RegExp} */
    			var pattern = patternObj.pattern || patternObj;

    			for ( // iterate the token list and keep track of the current token/string position
    				var currentNode = startNode.next, pos = startPos;
    				currentNode !== tokenList.tail;
    				pos += currentNode.value.length, currentNode = currentNode.next
    			) {

    				if (rematch && pos >= rematch.reach) {
    					break;
    				}

    				var str = currentNode.value;

    				if (tokenList.length > text.length) {
    					// Something went terribly wrong, ABORT, ABORT!
    					return;
    				}

    				if (str instanceof Token) {
    					continue;
    				}

    				var removeCount = 1; // this is the to parameter of removeBetween

    				if (greedy && currentNode != tokenList.tail.prev) {
    					pattern.lastIndex = pos;
    					var match = pattern.exec(text);
    					if (!match) {
    						break;
    					}

    					var from = match.index + (lookbehind && match[1] ? match[1].length : 0);
    					var to = match.index + match[0].length;
    					var p = pos;

    					// find the node that contains the match
    					p += currentNode.value.length;
    					while (from >= p) {
    						currentNode = currentNode.next;
    						p += currentNode.value.length;
    					}
    					// adjust pos (and p)
    					p -= currentNode.value.length;
    					pos = p;

    					// the current node is a Token, then the match starts inside another Token, which is invalid
    					if (currentNode.value instanceof Token) {
    						continue;
    					}

    					// find the last node which is affected by this match
    					for (
    						var k = currentNode;
    						k !== tokenList.tail && (p < to || typeof k.value === 'string');
    						k = k.next
    					) {
    						removeCount++;
    						p += k.value.length;
    					}
    					removeCount--;

    					// replace with the new match
    					str = text.slice(pos, p);
    					match.index -= pos;
    				} else {
    					pattern.lastIndex = 0;

    					var match = pattern.exec(str);
    				}

    				if (!match) {
    					continue;
    				}

    				if (lookbehind) {
    					lookbehindLength = match[1] ? match[1].length : 0;
    				}

    				var from = match.index + lookbehindLength,
    					matchStr = match[0].slice(lookbehindLength),
    					to = from + matchStr.length,
    					before = str.slice(0, from),
    					after = str.slice(to);

    				var reach = pos + str.length;
    				if (rematch && reach > rematch.reach) {
    					rematch.reach = reach;
    				}

    				var removeFrom = currentNode.prev;

    				if (before) {
    					removeFrom = addAfter(tokenList, removeFrom, before);
    					pos += before.length;
    				}

    				removeRange(tokenList, removeFrom, removeCount);

    				var wrapped = new Token(token, inside ? _.tokenize(matchStr, inside) : matchStr, alias, matchStr);
    				currentNode = addAfter(tokenList, removeFrom, wrapped);

    				if (after) {
    					addAfter(tokenList, currentNode, after);
    				}

    				if (removeCount > 1) {
    					// at least one Token object was removed, so we have to do some rematching
    					// this can only happen if the current pattern is greedy
    					matchGrammar(text, tokenList, grammar, currentNode.prev, pos, {
    						cause: token + ',' + j,
    						reach: reach
    					});
    				}
    			}
    		}
    	}
    }

    /**
     * @typedef LinkedListNode
     * @property {T} value
     * @property {LinkedListNode<T> | null} prev The previous node.
     * @property {LinkedListNode<T> | null} next The next node.
     * @template T
     * @private
     */

    /**
     * @template T
     * @private
     */
    function LinkedList() {
    	/** @type {LinkedListNode<T>} */
    	var head = { value: null, prev: null, next: null };
    	/** @type {LinkedListNode<T>} */
    	var tail = { value: null, prev: head, next: null };
    	head.next = tail;

    	/** @type {LinkedListNode<T>} */
    	this.head = head;
    	/** @type {LinkedListNode<T>} */
    	this.tail = tail;
    	this.length = 0;
    }

    /**
     * Adds a new node with the given value to the list.
     * @param {LinkedList<T>} list
     * @param {LinkedListNode<T>} node
     * @param {T} value
     * @returns {LinkedListNode<T>} The added node.
     * @template T
     */
    function addAfter(list, node, value) {
    	// assumes that node != list.tail && values.length >= 0
    	var next = node.next;

    	var newNode = { value: value, prev: node, next: next };
    	node.next = newNode;
    	next.prev = newNode;
    	list.length++;

    	return newNode;
    }
    /**
     * Removes `count` nodes after the given node. The given node will not be removed.
     * @param {LinkedList<T>} list
     * @param {LinkedListNode<T>} node
     * @param {number} count
     * @template T
     */
    function removeRange(list, node, count) {
    	var next = node.next;
    	for (var i = 0; i < count && next !== list.tail; i++) {
    		next = next.next;
    	}
    	node.next = next;
    	next.prev = node;
    	list.length -= i;
    }
    /**
     * @param {LinkedList<T>} list
     * @returns {T[]}
     * @template T
     */
    function toArray(list) {
    	var array = [];
    	var node = list.head.next;
    	while (node !== list.tail) {
    		array.push(node.value);
    		node = node.next;
    	}
    	return array;
    }


    if (!_self.document) {
    	if (!_self.addEventListener) {
    		// in Node.js
    		return _;
    	}

    	if (!_.disableWorkerMessageHandler) {
    		// In worker
    		_self.addEventListener('message', function (evt) {
    			var message = JSON.parse(evt.data),
    				lang = message.language,
    				code = message.code,
    				immediateClose = message.immediateClose;

    			_self.postMessage(_.highlight(code, _.languages[lang], lang));
    			if (immediateClose) {
    				_self.close();
    			}
    		}, false);
    	}

    	return _;
    }

    // Get current script and highlight
    var script = _.util.currentScript();

    if (script) {
    	_.filename = script.src;

    	if (script.hasAttribute('data-manual')) {
    		_.manual = true;
    	}
    }

    function highlightAutomaticallyCallback() {
    	if (!_.manual) {
    		_.highlightAll();
    	}
    }

    if (!_.manual) {
    	// If the document state is "loading", then we'll use DOMContentLoaded.
    	// If the document state is "interactive" and the prism.js script is deferred, then we'll also use the
    	// DOMContentLoaded event because there might be some plugins or languages which have also been deferred and they
    	// might take longer one animation frame to execute which can create a race condition where only some plugins have
    	// been loaded when Prism.highlightAll() is executed, depending on how fast resources are loaded.
    	// See https://github.com/PrismJS/prism/issues/2102
    	var readyState = document.readyState;
    	if (readyState === 'loading' || readyState === 'interactive' && script && script.defer) {
    		document.addEventListener('DOMContentLoaded', highlightAutomaticallyCallback);
    	} else {
    		if (window.requestAnimationFrame) {
    			window.requestAnimationFrame(highlightAutomaticallyCallback);
    		} else {
    			window.setTimeout(highlightAutomaticallyCallback, 16);
    		}
    	}
    }

    return _;

    })(_self);

    if ( module.exports) {
    	module.exports = Prism;
    }

    // hack for components to work correctly in node.js
    if (typeof commonjsGlobal !== 'undefined') {
    	commonjsGlobal.Prism = Prism;
    }

    // some additional documentation/types

    /**
     * The expansion of a simple `RegExp` literal to support additional properties.
     *
     * @typedef GrammarToken
     * @property {RegExp} pattern The regular expression of the token.
     * @property {boolean} [lookbehind=false] If `true`, then the first capturing group of `pattern` will (effectively)
     * behave as a lookbehind group meaning that the captured text will not be part of the matched text of the new token.
     * @property {boolean} [greedy=false] Whether the token is greedy.
     * @property {string|string[]} [alias] An optional alias or list of aliases.
     * @property {Grammar} [inside] The nested grammar of this token.
     *
     * The `inside` grammar will be used to tokenize the text value of each token of this kind.
     *
     * This can be used to make nested and even recursive language definitions.
     *
     * Note: This can cause infinite recursion. Be careful when you embed different languages or even the same language into
     * each another.
     * @global
     * @public
    */

    /**
     * @typedef Grammar
     * @type {Object<string, RegExp | GrammarToken | Array<RegExp | GrammarToken>>}
     * @property {Grammar} [rest] An optional grammar object that will be appended to this grammar.
     * @global
     * @public
     */

    /**
     * A function which will invoked after an element was successfully highlighted.
     *
     * @callback HighlightCallback
     * @param {Element} element The element successfully highlighted.
     * @returns {void}
     * @global
     * @public
    */

    /**
     * @callback HookCallback
     * @param {Object<string, any>} env The environment variables of the hook.
     * @returns {void}
     * @global
     * @public
     */


    /* **********************************************
         Begin prism-markup.js
    ********************************************** */

    Prism.languages.markup = {
    	'comment': /<!--[\s\S]*?-->/,
    	'prolog': /<\?[\s\S]+?\?>/,
    	'doctype': {
    		// https://www.w3.org/TR/xml/#NT-doctypedecl
    		pattern: /<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,
    		greedy: true,
    		inside: {
    			'internal-subset': {
    				pattern: /(\[)[\s\S]+(?=\]>$)/,
    				lookbehind: true,
    				greedy: true,
    				inside: null // see below
    			},
    			'string': {
    				pattern: /"[^"]*"|'[^']*'/,
    				greedy: true
    			},
    			'punctuation': /^<!|>$|[[\]]/,
    			'doctype-tag': /^DOCTYPE/,
    			'name': /[^\s<>'"]+/
    		}
    	},
    	'cdata': /<!\[CDATA\[[\s\S]*?]]>/i,
    	'tag': {
    		pattern: /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,
    		greedy: true,
    		inside: {
    			'tag': {
    				pattern: /^<\/?[^\s>\/]+/,
    				inside: {
    					'punctuation': /^<\/?/,
    					'namespace': /^[^\s>\/:]+:/
    				}
    			},
    			'attr-value': {
    				pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
    				inside: {
    					'punctuation': [
    						{
    							pattern: /^=/,
    							alias: 'attr-equals'
    						},
    						/"|'/
    					]
    				}
    			},
    			'punctuation': /\/?>/,
    			'attr-name': {
    				pattern: /[^\s>\/]+/,
    				inside: {
    					'namespace': /^[^\s>\/:]+:/
    				}
    			}

    		}
    	},
    	'entity': [
    		{
    			pattern: /&[\da-z]{1,8};/i,
    			alias: 'named-entity'
    		},
    		/&#x?[\da-f]{1,8};/i
    	]
    };

    Prism.languages.markup['tag'].inside['attr-value'].inside['entity'] =
    	Prism.languages.markup['entity'];
    Prism.languages.markup['doctype'].inside['internal-subset'].inside = Prism.languages.markup;

    // Plugin to make entity title show the real entity, idea by Roman Komarov
    Prism.hooks.add('wrap', function (env) {

    	if (env.type === 'entity') {
    		env.attributes['title'] = env.content.replace(/&amp;/, '&');
    	}
    });

    Object.defineProperty(Prism.languages.markup.tag, 'addInlined', {
    	/**
    	 * Adds an inlined language to markup.
    	 *
    	 * An example of an inlined language is CSS with `<style>` tags.
    	 *
    	 * @param {string} tagName The name of the tag that contains the inlined language. This name will be treated as
    	 * case insensitive.
    	 * @param {string} lang The language key.
    	 * @example
    	 * addInlined('style', 'css');
    	 */
    	value: function addInlined(tagName, lang) {
    		var includedCdataInside = {};
    		includedCdataInside['language-' + lang] = {
    			pattern: /(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,
    			lookbehind: true,
    			inside: Prism.languages[lang]
    		};
    		includedCdataInside['cdata'] = /^<!\[CDATA\[|\]\]>$/i;

    		var inside = {
    			'included-cdata': {
    				pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
    				inside: includedCdataInside
    			}
    		};
    		inside['language-' + lang] = {
    			pattern: /[\s\S]+/,
    			inside: Prism.languages[lang]
    		};

    		var def = {};
    		def[tagName] = {
    			pattern: RegExp(/(<__[\s\S]*?>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g, function () { return tagName; }), 'i'),
    			lookbehind: true,
    			greedy: true,
    			inside: inside
    		};

    		Prism.languages.insertBefore('markup', 'cdata', def);
    	}
    });

    Prism.languages.html = Prism.languages.markup;
    Prism.languages.mathml = Prism.languages.markup;
    Prism.languages.svg = Prism.languages.markup;

    Prism.languages.xml = Prism.languages.extend('markup', {});
    Prism.languages.ssml = Prism.languages.xml;
    Prism.languages.atom = Prism.languages.xml;
    Prism.languages.rss = Prism.languages.xml;


    /* **********************************************
         Begin prism-css.js
    ********************************************** */

    (function (Prism) {

    	var string = /("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;

    	Prism.languages.css = {
    		'comment': /\/\*[\s\S]*?\*\//,
    		'atrule': {
    			pattern: /@[\w-]+[\s\S]*?(?:;|(?=\s*\{))/,
    			inside: {
    				'rule': /^@[\w-]+/,
    				'selector-function-argument': {
    					pattern: /(\bselector\s*\((?!\s*\))\s*)(?:[^()]|\((?:[^()]|\([^()]*\))*\))+?(?=\s*\))/,
    					lookbehind: true,
    					alias: 'selector'
    				},
    				'keyword': {
    					pattern: /(^|[^\w-])(?:and|not|only|or)(?![\w-])/,
    					lookbehind: true
    				}
    				// See rest below
    			}
    		},
    		'url': {
    			// https://drafts.csswg.org/css-values-3/#urls
    			pattern: RegExp('\\burl\\((?:' + string.source + '|' + /(?:[^\\\r\n()"']|\\[\s\S])*/.source + ')\\)', 'i'),
    			greedy: true,
    			inside: {
    				'function': /^url/i,
    				'punctuation': /^\(|\)$/,
    				'string': {
    					pattern: RegExp('^' + string.source + '$'),
    					alias: 'url'
    				}
    			}
    		},
    		'selector': RegExp('[^{}\\s](?:[^{};"\']|' + string.source + ')*?(?=\\s*\\{)'),
    		'string': {
    			pattern: string,
    			greedy: true
    		},
    		'property': /[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,
    		'important': /!important\b/i,
    		'function': /[-a-z0-9]+(?=\()/i,
    		'punctuation': /[(){};:,]/
    	};

    	Prism.languages.css['atrule'].inside.rest = Prism.languages.css;

    	var markup = Prism.languages.markup;
    	if (markup) {
    		markup.tag.addInlined('style', 'css');

    		Prism.languages.insertBefore('inside', 'attr-value', {
    			'style-attr': {
    				pattern: /\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,
    				inside: {
    					'attr-name': {
    						pattern: /^\s*style/i,
    						inside: markup.tag.inside
    					},
    					'punctuation': /^\s*=\s*['"]|['"]\s*$/,
    					'attr-value': {
    						pattern: /.+/i,
    						inside: Prism.languages.css
    					}
    				},
    				alias: 'language-css'
    			}
    		}, markup.tag);
    	}

    }(Prism));


    /* **********************************************
         Begin prism-clike.js
    ********************************************** */

    Prism.languages.clike = {
    	'comment': [
    		{
    			pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
    			lookbehind: true
    		},
    		{
    			pattern: /(^|[^\\:])\/\/.*/,
    			lookbehind: true,
    			greedy: true
    		}
    	],
    	'string': {
    		pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
    		greedy: true
    	},
    	'class-name': {
    		pattern: /(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,
    		lookbehind: true,
    		inside: {
    			'punctuation': /[.\\]/
    		}
    	},
    	'keyword': /\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,
    	'boolean': /\b(?:true|false)\b/,
    	'function': /\w+(?=\()/,
    	'number': /\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,
    	'operator': /[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,
    	'punctuation': /[{}[\];(),.:]/
    };


    /* **********************************************
         Begin prism-javascript.js
    ********************************************** */

    Prism.languages.javascript = Prism.languages.extend('clike', {
    	'class-name': [
    		Prism.languages.clike['class-name'],
    		{
    			pattern: /(^|[^$\w\xA0-\uFFFF])[_$A-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\.(?:prototype|constructor))/,
    			lookbehind: true
    		}
    	],
    	'keyword': [
    		{
    			pattern: /((?:^|})\s*)(?:catch|finally)\b/,
    			lookbehind: true
    		},
    		{
    			pattern: /(^|[^.]|\.\.\.\s*)\b(?:as|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|(?:get|set)(?=\s*[\[$\w\xA0-\uFFFF])|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,
    			lookbehind: true
    		},
    	],
    	'number': /\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,
    	// Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444)
    	'function': /#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,
    	'operator': /--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/
    });

    Prism.languages.javascript['class-name'][0].pattern = /(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/;

    Prism.languages.insertBefore('javascript', 'keyword', {
    	'regex': {
    		pattern: /((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*]|\\.|[^/\\\[\r\n])+\/[gimyus]{0,6}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,
    		lookbehind: true,
    		greedy: true,
    		inside: {
    			'regex-source': {
    				pattern: /^(\/)[\s\S]+(?=\/[a-z]*$)/,
    				lookbehind: true,
    				alias: 'language-regex',
    				inside: Prism.languages.regex
    			},
    			'regex-flags': /[a-z]+$/,
    			'regex-delimiter': /^\/|\/$/
    		}
    	},
    	// This must be declared before keyword because we use "function" inside the look-forward
    	'function-variable': {
    		pattern: /#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/,
    		alias: 'function'
    	},
    	'parameter': [
    		{
    			pattern: /(function(?:\s+[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)?\s*\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\))/,
    			lookbehind: true,
    			inside: Prism.languages.javascript
    		},
    		{
    			pattern: /[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=>)/i,
    			inside: Prism.languages.javascript
    		},
    		{
    			pattern: /(\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*=>)/,
    			lookbehind: true,
    			inside: Prism.languages.javascript
    		},
    		{
    			pattern: /((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*\{)/,
    			lookbehind: true,
    			inside: Prism.languages.javascript
    		}
    	],
    	'constant': /\b[A-Z](?:[A-Z_]|\dx?)*\b/
    });

    Prism.languages.insertBefore('javascript', 'string', {
    	'template-string': {
    		pattern: /`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/,
    		greedy: true,
    		inside: {
    			'template-punctuation': {
    				pattern: /^`|`$/,
    				alias: 'string'
    			},
    			'interpolation': {
    				pattern: /((?:^|[^\\])(?:\\{2})*)\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,
    				lookbehind: true,
    				inside: {
    					'interpolation-punctuation': {
    						pattern: /^\${|}$/,
    						alias: 'punctuation'
    					},
    					rest: Prism.languages.javascript
    				}
    			},
    			'string': /[\s\S]+/
    		}
    	}
    });

    if (Prism.languages.markup) {
    	Prism.languages.markup.tag.addInlined('script', 'javascript');
    }

    Prism.languages.js = Prism.languages.javascript;


    /* **********************************************
         Begin prism-file-highlight.js
    ********************************************** */

    (function () {
    	if (typeof self === 'undefined' || !self.Prism || !self.document) {
    		return;
    	}

    	var Prism = window.Prism;

    	var LOADING_MESSAGE = 'Loading…';
    	var FAILURE_MESSAGE = function (status, message) {
    		return '✖ Error ' + status + ' while fetching file: ' + message;
    	};
    	var FAILURE_EMPTY_MESSAGE = '✖ Error: File does not exist or is empty';

    	var EXTENSIONS = {
    		'js': 'javascript',
    		'py': 'python',
    		'rb': 'ruby',
    		'ps1': 'powershell',
    		'psm1': 'powershell',
    		'sh': 'bash',
    		'bat': 'batch',
    		'h': 'c',
    		'tex': 'latex'
    	};

    	var STATUS_ATTR = 'data-src-status';
    	var STATUS_LOADING = 'loading';
    	var STATUS_LOADED = 'loaded';
    	var STATUS_FAILED = 'failed';

    	var SELECTOR = 'pre[data-src]:not([' + STATUS_ATTR + '="' + STATUS_LOADED + '"])'
    		+ ':not([' + STATUS_ATTR + '="' + STATUS_LOADING + '"])';

    	var lang = /\blang(?:uage)?-([\w-]+)\b/i;

    	/**
    	 * Sets the Prism `language-xxxx` or `lang-xxxx` class to the given language.
    	 *
    	 * @param {HTMLElement} element
    	 * @param {string} language
    	 * @returns {void}
    	 */
    	function setLanguageClass(element, language) {
    		var className = element.className;
    		className = className.replace(lang, ' ') + ' language-' + language;
    		element.className = className.replace(/\s+/g, ' ').trim();
    	}


    	Prism.hooks.add('before-highlightall', function (env) {
    		env.selector += ', ' + SELECTOR;
    	});

    	Prism.hooks.add('before-sanity-check', function (env) {
    		var pre = /** @type {HTMLPreElement} */ (env.element);
    		if (pre.matches(SELECTOR)) {
    			env.code = ''; // fast-path the whole thing and go to complete

    			pre.setAttribute(STATUS_ATTR, STATUS_LOADING); // mark as loading

    			// add code element with loading message
    			var code = pre.appendChild(document.createElement('CODE'));
    			code.textContent = LOADING_MESSAGE;

    			var src = pre.getAttribute('data-src');

    			var language = env.language;
    			if (language === 'none') {
    				// the language might be 'none' because there is no language set;
    				// in this case, we want to use the extension as the language
    				var extension = (/\.(\w+)$/.exec(src) || [, 'none'])[1];
    				language = EXTENSIONS[extension] || extension;
    			}

    			// set language classes
    			setLanguageClass(code, language);
    			setLanguageClass(pre, language);

    			// preload the language
    			var autoloader = Prism.plugins.autoloader;
    			if (autoloader) {
    				autoloader.loadLanguages(language);
    			}

    			// load file
    			var xhr = new XMLHttpRequest();
    			xhr.open('GET', src, true);
    			xhr.onreadystatechange = function () {
    				if (xhr.readyState == 4) {
    					if (xhr.status < 400 && xhr.responseText) {
    						// mark as loaded
    						pre.setAttribute(STATUS_ATTR, STATUS_LOADED);

    						// highlight code
    						code.textContent = xhr.responseText;
    						Prism.highlightElement(code);

    					} else {
    						// mark as failed
    						pre.setAttribute(STATUS_ATTR, STATUS_FAILED);

    						if (xhr.status >= 400) {
    							code.textContent = FAILURE_MESSAGE(xhr.status, xhr.statusText);
    						} else {
    							code.textContent = FAILURE_EMPTY_MESSAGE;
    						}
    					}
    				}
    			};
    			xhr.send(null);
    		}
    	});

    	Prism.plugins.fileHighlight = {
    		/**
    		 * Executes the File Highlight plugin for all matching `pre` elements under the given container.
    		 *
    		 * Note: Elements which are already loaded or currently loading will not be touched by this method.
    		 *
    		 * @param {ParentNode} [container=document]
    		 */
    		highlight: function highlight(container) {
    			var elements = (container || document).querySelectorAll(SELECTOR);

    			for (var i = 0, element; element = elements[i++];) {
    				Prism.highlightElement(element);
    			}
    		}
    	};

    	var logged = false;
    	/** @deprecated Use `Prism.plugins.fileHighlight.highlight` instead. */
    	Prism.fileHighlight = function () {
    		if (!logged) {
    			console.warn('Prism.fileHighlight is deprecated. Use `Prism.plugins.fileHighlight.highlight` instead.');
    			logged = true;
    		}
    		Prism.plugins.fileHighlight.highlight.apply(this, arguments);
    	};

    })();
    });

    const blocks = '(if|else if|await|then|catch|each|html|debug)';

    Prism.languages.svelte = Prism.languages.extend('markup', {
    	each: {
    		pattern: new RegExp(
    			'{[#/]each' +
    				'(?:(?:\\{(?:(?:\\{(?:[^{}])*\\})|(?:[^{}]))*\\})|(?:[^{}]))*}'
    		),
    		inside: {
    			'language-javascript': [
    				{
    					pattern: /(as[\s\S]*)\([\s\S]*\)(?=\s*\})/,
    					lookbehind: true,
    					inside: Prism.languages['javascript'],
    				},
    				{
    					pattern: /(as[\s]*)[\s\S]*(?=\s*)/,
    					lookbehind: true,
    					inside: Prism.languages['javascript'],
    				},
    				{
    					pattern: /(#each[\s]*)[\s\S]*(?=as)/,
    					lookbehind: true,
    					inside: Prism.languages['javascript'],
    				},
    			],
    			keyword: /[#/]each|as/,
    			punctuation: /{|}/,
    		},
    	},
    	block: {
    		pattern: new RegExp(
    			'{[#:/@]/s' +
    				blocks +
    				'(?:(?:\\{(?:(?:\\{(?:[^{}])*\\})|(?:[^{}]))*\\})|(?:[^{}]))*}'
    		),
    		inside: {
    			punctuation: /^{|}$/,
    			keyword: [new RegExp('[#:/@]' + blocks + '( )*'), /as/, /then/],
    			'language-javascript': {
    				pattern: /[\s\S]*/,
    				inside: Prism.languages['javascript'],
    			},
    		},
    	},
    	tag: {
    		pattern: /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?:"[^"]*"|'[^']*'|{[\s\S]+?}(?=[\s/>])))|(?=[\s/>])))+)?\s*\/?>/i,
    		greedy: true,
    		inside: {
    			tag: {
    				pattern: /^<\/?[^\s>\/]+/i,
    				inside: {
    					punctuation: /^<\/?/,
    					namespace: /^[^\s>\/:]+:/,
    				},
    			},
    			'language-javascript': {
    				pattern: /\{(?:(?:\{(?:(?:\{(?:[^{}])*\})|(?:[^{}]))*\})|(?:[^{}]))*\}/,
    				inside: Prism.languages['javascript'],
    			},
    			'attr-value': {
    				pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/i,
    				inside: {
    					punctuation: [
    						/^=/,
    						{
    							pattern: /^(\s*)["']|["']$/,
    							lookbehind: true,
    						},
    					],
    					'language-javascript': {
    						pattern: /{[\s\S]+}/,
    						inside: Prism.languages['javascript'],
    					},
    				},
    			},
    			punctuation: /\/?>/,
    			'attr-name': {
    				pattern: /[^\s>\/]+/,
    				inside: {
    					namespace: /^[^\s>\/:]+:/,
    				},
    			},
    		},
    	},
    	'language-javascript': {
    		pattern: /\{(?:(?:\{(?:(?:\{(?:[^{}])*\})|(?:[^{}]))*\})|(?:[^{}]))*\}/,
    		lookbehind: true,
    		inside: Prism.languages['javascript'],
    	},
    });

    Prism.languages.svelte['tag'].inside['attr-value'].inside['entity'] =
    	Prism.languages.svelte['entity'];

    Prism.hooks.add('wrap', env => {
    	if (env.type === 'entity') {
    		env.attributes['title'] = env.content.replace(/&amp;/, '&');
    	}
    });

    Object.defineProperty(Prism.languages.svelte.tag, 'addInlined', {
    	value: function addInlined(tagName, lang) {
    		const includedCdataInside = {};
    		includedCdataInside['language-' + lang] = {
    			pattern: /(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,
    			lookbehind: true,
    			inside: Prism.languages[lang],
    		};
    		includedCdataInside['cdata'] = /^<!\[CDATA\[|\]\]>$/i;

    		const inside = {
    			'included-cdata': {
    				pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
    				inside: includedCdataInside,
    			},
    		};
    		inside['language-' + lang] = {
    			pattern: /[\s\S]+/,
    			inside: Prism.languages[lang],
    		};

    		const def = {};
    		def[tagName] = {
    			pattern: RegExp(
    				/(<__[\s\S]*?>)(?:<!\[CDATA\[[\s\S]*?\]\]>\s*|[\s\S])*?(?=<\/__>)/.source.replace(
    					/__/g,
    					tagName
    				),
    				'i'
    			),
    			lookbehind: true,
    			greedy: true,
    			inside,
    		};

    		Prism.languages.insertBefore('svelte', 'cdata', def);
    	},
    });

    Prism.languages.svelte.tag.addInlined('style', 'css');
    Prism.languages.svelte.tag.addInlined('script', 'javascript');

    /* src/components/CodeView.svelte generated by Svelte v3.30.0 */
    const file$9 = "src/components/CodeView.svelte";

    // (69:0) {#if notes}
    function create_if_block$1(ctx) {
    	let hr;
    	let t0;
    	let h2;
    	let t2;
    	let html_tag;
    	let html_anchor;

    	const block = {
    		c: function create() {
    			hr = element("hr");
    			t0 = space();
    			h2 = element("h2");
    			h2.textContent = "Notes";
    			t2 = space();
    			html_anchor = empty();
    			add_location(hr, file$9, 69, 0, 1222);
    			add_location(h2, file$9, 70, 0, 1227);
    			html_tag = new HtmlTag(html_anchor);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, hr, anchor);
    			insert_dev(target, t0, anchor);
    			insert_dev(target, h2, anchor);
    			insert_dev(target, t2, anchor);
    			html_tag.m(/*notes_html*/ ctx[3], target, anchor);
    			insert_dev(target, html_anchor, anchor);
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*notes_html*/ 8) html_tag.p(/*notes_html*/ ctx[3]);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(hr);
    			if (detaching) detach_dev(t0);
    			if (detaching) detach_dev(h2);
    			if (detaching) detach_dev(t2);
    			if (detaching) detach_dev(html_anchor);
    			if (detaching) html_tag.d();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block$1.name,
    		type: "if",
    		source: "(69:0) {#if notes}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$a(ctx) {
    	let code_view;
    	let css_view;
    	let h10;
    	let t1;
    	let pre0;
    	let code0;
    	let t2;
    	let t3;
    	let html_view;
    	let h11;
    	let t5;
    	let pre1;
    	let code1;
    	let t6;
    	let t7;
    	let if_block_anchor;
    	let if_block = /*notes*/ ctx[0] && create_if_block$1(ctx);

    	const block = {
    		c: function create() {
    			code_view = element("code-view");
    			css_view = element("css-view");
    			h10 = element("h1");
    			h10.textContent = "CSS";
    			t1 = space();
    			pre0 = element("pre");
    			code0 = element("code");
    			t2 = text(/*css_code*/ ctx[1]);
    			t3 = space();
    			html_view = element("html-view");
    			h11 = element("h1");
    			h11.textContent = "HTML";
    			t5 = space();
    			pre1 = element("pre");
    			code1 = element("code");
    			t6 = text(/*html_code*/ ctx[2]);
    			t7 = space();
    			if (if_block) if_block.c();
    			if_block_anchor = empty();
    			add_location(h10, file$9, 50, 4, 946);
    			attr_dev(code0, "class", "language-svelte");
    			add_location(code0, file$9, 52, 6, 975);
    			add_location(pre0, file$9, 51, 4, 963);
    			set_custom_element_data(css_view, "class", "svelte-1job9fs");
    			add_location(css_view, file$9, 49, 2, 931);
    			add_location(h11, file$9, 59, 4, 1079);
    			attr_dev(code1, "class", "language-svelte");
    			add_location(code1, file$9, 61, 6, 1109);
    			add_location(pre1, file$9, 60, 4, 1097);
    			set_custom_element_data(html_view, "class", "svelte-1job9fs");
    			add_location(html_view, file$9, 58, 2, 1063);
    			set_custom_element_data(code_view, "class", "svelte-1job9fs");
    			add_location(code_view, file$9, 48, 0, 917);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, code_view, anchor);
    			append_dev(code_view, css_view);
    			append_dev(css_view, h10);
    			append_dev(css_view, t1);
    			append_dev(css_view, pre0);
    			append_dev(pre0, code0);
    			append_dev(code0, t2);
    			append_dev(code_view, t3);
    			append_dev(code_view, html_view);
    			append_dev(html_view, h11);
    			append_dev(html_view, t5);
    			append_dev(html_view, pre1);
    			append_dev(pre1, code1);
    			append_dev(code1, t6);
    			insert_dev(target, t7, anchor);
    			if (if_block) if_block.m(target, anchor);
    			insert_dev(target, if_block_anchor, anchor);
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*css_code*/ 2) set_data_dev(t2, /*css_code*/ ctx[1]);
    			if (dirty & /*html_code*/ 4) set_data_dev(t6, /*html_code*/ ctx[2]);

    			if (/*notes*/ ctx[0]) {
    				if (if_block) {
    					if_block.p(ctx, dirty);
    				} else {
    					if_block = create_if_block$1(ctx);
    					if_block.c();
    					if_block.m(if_block_anchor.parentNode, if_block_anchor);
    				}
    			} else if (if_block) {
    				if_block.d(1);
    				if_block = null;
    			}
    		},
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(code_view);
    			if (detaching) detach_dev(t7);
    			if (if_block) if_block.d(detaching);
    			if (detaching) detach_dev(if_block_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$a.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$a($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("CodeView", slots, []);
    	let { source = "" } = $$props;
    	let css_code = "";
    	let html_code = "";
    	let notes_html = "";
    	let { notes = "" } = $$props;

    	onMount(() => {
    		fetch(`${source}.css`).then(resource => resource.text()).then(data => $$invalidate(1, css_code = data));
    		fetch(`${source}.html`).then(resource => resource.text()).then(data => $$invalidate(2, html_code = data)).then(() => prism.highlightAll());

    		if (notes) {
    			fetch(`${source}.notes.html`).then(resource => resource.text()).then(data => $$invalidate(3, notes_html = data)).then(() => prism.highlightAll());
    		}
    	});

    	const writable_props = ["source", "notes"];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<CodeView> was created with unknown prop '${key}'`);
    	});

    	$$self.$$set = $$props => {
    		if ("source" in $$props) $$invalidate(4, source = $$props.source);
    		if ("notes" in $$props) $$invalidate(0, notes = $$props.notes);
    	};

    	$$self.$capture_state = () => ({
    		onMount,
    		Prism: prism,
    		source,
    		css_code,
    		html_code,
    		notes_html,
    		notes
    	});

    	$$self.$inject_state = $$props => {
    		if ("source" in $$props) $$invalidate(4, source = $$props.source);
    		if ("css_code" in $$props) $$invalidate(1, css_code = $$props.css_code);
    		if ("html_code" in $$props) $$invalidate(2, html_code = $$props.html_code);
    		if ("notes_html" in $$props) $$invalidate(3, notes_html = $$props.notes_html);
    		if ("notes" in $$props) $$invalidate(0, notes = $$props.notes);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [notes, css_code, html_code, notes_html, source];
    }

    class CodeView extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$a, create_fragment$a, safe_not_equal, { source: 4, notes: 0 });

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "CodeView",
    			options,
    			id: create_fragment$a.name
    		});
    	}

    	get source() {
    		throw new Error("<CodeView>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set source(value) {
    		throw new Error("<CodeView>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get notes() {
    		throw new Error("<CodeView>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set notes(value) {
    		throw new Error("<CodeView>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}
    }

    /* src/thumbs/Cards.svelte generated by Svelte v3.30.0 */
    const file$a = "src/thumbs/Cards.svelte";

    function create_fragment$b(ctx) {
    	let content;
    	let card;
    	let top;
    	let img;
    	let img_src_value;
    	let t0;
    	let middle;
    	let h4;
    	let t2;
    	let p;
    	let t4;
    	let bottom;
    	let button0;
    	let icon0;
    	let t5;
    	let button1;
    	let icon1;
    	let current;

    	icon0 = new Icon({
    			props: {
    				name: "check-circle",
    				color: "var(--color-bg)",
    				size: "24"
    			},
    			$$inline: true
    		});

    	icon1 = new Icon({
    			props: {
    				name: "x-circle",
    				color: "var(--color-bg)",
    				size: "24"
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			card = element("card");
    			top = element("top");
    			img = element("img");
    			t0 = space();
    			middle = element("middle");
    			h4 = element("h4");
    			h4.textContent = "Card Example";
    			t2 = space();
    			p = element("p");
    			p.textContent = "Lorem ipsum dolor sit amet, consectetur\n      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
    			t4 = space();
    			bottom = element("bottom");
    			button0 = element("button");
    			create_component(icon0.$$.fragment);
    			t5 = space();
    			button1 = element("button");
    			create_component(icon1.$$.fragment);
    			if (img.src !== (img_src_value = holder(16 * 30, 9 * 30))) attr_dev(img, "src", img_src_value);
    			attr_dev(img, "class", "svelte-1rd3ni4");
    			add_location(img, file$a, 51, 6, 804);
    			add_location(top, file$a, 50, 4, 792);
    			attr_dev(h4, "class", "svelte-1rd3ni4");
    			add_location(h4, file$a, 55, 6, 874);
    			add_location(p, file$a, 58, 6, 918);
    			attr_dev(middle, "class", "svelte-1rd3ni4");
    			add_location(middle, file$a, 54, 4, 859);
    			attr_dev(button0, "class", "svelte-1rd3ni4");
    			add_location(button0, file$a, 63, 4, 1087);
    			attr_dev(button1, "class", "svelte-1rd3ni4");
    			add_location(button1, file$a, 64, 4, 1171);
    			attr_dev(bottom, "class", "svelte-1rd3ni4");
    			add_location(bottom, file$a, 62, 4, 1074);
    			attr_dev(card, "class", "svelte-1rd3ni4");
    			add_location(card, file$a, 49, 2, 781);
    			attr_dev(content, "class", "svelte-1rd3ni4");
    			add_location(content, file$a, 48, 0, 769);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, card);
    			append_dev(card, top);
    			append_dev(top, img);
    			append_dev(card, t0);
    			append_dev(card, middle);
    			append_dev(middle, h4);
    			append_dev(middle, t2);
    			append_dev(middle, p);
    			append_dev(card, t4);
    			append_dev(card, bottom);
    			append_dev(bottom, button0);
    			mount_component(icon0, button0, null);
    			append_dev(bottom, t5);
    			append_dev(bottom, button1);
    			mount_component(icon1, button1, null);
    			current = true;
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon0.$$.fragment, local);
    			transition_in(icon1.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon0.$$.fragment, local);
    			transition_out(icon1.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_component(icon0);
    			destroy_component(icon1);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$b.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$b($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Cards", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Cards> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ CodeView, Icon, holder });
    	return [];
    }

    class Cards extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$b, create_fragment$b, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Cards",
    			options,
    			id: create_fragment$b.name
    		});
    	}
    }

    /* src/thumbs/Panels.svelte generated by Svelte v3.30.0 */
    const file$b = "src/thumbs/Panels.svelte";

    function create_fragment$c(ctx) {
    	let content;
    	let panel;
    	let top;
    	let h1;
    	let t1;
    	let middle;
    	let h4;
    	let t3;
    	let p;
    	let t5;
    	let bottom;
    	let button0;
    	let icon0;
    	let t6;
    	let t7;
    	let button1;
    	let icon1;
    	let t8;
    	let current;

    	icon0 = new Icon({
    			props: {
    				name: "x-circle",
    				color: "var(--color-text)",
    				size: "24"
    			},
    			$$inline: true
    		});

    	icon1 = new Icon({
    			props: {
    				name: "check-circle",
    				color: "var(--color-bg)",
    				size: "24"
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			panel = element("panel");
    			top = element("top");
    			h1 = element("h1");
    			h1.textContent = "Panel is a Card";
    			t1 = space();
    			middle = element("middle");
    			h4 = element("h4");
    			h4.textContent = "Panel Example";
    			t3 = space();
    			p = element("p");
    			p.textContent = "Not sure what the big deal is with the difference between panels and cards\n        but I'm doing all the things so here's a panel. Let's say, buttons on a panel\n        are different to demonstrate how to make a button strip.";
    			t5 = space();
    			bottom = element("bottom");
    			button0 = element("button");
    			create_component(icon0.$$.fragment);
    			t6 = text(" CANCEL");
    			t7 = space();
    			button1 = element("button");
    			create_component(icon1.$$.fragment);
    			t8 = text(" OK");
    			add_location(h1, file$b, 59, 4, 968);
    			attr_dev(top, "class", "svelte-1lajyim");
    			add_location(top, file$b, 58, 4, 958);
    			add_location(h4, file$b, 63, 6, 1024);
    			add_location(p, file$b, 66, 6, 1069);
    			attr_dev(middle, "class", "svelte-1lajyim");
    			add_location(middle, file$b, 62, 4, 1009);
    			attr_dev(button0, "id", "cancel");
    			attr_dev(button0, "class", "svelte-1lajyim");
    			add_location(button0, file$b, 72, 4, 1335);
    			attr_dev(button1, "class", "svelte-1lajyim");
    			add_location(button1, file$b, 73, 4, 1436);
    			attr_dev(bottom, "class", "svelte-1lajyim");
    			add_location(bottom, file$b, 71, 4, 1322);
    			attr_dev(panel, "class", "svelte-1lajyim");
    			add_location(panel, file$b, 57, 2, 946);
    			attr_dev(content, "class", "svelte-1lajyim");
    			add_location(content, file$b, 56, 0, 934);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, panel);
    			append_dev(panel, top);
    			append_dev(top, h1);
    			append_dev(panel, t1);
    			append_dev(panel, middle);
    			append_dev(middle, h4);
    			append_dev(middle, t3);
    			append_dev(middle, p);
    			append_dev(panel, t5);
    			append_dev(panel, bottom);
    			append_dev(bottom, button0);
    			mount_component(icon0, button0, null);
    			append_dev(button0, t6);
    			append_dev(bottom, t7);
    			append_dev(bottom, button1);
    			mount_component(icon1, button1, null);
    			append_dev(button1, t8);
    			current = true;
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon0.$$.fragment, local);
    			transition_in(icon1.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon0.$$.fragment, local);
    			transition_out(icon1.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_component(icon0);
    			destroy_component(icon1);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$c.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$c($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Panels", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Panels> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ Icon });
    	return [];
    }

    class Panels extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$c, create_fragment$c, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Panels",
    			options,
    			id: create_fragment$c.name
    		});
    	}
    }

    /* src/thumbs/NavBar.svelte generated by Svelte v3.30.0 */
    const file$c = "src/thumbs/NavBar.svelte";

    function create_fragment$d(ctx) {
    	let content;
    	let nav_bar0;
    	let left0;
    	let b0;
    	let icon0;
    	let t0;
    	let t1;
    	let middle0;
    	let input;
    	let t2;
    	let right0;
    	let button0;
    	let t4;
    	let a;
    	let t6;
    	let nav_bar1;
    	let left1;
    	let b1;
    	let icon1;
    	let t7;
    	let t8;
    	let middle1;
    	let t9;
    	let right1;
    	let button1;
    	let t11;
    	let button2;
    	let current;

    	icon0 = new Icon({
    			props: {
    				name: "trash",
    				color: "var(--color-text)"
    			},
    			$$inline: true
    		});

    	icon1 = new Icon({
    			props: {
    				name: "trash",
    				color: "var(--color-text)"
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			nav_bar0 = element("nav-bar");
    			left0 = element("left");
    			b0 = element("b");
    			create_component(icon0.$$.fragment);
    			t0 = text(" fsck CSS");
    			t1 = space();
    			middle0 = element("middle");
    			input = element("input");
    			t2 = space();
    			right0 = element("right");
    			button0 = element("button");
    			button0.textContent = "Log In";
    			t4 = space();
    			a = element("a");
    			a.textContent = "Sign Up";
    			t6 = space();
    			nav_bar1 = element("nav-bar");
    			left1 = element("left");
    			b1 = element("b");
    			create_component(icon1.$$.fragment);
    			t7 = text(" fsck CSS");
    			t8 = space();
    			middle1 = element("middle");
    			t9 = space();
    			right1 = element("right");
    			button1 = element("button");
    			button1.textContent = "Log In";
    			t11 = space();
    			button2 = element("button");
    			button2.textContent = "Sign Up";
    			add_location(b0, file$c, 42, 6, 791);
    			add_location(left0, file$c, 41, 4, 778);
    			attr_dev(input, "placeholder", "Search");
    			attr_dev(input, "class", "svelte-tbrdkg");
    			add_location(input, file$c, 46, 6, 887);
    			attr_dev(middle0, "class", "svelte-tbrdkg");
    			add_location(middle0, file$c, 45, 4, 872);
    			add_location(button0, file$c, 50, 6, 949);
    			add_location(a, file$c, 51, 6, 979);
    			add_location(right0, file$c, 49, 4, 935);
    			set_custom_element_data(nav_bar0, "class", "svelte-tbrdkg");
    			add_location(nav_bar0, file$c, 40, 2, 764);
    			add_location(b1, file$c, 57, 6, 1068);
    			add_location(left1, file$c, 56, 4, 1055);
    			attr_dev(middle1, "class", "svelte-tbrdkg");
    			add_location(middle1, file$c, 60, 4, 1149);
    			add_location(button1, file$c, 66, 4, 1270);
    			attr_dev(button2, "id", "signup");
    			add_location(button2, file$c, 67, 4, 1298);
    			add_location(right1, file$c, 65, 4, 1258);
    			set_custom_element_data(nav_bar1, "class", "alternate svelte-tbrdkg");
    			add_location(nav_bar1, file$c, 55, 2, 1023);
    			attr_dev(content, "class", "svelte-tbrdkg");
    			add_location(content, file$c, 39, 0, 752);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, nav_bar0);
    			append_dev(nav_bar0, left0);
    			append_dev(left0, b0);
    			mount_component(icon0, b0, null);
    			append_dev(b0, t0);
    			append_dev(nav_bar0, t1);
    			append_dev(nav_bar0, middle0);
    			append_dev(middle0, input);
    			append_dev(nav_bar0, t2);
    			append_dev(nav_bar0, right0);
    			append_dev(right0, button0);
    			append_dev(right0, t4);
    			append_dev(right0, a);
    			append_dev(content, t6);
    			append_dev(content, nav_bar1);
    			append_dev(nav_bar1, left1);
    			append_dev(left1, b1);
    			mount_component(icon1, b1, null);
    			append_dev(b1, t7);
    			append_dev(nav_bar1, t8);
    			append_dev(nav_bar1, middle1);
    			append_dev(nav_bar1, t9);
    			append_dev(nav_bar1, right1);
    			append_dev(right1, button1);
    			append_dev(right1, t11);
    			append_dev(right1, button2);
    			current = true;
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon0.$$.fragment, local);
    			transition_in(icon1.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon0.$$.fragment, local);
    			transition_out(icon1.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_component(icon0);
    			destroy_component(icon1);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$d.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$d($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("NavBar", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<NavBar> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ CodeView, Icon });
    	return [];
    }

    class NavBar extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$d, create_fragment$d, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "NavBar",
    			options,
    			id: create_fragment$d.name
    		});
    	}
    }

    /* src/thumbs/Tabs.svelte generated by Svelte v3.30.0 */

    const file$d = "src/thumbs/Tabs.svelte";

    function get_each_context$1(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[3] = list[i];
    	child_ctx[5] = i;
    	return child_ctx;
    }

    function get_each_context_1(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[3] = list[i];
    	child_ctx[5] = i;
    	return child_ctx;
    }

    // (70:4) {#each panels as panel, i}
    function create_each_block_1(ctx) {
    	let a;
    	let t_value = /*panel*/ ctx[3].title + "";
    	let t;
    	let mounted;
    	let dispose;

    	function click_handler() {
    		return /*click_handler*/ ctx[2](/*i*/ ctx[5]);
    	}

    	const block = {
    		c: function create() {
    			a = element("a");
    			t = text(t_value);
    			attr_dev(a, "class", "svelte-j1ijok");
    			toggle_class(a, "active", /*panel*/ ctx[3].active);
    			add_location(a, file$d, 70, 6, 1299);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, a, anchor);
    			append_dev(a, t);

    			if (!mounted) {
    				dispose = listen_dev(a, "click", click_handler, false, false, false);
    				mounted = true;
    			}
    		},
    		p: function update(new_ctx, dirty) {
    			ctx = new_ctx;
    			if (dirty & /*panels*/ 1 && t_value !== (t_value = /*panel*/ ctx[3].title + "")) set_data_dev(t, t_value);

    			if (dirty & /*panels*/ 1) {
    				toggle_class(a, "active", /*panel*/ ctx[3].active);
    			}
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(a);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block_1.name,
    		type: "each",
    		source: "(70:4) {#each panels as panel, i}",
    		ctx
    	});

    	return block;
    }

    // (75:4) {#each panels as panel, i}
    function create_each_block$1(ctx) {
    	let panel;
    	let h1;
    	let t0_value = /*panel*/ ctx[3].title + "";
    	let t0;
    	let t1;
    	let p;
    	let t3;

    	const block = {
    		c: function create() {
    			panel = element("panel");
    			h1 = element("h1");
    			t0 = text(t0_value);
    			t1 = space();
    			p = element("p");
    			p.textContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\n        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate\n        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n        laborum.";
    			t3 = space();
    			add_location(h1, file$d, 76, 6, 1492);
    			add_location(p, file$d, 77, 6, 1524);
    			attr_dev(panel, "class", "svelte-j1ijok");
    			toggle_class(panel, "active", /*panel*/ ctx[3].active);
    			add_location(panel, file$d, 75, 6, 1450);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, panel, anchor);
    			append_dev(panel, h1);
    			append_dev(h1, t0);
    			append_dev(panel, t1);
    			append_dev(panel, p);
    			append_dev(panel, t3);
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*panels*/ 1 && t0_value !== (t0_value = /*panel*/ ctx[3].title + "")) set_data_dev(t0, t0_value);

    			if (dirty & /*panels*/ 1) {
    				toggle_class(panel, "active", /*panel*/ ctx[3].active);
    			}
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(panel);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block$1.name,
    		type: "each",
    		source: "(75:4) {#each panels as panel, i}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$e(ctx) {
    	let content;
    	let h10;
    	let t1;
    	let tabs0;
    	let a0;
    	let t3;
    	let a1;
    	let t5;
    	let a2;
    	let t7;
    	let h11;
    	let t9;
    	let tabs1;
    	let t10;
    	let panels_1;
    	let each_value_1 = /*panels*/ ctx[0];
    	validate_each_argument(each_value_1);
    	let each_blocks_1 = [];

    	for (let i = 0; i < each_value_1.length; i += 1) {
    		each_blocks_1[i] = create_each_block_1(get_each_context_1(ctx, each_value_1, i));
    	}

    	let each_value = /*panels*/ ctx[0];
    	validate_each_argument(each_value);
    	let each_blocks = [];

    	for (let i = 0; i < each_value.length; i += 1) {
    		each_blocks[i] = create_each_block$1(get_each_context$1(ctx, each_value, i));
    	}

    	const block = {
    		c: function create() {
    			content = element("content");
    			h10 = element("h1");
    			h10.textContent = "Basic Tabs";
    			t1 = space();
    			tabs0 = element("tabs");
    			a0 = element("a");
    			a0.textContent = "Tab1";
    			t3 = space();
    			a1 = element("a");
    			a1.textContent = "Tab2";
    			t5 = space();
    			a2 = element("a");
    			a2.textContent = "Tab3";
    			t7 = space();
    			h11 = element("h1");
    			h11.textContent = "Interactive Demo";
    			t9 = space();
    			tabs1 = element("tabs");

    			for (let i = 0; i < each_blocks_1.length; i += 1) {
    				each_blocks_1[i].c();
    			}

    			t10 = space();
    			panels_1 = element("panels");

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			add_location(h10, file$d, 59, 2, 1121);
    			attr_dev(a0, "class", "active svelte-j1ijok");
    			add_location(a0, file$d, 62, 4, 1155);
    			attr_dev(a1, "class", "svelte-j1ijok");
    			add_location(a1, file$d, 63, 4, 1186);
    			attr_dev(a2, "class", "svelte-j1ijok");
    			add_location(a2, file$d, 64, 4, 1202);
    			attr_dev(tabs0, "class", "svelte-j1ijok");
    			add_location(tabs0, file$d, 61, 2, 1144);
    			add_location(h11, file$d, 67, 2, 1227);
    			attr_dev(tabs1, "class", "svelte-j1ijok");
    			add_location(tabs1, file$d, 68, 2, 1255);
    			add_location(panels_1, file$d, 73, 2, 1404);
    			attr_dev(content, "class", "svelte-j1ijok");
    			add_location(content, file$d, 58, 0, 1109);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, h10);
    			append_dev(content, t1);
    			append_dev(content, tabs0);
    			append_dev(tabs0, a0);
    			append_dev(tabs0, t3);
    			append_dev(tabs0, a1);
    			append_dev(tabs0, t5);
    			append_dev(tabs0, a2);
    			append_dev(content, t7);
    			append_dev(content, h11);
    			append_dev(content, t9);
    			append_dev(content, tabs1);

    			for (let i = 0; i < each_blocks_1.length; i += 1) {
    				each_blocks_1[i].m(tabs1, null);
    			}

    			append_dev(content, t10);
    			append_dev(content, panels_1);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].m(panels_1, null);
    			}
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*panels, activate*/ 3) {
    				each_value_1 = /*panels*/ ctx[0];
    				validate_each_argument(each_value_1);
    				let i;

    				for (i = 0; i < each_value_1.length; i += 1) {
    					const child_ctx = get_each_context_1(ctx, each_value_1, i);

    					if (each_blocks_1[i]) {
    						each_blocks_1[i].p(child_ctx, dirty);
    					} else {
    						each_blocks_1[i] = create_each_block_1(child_ctx);
    						each_blocks_1[i].c();
    						each_blocks_1[i].m(tabs1, null);
    					}
    				}

    				for (; i < each_blocks_1.length; i += 1) {
    					each_blocks_1[i].d(1);
    				}

    				each_blocks_1.length = each_value_1.length;
    			}

    			if (dirty & /*panels*/ 1) {
    				each_value = /*panels*/ ctx[0];
    				validate_each_argument(each_value);
    				let i;

    				for (i = 0; i < each_value.length; i += 1) {
    					const child_ctx = get_each_context$1(ctx, each_value, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    					} else {
    						each_blocks[i] = create_each_block$1(child_ctx);
    						each_blocks[i].c();
    						each_blocks[i].m(panels_1, null);
    					}
    				}

    				for (; i < each_blocks.length; i += 1) {
    					each_blocks[i].d(1);
    				}

    				each_blocks.length = each_value.length;
    			}
    		},
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_each(each_blocks_1, detaching);
    			destroy_each(each_blocks, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$e.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$e($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Tabs", slots, []);

    	let panels = [
    		{ title: "Panel 1", active: true },
    		{ title: "Panel 2", active: false },
    		{ title: "Panel 3", active: false }
    	];

    	const activate = index => {
    		panels.forEach((panel, i) => panel.active = index == i);
    		$$invalidate(0, panels); // for the svelte update
    	};

    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Tabs> was created with unknown prop '${key}'`);
    	});

    	const click_handler = i => activate(i);
    	$$self.$capture_state = () => ({ panels, activate });

    	$$self.$inject_state = $$props => {
    		if ("panels" in $$props) $$invalidate(0, panels = $$props.panels);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [panels, activate, click_handler];
    }

    class Tabs extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$e, create_fragment$e, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Tabs",
    			options,
    			id: create_fragment$e.name
    		});
    	}
    }

    /* src/thumbs/GridOverGraphic.svelte generated by Svelte v3.30.0 */

    const file$e = "src/thumbs/GridOverGraphic.svelte";

    function create_fragment$f(ctx) {
    	let content;
    	let h10;
    	let t1;
    	let icecream;
    	let background;
    	let img;
    	let img_src_value;
    	let t2;
    	let overlay;
    	let one;
    	let h11;
    	let t4;
    	let p0;
    	let t6;
    	let two;
    	let h12;
    	let t8;
    	let p1;
    	let t10;
    	let three;
    	let h13;
    	let t12;
    	let p2;

    	const block = {
    		c: function create() {
    			content = element("content");
    			h10 = element("h1");
    			h10.textContent = "Grid Over Graphic";
    			t1 = space();
    			icecream = element("icecream");
    			background = element("background");
    			img = element("img");
    			t2 = space();
    			overlay = element("overlay");
    			one = element("one");
    			h11 = element("h1");
    			h11.textContent = "Do You Like Icecream?";
    			t4 = space();
    			p0 = element("p");
    			p0.textContent = "This square is placed over this image using a\n          CSS Grid.";
    			t6 = space();
    			two = element("two");
    			h12 = element("h1");
    			h12.textContent = "Icecream Rules";
    			t8 = space();
    			p1 = element("p");
    			p1.textContent = "Sometimes you want to put a graphic behind some creatively\n        organize text and panels.  You can dot that with CSS grids.";
    			t10 = space();
    			three = element("three");
    			h13 = element("h1");
    			h13.textContent = "Bottom Left";
    			t12 = space();
    			p2 = element("p");
    			p2.textContent = "I don't know why I put that sphere there.";
    			add_location(h10, file$e, 65, 2, 1084);
    			if (img.src !== (img_src_value = "/ice_cream_graphic.svg")) attr_dev(img, "src", img_src_value);
    			attr_dev(img, "class", "svelte-1n9y415");
    			add_location(img, file$e, 69, 4, 1146);
    			attr_dev(background, "class", "svelte-1n9y415");
    			add_location(background, file$e, 68, 4, 1129);
    			add_location(h11, file$e, 74, 8, 1236);
    			add_location(p0, file$e, 75, 8, 1275);
    			attr_dev(one, "class", "svelte-1n9y415");
    			add_location(one, file$e, 73, 6, 1222);
    			add_location(h12, file$e, 80, 6, 1388);
    			add_location(p1, file$e, 81, 6, 1418);
    			attr_dev(two, "class", "svelte-1n9y415");
    			add_location(two, file$e, 79, 6, 1376);
    			add_location(h13, file$e, 85, 6, 1581);
    			add_location(p2, file$e, 86, 6, 1608);
    			attr_dev(three, "class", "svelte-1n9y415");
    			add_location(three, file$e, 84, 6, 1567);
    			attr_dev(overlay, "class", "svelte-1n9y415");
    			add_location(overlay, file$e, 72, 4, 1206);
    			attr_dev(icecream, "class", "svelte-1n9y415");
    			add_location(icecream, file$e, 67, 2, 1114);
    			attr_dev(content, "class", "svelte-1n9y415");
    			add_location(content, file$e, 64, 0, 1072);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, h10);
    			append_dev(content, t1);
    			append_dev(content, icecream);
    			append_dev(icecream, background);
    			append_dev(background, img);
    			append_dev(icecream, t2);
    			append_dev(icecream, overlay);
    			append_dev(overlay, one);
    			append_dev(one, h11);
    			append_dev(one, t4);
    			append_dev(one, p0);
    			append_dev(overlay, t6);
    			append_dev(overlay, two);
    			append_dev(two, h12);
    			append_dev(two, t8);
    			append_dev(two, p1);
    			append_dev(overlay, t10);
    			append_dev(overlay, three);
    			append_dev(three, h13);
    			append_dev(three, t12);
    			append_dev(three, p2);
    		},
    		p: noop,
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$f.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$f($$self, $$props) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("GridOverGraphic", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<GridOverGraphic> was created with unknown prop '${key}'`);
    	});

    	return [];
    }

    class GridOverGraphic extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$f, create_fragment$f, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "GridOverGraphic",
    			options,
    			id: create_fragment$f.name
    		});
    	}
    }

    /* src/thumbs/Calendar.svelte generated by Svelte v3.30.0 */
    const file$f = "src/thumbs/Calendar.svelte";

    function get_each_context$2(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[1] = list[i];
    	return child_ctx;
    }

    // (57:2) {#each make_dates() as date}
    function create_each_block$2(ctx) {
    	let date;
    	let t_value = /*date*/ ctx[1] + "";
    	let t;

    	const block = {
    		c: function create() {
    			date = element("date");
    			t = text(t_value);
    			attr_dev(date, "class", "svelte-1gt8gt4");
    			add_location(date, file$f, 57, 4, 1127);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, date, anchor);
    			append_dev(date, t);
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(date);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block$2.name,
    		type: "each",
    		source: "(57:2) {#each make_dates() as date}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$g(ctx) {
    	let content;
    	let calendar;
    	let month;
    	let t1;
    	let day0;
    	let day1;
    	let day2;
    	let day3;
    	let day4;
    	let day5;
    	let day6;
    	let t9;
    	let each_value = /*make_dates*/ ctx[0]();
    	validate_each_argument(each_value);
    	let each_blocks = [];

    	for (let i = 0; i < each_value.length; i += 1) {
    		each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
    	}

    	const block = {
    		c: function create() {
    			content = element("content");
    			calendar = element("calendar");
    			month = element("month");
    			month.textContent = "December";
    			t1 = space();
    			day0 = element("day");
    			day0.textContent = "Sun";
    			day1 = element("day");
    			day1.textContent = "Mon";
    			day2 = element("day");
    			day2.textContent = "Tue";
    			day3 = element("day");
    			day3.textContent = "Wed";
    			day4 = element("day");
    			day4.textContent = "Thu";
    			day5 = element("day");
    			day5.textContent = "Fri";
    			day6 = element("day");
    			day6.textContent = "Sat";
    			t9 = space();

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			attr_dev(month, "class", "svelte-1gt8gt4");
    			add_location(month, file$f, 54, 2, 967);
    			attr_dev(day0, "class", "svelte-1gt8gt4");
    			add_location(day0, file$f, 55, 2, 993);
    			attr_dev(day1, "class", "svelte-1gt8gt4");
    			add_location(day1, file$f, 55, 16, 1007);
    			attr_dev(day2, "class", "svelte-1gt8gt4");
    			add_location(day2, file$f, 55, 30, 1021);
    			attr_dev(day3, "class", "svelte-1gt8gt4");
    			add_location(day3, file$f, 55, 44, 1035);
    			attr_dev(day4, "class", "svelte-1gt8gt4");
    			add_location(day4, file$f, 55, 58, 1049);
    			attr_dev(day5, "class", "svelte-1gt8gt4");
    			add_location(day5, file$f, 55, 72, 1063);
    			attr_dev(day6, "class", "svelte-1gt8gt4");
    			add_location(day6, file$f, 55, 86, 1077);
    			attr_dev(calendar, "class", "svelte-1gt8gt4");
    			add_location(calendar, file$f, 53, 2, 954);
    			attr_dev(content, "class", "svelte-1gt8gt4");
    			add_location(content, file$f, 52, 0, 942);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, calendar);
    			append_dev(calendar, month);
    			append_dev(calendar, t1);
    			append_dev(calendar, day0);
    			append_dev(calendar, day1);
    			append_dev(calendar, day2);
    			append_dev(calendar, day3);
    			append_dev(calendar, day4);
    			append_dev(calendar, day5);
    			append_dev(calendar, day6);
    			append_dev(calendar, t9);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].m(calendar, null);
    			}
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*make_dates*/ 1) {
    				each_value = /*make_dates*/ ctx[0]();
    				validate_each_argument(each_value);
    				let i;

    				for (i = 0; i < each_value.length; i += 1) {
    					const child_ctx = get_each_context$2(ctx, each_value, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    					} else {
    						each_blocks[i] = create_each_block$2(child_ctx);
    						each_blocks[i].c();
    						each_blocks[i].m(calendar, null);
    					}
    				}

    				for (; i < each_blocks.length; i += 1) {
    					each_blocks[i].d(1);
    				}

    				each_blocks.length = each_value.length;
    			}
    		},
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_each(each_blocks, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$g.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$g($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Calendar", slots, []);

    	const make_dates = () => {
    		let days = [];

    		for (let i = 0; i < 31; i++) {
    			days.push(i);
    		}

    		return days;
    	};

    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Calendar> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ Icon, make_dates });
    	return [make_dates];
    }

    class Calendar extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$g, create_fragment$g, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Calendar",
    			options,
    			id: create_fragment$g.name
    		});
    	}
    }

    /* src/thumbs/Carousel.svelte generated by Svelte v3.30.0 */
    const file$g = "src/thumbs/Carousel.svelte";

    function create_fragment$h(ctx) {
    	let content;
    	let h1;
    	let t1;
    	let carousel;
    	let figure0;
    	let img0;
    	let img0_src_value;
    	let t2;
    	let figcaption0;
    	let t4;
    	let figure1;
    	let img1;
    	let img1_src_value;
    	let t5;
    	let figcaption1;
    	let t7;
    	let prev;
    	let icon0;
    	let t8;
    	let next;
    	let icon1;
    	let current;

    	icon0 = new Icon({
    			props: { name: "arrow-left", size: "48" },
    			$$inline: true
    		});

    	icon1 = new Icon({
    			props: { name: "arrow-right", size: "48" },
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			h1 = element("h1");
    			h1.textContent = "Carousel";
    			t1 = space();
    			carousel = element("carousel");
    			figure0 = element("figure");
    			img0 = element("img");
    			t2 = space();
    			figcaption0 = element("figcaption");
    			figcaption0.textContent = "Image 1";
    			t4 = space();
    			figure1 = element("figure");
    			img1 = element("img");
    			t5 = space();
    			figcaption1 = element("figcaption");
    			figcaption1.textContent = "Image 2";
    			t7 = space();
    			prev = element("prev");
    			create_component(icon0.$$.fragment);
    			t8 = space();
    			next = element("next");
    			create_component(icon1.$$.fragment);
    			add_location(h1, file$g, 75, 2, 1217);
    			attr_dev(img0, "alt", "Stock photo");
    			if (img0.src !== (img0_src_value = holder(16 * 40, 9 * 40))) attr_dev(img0, "src", img0_src_value);
    			attr_dev(img0, "class", "svelte-12uwa5s");
    			add_location(img0, file$g, 79, 6, 1283);
    			attr_dev(figcaption0, "class", "svelte-12uwa5s");
    			add_location(figcaption0, file$g, 80, 6, 1346);
    			attr_dev(figure0, "class", "active svelte-12uwa5s");
    			add_location(figure0, file$g, 78, 4, 1253);
    			attr_dev(img1, "alt", "Stock photo");
    			if (img1.src !== (img1_src_value = holder(16 * 40, 9 * 40))) attr_dev(img1, "src", img1_src_value);
    			attr_dev(img1, "class", "svelte-12uwa5s");
    			add_location(img1, file$g, 85, 6, 1467);
    			attr_dev(figcaption1, "class", "svelte-12uwa5s");
    			add_location(figcaption1, file$g, 86, 6, 1530);
    			attr_dev(figure1, "class", "svelte-12uwa5s");
    			add_location(figure1, file$g, 84, 4, 1452);
    			attr_dev(prev, "class", "svelte-12uwa5s");
    			add_location(prev, file$g, 88, 4, 1582);
    			attr_dev(next, "class", "svelte-12uwa5s");
    			add_location(next, file$g, 89, 4, 1636);
    			attr_dev(carousel, "class", "svelte-12uwa5s");
    			add_location(carousel, file$g, 77, 2, 1238);
    			attr_dev(content, "class", "svelte-12uwa5s");
    			add_location(content, file$g, 74, 0, 1205);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, h1);
    			append_dev(content, t1);
    			append_dev(content, carousel);
    			append_dev(carousel, figure0);
    			append_dev(figure0, img0);
    			append_dev(figure0, t2);
    			append_dev(figure0, figcaption0);
    			append_dev(carousel, t4);
    			append_dev(carousel, figure1);
    			append_dev(figure1, img1);
    			append_dev(figure1, t5);
    			append_dev(figure1, figcaption1);
    			append_dev(carousel, t7);
    			append_dev(carousel, prev);
    			mount_component(icon0, prev, null);
    			append_dev(carousel, t8);
    			append_dev(carousel, next);
    			mount_component(icon1, next, null);
    			current = true;
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon0.$$.fragment, local);
    			transition_in(icon1.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon0.$$.fragment, local);
    			transition_out(icon1.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_component(icon0);
    			destroy_component(icon1);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$h.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$h($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Carousel", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Carousel> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ Icon, holder });
    	return [];
    }

    class Carousel extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$h, create_fragment$h, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Carousel",
    			options,
    			id: create_fragment$h.name
    		});
    	}
    }

    /* src/demos/index.svelte generated by Svelte v3.30.0 */
    const file$h = "src/demos/index.svelte";

    function create_fragment$i(ctx) {
    	let h10;
    	let t1;
    	let images0;
    	let figure0;
    	let google;
    	let t2;
    	let figcaption0;
    	let t4;
    	let figure1;
    	let twitter;
    	let t5;
    	let figcaption1;
    	let t7;
    	let figure2;
    	let youtube;
    	let t8;
    	let figcaption2;
    	let t10;
    	let figure3;
    	let instagram;
    	let t11;
    	let figcaption3;
    	let t13;
    	let figure4;
    	let pinterest;
    	let t14;
    	let figcaption4;
    	let t16;
    	let hr;
    	let t17;
    	let h11;
    	let t19;
    	let images1;
    	let figure5;
    	let login;
    	let t20;
    	let figcaption5;
    	let t22;
    	let figure6;
    	let tiles;
    	let t23;
    	let figcaption6;
    	let t25;
    	let figure7;
    	let cards;
    	let t26;
    	let figcaption7;
    	let t28;
    	let figure8;
    	let panels;
    	let t29;
    	let figcaption8;
    	let t31;
    	let figure9;
    	let tabs;
    	let t32;
    	let figcaption9;
    	let t34;
    	let figure10;
    	let gridovergraphic;
    	let t35;
    	let figcaption10;
    	let t37;
    	let figure11;
    	let calendar;
    	let t38;
    	let figcaption11;
    	let t40;
    	let figure12;
    	let carousel;
    	let t41;
    	let figcaption12;
    	let current;
    	let mounted;
    	let dispose;
    	google = new Google({ $$inline: true });
    	twitter = new Twitter({ $$inline: true });
    	youtube = new Youtube({ $$inline: true });
    	instagram = new Instagram({ $$inline: true });
    	pinterest = new Pinterest({ $$inline: true });
    	login = new Login({ $$inline: true });
    	tiles = new Tiles({ $$inline: true });
    	cards = new Cards({ $$inline: true });
    	panels = new Panels({ $$inline: true });
    	tabs = new Tabs({ $$inline: true });
    	gridovergraphic = new GridOverGraphic({ $$inline: true });
    	calendar = new Calendar({ $$inline: true });
    	carousel = new Carousel({ $$inline: true });

    	const block = {
    		c: function create() {
    			h10 = element("h1");
    			h10.textContent = "Full Websites";
    			t1 = space();
    			images0 = element("images");
    			figure0 = element("figure");
    			create_component(google.$$.fragment);
    			t2 = space();
    			figcaption0 = element("figcaption");
    			figcaption0.textContent = "Google";
    			t4 = space();
    			figure1 = element("figure");
    			create_component(twitter.$$.fragment);
    			t5 = space();
    			figcaption1 = element("figcaption");
    			figcaption1.textContent = "Twitter";
    			t7 = space();
    			figure2 = element("figure");
    			create_component(youtube.$$.fragment);
    			t8 = space();
    			figcaption2 = element("figcaption");
    			figcaption2.textContent = "Youtube";
    			t10 = space();
    			figure3 = element("figure");
    			create_component(instagram.$$.fragment);
    			t11 = space();
    			figcaption3 = element("figcaption");
    			figcaption3.textContent = "Instagram";
    			t13 = space();
    			figure4 = element("figure");
    			create_component(pinterest.$$.fragment);
    			t14 = space();
    			figcaption4 = element("figcaption");
    			figcaption4.textContent = "Pinterest";
    			t16 = space();
    			hr = element("hr");
    			t17 = space();
    			h11 = element("h1");
    			h11.textContent = "Common UI Patterns";
    			t19 = space();
    			images1 = element("images");
    			figure5 = element("figure");
    			create_component(login.$$.fragment);
    			t20 = space();
    			figcaption5 = element("figcaption");
    			figcaption5.textContent = "Basic Login";
    			t22 = space();
    			figure6 = element("figure");
    			create_component(tiles.$$.fragment);
    			t23 = space();
    			figcaption6 = element("figcaption");
    			figcaption6.textContent = "Tiles";
    			t25 = space();
    			figure7 = element("figure");
    			create_component(cards.$$.fragment);
    			t26 = space();
    			figcaption7 = element("figcaption");
    			figcaption7.textContent = "Cards";
    			t28 = space();
    			figure8 = element("figure");
    			create_component(panels.$$.fragment);
    			t29 = space();
    			figcaption8 = element("figcaption");
    			figcaption8.textContent = "Panels";
    			t31 = space();
    			figure9 = element("figure");
    			create_component(tabs.$$.fragment);
    			t32 = space();
    			figcaption9 = element("figcaption");
    			figcaption9.textContent = "Tabs";
    			t34 = space();
    			figure10 = element("figure");
    			create_component(gridovergraphic.$$.fragment);
    			t35 = space();
    			figcaption10 = element("figcaption");
    			figcaption10.textContent = "Grid Over Graphic";
    			t37 = space();
    			figure11 = element("figure");
    			create_component(calendar.$$.fragment);
    			t38 = space();
    			figcaption11 = element("figcaption");
    			figcaption11.textContent = "Calendar";
    			t40 = space();
    			figure12 = element("figure");
    			create_component(carousel.$$.fragment);
    			t41 = space();
    			figcaption12 = element("figcaption");
    			figcaption12.textContent = "Carousel";
    			add_location(h10, file$h, 56, 0, 1466);
    			attr_dev(figcaption0, "class", "svelte-1bny7ze");
    			add_location(figcaption0, file$h, 62, 2, 1567);
    			attr_dev(figure0, "class", "svelte-1bny7ze");
    			add_location(figure0, file$h, 60, 0, 1500);
    			attr_dev(figcaption1, "class", "svelte-1bny7ze");
    			add_location(figcaption1, file$h, 67, 2, 1677);
    			attr_dev(figure1, "class", "svelte-1bny7ze");
    			add_location(figure1, file$h, 65, 0, 1610);
    			attr_dev(figcaption2, "class", "svelte-1bny7ze");
    			add_location(figcaption2, file$h, 72, 2, 1788);
    			attr_dev(figure2, "class", "svelte-1bny7ze");
    			add_location(figure2, file$h, 70, 0, 1721);
    			attr_dev(figcaption3, "class", "svelte-1bny7ze");
    			add_location(figcaption3, file$h, 77, 2, 1903);
    			attr_dev(figure3, "class", "svelte-1bny7ze");
    			add_location(figure3, file$h, 75, 0, 1832);
    			attr_dev(figcaption4, "class", "svelte-1bny7ze");
    			add_location(figcaption4, file$h, 82, 2, 2021);
    			attr_dev(figure4, "class", "svelte-1bny7ze");
    			add_location(figure4, file$h, 80, 0, 1950);
    			attr_dev(images0, "class", "svelte-1bny7ze");
    			add_location(images0, file$h, 58, 0, 1490);
    			add_location(hr, file$h, 86, 0, 2078);
    			add_location(h11, file$h, 87, 0, 2083);
    			attr_dev(figcaption5, "class", "svelte-1bny7ze");
    			add_location(figcaption5, file$h, 93, 2, 2185);
    			attr_dev(figure5, "class", "svelte-1bny7ze");
    			add_location(figure5, file$h, 91, 0, 2122);
    			attr_dev(figcaption6, "class", "svelte-1bny7ze");
    			add_location(figcaption6, file$h, 99, 2, 2297);
    			attr_dev(figure6, "class", "svelte-1bny7ze");
    			add_location(figure6, file$h, 97, 0, 2234);
    			attr_dev(figcaption7, "class", "svelte-1bny7ze");
    			add_location(figcaption7, file$h, 104, 2, 2402);
    			attr_dev(figure7, "class", "svelte-1bny7ze");
    			add_location(figure7, file$h, 102, 0, 2339);
    			attr_dev(figcaption8, "class", "svelte-1bny7ze");
    			add_location(figcaption8, file$h, 109, 2, 2509);
    			attr_dev(figure8, "class", "svelte-1bny7ze");
    			add_location(figure8, file$h, 107, 0, 2444);
    			attr_dev(figcaption9, "class", "svelte-1bny7ze");
    			add_location(figcaption9, file$h, 114, 2, 2613);
    			attr_dev(figure9, "class", "svelte-1bny7ze");
    			add_location(figure9, file$h, 112, 0, 2552);
    			attr_dev(figcaption10, "class", "svelte-1bny7ze");
    			add_location(figcaption10, file$h, 119, 2, 2737);
    			attr_dev(figure10, "class", "svelte-1bny7ze");
    			add_location(figure10, file$h, 117, 0, 2654);
    			attr_dev(figcaption11, "class", "svelte-1bny7ze");
    			add_location(figcaption11, file$h, 124, 2, 2860);
    			attr_dev(figure11, "class", "svelte-1bny7ze");
    			add_location(figure11, file$h, 122, 0, 2791);
    			attr_dev(figcaption12, "class", "svelte-1bny7ze");
    			add_location(figcaption12, file$h, 129, 2, 2974);
    			attr_dev(figure12, "class", "svelte-1bny7ze");
    			add_location(figure12, file$h, 127, 0, 2905);
    			attr_dev(images1, "class", "svelte-1bny7ze");
    			add_location(images1, file$h, 89, 0, 2112);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, h10, anchor);
    			insert_dev(target, t1, anchor);
    			insert_dev(target, images0, anchor);
    			append_dev(images0, figure0);
    			mount_component(google, figure0, null);
    			append_dev(figure0, t2);
    			append_dev(figure0, figcaption0);
    			append_dev(images0, t4);
    			append_dev(images0, figure1);
    			mount_component(twitter, figure1, null);
    			append_dev(figure1, t5);
    			append_dev(figure1, figcaption1);
    			append_dev(images0, t7);
    			append_dev(images0, figure2);
    			mount_component(youtube, figure2, null);
    			append_dev(figure2, t8);
    			append_dev(figure2, figcaption2);
    			append_dev(images0, t10);
    			append_dev(images0, figure3);
    			mount_component(instagram, figure3, null);
    			append_dev(figure3, t11);
    			append_dev(figure3, figcaption3);
    			append_dev(images0, t13);
    			append_dev(images0, figure4);
    			mount_component(pinterest, figure4, null);
    			append_dev(figure4, t14);
    			append_dev(figure4, figcaption4);
    			insert_dev(target, t16, anchor);
    			insert_dev(target, hr, anchor);
    			insert_dev(target, t17, anchor);
    			insert_dev(target, h11, anchor);
    			insert_dev(target, t19, anchor);
    			insert_dev(target, images1, anchor);
    			append_dev(images1, figure5);
    			mount_component(login, figure5, null);
    			append_dev(figure5, t20);
    			append_dev(figure5, figcaption5);
    			append_dev(images1, t22);
    			append_dev(images1, figure6);
    			mount_component(tiles, figure6, null);
    			append_dev(figure6, t23);
    			append_dev(figure6, figcaption6);
    			append_dev(images1, t25);
    			append_dev(images1, figure7);
    			mount_component(cards, figure7, null);
    			append_dev(figure7, t26);
    			append_dev(figure7, figcaption7);
    			append_dev(images1, t28);
    			append_dev(images1, figure8);
    			mount_component(panels, figure8, null);
    			append_dev(figure8, t29);
    			append_dev(figure8, figcaption8);
    			append_dev(images1, t31);
    			append_dev(images1, figure9);
    			mount_component(tabs, figure9, null);
    			append_dev(figure9, t32);
    			append_dev(figure9, figcaption9);
    			append_dev(images1, t34);
    			append_dev(images1, figure10);
    			mount_component(gridovergraphic, figure10, null);
    			append_dev(figure10, t35);
    			append_dev(figure10, figcaption10);
    			append_dev(images1, t37);
    			append_dev(images1, figure11);
    			mount_component(calendar, figure11, null);
    			append_dev(figure11, t38);
    			append_dev(figure11, figcaption11);
    			append_dev(images1, t40);
    			append_dev(images1, figure12);
    			mount_component(carousel, figure12, null);
    			append_dev(figure12, t41);
    			append_dev(figure12, figcaption12);
    			current = true;

    			if (!mounted) {
    				dispose = [
    					listen_dev(figure0, "click", /*click_handler*/ ctx[0], false, false, false),
    					listen_dev(figure1, "click", /*click_handler_1*/ ctx[1], false, false, false),
    					listen_dev(figure2, "click", /*click_handler_2*/ ctx[2], false, false, false),
    					listen_dev(figure3, "click", /*click_handler_3*/ ctx[3], false, false, false),
    					listen_dev(figure4, "click", /*click_handler_4*/ ctx[4], false, false, false),
    					listen_dev(figure5, "click", /*click_handler_5*/ ctx[5], false, false, false),
    					listen_dev(figure6, "click", /*click_handler_6*/ ctx[6], false, false, false),
    					listen_dev(figure7, "click", /*click_handler_7*/ ctx[7], false, false, false),
    					listen_dev(figure8, "click", /*click_handler_8*/ ctx[8], false, false, false),
    					listen_dev(figure9, "click", /*click_handler_9*/ ctx[9], false, false, false),
    					listen_dev(figure10, "click", /*click_handler_10*/ ctx[10], false, false, false),
    					listen_dev(figure11, "click", /*click_handler_11*/ ctx[11], false, false, false),
    					listen_dev(figure12, "click", /*click_handler_12*/ ctx[12], false, false, false)
    				];

    				mounted = true;
    			}
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(google.$$.fragment, local);
    			transition_in(twitter.$$.fragment, local);
    			transition_in(youtube.$$.fragment, local);
    			transition_in(instagram.$$.fragment, local);
    			transition_in(pinterest.$$.fragment, local);
    			transition_in(login.$$.fragment, local);
    			transition_in(tiles.$$.fragment, local);
    			transition_in(cards.$$.fragment, local);
    			transition_in(panels.$$.fragment, local);
    			transition_in(tabs.$$.fragment, local);
    			transition_in(gridovergraphic.$$.fragment, local);
    			transition_in(calendar.$$.fragment, local);
    			transition_in(carousel.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(google.$$.fragment, local);
    			transition_out(twitter.$$.fragment, local);
    			transition_out(youtube.$$.fragment, local);
    			transition_out(instagram.$$.fragment, local);
    			transition_out(pinterest.$$.fragment, local);
    			transition_out(login.$$.fragment, local);
    			transition_out(tiles.$$.fragment, local);
    			transition_out(cards.$$.fragment, local);
    			transition_out(panels.$$.fragment, local);
    			transition_out(tabs.$$.fragment, local);
    			transition_out(gridovergraphic.$$.fragment, local);
    			transition_out(calendar.$$.fragment, local);
    			transition_out(carousel.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(h10);
    			if (detaching) detach_dev(t1);
    			if (detaching) detach_dev(images0);
    			destroy_component(google);
    			destroy_component(twitter);
    			destroy_component(youtube);
    			destroy_component(instagram);
    			destroy_component(pinterest);
    			if (detaching) detach_dev(t16);
    			if (detaching) detach_dev(hr);
    			if (detaching) detach_dev(t17);
    			if (detaching) detach_dev(h11);
    			if (detaching) detach_dev(t19);
    			if (detaching) detach_dev(images1);
    			destroy_component(login);
    			destroy_component(tiles);
    			destroy_component(cards);
    			destroy_component(panels);
    			destroy_component(tabs);
    			destroy_component(gridovergraphic);
    			destroy_component(calendar);
    			destroy_component(carousel);
    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$i.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$i($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Demos", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Demos> was created with unknown prop '${key}'`);
    	});

    	const click_handler = () => push("/demos/google");
    	const click_handler_1 = () => push("/demos/twitter");
    	const click_handler_2 = () => push("/demos/youtube");
    	const click_handler_3 = () => push("/demos/instagram");
    	const click_handler_4 = () => push("/demos/pinterest");
    	const click_handler_5 = () => push("/demos/login");
    	const click_handler_6 = () => push("/demos/tiles");
    	const click_handler_7 = () => push("/demos/cards");
    	const click_handler_8 = () => push("/demos/panels");
    	const click_handler_9 = () => push("/demos/tabs");
    	const click_handler_10 = () => push("/demos/gridovergraphic");
    	const click_handler_11 = () => push("/demos/calendar");
    	const click_handler_12 = () => push("/demos/carousel");

    	$$self.$capture_state = () => ({
    		Google,
    		Twitter,
    		Youtube,
    		Instagram,
    		Pinterest,
    		Login,
    		Tiles,
    		Cards,
    		Panels,
    		NavBar,
    		Tabs,
    		GridOverGraphic,
    		Calendar,
    		Carousel,
    		push,
    		holder
    	});

    	return [
    		click_handler,
    		click_handler_1,
    		click_handler_2,
    		click_handler_3,
    		click_handler_4,
    		click_handler_5,
    		click_handler_6,
    		click_handler_7,
    		click_handler_8,
    		click_handler_9,
    		click_handler_10,
    		click_handler_11,
    		click_handler_12
    	];
    }

    class Demos extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$i, create_fragment$i, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Demos",
    			options,
    			id: create_fragment$i.name
    		});
    	}
    }

    /* src/NotFound.svelte generated by Svelte v3.30.0 */

    const file$i = "src/NotFound.svelte";

    function create_fragment$j(ctx) {
    	let h1;

    	const block = {
    		c: function create() {
    			h1 = element("h1");
    			h1.textContent = "Not found";
    			add_location(h1, file$i, 0, 0, 0);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, h1, anchor);
    		},
    		p: noop,
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(h1);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$j.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$j($$self, $$props) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("NotFound", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<NotFound> was created with unknown prop '${key}'`);
    	});

    	return [];
    }

    class NotFound extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$j, create_fragment$j, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "NotFound",
    			options,
    			id: create_fragment$j.name
    		});
    	}
    }

    /* src/demos/Google.svelte generated by Svelte v3.30.0 */
    const file$j = "src/demos/Google.svelte";

    function create_fragment$k(ctx) {
    	let content;
    	let header;
    	let nav;
    	let nav_left;
    	let a0;
    	let t1;
    	let a1;
    	let t3;
    	let ul;
    	let li0;
    	let t5;
    	let li1;
    	let t7;
    	let li2;
    	let icon;
    	let t8;
    	let li3;
    	let button0;
    	let t10;
    	let figure;
    	let a2;
    	let img;
    	let img_src_value;
    	let link_action;
    	let t11;
    	let search;
    	let input;
    	let t12;
    	let buttons;
    	let button1;
    	let t14;
    	let button2;
    	let t16;
    	let codeview;
    	let current;
    	let mounted;
    	let dispose;

    	icon = new Icon({
    			props: { name: "grid", color: "#000" },
    			$$inline: true
    		});

    	codeview = new CodeView({
    			props: {
    				source: "/code/Google",
    				notes: "/code/Google.notes.html"
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			header = element("header");
    			nav = element("nav");
    			nav_left = element("nav-left");
    			a0 = element("a");
    			a0.textContent = "About";
    			t1 = space();
    			a1 = element("a");
    			a1.textContent = "Store";
    			t3 = space();
    			ul = element("ul");
    			li0 = element("li");
    			li0.textContent = "Gmail";
    			t5 = space();
    			li1 = element("li");
    			li1.textContent = "Image";
    			t7 = space();
    			li2 = element("li");
    			create_component(icon.$$.fragment);
    			t8 = space();
    			li3 = element("li");
    			button0 = element("button");
    			button0.textContent = "Sign In";
    			t10 = space();
    			figure = element("figure");
    			a2 = element("a");
    			img = element("img");
    			t11 = space();
    			search = element("search");
    			input = element("input");
    			t12 = space();
    			buttons = element("buttons");
    			button1 = element("button");
    			button1.textContent = "Google Search";
    			t14 = space();
    			button2 = element("button");
    			button2.textContent = "I'm Feeling Lucky";
    			t16 = space();
    			create_component(codeview.$$.fragment);
    			add_location(a0, file$j, 64, 8, 988);
    			add_location(a1, file$j, 65, 8, 1009);
    			add_location(nav_left, file$j, 63, 6, 969);
    			add_location(li0, file$j, 68, 6, 1057);
    			add_location(li1, file$j, 69, 6, 1078);
    			add_location(li2, file$j, 70, 6, 1099);
    			attr_dev(button0, "class", "svelte-yyzz8b");
    			add_location(button0, file$j, 71, 10, 1152);
    			add_location(li3, file$j, 71, 6, 1148);
    			add_location(ul, file$j, 67, 6, 1046);
    			attr_dev(nav, "class", "svelte-yyzz8b");
    			add_location(nav, file$j, 62, 4, 957);
    			attr_dev(header, "class", "svelte-yyzz8b");
    			add_location(header, file$j, 61, 2, 944);
    			if (img.src !== (img_src_value = holder(500, 200))) attr_dev(img, "src", img_src_value);
    			add_location(img, file$j, 78, 6, 1273);
    			attr_dev(a2, "href", "/demos/google");
    			add_location(a2, file$j, 77, 4, 1233);
    			attr_dev(figure, "class", "svelte-yyzz8b");
    			add_location(figure, file$j, 76, 2, 1220);
    			attr_dev(input, "type", "text");
    			attr_dev(input, "class", "svelte-yyzz8b");
    			add_location(input, file$j, 83, 2, 1340);
    			attr_dev(button1, "class", "svelte-yyzz8b");
    			add_location(button1, file$j, 85, 6, 1380);
    			attr_dev(button2, "class", "svelte-yyzz8b");
    			add_location(button2, file$j, 86, 6, 1417);
    			attr_dev(buttons, "class", "svelte-yyzz8b");
    			add_location(buttons, file$j, 84, 4, 1364);
    			attr_dev(search, "class", "svelte-yyzz8b");
    			add_location(search, file$j, 82, 2, 1329);
    			attr_dev(content, "class", "svelte-yyzz8b");
    			add_location(content, file$j, 59, 0, 931);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, header);
    			append_dev(header, nav);
    			append_dev(nav, nav_left);
    			append_dev(nav_left, a0);
    			append_dev(nav_left, t1);
    			append_dev(nav_left, a1);
    			append_dev(nav, t3);
    			append_dev(nav, ul);
    			append_dev(ul, li0);
    			append_dev(ul, t5);
    			append_dev(ul, li1);
    			append_dev(ul, t7);
    			append_dev(ul, li2);
    			mount_component(icon, li2, null);
    			append_dev(ul, t8);
    			append_dev(ul, li3);
    			append_dev(li3, button0);
    			append_dev(content, t10);
    			append_dev(content, figure);
    			append_dev(figure, a2);
    			append_dev(a2, img);
    			append_dev(content, t11);
    			append_dev(content, search);
    			append_dev(search, input);
    			append_dev(search, t12);
    			append_dev(search, buttons);
    			append_dev(buttons, button1);
    			append_dev(buttons, t14);
    			append_dev(buttons, button2);
    			insert_dev(target, t16, anchor);
    			mount_component(codeview, target, anchor);
    			current = true;

    			if (!mounted) {
    				dispose = action_destroyer(link_action = link.call(null, a2));
    				mounted = true;
    			}
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon.$$.fragment, local);
    			transition_in(codeview.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon.$$.fragment, local);
    			transition_out(codeview.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_component(icon);
    			if (detaching) detach_dev(t16);
    			destroy_component(codeview, detaching);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$k.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$k($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Google", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Google> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ link, Icon, CodeView, holder });
    	return [];
    }

    class Google$1 extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$k, create_fragment$k, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Google",
    			options,
    			id: create_fragment$k.name
    		});
    	}
    }

    /* src/components/PhoneWarn.svelte generated by Svelte v3.30.0 */

    const file$k = "src/components/PhoneWarn.svelte";

    function create_fragment$l(ctx) {
    	let phone_warn;
    	let section;
    	let aside;
    	let h2;
    	let t1;
    	let p;

    	const block = {
    		c: function create() {
    			phone_warn = element("phone-warn");
    			section = element("section");
    			aside = element("aside");
    			h2 = element("h2");
    			h2.textContent = "Not Ready For Phones";
    			t1 = space();
    			p = element("p");
    			p.textContent = "If you want to view this layout use a real computer, and don't complain if your real computer has some insane 16:9 aspect ratio gaming screen owned by only 1% of the world's population.  Use a normal monitor or just suck it up weirdo.";
    			add_location(h2, file$k, 9, 6, 99);
    			add_location(p, file$k, 10, 6, 135);
    			add_location(aside, file$k, 8, 4, 85);
    			add_location(section, file$k, 7, 2, 71);
    			set_custom_element_data(phone_warn, "class", "svelte-b88acd");
    			add_location(phone_warn, file$k, 6, 0, 56);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, phone_warn, anchor);
    			append_dev(phone_warn, section);
    			append_dev(section, aside);
    			append_dev(aside, h2);
    			append_dev(aside, t1);
    			append_dev(aside, p);
    		},
    		p: noop,
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(phone_warn);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$l.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$l($$self, $$props) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("PhoneWarn", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<PhoneWarn> was created with unknown prop '${key}'`);
    	});

    	return [];
    }

    class PhoneWarn extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$l, create_fragment$l, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "PhoneWarn",
    			options,
    			id: create_fragment$l.name
    		});
    	}
    }

    /* src/demos/Twitter.svelte generated by Svelte v3.30.0 */
    const file$l = "src/demos/Twitter.svelte";

    function get_each_context$3(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[1] = list[i];
    	return child_ctx;
    }

    // (243:4) {#each tweets as tweet}
    function create_each_block$3(ctx) {
    	let tweet;
    	let figure;
    	let img;
    	let img_src_value;
    	let t0;
    	let post;
    	let h4;
    	let t2;
    	let p;
    	let t3;
    	let br;
    	let t4;
    	let a;
    	let t6;
    	let t7;
    	let actions;
    	let icon0;
    	let t8;
    	let icon1;
    	let t9;
    	let icon2;
    	let t10;
    	let icon3;
    	let t11;
    	let icon4;
    	let t12;
    	let current;

    	icon0 = new Icon({
    			props: {
    				size: "16",
    				name: "message-circle",
    				color: "var(--color-inactive)"
    			},
    			$$inline: true
    		});

    	icon1 = new Icon({
    			props: {
    				size: "16",
    				name: "repeat",
    				color: "var(--color-inactive)"
    			},
    			$$inline: true
    		});

    	icon2 = new Icon({
    			props: {
    				size: "16",
    				name: "heart",
    				color: "var(--color-inactive)"
    			},
    			$$inline: true
    		});

    	icon3 = new Icon({
    			props: {
    				size: "16",
    				name: "upload",
    				color: "var(--color-inactive)"
    			},
    			$$inline: true
    		});

    	icon4 = new Icon({
    			props: { name: "more-horizontal" },
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			tweet = element("tweet");
    			figure = element("figure");
    			img = element("img");
    			t0 = space();
    			post = element("post");
    			h4 = element("h4");
    			h4.textContent = "Zed A. Shaw, Writer";
    			t2 = space();
    			p = element("p");
    			t3 = text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam: ");
    			br = element("br");
    			t4 = space();
    			a = element("a");
    			a.textContent = "quis nostrud exercitation";
    			t6 = text(" ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
    			t7 = space();
    			actions = element("actions");
    			create_component(icon0.$$.fragment);
    			t8 = text(" 2\n              ");
    			create_component(icon1.$$.fragment);
    			t9 = text(" 1\n              ");
    			create_component(icon2.$$.fragment);
    			t10 = text(" 12\n              ");
    			create_component(icon3.$$.fragment);
    			t11 = space();
    			create_component(icon4.$$.fragment);
    			t12 = space();
    			attr_dev(img, "alt", "Stock photo");
    			if (img.src !== (img_src_value = "/profile_pic.jpg")) attr_dev(img, "src", img_src_value);
    			attr_dev(img, "class", "svelte-bnvc6y");
    			add_location(img, file$l, 245, 12, 4631);
    			attr_dev(figure, "id", "avatar");
    			attr_dev(figure, "class", "svelte-bnvc6y");
    			add_location(figure, file$l, 244, 8, 4598);
    			attr_dev(h4, "class", "svelte-bnvc6y");
    			add_location(h4, file$l, 248, 10, 4721);
    			add_location(br, file$l, 249, 162, 4912);
    			add_location(a, file$l, 251, 12, 4930);
    			attr_dev(p, "class", "svelte-bnvc6y");
    			add_location(p, file$l, 249, 10, 4760);
    			attr_dev(actions, "class", "svelte-bnvc6y");
    			add_location(actions, file$l, 252, 10, 5248);
    			attr_dev(post, "class", "svelte-bnvc6y");
    			add_location(post, file$l, 247, 8, 4704);
    			attr_dev(tweet, "class", "svelte-bnvc6y");
    			add_location(tweet, file$l, 243, 6, 4582);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, tweet, anchor);
    			append_dev(tweet, figure);
    			append_dev(figure, img);
    			append_dev(tweet, t0);
    			append_dev(tweet, post);
    			append_dev(post, h4);
    			append_dev(post, t2);
    			append_dev(post, p);
    			append_dev(p, t3);
    			append_dev(p, br);
    			append_dev(p, t4);
    			append_dev(p, a);
    			append_dev(p, t6);
    			append_dev(post, t7);
    			append_dev(post, actions);
    			mount_component(icon0, actions, null);
    			append_dev(actions, t8);
    			mount_component(icon1, actions, null);
    			append_dev(actions, t9);
    			mount_component(icon2, actions, null);
    			append_dev(actions, t10);
    			mount_component(icon3, actions, null);
    			append_dev(tweet, t11);
    			mount_component(icon4, tweet, null);
    			append_dev(tweet, t12);
    			current = true;
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon0.$$.fragment, local);
    			transition_in(icon1.$$.fragment, local);
    			transition_in(icon2.$$.fragment, local);
    			transition_in(icon3.$$.fragment, local);
    			transition_in(icon4.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon0.$$.fragment, local);
    			transition_out(icon1.$$.fragment, local);
    			transition_out(icon2.$$.fragment, local);
    			transition_out(icon3.$$.fragment, local);
    			transition_out(icon4.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(tweet);
    			destroy_component(icon0);
    			destroy_component(icon1);
    			destroy_component(icon2);
    			destroy_component(icon3);
    			destroy_component(icon4);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block$3.name,
    		type: "each",
    		source: "(243:4) {#each tweets as tweet}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$m(ctx) {
    	let phonewarn;
    	let t0;
    	let content;
    	let left;
    	let icon0;
    	let t1;
    	let h40;
    	let t3;
    	let h41;
    	let icon1;
    	let t4;
    	let t5;
    	let middle;
    	let header;
    	let nav;
    	let back;
    	let icon2;
    	let t6;
    	let name;
    	let h42;
    	let t8;
    	let span;
    	let t10;
    	let images;
    	let figure0;
    	let img0;
    	let img0_src_value;
    	let t11;
    	let figure1;
    	let img1;
    	let img1_src_value;
    	let t12;
    	let button0;
    	let t14;
    	let profile;
    	let h30;
    	let t16;
    	let p0;
    	let t18;
    	let p1;
    	let t20;
    	let p2;
    	let icon3;
    	let t21;
    	let icon4;
    	let t22;
    	let a0;
    	let t24;
    	let icon5;
    	let t25;
    	let t26;
    	let p3;
    	let b0;
    	let t28;
    	let b1;
    	let t30;
    	let t31;
    	let hr;
    	let t32;
    	let tweets_1;
    	let t33;
    	let right;
    	let input;
    	let t34;
    	let section;
    	let aside0;
    	let h31;
    	let t36;
    	let p4;
    	let t38;
    	let button1;
    	let t40;
    	let aside1;
    	let recent_media;
    	let figure2;
    	let img2;
    	let img2_src_value;
    	let t41;
    	let figure3;
    	let img3;
    	let img3_src_value;
    	let t42;
    	let figure4;
    	let img4;
    	let img4_src_value;
    	let t43;
    	let figure5;
    	let img5;
    	let img5_src_value;
    	let t44;
    	let figure6;
    	let img6;
    	let img6_src_value;
    	let t45;
    	let figure7;
    	let img7;
    	let img7_src_value;
    	let t46;
    	let aside2;
    	let h32;
    	let t48;
    	let ul0;
    	let li0;
    	let t50;
    	let li1;
    	let t52;
    	let li2;
    	let t54;
    	let a1;
    	let t56;
    	let aside3;
    	let h33;
    	let t58;
    	let ul1;
    	let li3;
    	let t60;
    	let li4;
    	let t62;
    	let li5;
    	let t64;
    	let li6;
    	let t66;
    	let li7;
    	let t68;
    	let codeview;
    	let current;
    	phonewarn = new PhoneWarn({ $$inline: true });

    	icon0 = new Icon({
    			props: { name: "twitter", color: "var(--color)" },
    			$$inline: true
    		});

    	icon1 = new Icon({
    			props: {
    				name: "settings",
    				color: "var(--color-text)"
    			},
    			$$inline: true
    		});

    	icon2 = new Icon({
    			props: { name: "arrow-left" },
    			$$inline: true
    		});

    	icon3 = new Icon({
    			props: {
    				name: "map",
    				size: "24",
    				color: "var(--color-bg-secondary)"
    			},
    			$$inline: true
    		});

    	icon4 = new Icon({
    			props: {
    				name: "link",
    				size: "24",
    				color: "var(--color-bg-secondary)"
    			},
    			$$inline: true
    		});

    	icon5 = new Icon({
    			props: {
    				name: "calendar",
    				size: "24",
    				color: "var(--color-bg-secondary)"
    			},
    			$$inline: true
    		});

    	let each_value = /*tweets*/ ctx[0];
    	validate_each_argument(each_value);
    	let each_blocks = [];

    	for (let i = 0; i < each_value.length; i += 1) {
    		each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
    	}

    	codeview = new CodeView({
    			props: {
    				source: "/code/Twitter",
    				notes: "/code/Twitter.notes.html"
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			create_component(phonewarn.$$.fragment);
    			t0 = space();
    			content = element("content");
    			left = element("left");
    			create_component(icon0.$$.fragment);
    			t1 = space();
    			h40 = element("h4");
    			h40.textContent = "# Explore";
    			t3 = space();
    			h41 = element("h4");
    			create_component(icon1.$$.fragment);
    			t4 = text(" Settings");
    			t5 = space();
    			middle = element("middle");
    			header = element("header");
    			nav = element("nav");
    			back = element("back");
    			create_component(icon2.$$.fragment);
    			t6 = space();
    			name = element("name");
    			h42 = element("h4");
    			h42.textContent = "Zed A. Shaw, Writer";
    			t8 = space();
    			span = element("span");
    			span.textContent = "7,754 Tweets";
    			t10 = space();
    			images = element("images");
    			figure0 = element("figure");
    			img0 = element("img");
    			t11 = space();
    			figure1 = element("figure");
    			img1 = element("img");
    			t12 = space();
    			button0 = element("button");
    			button0.textContent = "Follow";
    			t14 = space();
    			profile = element("profile");
    			h30 = element("h3");
    			h30.textContent = "Zed A. Shaw, Writer";
    			t16 = space();
    			p0 = element("p");
    			p0.textContent = "@lzsthw";
    			t18 = space();
    			p1 = element("p");
    			p1.textContent = "The author of The Hard Way Series published by Addison/Wesley including Learn Python The Hard Way and many more. Follow me here for coding tips and book news.";
    			t20 = space();
    			p2 = element("p");
    			create_component(icon3.$$.fragment);
    			t21 = text(" Some Place, KY ");
    			create_component(icon4.$$.fragment);
    			t22 = space();
    			a0 = element("a");
    			a0.textContent = "learnjsthehardway.org";
    			t24 = space();
    			create_component(icon5.$$.fragment);
    			t25 = text(" Joined Jan, 1999.");
    			t26 = space();
    			p3 = element("p");
    			b0 = element("b");
    			b0.textContent = "167";
    			t28 = text(" Following ");
    			b1 = element("b");
    			b1.textContent = "10.4k";
    			t30 = text(" Followers");
    			t31 = space();
    			hr = element("hr");
    			t32 = space();
    			tweets_1 = element("tweets");

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			t33 = space();
    			right = element("right");
    			input = element("input");
    			t34 = space();
    			section = element("section");
    			aside0 = element("aside");
    			h31 = element("h3");
    			h31.textContent = "New to Twitter?";
    			t36 = space();
    			p4 = element("p");
    			p4.textContent = "Sign up now to get your own personalized hate stream!";
    			t38 = space();
    			button1 = element("button");
    			button1.textContent = "Sign Up";
    			t40 = space();
    			aside1 = element("aside");
    			recent_media = element("recent-media");
    			figure2 = element("figure");
    			img2 = element("img");
    			t41 = space();
    			figure3 = element("figure");
    			img3 = element("img");
    			t42 = space();
    			figure4 = element("figure");
    			img4 = element("img");
    			t43 = space();
    			figure5 = element("figure");
    			img5 = element("img");
    			t44 = space();
    			figure6 = element("figure");
    			img6 = element("img");
    			t45 = space();
    			figure7 = element("figure");
    			img7 = element("img");
    			t46 = space();
    			aside2 = element("aside");
    			h32 = element("h3");
    			h32.textContent = "You Might Like";
    			t48 = space();
    			ul0 = element("ul");
    			li0 = element("li");
    			li0.textContent = "Card Person";
    			t50 = space();
    			li1 = element("li");
    			li1.textContent = "Card Person";
    			t52 = space();
    			li2 = element("li");
    			li2.textContent = "Card Person";
    			t54 = space();
    			a1 = element("a");
    			a1.textContent = "Show More";
    			t56 = space();
    			aside3 = element("aside");
    			h33 = element("h3");
    			h33.textContent = "What's Happening";
    			t58 = space();
    			ul1 = element("ul");
    			li3 = element("li");
    			li3.textContent = "News news news.";
    			t60 = space();
    			li4 = element("li");
    			li4.textContent = "News news news.";
    			t62 = space();
    			li5 = element("li");
    			li5.textContent = "News news news.";
    			t64 = space();
    			li6 = element("li");
    			li6.textContent = "News news news.";
    			t66 = space();
    			li7 = element("li");
    			li7.textContent = "News news news.";
    			t68 = space();
    			create_component(codeview.$$.fragment);
    			add_location(h40, file$l, 205, 2, 3381);
    			add_location(h41, file$l, 206, 2, 3402);
    			attr_dev(left, "class", "svelte-bnvc6y");
    			add_location(left, file$l, 203, 2, 3325);
    			attr_dev(back, "class", "svelte-bnvc6y");
    			add_location(back, file$l, 212, 8, 3526);
    			attr_dev(h42, "class", "svelte-bnvc6y");
    			add_location(h42, file$l, 214, 10, 3591);
    			attr_dev(span, "class", "svelte-bnvc6y");
    			add_location(span, file$l, 215, 10, 3630);
    			add_location(name, file$l, 213, 8, 3574);
    			attr_dev(nav, "class", "svelte-bnvc6y");
    			add_location(nav, file$l, 211, 6, 3512);
    			attr_dev(header, "class", "svelte-bnvc6y");
    			add_location(header, file$l, 210, 4, 3497);
    			if (img0.src !== (img0_src_value = "/header_pic.jpg")) attr_dev(img0, "src", img0_src_value);
    			attr_dev(img0, "class", "svelte-bnvc6y");
    			add_location(img0, file$l, 222, 8, 3752);
    			attr_dev(figure0, "id", "background");
    			attr_dev(figure0, "class", "svelte-bnvc6y");
    			add_location(figure0, file$l, 221, 6, 3719);
    			if (img1.src !== (img1_src_value = "/profile_pic.jpg")) attr_dev(img1, "src", img1_src_value);
    			attr_dev(img1, "class", "svelte-bnvc6y");
    			add_location(img1, file$l, 226, 8, 3832);
    			attr_dev(button0, "id", "follow");
    			attr_dev(button0, "class", "svelte-bnvc6y");
    			add_location(button0, file$l, 227, 8, 3869);
    			attr_dev(figure1, "id", "avatar");
    			attr_dev(figure1, "class", "svelte-bnvc6y");
    			add_location(figure1, file$l, 225, 6, 3803);
    			attr_dev(images, "class", "svelte-bnvc6y");
    			add_location(images, file$l, 220, 4, 3704);
    			add_location(h30, file$l, 232, 6, 3956);
    			add_location(p0, file$l, 233, 6, 3991);
    			add_location(p1, file$l, 234, 6, 4012);
    			add_location(a0, file$l, 235, 153, 4331);
    			add_location(p2, file$l, 235, 6, 4184);
    			add_location(b0, file$l, 236, 9, 4461);
    			add_location(b1, file$l, 236, 30, 4482);
    			add_location(p3, file$l, 236, 6, 4458);
    			attr_dev(profile, "class", "svelte-bnvc6y");
    			add_location(profile, file$l, 231, 4, 3940);
    			attr_dev(hr, "class", "svelte-bnvc6y");
    			add_location(hr, file$l, 239, 4, 4529);
    			add_location(tweets_1, file$l, 241, 4, 4539);
    			attr_dev(middle, "class", "svelte-bnvc6y");
    			add_location(middle, file$l, 209, 2, 3484);
    			attr_dev(input, "placeholder", "Search Twitter");
    			add_location(input, file$l, 266, 4, 5725);
    			add_location(h31, file$l, 270, 6, 5814);
    			attr_dev(p4, "class", "svelte-bnvc6y");
    			add_location(p4, file$l, 271, 6, 5845);
    			attr_dev(button1, "id", "signup");
    			attr_dev(button1, "class", "svelte-bnvc6y");
    			add_location(button1, file$l, 272, 6, 5912);
    			attr_dev(aside0, "id", "newperson");
    			attr_dev(aside0, "class", "svelte-bnvc6y");
    			add_location(aside0, file$l, 269, 6, 5785);
    			attr_dev(img2, "alt", "Stock photo");
    			if (img2.src !== (img2_src_value = holder(82, 82))) attr_dev(img2, "src", img2_src_value);
    			add_location(img2, file$l, 278, 12, 6033);
    			add_location(figure2, file$l, 277, 10, 6012);
    			attr_dev(img3, "alt", "Stock photo");
    			if (img3.src !== (img3_src_value = holder(82, 82))) attr_dev(img3, "src", img3_src_value);
    			add_location(img3, file$l, 281, 12, 6134);
    			add_location(figure3, file$l, 280, 10, 6113);
    			attr_dev(img4, "alt", "Stock photo");
    			if (img4.src !== (img4_src_value = holder(82, 82))) attr_dev(img4, "src", img4_src_value);
    			add_location(img4, file$l, 284, 12, 6234);
    			add_location(figure4, file$l, 283, 10, 6213);
    			attr_dev(img5, "alt", "Stock photo");
    			if (img5.src !== (img5_src_value = holder(82, 82))) attr_dev(img5, "src", img5_src_value);
    			add_location(img5, file$l, 287, 12, 6334);
    			add_location(figure5, file$l, 286, 10, 6313);
    			attr_dev(img6, "alt", "Stock photo");
    			if (img6.src !== (img6_src_value = holder(82, 82))) attr_dev(img6, "src", img6_src_value);
    			add_location(img6, file$l, 290, 12, 6434);
    			add_location(figure6, file$l, 289, 10, 6413);
    			attr_dev(img7, "alt", "Stock photo");
    			if (img7.src !== (img7_src_value = holder(82, 82))) attr_dev(img7, "src", img7_src_value);
    			add_location(img7, file$l, 293, 12, 6534);
    			add_location(figure7, file$l, 292, 10, 6513);
    			set_custom_element_data(recent_media, "class", "svelte-bnvc6y");
    			add_location(recent_media, file$l, 276, 8, 5987);
    			add_location(aside1, file$l, 275, 6, 5971);
    			attr_dev(h32, "class", "svelte-bnvc6y");
    			add_location(h32, file$l, 299, 8, 6679);
    			attr_dev(li0, "class", "svelte-bnvc6y");
    			add_location(li0, file$l, 301, 10, 6726);
    			attr_dev(li1, "class", "svelte-bnvc6y");
    			add_location(li1, file$l, 302, 10, 6757);
    			attr_dev(li2, "class", "svelte-bnvc6y");
    			add_location(li2, file$l, 303, 10, 6788);
    			attr_dev(ul0, "class", "svelte-bnvc6y");
    			add_location(ul0, file$l, 300, 8, 6711);
    			attr_dev(a1, "class", "svelte-bnvc6y");
    			add_location(a1, file$l, 305, 8, 6831);
    			attr_dev(aside2, "id", "trending");
    			attr_dev(aside2, "class", "svelte-bnvc6y");
    			add_location(aside2, file$l, 298, 6, 6649);
    			attr_dev(h33, "class", "svelte-bnvc6y");
    			add_location(h33, file$l, 309, 8, 6900);
    			attr_dev(li3, "class", "svelte-bnvc6y");
    			add_location(li3, file$l, 311, 10, 6949);
    			attr_dev(li4, "class", "svelte-bnvc6y");
    			add_location(li4, file$l, 312, 10, 6984);
    			attr_dev(li5, "class", "svelte-bnvc6y");
    			add_location(li5, file$l, 313, 10, 7019);
    			attr_dev(li6, "class", "svelte-bnvc6y");
    			add_location(li6, file$l, 314, 10, 7054);
    			attr_dev(li7, "class", "svelte-bnvc6y");
    			add_location(li7, file$l, 315, 10, 7089);
    			attr_dev(ul1, "class", "svelte-bnvc6y");
    			add_location(ul1, file$l, 310, 8, 6934);
    			attr_dev(aside3, "id", "trending");
    			attr_dev(aside3, "class", "svelte-bnvc6y");
    			add_location(aside3, file$l, 308, 6, 6870);
    			add_location(section, file$l, 268, 4, 5769);
    			attr_dev(right, "class", "svelte-bnvc6y");
    			add_location(right, file$l, 265, 2, 5713);
    			attr_dev(content, "class", "svelte-bnvc6y");
    			add_location(content, file$l, 202, 0, 3313);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			mount_component(phonewarn, target, anchor);
    			insert_dev(target, t0, anchor);
    			insert_dev(target, content, anchor);
    			append_dev(content, left);
    			mount_component(icon0, left, null);
    			append_dev(left, t1);
    			append_dev(left, h40);
    			append_dev(left, t3);
    			append_dev(left, h41);
    			mount_component(icon1, h41, null);
    			append_dev(h41, t4);
    			append_dev(content, t5);
    			append_dev(content, middle);
    			append_dev(middle, header);
    			append_dev(header, nav);
    			append_dev(nav, back);
    			mount_component(icon2, back, null);
    			append_dev(nav, t6);
    			append_dev(nav, name);
    			append_dev(name, h42);
    			append_dev(name, t8);
    			append_dev(name, span);
    			append_dev(middle, t10);
    			append_dev(middle, images);
    			append_dev(images, figure0);
    			append_dev(figure0, img0);
    			append_dev(images, t11);
    			append_dev(images, figure1);
    			append_dev(figure1, img1);
    			append_dev(figure1, t12);
    			append_dev(figure1, button0);
    			append_dev(middle, t14);
    			append_dev(middle, profile);
    			append_dev(profile, h30);
    			append_dev(profile, t16);
    			append_dev(profile, p0);
    			append_dev(profile, t18);
    			append_dev(profile, p1);
    			append_dev(profile, t20);
    			append_dev(profile, p2);
    			mount_component(icon3, p2, null);
    			append_dev(p2, t21);
    			mount_component(icon4, p2, null);
    			append_dev(p2, t22);
    			append_dev(p2, a0);
    			append_dev(p2, t24);
    			mount_component(icon5, p2, null);
    			append_dev(p2, t25);
    			append_dev(profile, t26);
    			append_dev(profile, p3);
    			append_dev(p3, b0);
    			append_dev(p3, t28);
    			append_dev(p3, b1);
    			append_dev(p3, t30);
    			append_dev(middle, t31);
    			append_dev(middle, hr);
    			append_dev(middle, t32);
    			append_dev(middle, tweets_1);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].m(tweets_1, null);
    			}

    			append_dev(content, t33);
    			append_dev(content, right);
    			append_dev(right, input);
    			append_dev(right, t34);
    			append_dev(right, section);
    			append_dev(section, aside0);
    			append_dev(aside0, h31);
    			append_dev(aside0, t36);
    			append_dev(aside0, p4);
    			append_dev(aside0, t38);
    			append_dev(aside0, button1);
    			append_dev(section, t40);
    			append_dev(section, aside1);
    			append_dev(aside1, recent_media);
    			append_dev(recent_media, figure2);
    			append_dev(figure2, img2);
    			append_dev(recent_media, t41);
    			append_dev(recent_media, figure3);
    			append_dev(figure3, img3);
    			append_dev(recent_media, t42);
    			append_dev(recent_media, figure4);
    			append_dev(figure4, img4);
    			append_dev(recent_media, t43);
    			append_dev(recent_media, figure5);
    			append_dev(figure5, img5);
    			append_dev(recent_media, t44);
    			append_dev(recent_media, figure6);
    			append_dev(figure6, img6);
    			append_dev(recent_media, t45);
    			append_dev(recent_media, figure7);
    			append_dev(figure7, img7);
    			append_dev(section, t46);
    			append_dev(section, aside2);
    			append_dev(aside2, h32);
    			append_dev(aside2, t48);
    			append_dev(aside2, ul0);
    			append_dev(ul0, li0);
    			append_dev(ul0, t50);
    			append_dev(ul0, li1);
    			append_dev(ul0, t52);
    			append_dev(ul0, li2);
    			append_dev(aside2, t54);
    			append_dev(aside2, a1);
    			append_dev(section, t56);
    			append_dev(section, aside3);
    			append_dev(aside3, h33);
    			append_dev(aside3, t58);
    			append_dev(aside3, ul1);
    			append_dev(ul1, li3);
    			append_dev(ul1, t60);
    			append_dev(ul1, li4);
    			append_dev(ul1, t62);
    			append_dev(ul1, li5);
    			append_dev(ul1, t64);
    			append_dev(ul1, li6);
    			append_dev(ul1, t66);
    			append_dev(ul1, li7);
    			insert_dev(target, t68, anchor);
    			mount_component(codeview, target, anchor);
    			current = true;
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(phonewarn.$$.fragment, local);
    			transition_in(icon0.$$.fragment, local);
    			transition_in(icon1.$$.fragment, local);
    			transition_in(icon2.$$.fragment, local);
    			transition_in(icon3.$$.fragment, local);
    			transition_in(icon4.$$.fragment, local);
    			transition_in(icon5.$$.fragment, local);

    			for (let i = 0; i < each_value.length; i += 1) {
    				transition_in(each_blocks[i]);
    			}

    			transition_in(codeview.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(phonewarn.$$.fragment, local);
    			transition_out(icon0.$$.fragment, local);
    			transition_out(icon1.$$.fragment, local);
    			transition_out(icon2.$$.fragment, local);
    			transition_out(icon3.$$.fragment, local);
    			transition_out(icon4.$$.fragment, local);
    			transition_out(icon5.$$.fragment, local);
    			each_blocks = each_blocks.filter(Boolean);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				transition_out(each_blocks[i]);
    			}

    			transition_out(codeview.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(phonewarn, detaching);
    			if (detaching) detach_dev(t0);
    			if (detaching) detach_dev(content);
    			destroy_component(icon0);
    			destroy_component(icon1);
    			destroy_component(icon2);
    			destroy_component(icon3);
    			destroy_component(icon4);
    			destroy_component(icon5);
    			destroy_each(each_blocks, detaching);
    			if (detaching) detach_dev(t68);
    			destroy_component(codeview, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$m.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$m($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Twitter", slots, []);
    	let tweets = [1, 2, 3, 4, 5];
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Twitter> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({
    		link,
    		Icon,
    		onMount,
    		tweets,
    		CodeView,
    		PhoneWarn,
    		holder
    	});

    	$$self.$inject_state = $$props => {
    		if ("tweets" in $$props) $$invalidate(0, tweets = $$props.tweets);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [tweets];
    }

    class Twitter$1 extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$m, create_fragment$m, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Twitter",
    			options,
    			id: create_fragment$m.name
    		});
    	}
    }

    /* src/demos/Youtube.svelte generated by Svelte v3.30.0 */
    const file$m = "src/demos/Youtube.svelte";

    function get_each_context$4(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[2] = list[i];
    	return child_ctx;
    }

    function get_each_context_1$1(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[2] = list[i];
    	return child_ctx;
    }

    function get_each_context_2(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[2] = list[i];
    	return child_ctx;
    }

    // (232:8) {#each cards as card}
    function create_each_block_2(ctx) {
    	let card;
    	let img;
    	let img_src_value;
    	let t0;
    	let info;
    	let h4;
    	let t2;
    	let p;
    	let t4;
    	let nav;
    	let icon0;
    	let t5;
    	let icon1;
    	let t6;
    	let t7;
    	let reply;
    	let icon2;
    	let t8;
    	let t9;
    	let current;

    	icon0 = new Icon({
    			props: {
    				name: "thumbs-up",
    				color: "var(--sub-color)"
    			},
    			$$inline: true
    		});

    	icon1 = new Icon({
    			props: {
    				name: "thumbs-down",
    				color: "var(--sub-color)"
    			},
    			$$inline: true
    		});

    	icon2 = new Icon({
    			props: { name: "chevron-down" },
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			card = element("card");
    			img = element("img");
    			t0 = space();
    			info = element("info");
    			h4 = element("h4");
    			h4.textContent = "Guys";
    			t2 = space();
    			p = element("p");
    			p.textContent = "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque";
    			t4 = space();
    			nav = element("nav");
    			create_component(icon0.$$.fragment);
    			t5 = text(" 233\n              ");
    			create_component(icon1.$$.fragment);
    			t6 = text(" 1");
    			t7 = space();
    			reply = element("reply");
    			create_component(icon2.$$.fragment);
    			t8 = text(" View replies");
    			t9 = space();
    			if (img.src !== (img_src_value = holder(64, 64))) attr_dev(img, "src", img_src_value);
    			attr_dev(img, "class", "svelte-87j0be");
    			add_location(img, file$m, 233, 10, 5268);
    			attr_dev(h4, "class", "svelte-87j0be");
    			add_location(h4, file$m, 235, 12, 5327);
    			attr_dev(p, "class", "svelte-87j0be");
    			add_location(p, file$m, 236, 12, 5353);
    			attr_dev(nav, "class", "svelte-87j0be");
    			add_location(nav, file$m, 237, 12, 5495);
    			attr_dev(reply, "class", "svelte-87j0be");
    			add_location(reply, file$m, 241, 12, 5670);
    			attr_dev(info, "class", "svelte-87j0be");
    			add_location(info, file$m, 234, 10, 5308);
    			attr_dev(card, "class", "svelte-87j0be");
    			add_location(card, file$m, 232, 8, 5251);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, card, anchor);
    			append_dev(card, img);
    			append_dev(card, t0);
    			append_dev(card, info);
    			append_dev(info, h4);
    			append_dev(info, t2);
    			append_dev(info, p);
    			append_dev(info, t4);
    			append_dev(info, nav);
    			mount_component(icon0, nav, null);
    			append_dev(nav, t5);
    			mount_component(icon1, nav, null);
    			append_dev(nav, t6);
    			append_dev(info, t7);
    			append_dev(info, reply);
    			mount_component(icon2, reply, null);
    			append_dev(reply, t8);
    			append_dev(card, t9);
    			current = true;
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon0.$$.fragment, local);
    			transition_in(icon1.$$.fragment, local);
    			transition_in(icon2.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon0.$$.fragment, local);
    			transition_out(icon1.$$.fragment, local);
    			transition_out(icon2.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(card);
    			destroy_component(icon0);
    			destroy_component(icon1);
    			destroy_component(icon2);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block_2.name,
    		type: "each",
    		source: "(232:8) {#each cards as card}",
    		ctx
    	});

    	return block;
    }

    // (250:6) {#each cards as card}
    function create_each_block_1$1(ctx) {
    	let card;
    	let img;
    	let img_src_value;
    	let t0;
    	let info;
    	let h4;
    	let t2;
    	let author;
    	let t4;
    	let views;
    	let t6;
    	let date;

    	const block = {
    		c: function create() {
    			card = element("card");
    			img = element("img");
    			t0 = space();
    			info = element("info");
    			h4 = element("h4");
    			h4.textContent = "Video Thumb Title";
    			t2 = space();
    			author = element("author");
    			author.textContent = "Zed";
    			t4 = space();
    			views = element("views");
    			views.textContent = "1.1M views";
    			t6 = space();
    			date = element("date");
    			date.textContent = "2 years ago";
    			if (img.src !== (img_src_value = holder(120, 80))) attr_dev(img, "src", img_src_value);
    			attr_dev(img, "class", "svelte-87j0be");
    			add_location(img, file$m, 251, 8, 5883);
    			attr_dev(h4, "class", "svelte-87j0be");
    			add_location(h4, file$m, 253, 10, 5939);
    			add_location(author, file$m, 254, 10, 5976);
    			add_location(views, file$m, 255, 10, 6007);
    			add_location(date, file$m, 256, 10, 6043);
    			attr_dev(info, "class", "svelte-87j0be");
    			add_location(info, file$m, 252, 8, 5922);
    			attr_dev(card, "class", "small svelte-87j0be");
    			add_location(card, file$m, 250, 6, 5854);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, card, anchor);
    			append_dev(card, img);
    			append_dev(card, t0);
    			append_dev(card, info);
    			append_dev(info, h4);
    			append_dev(info, t2);
    			append_dev(info, author);
    			append_dev(info, t4);
    			append_dev(info, views);
    			append_dev(info, t6);
    			append_dev(info, date);
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(card);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block_1$1.name,
    		type: "each",
    		source: "(250:6) {#each cards as card}",
    		ctx
    	});

    	return block;
    }

    // (268:6) {#each cards as card}
    function create_each_block$4(ctx) {
    	let card;
    	let img;
    	let img_src_value;
    	let t0;
    	let info;
    	let h4;
    	let t2;
    	let author;
    	let t4;
    	let views;
    	let t6;
    	let date;
    	let t8;

    	const block = {
    		c: function create() {
    			card = element("card");
    			img = element("img");
    			t0 = space();
    			info = element("info");
    			h4 = element("h4");
    			h4.textContent = "Video Thumb Title";
    			t2 = space();
    			author = element("author");
    			author.textContent = "Zed";
    			t4 = space();
    			views = element("views");
    			views.textContent = "1.1M views";
    			t6 = space();
    			date = element("date");
    			date.textContent = "2 years ago";
    			t8 = space();
    			if (img.src !== (img_src_value = holder(120, 80))) attr_dev(img, "src", img_src_value);
    			attr_dev(img, "class", "svelte-87j0be");
    			add_location(img, file$m, 269, 8, 6291);
    			attr_dev(h4, "class", "svelte-87j0be");
    			add_location(h4, file$m, 271, 10, 6347);
    			add_location(author, file$m, 272, 10, 6384);
    			add_location(views, file$m, 273, 10, 6415);
    			add_location(date, file$m, 274, 10, 6451);
    			attr_dev(info, "class", "svelte-87j0be");
    			add_location(info, file$m, 270, 8, 6330);
    			attr_dev(card, "class", "svelte-87j0be");
    			add_location(card, file$m, 268, 6, 6276);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, card, anchor);
    			append_dev(card, img);
    			append_dev(card, t0);
    			append_dev(card, info);
    			append_dev(info, h4);
    			append_dev(info, t2);
    			append_dev(info, author);
    			append_dev(info, t4);
    			append_dev(info, views);
    			append_dev(info, t6);
    			append_dev(info, date);
    			append_dev(card, t8);
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(card);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block$4.name,
    		type: "each",
    		source: "(268:6) {#each cards as card}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$n(ctx) {
    	let content1;
    	let header;
    	let nav0;
    	let nav_left;
    	let a0;
    	let icon0;
    	let t0;
    	let icon1;
    	let t1;
    	let logo;
    	let t3;
    	let input;
    	let t4;
    	let ul;
    	let li0;
    	let icon2;
    	let t5;
    	let li1;
    	let icon3;
    	let t6;
    	let li2;
    	let icon4;
    	let t7;
    	let li3;
    	let button0;
    	let icon5;
    	let t8;
    	let t9;
    	let main;
    	let left;
    	let figure0;
    	let a1;
    	let img0;
    	let img0_src_value;
    	let link_action;
    	let t10;
    	let figcaption;
    	let a2;
    	let t12;
    	let a3;
    	let t14;
    	let p;
    	let t16;
    	let video_actions;
    	let likes;
    	let t18;
    	let video_buttons;
    	let icon6;
    	let t19;
    	let icon7;
    	let t20;
    	let icon8;
    	let t21;
    	let icon9;
    	let t22;
    	let icon10;
    	let t23;
    	let hr0;
    	let t24;
    	let promotion;
    	let nav1;
    	let card;
    	let img1;
    	let img1_src_value;
    	let t25;
    	let info;
    	let h4;
    	let t27;
    	let subs;
    	let t29;
    	let button1;
    	let t31;
    	let content0;
    	let t33;
    	let hr1;
    	let t34;
    	let comments;
    	let nav2;
    	let span;
    	let t36;
    	let sort;
    	let icon11;
    	let t37;
    	let t38;
    	let t39;
    	let right;
    	let t40;
    	let figure1;
    	let a4;
    	let img2;
    	let img2_src_value;
    	let link_action_1;
    	let t41;
    	let t42;
    	let codeview;
    	let current;
    	let mounted;
    	let dispose;
    	icon0 = new Icon({ props: { name: "menu" }, $$inline: true });

    	icon1 = new Icon({
    			props: { name: "youtube" },
    			$$inline: true
    		});

    	icon2 = new Icon({
    			props: { name: "camera", color: "#000" },
    			$$inline: true
    		});

    	icon3 = new Icon({
    			props: { name: "more-vertical", color: "#000" },
    			$$inline: true
    		});

    	icon4 = new Icon({
    			props: { name: "grid", color: "#000" },
    			$$inline: true
    		});

    	icon5 = new Icon({ props: { name: "user" }, $$inline: true });

    	icon6 = new Icon({
    			props: { name: "thumbs-up", color: "#999" },
    			$$inline: true
    		});

    	icon7 = new Icon({
    			props: { name: "thumbs-down", color: "#999" },
    			$$inline: true
    		});

    	icon8 = new Icon({
    			props: { name: "corner-up-right", color: "#999" },
    			$$inline: true
    		});

    	icon9 = new Icon({
    			props: { name: "menu", color: "#999" },
    			$$inline: true
    		});

    	icon10 = new Icon({
    			props: { name: "vertical-more" },
    			$$inline: true
    		});

    	icon11 = new Icon({
    			props: {
    				name: "bar-chart",
    				color: "var(--sub-color)"
    			},
    			$$inline: true
    		});

    	let each_value_2 = /*cards*/ ctx[0];
    	validate_each_argument(each_value_2);
    	let each_blocks_2 = [];

    	for (let i = 0; i < each_value_2.length; i += 1) {
    		each_blocks_2[i] = create_each_block_2(get_each_context_2(ctx, each_value_2, i));
    	}

    	const out = i => transition_out(each_blocks_2[i], 1, 1, () => {
    		each_blocks_2[i] = null;
    	});

    	let each_value_1 = /*cards*/ ctx[0];
    	validate_each_argument(each_value_1);
    	let each_blocks_1 = [];

    	for (let i = 0; i < each_value_1.length; i += 1) {
    		each_blocks_1[i] = create_each_block_1$1(get_each_context_1$1(ctx, each_value_1, i));
    	}

    	let each_value = /*cards*/ ctx[0];
    	validate_each_argument(each_value);
    	let each_blocks = [];

    	for (let i = 0; i < each_value.length; i += 1) {
    		each_blocks[i] = create_each_block$4(get_each_context$4(ctx, each_value, i));
    	}

    	codeview = new CodeView({
    			props: {
    				source: "/code/Youtube",
    				notes: "/code/Youtube.notes.html"
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content1 = element("content");
    			header = element("header");
    			nav0 = element("nav");
    			nav_left = element("nav-left");
    			a0 = element("a");
    			create_component(icon0.$$.fragment);
    			t0 = space();
    			create_component(icon1.$$.fragment);
    			t1 = space();
    			logo = element("logo");
    			logo.textContent = "Youtube";
    			t3 = space();
    			input = element("input");
    			t4 = space();
    			ul = element("ul");
    			li0 = element("li");
    			create_component(icon2.$$.fragment);
    			t5 = space();
    			li1 = element("li");
    			create_component(icon3.$$.fragment);
    			t6 = space();
    			li2 = element("li");
    			create_component(icon4.$$.fragment);
    			t7 = space();
    			li3 = element("li");
    			button0 = element("button");
    			create_component(icon5.$$.fragment);
    			t8 = text(" Sign In");
    			t9 = space();
    			main = element("main");
    			left = element("left");
    			figure0 = element("figure");
    			a1 = element("a");
    			img0 = element("img");
    			t10 = space();
    			figcaption = element("figcaption");
    			a2 = element("a");
    			a2.textContent = "#tag";
    			t12 = space();
    			a3 = element("a");
    			a3.textContent = "#anothertag";
    			t14 = space();
    			p = element("p");
    			p.textContent = "Title And Stuff";
    			t16 = space();
    			video_actions = element("video-actions");
    			likes = element("likes");
    			likes.textContent = "Stats Stats";
    			t18 = space();
    			video_buttons = element("video-buttons");
    			create_component(icon6.$$.fragment);
    			t19 = text(" 1.1K\n              ");
    			create_component(icon7.$$.fragment);
    			t20 = text(" 22\n              ");
    			create_component(icon8.$$.fragment);
    			t21 = text(" SHARE\n              ");
    			create_component(icon9.$$.fragment);
    			t22 = text(" SAVE\n              ");
    			create_component(icon10.$$.fragment);
    			t23 = space();
    			hr0 = element("hr");
    			t24 = space();
    			promotion = element("promotion");
    			nav1 = element("nav");
    			card = element("card");
    			img1 = element("img");
    			t25 = space();
    			info = element("info");
    			h4 = element("h4");
    			h4.textContent = "Zed A. Shaw";
    			t27 = space();
    			subs = element("subs");
    			subs.textContent = "1 subscriber";
    			t29 = space();
    			button1 = element("button");
    			button1.textContent = "SUBSCRIBE";
    			t31 = space();
    			content0 = element("content");
    			content0.textContent = "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur";
    			t33 = space();
    			hr1 = element("hr");
    			t34 = space();
    			comments = element("comments");
    			nav2 = element("nav");
    			span = element("span");
    			span.textContent = "125 Comments";
    			t36 = space();
    			sort = element("sort");
    			create_component(icon11.$$.fragment);
    			t37 = text(" SORT BY");
    			t38 = space();

    			for (let i = 0; i < each_blocks_2.length; i += 1) {
    				each_blocks_2[i].c();
    			}

    			t39 = space();
    			right = element("right");

    			for (let i = 0; i < each_blocks_1.length; i += 1) {
    				each_blocks_1[i].c();
    			}

    			t40 = space();
    			figure1 = element("figure");
    			a4 = element("a");
    			img2 = element("img");
    			t41 = space();

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			t42 = space();
    			create_component(codeview.$$.fragment);
    			attr_dev(logo, "class", "svelte-87j0be");
    			add_location(logo, file$m, 176, 56, 2768);
    			add_location(a0, file$m, 176, 8, 2720);
    			add_location(nav_left, file$m, 175, 6, 2701);
    			attr_dev(input, "id", "search");
    			attr_dev(input, "placeholder", "Search");
    			attr_dev(input, "name", "search");
    			attr_dev(input, "class", "svelte-87j0be");
    			add_location(input, file$m, 178, 6, 2817);
    			add_location(li0, file$m, 180, 8, 2891);
    			add_location(li1, file$m, 181, 8, 2944);
    			add_location(li2, file$m, 182, 8, 3004);
    			attr_dev(button0, "class", "svelte-87j0be");
    			add_location(button0, file$m, 183, 12, 3059);
    			add_location(li3, file$m, 183, 8, 3055);
    			add_location(ul, file$m, 179, 6, 2878);
    			attr_dev(nav0, "class", "svelte-87j0be");
    			add_location(nav0, file$m, 174, 4, 2689);
    			attr_dev(header, "class", "svelte-87j0be");
    			add_location(header, file$m, 173, 2, 2676);
    			if (img0.src !== (img0_src_value = holder(800, 450))) attr_dev(img0, "src", img0_src_value);
    			add_location(img0, file$m, 191, 10, 3232);
    			attr_dev(a1, "href", "/demos/google");
    			add_location(a1, file$m, 190, 8, 3188);
    			attr_dev(a2, "class", "svelte-87j0be");
    			add_location(a2, file$m, 194, 10, 3308);
    			attr_dev(a3, "class", "svelte-87j0be");
    			add_location(a3, file$m, 194, 22, 3320);
    			attr_dev(p, "class", "svelte-87j0be");
    			add_location(p, file$m, 195, 10, 3349);
    			add_location(likes, file$m, 197, 12, 3410);
    			add_location(video_buttons, file$m, 198, 12, 3449);
    			set_custom_element_data(video_actions, "class", "svelte-87j0be");
    			add_location(video_actions, file$m, 196, 10, 3382);
    			attr_dev(figcaption, "class", "svelte-87j0be");
    			add_location(figcaption, file$m, 193, 8, 3285);
    			add_location(figure0, file$m, 189, 6, 3171);
    			attr_dev(hr0, "class", "svelte-87j0be");
    			add_location(hr0, file$m, 208, 6, 3843);
    			if (img1.src !== (img1_src_value = holder(64, 64))) attr_dev(img1, "src", img1_src_value);
    			attr_dev(img1, "class", "svelte-87j0be");
    			add_location(img1, file$m, 212, 12, 3909);
    			attr_dev(h4, "class", "svelte-87j0be");
    			add_location(h4, file$m, 214, 12, 3970);
    			add_location(subs, file$m, 215, 12, 4003);
    			attr_dev(info, "class", "svelte-87j0be");
    			add_location(info, file$m, 213, 12, 3951);
    			attr_dev(card, "class", "svelte-87j0be");
    			add_location(card, file$m, 211, 10, 3890);
    			attr_dev(button1, "id", "subscribe");
    			attr_dev(button1, "class", "svelte-87j0be");
    			add_location(button1, file$m, 217, 10, 4057);
    			attr_dev(nav1, "class", "svelte-87j0be");
    			add_location(nav1, file$m, 210, 8, 3874);
    			attr_dev(content0, "class", "svelte-87j0be");
    			add_location(content0, file$m, 220, 8, 4123);
    			attr_dev(promotion, "class", "svelte-87j0be");
    			add_location(promotion, file$m, 209, 6, 3854);
    			attr_dev(hr1, "class", "svelte-87j0be");
    			add_location(hr1, file$m, 224, 6, 5052);
    			add_location(span, file$m, 228, 10, 5099);
    			attr_dev(sort, "class", "svelte-87j0be");
    			add_location(sort, file$m, 228, 36, 5125);
    			attr_dev(nav2, "class", "svelte-87j0be");
    			add_location(nav2, file$m, 227, 8, 5083);
    			attr_dev(comments, "class", "svelte-87j0be");
    			add_location(comments, file$m, 226, 6, 5064);
    			attr_dev(left, "class", "svelte-87j0be");
    			add_location(left, file$m, 188, 4, 3158);
    			if (img2.src !== (img2_src_value = holder(300, 150))) attr_dev(img2, "src", img2_src_value);
    			add_location(img2, file$m, 263, 10, 6180);
    			attr_dev(a4, "href", "/demos/google");
    			add_location(a4, file$m, 262, 8, 6136);
    			add_location(figure1, file$m, 261, 6, 6119);
    			attr_dev(right, "class", "svelte-87j0be");
    			add_location(right, file$m, 248, 4, 5812);
    			attr_dev(main, "class", "svelte-87j0be");
    			add_location(main, file$m, 187, 2, 3147);
    			attr_dev(content1, "class", "svelte-87j0be");
    			add_location(content1, file$m, 172, 0, 2664);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content1, anchor);
    			append_dev(content1, header);
    			append_dev(header, nav0);
    			append_dev(nav0, nav_left);
    			append_dev(nav_left, a0);
    			mount_component(icon0, a0, null);
    			append_dev(a0, t0);
    			mount_component(icon1, a0, null);
    			append_dev(a0, t1);
    			append_dev(a0, logo);
    			append_dev(nav0, t3);
    			append_dev(nav0, input);
    			append_dev(nav0, t4);
    			append_dev(nav0, ul);
    			append_dev(ul, li0);
    			mount_component(icon2, li0, null);
    			append_dev(ul, t5);
    			append_dev(ul, li1);
    			mount_component(icon3, li1, null);
    			append_dev(ul, t6);
    			append_dev(ul, li2);
    			mount_component(icon4, li2, null);
    			append_dev(ul, t7);
    			append_dev(ul, li3);
    			append_dev(li3, button0);
    			mount_component(icon5, button0, null);
    			append_dev(button0, t8);
    			append_dev(content1, t9);
    			append_dev(content1, main);
    			append_dev(main, left);
    			append_dev(left, figure0);
    			append_dev(figure0, a1);
    			append_dev(a1, img0);
    			append_dev(figure0, t10);
    			append_dev(figure0, figcaption);
    			append_dev(figcaption, a2);
    			append_dev(figcaption, t12);
    			append_dev(figcaption, a3);
    			append_dev(figcaption, t14);
    			append_dev(figcaption, p);
    			append_dev(figcaption, t16);
    			append_dev(figcaption, video_actions);
    			append_dev(video_actions, likes);
    			append_dev(video_actions, t18);
    			append_dev(video_actions, video_buttons);
    			mount_component(icon6, video_buttons, null);
    			append_dev(video_buttons, t19);
    			mount_component(icon7, video_buttons, null);
    			append_dev(video_buttons, t20);
    			mount_component(icon8, video_buttons, null);
    			append_dev(video_buttons, t21);
    			mount_component(icon9, video_buttons, null);
    			append_dev(video_buttons, t22);
    			mount_component(icon10, video_buttons, null);
    			append_dev(left, t23);
    			append_dev(left, hr0);
    			append_dev(left, t24);
    			append_dev(left, promotion);
    			append_dev(promotion, nav1);
    			append_dev(nav1, card);
    			append_dev(card, img1);
    			append_dev(card, t25);
    			append_dev(card, info);
    			append_dev(info, h4);
    			append_dev(info, t27);
    			append_dev(info, subs);
    			append_dev(nav1, t29);
    			append_dev(nav1, button1);
    			append_dev(promotion, t31);
    			append_dev(promotion, content0);
    			append_dev(left, t33);
    			append_dev(left, hr1);
    			append_dev(left, t34);
    			append_dev(left, comments);
    			append_dev(comments, nav2);
    			append_dev(nav2, span);
    			append_dev(nav2, t36);
    			append_dev(nav2, sort);
    			mount_component(icon11, sort, null);
    			append_dev(sort, t37);
    			append_dev(comments, t38);

    			for (let i = 0; i < each_blocks_2.length; i += 1) {
    				each_blocks_2[i].m(comments, null);
    			}

    			append_dev(main, t39);
    			append_dev(main, right);

    			for (let i = 0; i < each_blocks_1.length; i += 1) {
    				each_blocks_1[i].m(right, null);
    			}

    			append_dev(right, t40);
    			append_dev(right, figure1);
    			append_dev(figure1, a4);
    			append_dev(a4, img2);
    			append_dev(right, t41);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].m(right, null);
    			}

    			insert_dev(target, t42, anchor);
    			mount_component(codeview, target, anchor);
    			current = true;

    			if (!mounted) {
    				dispose = [
    					action_destroyer(link_action = link.call(null, a1)),
    					action_destroyer(link_action_1 = link.call(null, a4))
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*holder*/ 0) {
    				each_value_2 = /*cards*/ ctx[0];
    				validate_each_argument(each_value_2);
    				let i;

    				for (i = 0; i < each_value_2.length; i += 1) {
    					const child_ctx = get_each_context_2(ctx, each_value_2, i);

    					if (each_blocks_2[i]) {
    						each_blocks_2[i].p(child_ctx, dirty);
    						transition_in(each_blocks_2[i], 1);
    					} else {
    						each_blocks_2[i] = create_each_block_2(child_ctx);
    						each_blocks_2[i].c();
    						transition_in(each_blocks_2[i], 1);
    						each_blocks_2[i].m(comments, null);
    					}
    				}

    				group_outros();

    				for (i = each_value_2.length; i < each_blocks_2.length; i += 1) {
    					out(i);
    				}

    				check_outros();
    			}

    			if (dirty & /*holder*/ 0) {
    				each_value_1 = /*cards*/ ctx[0];
    				validate_each_argument(each_value_1);
    				let i;

    				for (i = 0; i < each_value_1.length; i += 1) {
    					const child_ctx = get_each_context_1$1(ctx, each_value_1, i);

    					if (each_blocks_1[i]) {
    						each_blocks_1[i].p(child_ctx, dirty);
    					} else {
    						each_blocks_1[i] = create_each_block_1$1(child_ctx);
    						each_blocks_1[i].c();
    						each_blocks_1[i].m(right, t40);
    					}
    				}

    				for (; i < each_blocks_1.length; i += 1) {
    					each_blocks_1[i].d(1);
    				}

    				each_blocks_1.length = each_value_1.length;
    			}

    			if (dirty & /*holder*/ 0) {
    				each_value = /*cards*/ ctx[0];
    				validate_each_argument(each_value);
    				let i;

    				for (i = 0; i < each_value.length; i += 1) {
    					const child_ctx = get_each_context$4(ctx, each_value, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    					} else {
    						each_blocks[i] = create_each_block$4(child_ctx);
    						each_blocks[i].c();
    						each_blocks[i].m(right, null);
    					}
    				}

    				for (; i < each_blocks.length; i += 1) {
    					each_blocks[i].d(1);
    				}

    				each_blocks.length = each_value.length;
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon0.$$.fragment, local);
    			transition_in(icon1.$$.fragment, local);
    			transition_in(icon2.$$.fragment, local);
    			transition_in(icon3.$$.fragment, local);
    			transition_in(icon4.$$.fragment, local);
    			transition_in(icon5.$$.fragment, local);
    			transition_in(icon6.$$.fragment, local);
    			transition_in(icon7.$$.fragment, local);
    			transition_in(icon8.$$.fragment, local);
    			transition_in(icon9.$$.fragment, local);
    			transition_in(icon10.$$.fragment, local);
    			transition_in(icon11.$$.fragment, local);

    			for (let i = 0; i < each_value_2.length; i += 1) {
    				transition_in(each_blocks_2[i]);
    			}

    			transition_in(codeview.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon0.$$.fragment, local);
    			transition_out(icon1.$$.fragment, local);
    			transition_out(icon2.$$.fragment, local);
    			transition_out(icon3.$$.fragment, local);
    			transition_out(icon4.$$.fragment, local);
    			transition_out(icon5.$$.fragment, local);
    			transition_out(icon6.$$.fragment, local);
    			transition_out(icon7.$$.fragment, local);
    			transition_out(icon8.$$.fragment, local);
    			transition_out(icon9.$$.fragment, local);
    			transition_out(icon10.$$.fragment, local);
    			transition_out(icon11.$$.fragment, local);
    			each_blocks_2 = each_blocks_2.filter(Boolean);

    			for (let i = 0; i < each_blocks_2.length; i += 1) {
    				transition_out(each_blocks_2[i]);
    			}

    			transition_out(codeview.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content1);
    			destroy_component(icon0);
    			destroy_component(icon1);
    			destroy_component(icon2);
    			destroy_component(icon3);
    			destroy_component(icon4);
    			destroy_component(icon5);
    			destroy_component(icon6);
    			destroy_component(icon7);
    			destroy_component(icon8);
    			destroy_component(icon9);
    			destroy_component(icon10);
    			destroy_component(icon11);
    			destroy_each(each_blocks_2, detaching);
    			destroy_each(each_blocks_1, detaching);
    			destroy_each(each_blocks, detaching);
    			if (detaching) detach_dev(t42);
    			destroy_component(codeview, detaching);
    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$n.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$n($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Youtube", slots, []);
    	let cards = [1, 2, 3, 4];
    	let { thumbnail = false } = $$props;
    	const writable_props = ["thumbnail"];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Youtube> was created with unknown prop '${key}'`);
    	});

    	$$self.$$set = $$props => {
    		if ("thumbnail" in $$props) $$invalidate(1, thumbnail = $$props.thumbnail);
    	};

    	$$self.$capture_state = () => ({
    		link,
    		Icon,
    		CodeView,
    		cards,
    		thumbnail,
    		holder
    	});

    	$$self.$inject_state = $$props => {
    		if ("cards" in $$props) $$invalidate(0, cards = $$props.cards);
    		if ("thumbnail" in $$props) $$invalidate(1, thumbnail = $$props.thumbnail);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [cards, thumbnail];
    }

    class Youtube$1 extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$n, create_fragment$n, safe_not_equal, { thumbnail: 1 });

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Youtube",
    			options,
    			id: create_fragment$n.name
    		});
    	}

    	get thumbnail() {
    		throw new Error("<Youtube>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set thumbnail(value) {
    		throw new Error("<Youtube>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}
    }

    /* src/demos/Instagram.svelte generated by Svelte v3.30.0 */
    const file$n = "src/demos/Instagram.svelte";

    function get_each_context$5(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[2] = list[i];
    	return child_ctx;
    }

    function get_each_context_1$2(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[5] = list[i];
    	return child_ctx;
    }

    // (116:2) {#each pins as pin}
    function create_each_block_1$2(ctx) {
    	let figure;
    	let img;
    	let img_src_value;
    	let t;

    	const block = {
    		c: function create() {
    			figure = element("figure");
    			img = element("img");
    			t = space();
    			attr_dev(img, "alt", "Stock photo");
    			if (img.src !== (img_src_value = holder(82, 82))) attr_dev(img, "src", img_src_value);
    			add_location(img, file$n, 117, 6, 2055);
    			add_location(figure, file$n, 116, 4, 2040);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, figure, anchor);
    			append_dev(figure, img);
    			append_dev(figure, t);
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(figure);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block_1$2.name,
    		type: "each",
    		source: "(116:2) {#each pins as pin}",
    		ctx
    	});

    	return block;
    }

    // (135:2) {#each posts as post}
    function create_each_block$5(ctx) {
    	let figure;
    	let img;
    	let img_src_value;
    	let t;

    	const block = {
    		c: function create() {
    			figure = element("figure");
    			img = element("img");
    			t = space();
    			attr_dev(img, "alt", "Stock photo");
    			if (img.src !== (img_src_value = holder(300, 300))) attr_dev(img, "src", img_src_value);
    			add_location(img, file$n, 136, 6, 2533);
    			add_location(figure, file$n, 135, 4, 2518);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, figure, anchor);
    			append_dev(figure, img);
    			append_dev(figure, t);
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(figure);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block$5.name,
    		type: "each",
    		source: "(135:2) {#each posts as post}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$o(ctx) {
    	let content;
    	let header;
    	let nav0;
    	let b0;
    	let icon0;
    	let t0;
    	let t1;
    	let input;
    	let t2;
    	let ul0;
    	let li0;
    	let button0;
    	let t4;
    	let li1;
    	let a0;
    	let t6;
    	let profile;
    	let figure;
    	let img;
    	let img_src_value;
    	let t7;
    	let info;
    	let p0;
    	let b1;
    	let t9;
    	let button1;
    	let t11;
    	let p1;
    	let b2;
    	let t13;
    	let b3;
    	let t15;
    	let b4;
    	let t17;
    	let p2;
    	let b5;
    	let t19;
    	let p3;
    	let t20;
    	let br;
    	let t21;
    	let a1;
    	let t23;
    	let pins_1;
    	let t24;
    	let tabs;
    	let nav1;
    	let ul1;
    	let li2;
    	let icon1;
    	let t25;
    	let t26;
    	let li3;
    	let icon2;
    	let t27;
    	let t28;
    	let li4;
    	let icon3;
    	let t29;
    	let t30;
    	let li5;
    	let icon4;
    	let t31;
    	let t32;
    	let posts_1;
    	let t33;
    	let codeview;
    	let current;

    	icon0 = new Icon({
    			props: {
    				name: "instagram",
    				color: "var(--color-text)"
    			},
    			$$inline: true
    		});

    	let each_value_1 = /*pins*/ ctx[1];
    	validate_each_argument(each_value_1);
    	let each_blocks_1 = [];

    	for (let i = 0; i < each_value_1.length; i += 1) {
    		each_blocks_1[i] = create_each_block_1$2(get_each_context_1$2(ctx, each_value_1, i));
    	}

    	icon1 = new Icon({
    			props: { name: "grid", color: "var(--color-text)" },
    			$$inline: true
    		});

    	icon2 = new Icon({
    			props: {
    				name: "movie",
    				color: "var(--color-text)"
    			},
    			$$inline: true
    		});

    	icon3 = new Icon({
    			props: { name: "tv", color: "var(--color-text)" },
    			$$inline: true
    		});

    	icon4 = new Icon({
    			props: { name: "user", color: "var(--color-text)" },
    			$$inline: true
    		});

    	let each_value = /*posts*/ ctx[0];
    	validate_each_argument(each_value);
    	let each_blocks = [];

    	for (let i = 0; i < each_value.length; i += 1) {
    		each_blocks[i] = create_each_block$5(get_each_context$5(ctx, each_value, i));
    	}

    	codeview = new CodeView({
    			props: {
    				source: "/code/Instagram",
    				notes: "/code/Instagram.notes.html"
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			header = element("header");
    			nav0 = element("nav");
    			b0 = element("b");
    			create_component(icon0.$$.fragment);
    			t0 = text(" Instagram");
    			t1 = space();
    			input = element("input");
    			t2 = space();
    			ul0 = element("ul");
    			li0 = element("li");
    			button0 = element("button");
    			button0.textContent = "Log In";
    			t4 = space();
    			li1 = element("li");
    			a0 = element("a");
    			a0.textContent = "Sign Up";
    			t6 = space();
    			profile = element("profile");
    			figure = element("figure");
    			img = element("img");
    			t7 = space();
    			info = element("info");
    			p0 = element("p");
    			b1 = element("b");
    			b1.textContent = "zedshaw";
    			t9 = space();
    			button1 = element("button");
    			button1.textContent = "follow";
    			t11 = space();
    			p1 = element("p");
    			b2 = element("b");
    			b2.textContent = "280";
    			t13 = text(" posts ");
    			b3 = element("b");
    			b3.textContent = "4,695 followers";
    			t15 = space();
    			b4 = element("b");
    			b4.textContent = "1,778 following";
    			t17 = space();
    			p2 = element("p");
    			b5 = element("b");
    			b5.textContent = "Zed A. Shaw";
    			t19 = space();
    			p3 = element("p");
    			t20 = text("Painter in oil, watercolor, and pastel. I’m doing live streams of little paintings on Twitch:");
    			br = element("br");
    			t21 = space();
    			a1 = element("a");
    			a1.textContent = "www.twitch.tv/zedashaw";
    			t23 = space();
    			pins_1 = element("pins");

    			for (let i = 0; i < each_blocks_1.length; i += 1) {
    				each_blocks_1[i].c();
    			}

    			t24 = space();
    			tabs = element("tabs");
    			nav1 = element("nav");
    			ul1 = element("ul");
    			li2 = element("li");
    			create_component(icon1.$$.fragment);
    			t25 = text(" POSTS");
    			t26 = space();
    			li3 = element("li");
    			create_component(icon2.$$.fragment);
    			t27 = text(" REELS");
    			t28 = space();
    			li4 = element("li");
    			create_component(icon3.$$.fragment);
    			t29 = text(" TV");
    			t30 = space();
    			li5 = element("li");
    			create_component(icon4.$$.fragment);
    			t31 = text(" TAGGED");
    			t32 = space();
    			posts_1 = element("posts");

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			t33 = space();
    			create_component(codeview.$$.fragment);
    			add_location(b0, file$n, 84, 6, 1269);
    			attr_dev(input, "placeholder", "Search");
    			add_location(input, file$n, 85, 6, 1344);
    			attr_dev(button0, "class", "svelte-cr3eg9");
    			add_location(button0, file$n, 87, 12, 1396);
    			add_location(li0, file$n, 87, 8, 1392);
    			attr_dev(a0, "class", "svelte-cr3eg9");
    			add_location(a0, file$n, 88, 12, 1437);
    			add_location(li1, file$n, 88, 8, 1433);
    			add_location(ul0, file$n, 86, 6, 1379);
    			attr_dev(nav0, "class", "svelte-cr3eg9");
    			add_location(nav0, file$n, 83, 4, 1257);
    			attr_dev(header, "class", "svelte-cr3eg9");
    			add_location(header, file$n, 82, 2, 1244);
    			attr_dev(img, "alt", "Zed's Face");
    			if (img.src !== (img_src_value = holder(256, 256))) attr_dev(img, "src", img_src_value);
    			add_location(img, file$n, 95, 6, 1524);
    			attr_dev(figure, "class", "svelte-cr3eg9");
    			add_location(figure, file$n, 94, 4, 1509);
    			add_location(b1, file$n, 100, 8, 1617);
    			attr_dev(button1, "class", "svelte-cr3eg9");
    			add_location(button1, file$n, 100, 23, 1632);
    			attr_dev(p0, "class", "svelte-cr3eg9");
    			add_location(p0, file$n, 99, 6, 1605);
    			add_location(b2, file$n, 104, 8, 1686);
    			add_location(b3, file$n, 104, 25, 1703);
    			add_location(b4, file$n, 104, 48, 1726);
    			attr_dev(p1, "class", "svelte-cr3eg9");
    			add_location(p1, file$n, 103, 6, 1674);
    			add_location(b5, file$n, 107, 9, 1770);
    			attr_dev(p2, "class", "svelte-cr3eg9");
    			add_location(p2, file$n, 107, 6, 1767);
    			add_location(br, file$n, 108, 102, 1895);
    			attr_dev(a1, "href", "www.twitch.tv/zedashaw");
    			attr_dev(a1, "class", "svelte-cr3eg9");
    			add_location(a1, file$n, 109, 8, 1908);
    			attr_dev(p3, "class", "svelte-cr3eg9");
    			add_location(p3, file$n, 108, 6, 1799);
    			attr_dev(info, "class", "svelte-cr3eg9");
    			add_location(info, file$n, 98, 4, 1592);
    			attr_dev(profile, "class", "svelte-cr3eg9");
    			add_location(profile, file$n, 93, 2, 1495);
    			attr_dev(pins_1, "class", "svelte-cr3eg9");
    			add_location(pins_1, file$n, 114, 2, 2007);
    			add_location(li2, file$n, 125, 8, 2177);
    			add_location(li3, file$n, 126, 8, 2247);
    			add_location(li4, file$n, 127, 8, 2318);
    			add_location(li5, file$n, 128, 8, 2383);
    			add_location(ul1, file$n, 124, 6, 2164);
    			attr_dev(nav1, "class", "svelte-cr3eg9");
    			add_location(nav1, file$n, 123, 4, 2152);
    			attr_dev(tabs, "class", "svelte-cr3eg9");
    			add_location(tabs, file$n, 122, 2, 2141);
    			attr_dev(posts_1, "class", "svelte-cr3eg9");
    			add_location(posts_1, file$n, 133, 2, 2482);
    			attr_dev(content, "class", "svelte-cr3eg9");
    			add_location(content, file$n, 81, 0, 1232);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, header);
    			append_dev(header, nav0);
    			append_dev(nav0, b0);
    			mount_component(icon0, b0, null);
    			append_dev(b0, t0);
    			append_dev(nav0, t1);
    			append_dev(nav0, input);
    			append_dev(nav0, t2);
    			append_dev(nav0, ul0);
    			append_dev(ul0, li0);
    			append_dev(li0, button0);
    			append_dev(ul0, t4);
    			append_dev(ul0, li1);
    			append_dev(li1, a0);
    			append_dev(content, t6);
    			append_dev(content, profile);
    			append_dev(profile, figure);
    			append_dev(figure, img);
    			append_dev(profile, t7);
    			append_dev(profile, info);
    			append_dev(info, p0);
    			append_dev(p0, b1);
    			append_dev(p0, t9);
    			append_dev(p0, button1);
    			append_dev(info, t11);
    			append_dev(info, p1);
    			append_dev(p1, b2);
    			append_dev(p1, t13);
    			append_dev(p1, b3);
    			append_dev(p1, t15);
    			append_dev(p1, b4);
    			append_dev(info, t17);
    			append_dev(info, p2);
    			append_dev(p2, b5);
    			append_dev(info, t19);
    			append_dev(info, p3);
    			append_dev(p3, t20);
    			append_dev(p3, br);
    			append_dev(p3, t21);
    			append_dev(p3, a1);
    			append_dev(content, t23);
    			append_dev(content, pins_1);

    			for (let i = 0; i < each_blocks_1.length; i += 1) {
    				each_blocks_1[i].m(pins_1, null);
    			}

    			append_dev(content, t24);
    			append_dev(content, tabs);
    			append_dev(tabs, nav1);
    			append_dev(nav1, ul1);
    			append_dev(ul1, li2);
    			mount_component(icon1, li2, null);
    			append_dev(li2, t25);
    			append_dev(ul1, t26);
    			append_dev(ul1, li3);
    			mount_component(icon2, li3, null);
    			append_dev(li3, t27);
    			append_dev(ul1, t28);
    			append_dev(ul1, li4);
    			mount_component(icon3, li4, null);
    			append_dev(li4, t29);
    			append_dev(ul1, t30);
    			append_dev(ul1, li5);
    			mount_component(icon4, li5, null);
    			append_dev(li5, t31);
    			append_dev(content, t32);
    			append_dev(content, posts_1);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].m(posts_1, null);
    			}

    			insert_dev(target, t33, anchor);
    			mount_component(codeview, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*holder*/ 0) {
    				each_value_1 = /*pins*/ ctx[1];
    				validate_each_argument(each_value_1);
    				let i;

    				for (i = 0; i < each_value_1.length; i += 1) {
    					const child_ctx = get_each_context_1$2(ctx, each_value_1, i);

    					if (each_blocks_1[i]) {
    						each_blocks_1[i].p(child_ctx, dirty);
    					} else {
    						each_blocks_1[i] = create_each_block_1$2(child_ctx);
    						each_blocks_1[i].c();
    						each_blocks_1[i].m(pins_1, null);
    					}
    				}

    				for (; i < each_blocks_1.length; i += 1) {
    					each_blocks_1[i].d(1);
    				}

    				each_blocks_1.length = each_value_1.length;
    			}

    			if (dirty & /*holder*/ 0) {
    				each_value = /*posts*/ ctx[0];
    				validate_each_argument(each_value);
    				let i;

    				for (i = 0; i < each_value.length; i += 1) {
    					const child_ctx = get_each_context$5(ctx, each_value, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    					} else {
    						each_blocks[i] = create_each_block$5(child_ctx);
    						each_blocks[i].c();
    						each_blocks[i].m(posts_1, null);
    					}
    				}

    				for (; i < each_blocks.length; i += 1) {
    					each_blocks[i].d(1);
    				}

    				each_blocks.length = each_value.length;
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon0.$$.fragment, local);
    			transition_in(icon1.$$.fragment, local);
    			transition_in(icon2.$$.fragment, local);
    			transition_in(icon3.$$.fragment, local);
    			transition_in(icon4.$$.fragment, local);
    			transition_in(codeview.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon0.$$.fragment, local);
    			transition_out(icon1.$$.fragment, local);
    			transition_out(icon2.$$.fragment, local);
    			transition_out(icon3.$$.fragment, local);
    			transition_out(icon4.$$.fragment, local);
    			transition_out(codeview.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_component(icon0);
    			destroy_each(each_blocks_1, detaching);
    			destroy_component(icon1);
    			destroy_component(icon2);
    			destroy_component(icon3);
    			destroy_component(icon4);
    			destroy_each(each_blocks, detaching);
    			if (detaching) detach_dev(t33);
    			destroy_component(codeview, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$o.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$o($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Instagram", slots, []);
    	let posts = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    	let pins = [1, 2, 3, 4];
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Instagram> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({
    		link,
    		Icon,
    		CodeView,
    		posts,
    		pins,
    		holder
    	});

    	$$self.$inject_state = $$props => {
    		if ("posts" in $$props) $$invalidate(0, posts = $$props.posts);
    		if ("pins" in $$props) $$invalidate(1, pins = $$props.pins);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [posts, pins];
    }

    class Instagram$1 extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$o, create_fragment$o, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Instagram",
    			options,
    			id: create_fragment$o.name
    		});
    	}
    }

    /* src/demos/Pinterest.svelte generated by Svelte v3.30.0 */
    const file$o = "src/demos/Pinterest.svelte";

    function get_each_context$6(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[6] = list[i];
    	return child_ctx;
    }

    function get_each_context_1$3(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[9] = list[i];
    	return child_ctx;
    }

    // (153:2) {#if !thumbnail}
    function create_if_block$2(ctx) {
    	let profile;
    	let info;
    	let h1;
    	let t1;
    	let p0;
    	let t3;
    	let p1;
    	let b0;
    	let t5;
    	let b1;
    	let t7;
    	let t8;
    	let p2;
    	let t10;
    	let figure;
    	let img;
    	let img_src_value;
    	let t11;
    	let pins;
    	let each_value = /*lanes*/ ctx[1];
    	validate_each_argument(each_value);
    	let each_blocks = [];

    	for (let i = 0; i < each_value.length; i += 1) {
    		each_blocks[i] = create_each_block$6(get_each_context$6(ctx, each_value, i));
    	}

    	const block = {
    		c: function create() {
    			profile = element("profile");
    			info = element("info");
    			h1 = element("h1");
    			h1.textContent = "Vincent van Gogh";
    			t1 = space();
    			p0 = element("p");
    			p0.textContent = "Collection by A Person";
    			t3 = space();
    			p1 = element("p");
    			b0 = element("b");
    			b0.textContent = "420";
    			t5 = text(" Pins • ");
    			b1 = element("b");
    			b1.textContent = "3.59k";
    			t7 = text(" Followers");
    			t8 = space();
    			p2 = element("p");
    			p2.textContent = "\"I dream my painting and I paint my dream.\" ~ Vincent van Gogh";
    			t10 = space();
    			figure = element("figure");
    			img = element("img");
    			t11 = space();
    			pins = element("pins");

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			attr_dev(h1, "class", "svelte-8rhjm4");
    			add_location(h1, file$o, 155, 8, 2472);
    			attr_dev(p0, "class", "svelte-8rhjm4");
    			add_location(p0, file$o, 156, 8, 2506);
    			attr_dev(b0, "class", "svelte-8rhjm4");
    			add_location(b0, file$o, 157, 11, 2547);
    			attr_dev(b1, "class", "svelte-8rhjm4");
    			add_location(b1, file$o, 157, 29, 2565);
    			attr_dev(p1, "class", "svelte-8rhjm4");
    			add_location(p1, file$o, 157, 8, 2544);
    			attr_dev(p2, "class", "svelte-8rhjm4");
    			add_location(p2, file$o, 158, 8, 2600);
    			attr_dev(info, "class", "svelte-8rhjm4");
    			add_location(info, file$o, 154, 6, 2457);
    			attr_dev(img, "alt", "Zed's Face");
    			if (img.src !== (img_src_value = holder(128, 128))) attr_dev(img, "src", img_src_value);
    			attr_dev(img, "class", "svelte-8rhjm4");
    			add_location(img, file$o, 162, 8, 2704);
    			attr_dev(figure, "class", "svelte-8rhjm4");
    			add_location(figure, file$o, 161, 6, 2687);
    			attr_dev(profile, "class", "svelte-8rhjm4");
    			add_location(profile, file$o, 153, 4, 2441);
    			attr_dev(pins, "class", "svelte-8rhjm4");
    			add_location(pins, file$o, 166, 4, 2789);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, profile, anchor);
    			append_dev(profile, info);
    			append_dev(info, h1);
    			append_dev(info, t1);
    			append_dev(info, p0);
    			append_dev(info, t3);
    			append_dev(info, p1);
    			append_dev(p1, b0);
    			append_dev(p1, t5);
    			append_dev(p1, b1);
    			append_dev(p1, t7);
    			append_dev(info, t8);
    			append_dev(info, p2);
    			append_dev(profile, t10);
    			append_dev(profile, figure);
    			append_dev(figure, img);
    			insert_dev(target, t11, anchor);
    			insert_dev(target, pins, anchor);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].m(pins, null);
    			}
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*random_sample, pin_sizes, holder*/ 12) {
    				each_value = /*lanes*/ ctx[1];
    				validate_each_argument(each_value);
    				let i;

    				for (i = 0; i < each_value.length; i += 1) {
    					const child_ctx = get_each_context$6(ctx, each_value, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    					} else {
    						each_blocks[i] = create_each_block$6(child_ctx);
    						each_blocks[i].c();
    						each_blocks[i].m(pins, null);
    					}
    				}

    				for (; i < each_blocks.length; i += 1) {
    					each_blocks[i].d(1);
    				}

    				each_blocks.length = each_value.length;
    			}
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(profile);
    			if (detaching) detach_dev(t11);
    			if (detaching) detach_dev(pins);
    			destroy_each(each_blocks, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block$2.name,
    		type: "if",
    		source: "(153:2) {#if !thumbnail}",
    		ctx
    	});

    	return block;
    }

    // (170:8) {#each random_sample(pin_sizes, 10) as height}
    function create_each_block_1$3(ctx) {
    	let figure;
    	let img;
    	let img_src_value;
    	let t0;
    	let figcaption;
    	let t1;
    	let t2_value = /*height*/ ctx[9] + "";
    	let t2;
    	let t3;

    	const block = {
    		c: function create() {
    			figure = element("figure");
    			img = element("img");
    			t0 = space();
    			figcaption = element("figcaption");
    			t1 = text("Something about Van Gogh ");
    			t2 = text(t2_value);
    			t3 = text(" high.");
    			attr_dev(img, "alt", "Van Gogh Art");
    			if (img.src !== (img_src_value = holder(240, /*height*/ ctx[9]))) attr_dev(img, "src", img_src_value);
    			attr_dev(img, "class", "svelte-8rhjm4");
    			add_location(img, file$o, 171, 12, 2921);
    			attr_dev(figcaption, "class", "svelte-8rhjm4");
    			add_location(figcaption, file$o, 172, 12, 2986);
    			attr_dev(figure, "class", "svelte-8rhjm4");
    			add_location(figure, file$o, 170, 10, 2900);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, figure, anchor);
    			append_dev(figure, img);
    			append_dev(figure, t0);
    			append_dev(figure, figcaption);
    			append_dev(figcaption, t1);
    			append_dev(figcaption, t2);
    			append_dev(figcaption, t3);
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(figure);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block_1$3.name,
    		type: "each",
    		source: "(170:8) {#each random_sample(pin_sizes, 10) as height}",
    		ctx
    	});

    	return block;
    }

    // (168:4) {#each lanes as lane}
    function create_each_block$6(ctx) {
    	let lane;
    	let t;
    	let each_value_1 = /*random_sample*/ ctx[3](/*pin_sizes*/ ctx[2], 10);
    	validate_each_argument(each_value_1);
    	let each_blocks = [];

    	for (let i = 0; i < each_value_1.length; i += 1) {
    		each_blocks[i] = create_each_block_1$3(get_each_context_1$3(ctx, each_value_1, i));
    	}

    	const block = {
    		c: function create() {
    			lane = element("lane");

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			t = space();
    			attr_dev(lane, "class", "svelte-8rhjm4");
    			add_location(lane, file$o, 168, 6, 2828);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, lane, anchor);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].m(lane, null);
    			}

    			append_dev(lane, t);
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*random_sample, pin_sizes, holder*/ 12) {
    				each_value_1 = /*random_sample*/ ctx[3](/*pin_sizes*/ ctx[2], 10);
    				validate_each_argument(each_value_1);
    				let i;

    				for (i = 0; i < each_value_1.length; i += 1) {
    					const child_ctx = get_each_context_1$3(ctx, each_value_1, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    					} else {
    						each_blocks[i] = create_each_block_1$3(child_ctx);
    						each_blocks[i].c();
    						each_blocks[i].m(lane, t);
    					}
    				}

    				for (; i < each_blocks.length; i += 1) {
    					each_blocks[i].d(1);
    				}

    				each_blocks.length = each_value_1.length;
    			}
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(lane);
    			destroy_each(each_blocks, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block$6.name,
    		type: "each",
    		source: "(168:4) {#each lanes as lane}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$p(ctx) {
    	let content;
    	let header;
    	let nav;
    	let left;
    	let logo;
    	let icon;
    	let t0;
    	let t1;
    	let a0;
    	let t3;
    	let a1;
    	let t5;
    	let input;
    	let t6;
    	let ul;
    	let li0;
    	let button0;
    	let t8;
    	let li1;
    	let button1;
    	let t10;
    	let t11;
    	let codeview;
    	let current;

    	icon = new Icon({
    			props: { name: "pinterest", color: "var(--color)" },
    			$$inline: true
    		});

    	let if_block = !/*thumbnail*/ ctx[0] && create_if_block$2(ctx);

    	codeview = new CodeView({
    			props: {
    				source: "/code/Pinterest",
    				notes: "/code/Pinterest.notes.html"
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			header = element("header");
    			nav = element("nav");
    			left = element("left");
    			logo = element("logo");
    			create_component(icon.$$.fragment);
    			t0 = text(" Pinterest");
    			t1 = space();
    			a0 = element("a");
    			a0.textContent = "Today";
    			t3 = space();
    			a1 = element("a");
    			a1.textContent = "Explore";
    			t5 = space();
    			input = element("input");
    			t6 = space();
    			ul = element("ul");
    			li0 = element("li");
    			button0 = element("button");
    			button0.textContent = "Log In";
    			t8 = space();
    			li1 = element("li");
    			button1 = element("button");
    			button1.textContent = "Sign Up";
    			t10 = space();
    			if (if_block) if_block.c();
    			t11 = space();
    			create_component(codeview.$$.fragment);
    			attr_dev(logo, "class", "svelte-8rhjm4");
    			add_location(logo, file$o, 138, 8, 2111);
    			attr_dev(a0, "class", "svelte-8rhjm4");
    			add_location(a0, file$o, 139, 8, 2189);
    			attr_dev(a1, "class", "svelte-8rhjm4");
    			add_location(a1, file$o, 140, 8, 2210);
    			attr_dev(left, "class", "svelte-8rhjm4");
    			add_location(left, file$o, 137, 6, 2096);
    			attr_dev(input, "placeholder", "Search");
    			attr_dev(input, "class", "svelte-8rhjm4");
    			add_location(input, file$o, 143, 6, 2246);
    			attr_dev(button0, "class", "svelte-8rhjm4");
    			add_location(button0, file$o, 146, 12, 2299);
    			attr_dev(li0, "class", "svelte-8rhjm4");
    			add_location(li0, file$o, 146, 8, 2295);
    			attr_dev(button1, "id", "signup");
    			attr_dev(button1, "class", "svelte-8rhjm4");
    			add_location(button1, file$o, 147, 12, 2340);
    			attr_dev(li1, "class", "svelte-8rhjm4");
    			add_location(li1, file$o, 147, 8, 2336);
    			attr_dev(ul, "class", "svelte-8rhjm4");
    			add_location(ul, file$o, 145, 6, 2282);
    			attr_dev(nav, "class", "svelte-8rhjm4");
    			add_location(nav, file$o, 136, 4, 2084);
    			attr_dev(header, "class", "svelte-8rhjm4");
    			add_location(header, file$o, 135, 2, 2071);
    			attr_dev(content, "class", "svelte-8rhjm4");
    			add_location(content, file$o, 134, 0, 2059);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, header);
    			append_dev(header, nav);
    			append_dev(nav, left);
    			append_dev(left, logo);
    			mount_component(icon, logo, null);
    			append_dev(logo, t0);
    			append_dev(left, t1);
    			append_dev(left, a0);
    			append_dev(left, t3);
    			append_dev(left, a1);
    			append_dev(nav, t5);
    			append_dev(nav, input);
    			append_dev(nav, t6);
    			append_dev(nav, ul);
    			append_dev(ul, li0);
    			append_dev(li0, button0);
    			append_dev(ul, t8);
    			append_dev(ul, li1);
    			append_dev(li1, button1);
    			append_dev(content, t10);
    			if (if_block) if_block.m(content, null);
    			insert_dev(target, t11, anchor);
    			mount_component(codeview, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			if (!/*thumbnail*/ ctx[0]) {
    				if (if_block) {
    					if_block.p(ctx, dirty);
    				} else {
    					if_block = create_if_block$2(ctx);
    					if_block.c();
    					if_block.m(content, null);
    				}
    			} else if (if_block) {
    				if_block.d(1);
    				if_block = null;
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon.$$.fragment, local);
    			transition_in(codeview.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon.$$.fragment, local);
    			transition_out(codeview.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_component(icon);
    			if (if_block) if_block.d();
    			if (detaching) detach_dev(t11);
    			destroy_component(codeview, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$p.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$p($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Pinterest", slots, []);
    	let samples = [1, 2, 3];
    	let lanes = [1, 2, 3, 4, 5];
    	let pin_sizes = [240, 180, 250, 580];
    	let { thumbnail = false } = $$props;

    	const random_select = from_array => {
    		let min = Math.ceil(0);
    		let max = Math.floor(from_array.length);
    		let index = Math.floor(Math.random() * (max - min) + min);
    		return from_array[index];
    	};

    	const random_sample = (from_array, count) => {
    		let result = [];

    		for (let i = 0; i < count; i++) {
    			result.push(random_select(from_array));
    		}

    		return result;
    	};

    	const writable_props = ["thumbnail"];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Pinterest> was created with unknown prop '${key}'`);
    	});

    	$$self.$$set = $$props => {
    		if ("thumbnail" in $$props) $$invalidate(0, thumbnail = $$props.thumbnail);
    	};

    	$$self.$capture_state = () => ({
    		link,
    		Icon,
    		CodeView,
    		holder,
    		samples,
    		lanes,
    		pin_sizes,
    		thumbnail,
    		random_select,
    		random_sample
    	});

    	$$self.$inject_state = $$props => {
    		if ("samples" in $$props) samples = $$props.samples;
    		if ("lanes" in $$props) $$invalidate(1, lanes = $$props.lanes);
    		if ("pin_sizes" in $$props) $$invalidate(2, pin_sizes = $$props.pin_sizes);
    		if ("thumbnail" in $$props) $$invalidate(0, thumbnail = $$props.thumbnail);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [thumbnail, lanes, pin_sizes, random_sample];
    }

    class Pinterest$1 extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$p, create_fragment$p, safe_not_equal, { thumbnail: 0 });

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Pinterest",
    			options,
    			id: create_fragment$p.name
    		});
    	}

    	get thumbnail() {
    		throw new Error("<Pinterest>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set thumbnail(value) {
    		throw new Error("<Pinterest>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}
    }

    /* src/demos/XorAcademy.svelte generated by Svelte v3.30.0 */
    const file$p = "src/demos/XorAcademy.svelte";

    function get_each_context$7(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[2] = list[i];
    	return child_ctx;
    }

    function get_each_context_1$4(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[5] = list[i];
    	return child_ctx;
    }

    // (141:2) {#each related as pin}
    function create_each_block_1$4(ctx) {
    	let figure;
    	let img;
    	let img_src_value;
    	let t;

    	const block = {
    		c: function create() {
    			figure = element("figure");
    			img = element("img");
    			t = space();
    			attr_dev(img, "alt", "Stock photo");
    			if (img.src !== (img_src_value = holder(82, 82))) attr_dev(img, "src", img_src_value);
    			add_location(img, file$p, 142, 6, 2482);
    			add_location(figure, file$p, 141, 4, 2467);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, figure, anchor);
    			append_dev(figure, img);
    			append_dev(figure, t);
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(figure);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block_1$4.name,
    		type: "each",
    		source: "(141:2) {#each related as pin}",
    		ctx
    	});

    	return block;
    }

    // (149:2) {#each posts as post}
    function create_each_block$7(ctx) {
    	let figure;
    	let a;
    	let img;
    	let img_src_value;
    	let link_action;
    	let t;
    	let mounted;
    	let dispose;

    	const block = {
    		c: function create() {
    			figure = element("figure");
    			a = element("a");
    			img = element("img");
    			t = space();
    			attr_dev(img, "alt", "Placeholder");
    			if (img.src !== (img_src_value = holder(300, 300))) attr_dev(img, "src", img_src_value);
    			add_location(img, file$p, 151, 9, 2675);
    			attr_dev(a, "href", "/demos/xoracademy/watch");
    			attr_dev(a, "class", "svelte-i1di9h");
    			add_location(a, file$p, 150, 6, 2622);
    			attr_dev(figure, "class", "svelte-i1di9h");
    			add_location(figure, file$p, 149, 4, 2607);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, figure, anchor);
    			append_dev(figure, a);
    			append_dev(a, img);
    			append_dev(figure, t);

    			if (!mounted) {
    				dispose = action_destroyer(link_action = link.call(null, a));
    				mounted = true;
    			}
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(figure);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block$7.name,
    		type: "each",
    		source: "(149:2) {#each posts as post}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$q(ctx) {
    	let content;
    	let header;
    	let nav;
    	let b0;
    	let a0;
    	let icon;
    	let t0;
    	let link_action;
    	let t1;
    	let input;
    	let t2;
    	let ul;
    	let li0;
    	let a1;
    	let button0;
    	let link_action_1;
    	let t4;
    	let li1;
    	let a2;
    	let t6;
    	let profile;
    	let figure;
    	let img;
    	let img_src_value;
    	let t7;
    	let info;
    	let p0;
    	let button1;
    	let t9;
    	let p1;
    	let b1;
    	let t11;
    	let b2;
    	let t13;
    	let h3;
    	let t15;
    	let p2;
    	let t17;
    	let related_1;
    	let t18;
    	let posts_1;
    	let t19;
    	let codeview;
    	let current;
    	let mounted;
    	let dispose;

    	icon = new Icon({
    			props: {
    				name: "edit-3",
    				color: "var(--color-text)"
    			},
    			$$inline: true
    		});

    	let each_value_1 = /*related*/ ctx[1];
    	validate_each_argument(each_value_1);
    	let each_blocks_1 = [];

    	for (let i = 0; i < each_value_1.length; i += 1) {
    		each_blocks_1[i] = create_each_block_1$4(get_each_context_1$4(ctx, each_value_1, i));
    	}

    	let each_value = /*posts*/ ctx[0];
    	validate_each_argument(each_value);
    	let each_blocks = [];

    	for (let i = 0; i < each_value.length; i += 1) {
    		each_blocks[i] = create_each_block$7(get_each_context$7(ctx, each_value, i));
    	}

    	codeview = new CodeView({
    			props: { source: "/code/XorAcademy" },
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			header = element("header");
    			nav = element("nav");
    			b0 = element("b");
    			a0 = element("a");
    			create_component(icon.$$.fragment);
    			t0 = text(" Xor.Academy");
    			t1 = space();
    			input = element("input");
    			t2 = space();
    			ul = element("ul");
    			li0 = element("li");
    			a1 = element("a");
    			button0 = element("button");
    			button0.textContent = "Log In";
    			t4 = space();
    			li1 = element("li");
    			a2 = element("a");
    			a2.textContent = "Sign Up";
    			t6 = space();
    			profile = element("profile");
    			figure = element("figure");
    			img = element("img");
    			t7 = space();
    			info = element("info");
    			p0 = element("p");
    			button1 = element("button");
    			button1.textContent = "Follow";
    			t9 = space();
    			p1 = element("p");
    			b1 = element("b");
    			b1.textContent = "10";
    			t11 = text(" videos ");
    			b2 = element("b");
    			b2.textContent = "4,695 followers";
    			t13 = space();
    			h3 = element("h3");
    			h3.textContent = "Drawing Level 1";
    			t15 = space();
    			p2 = element("p");
    			p2.textContent = "The first module you should take.  It covers the basics of drawing and how to get started\n        making drawing a habit.";
    			t17 = space();
    			related_1 = element("related");

    			for (let i = 0; i < each_blocks_1.length; i += 1) {
    				each_blocks_1[i].c();
    			}

    			t18 = space();
    			posts_1 = element("posts");

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			t19 = space();
    			create_component(codeview.$$.fragment);
    			attr_dev(a0, "id", "logo-link");
    			attr_dev(a0, "href", "/demos/xoracademy");
    			attr_dev(a0, "class", "svelte-i1di9h");
    			add_location(a0, file$p, 109, 9, 1683);
    			add_location(b0, file$p, 109, 6, 1680);
    			attr_dev(input, "placeholder", "Search");
    			attr_dev(input, "class", "svelte-i1di9h");
    			add_location(input, file$p, 110, 6, 1810);
    			attr_dev(button0, "class", "svelte-i1di9h");
    			add_location(button0, file$p, 112, 44, 1894);
    			attr_dev(a1, "href", "/demos/login");
    			attr_dev(a1, "class", "svelte-i1di9h");
    			add_location(a1, file$p, 112, 12, 1862);
    			add_location(li0, file$p, 112, 8, 1858);
    			attr_dev(a2, "class", "svelte-i1di9h");
    			add_location(a2, file$p, 113, 12, 1939);
    			add_location(li1, file$p, 113, 8, 1935);
    			add_location(ul, file$p, 111, 6, 1845);
    			attr_dev(nav, "class", "svelte-i1di9h");
    			add_location(nav, file$p, 108, 4, 1668);
    			attr_dev(header, "class", "svelte-i1di9h");
    			add_location(header, file$p, 107, 2, 1655);
    			attr_dev(img, "alt", "Module Thumb");
    			if (img.src !== (img_src_value = holder(256, 256))) attr_dev(img, "src", img_src_value);
    			add_location(img, file$p, 120, 6, 2026);
    			attr_dev(figure, "class", "svelte-i1di9h");
    			add_location(figure, file$p, 119, 4, 2011);
    			add_location(button1, file$p, 125, 8, 2121);
    			attr_dev(p0, "class", "svelte-i1di9h");
    			add_location(p0, file$p, 124, 6, 2109);
    			add_location(b1, file$p, 129, 8, 2175);
    			add_location(b2, file$p, 129, 25, 2192);
    			attr_dev(p1, "class", "svelte-i1di9h");
    			add_location(p1, file$p, 128, 6, 2163);
    			add_location(h3, file$p, 132, 6, 2233);
    			attr_dev(p2, "class", "svelte-i1di9h");
    			add_location(p2, file$p, 133, 6, 2264);
    			attr_dev(info, "class", "svelte-i1di9h");
    			add_location(info, file$p, 123, 4, 2096);
    			attr_dev(profile, "class", "svelte-i1di9h");
    			add_location(profile, file$p, 118, 2, 1997);
    			attr_dev(related_1, "class", "svelte-i1di9h");
    			add_location(related_1, file$p, 139, 2, 2428);
    			attr_dev(posts_1, "class", "svelte-i1di9h");
    			add_location(posts_1, file$p, 147, 2, 2571);
    			attr_dev(content, "class", "svelte-i1di9h");
    			add_location(content, file$p, 106, 0, 1643);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, header);
    			append_dev(header, nav);
    			append_dev(nav, b0);
    			append_dev(b0, a0);
    			mount_component(icon, a0, null);
    			append_dev(a0, t0);
    			append_dev(nav, t1);
    			append_dev(nav, input);
    			append_dev(nav, t2);
    			append_dev(nav, ul);
    			append_dev(ul, li0);
    			append_dev(li0, a1);
    			append_dev(a1, button0);
    			append_dev(ul, t4);
    			append_dev(ul, li1);
    			append_dev(li1, a2);
    			append_dev(content, t6);
    			append_dev(content, profile);
    			append_dev(profile, figure);
    			append_dev(figure, img);
    			append_dev(profile, t7);
    			append_dev(profile, info);
    			append_dev(info, p0);
    			append_dev(p0, button1);
    			append_dev(info, t9);
    			append_dev(info, p1);
    			append_dev(p1, b1);
    			append_dev(p1, t11);
    			append_dev(p1, b2);
    			append_dev(info, t13);
    			append_dev(info, h3);
    			append_dev(info, t15);
    			append_dev(info, p2);
    			append_dev(content, t17);
    			append_dev(content, related_1);

    			for (let i = 0; i < each_blocks_1.length; i += 1) {
    				each_blocks_1[i].m(related_1, null);
    			}

    			append_dev(content, t18);
    			append_dev(content, posts_1);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].m(posts_1, null);
    			}

    			insert_dev(target, t19, anchor);
    			mount_component(codeview, target, anchor);
    			current = true;

    			if (!mounted) {
    				dispose = [
    					action_destroyer(link_action = link.call(null, a0)),
    					action_destroyer(link_action_1 = link.call(null, a1))
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*holder*/ 0) {
    				each_value_1 = /*related*/ ctx[1];
    				validate_each_argument(each_value_1);
    				let i;

    				for (i = 0; i < each_value_1.length; i += 1) {
    					const child_ctx = get_each_context_1$4(ctx, each_value_1, i);

    					if (each_blocks_1[i]) {
    						each_blocks_1[i].p(child_ctx, dirty);
    					} else {
    						each_blocks_1[i] = create_each_block_1$4(child_ctx);
    						each_blocks_1[i].c();
    						each_blocks_1[i].m(related_1, null);
    					}
    				}

    				for (; i < each_blocks_1.length; i += 1) {
    					each_blocks_1[i].d(1);
    				}

    				each_blocks_1.length = each_value_1.length;
    			}

    			if (dirty & /*holder*/ 0) {
    				each_value = /*posts*/ ctx[0];
    				validate_each_argument(each_value);
    				let i;

    				for (i = 0; i < each_value.length; i += 1) {
    					const child_ctx = get_each_context$7(ctx, each_value, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    					} else {
    						each_blocks[i] = create_each_block$7(child_ctx);
    						each_blocks[i].c();
    						each_blocks[i].m(posts_1, null);
    					}
    				}

    				for (; i < each_blocks.length; i += 1) {
    					each_blocks[i].d(1);
    				}

    				each_blocks.length = each_value.length;
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon.$$.fragment, local);
    			transition_in(codeview.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon.$$.fragment, local);
    			transition_out(codeview.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_component(icon);
    			destroy_each(each_blocks_1, detaching);
    			destroy_each(each_blocks, detaching);
    			if (detaching) detach_dev(t19);
    			destroy_component(codeview, detaching);
    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$q.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$q($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("XorAcademy", slots, []);
    	let posts = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    	let related = [1, 2, 3, 4];
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<XorAcademy> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({
    		link,
    		Icon,
    		CodeView,
    		posts,
    		related,
    		holder
    	});

    	$$self.$inject_state = $$props => {
    		if ("posts" in $$props) $$invalidate(0, posts = $$props.posts);
    		if ("related" in $$props) $$invalidate(1, related = $$props.related);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [posts, related];
    }

    class XorAcademy extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$q, create_fragment$q, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "XorAcademy",
    			options,
    			id: create_fragment$q.name
    		});
    	}
    }

    /* src/demos/XorAcademyWatch.svelte generated by Svelte v3.30.0 */
    const file$q = "src/demos/XorAcademyWatch.svelte";

    function get_each_context$8(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[1] = list[i];
    	return child_ctx;
    }

    // (227:6) {#each cards as card}
    function create_each_block$8(ctx) {
    	let card;
    	let img;
    	let img_src_value;
    	let t0;
    	let info;
    	let h4;
    	let t2;
    	let p;
    	let t4;
    	let nav;
    	let icon0;
    	let t5;
    	let t6;
    	let reply;
    	let icon1;
    	let t7;
    	let t8;
    	let current;

    	icon0 = new Icon({
    			props: {
    				name: "thumbs-up",
    				color: "var(--sub-color)"
    			},
    			$$inline: true
    		});

    	icon1 = new Icon({
    			props: { name: "chevron-down" },
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			card = element("card");
    			img = element("img");
    			t0 = space();
    			info = element("info");
    			h4 = element("h4");
    			h4.textContent = "Guys";
    			t2 = space();
    			p = element("p");
    			p.textContent = "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque";
    			t4 = space();
    			nav = element("nav");
    			create_component(icon0.$$.fragment);
    			t5 = text(" 233");
    			t6 = space();
    			reply = element("reply");
    			create_component(icon1.$$.fragment);
    			t7 = text(" View replies");
    			t8 = space();
    			if (img.src !== (img_src_value = holder(64, 64))) attr_dev(img, "src", img_src_value);
    			attr_dev(img, "class", "svelte-9c6eed");
    			add_location(img, file$q, 228, 8, 5002);
    			attr_dev(h4, "class", "svelte-9c6eed");
    			add_location(h4, file$q, 230, 8, 5055);
    			attr_dev(p, "class", "svelte-9c6eed");
    			add_location(p, file$q, 231, 8, 5077);
    			attr_dev(nav, "id", "vote-nav");
    			attr_dev(nav, "class", "svelte-9c6eed");
    			add_location(nav, file$q, 232, 8, 5215);
    			attr_dev(reply, "class", "svelte-9c6eed");
    			add_location(reply, file$q, 235, 8, 5323);
    			attr_dev(info, "class", "svelte-9c6eed");
    			add_location(info, file$q, 229, 8, 5040);
    			attr_dev(card, "class", "svelte-9c6eed");
    			add_location(card, file$q, 227, 8, 4987);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, card, anchor);
    			append_dev(card, img);
    			append_dev(card, t0);
    			append_dev(card, info);
    			append_dev(info, h4);
    			append_dev(info, t2);
    			append_dev(info, p);
    			append_dev(info, t4);
    			append_dev(info, nav);
    			mount_component(icon0, nav, null);
    			append_dev(nav, t5);
    			append_dev(info, t6);
    			append_dev(info, reply);
    			mount_component(icon1, reply, null);
    			append_dev(reply, t7);
    			append_dev(card, t8);
    			current = true;
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon0.$$.fragment, local);
    			transition_in(icon1.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon0.$$.fragment, local);
    			transition_out(icon1.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(card);
    			destroy_component(icon0);
    			destroy_component(icon1);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block$8.name,
    		type: "each",
    		source: "(227:6) {#each cards as card}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$r(ctx) {
    	let content1;
    	let header;
    	let nav0;
    	let b;
    	let a0;
    	let icon0;
    	let t0;
    	let link_action;
    	let t1;
    	let input;
    	let t2;
    	let ul;
    	let li0;
    	let a1;
    	let button0;
    	let link_action_1;
    	let t4;
    	let li1;
    	let a2;
    	let t6;
    	let main;
    	let figure;
    	let img0;
    	let img0_src_value;
    	let t7;
    	let figcaption;
    	let a3;
    	let t9;
    	let a4;
    	let t11;
    	let p;
    	let t13;
    	let video_actions;
    	let likes;
    	let t15;
    	let video_buttons;
    	let icon1;
    	let t16;
    	let icon2;
    	let t17;
    	let icon3;
    	let t18;
    	let icon4;
    	let t19;
    	let icon5;
    	let t20;
    	let lower;
    	let promotion;
    	let nav1;
    	let card;
    	let img1;
    	let img1_src_value;
    	let t21;
    	let info;
    	let h4;
    	let t23;
    	let subs;
    	let t25;
    	let button1;
    	let t27;
    	let content0;
    	let t29;
    	let hr;
    	let t30;
    	let comments;
    	let nav2;
    	let span;
    	let t32;
    	let sort;
    	let icon6;
    	let t33;
    	let t34;
    	let t35;
    	let codeview;
    	let current;
    	let mounted;
    	let dispose;

    	icon0 = new Icon({
    			props: {
    				name: "edit-3",
    				color: "var(--color-text)"
    			},
    			$$inline: true
    		});

    	icon1 = new Icon({
    			props: { name: "thumbs-up", color: "#999" },
    			$$inline: true
    		});

    	icon2 = new Icon({
    			props: { name: "thumbs-down", color: "#999" },
    			$$inline: true
    		});

    	icon3 = new Icon({
    			props: { name: "corner-up-right", color: "#999" },
    			$$inline: true
    		});

    	icon4 = new Icon({
    			props: { name: "menu", color: "#999" },
    			$$inline: true
    		});

    	icon5 = new Icon({
    			props: { name: "vertical-more" },
    			$$inline: true
    		});

    	icon6 = new Icon({
    			props: {
    				name: "bar-chart",
    				color: "var(--sub-color)"
    			},
    			$$inline: true
    		});

    	let each_value = /*cards*/ ctx[0];
    	validate_each_argument(each_value);
    	let each_blocks = [];

    	for (let i = 0; i < each_value.length; i += 1) {
    		each_blocks[i] = create_each_block$8(get_each_context$8(ctx, each_value, i));
    	}

    	const out = i => transition_out(each_blocks[i], 1, 1, () => {
    		each_blocks[i] = null;
    	});

    	codeview = new CodeView({
    			props: { source: "/code/XorAcademyWatch" },
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content1 = element("content");
    			header = element("header");
    			nav0 = element("nav");
    			b = element("b");
    			a0 = element("a");
    			create_component(icon0.$$.fragment);
    			t0 = text(" Xor.Academy");
    			t1 = space();
    			input = element("input");
    			t2 = space();
    			ul = element("ul");
    			li0 = element("li");
    			a1 = element("a");
    			button0 = element("button");
    			button0.textContent = "Log In";
    			t4 = space();
    			li1 = element("li");
    			a2 = element("a");
    			a2.textContent = "Sign Up";
    			t6 = space();
    			main = element("main");
    			figure = element("figure");
    			img0 = element("img");
    			t7 = space();
    			figcaption = element("figcaption");
    			a3 = element("a");
    			a3.textContent = "#tag";
    			t9 = space();
    			a4 = element("a");
    			a4.textContent = "#anothertag";
    			t11 = space();
    			p = element("p");
    			p.textContent = "Title And Stuff";
    			t13 = space();
    			video_actions = element("video-actions");
    			likes = element("likes");
    			likes.textContent = "Likes Other Stats";
    			t15 = space();
    			video_buttons = element("video-buttons");
    			create_component(icon1.$$.fragment);
    			t16 = text(" 1.1K\n              ");
    			create_component(icon2.$$.fragment);
    			t17 = text(" 22\n                ");
    			create_component(icon3.$$.fragment);
    			t18 = text(" SHARE\n                ");
    			create_component(icon4.$$.fragment);
    			t19 = text(" SAVE\n                  ");
    			create_component(icon5.$$.fragment);
    			t20 = space();
    			lower = element("lower");
    			promotion = element("promotion");
    			nav1 = element("nav");
    			card = element("card");
    			img1 = element("img");
    			t21 = space();
    			info = element("info");
    			h4 = element("h4");
    			h4.textContent = "Zed A. Shaw";
    			t23 = space();
    			subs = element("subs");
    			subs.textContent = "1 subscriber";
    			t25 = space();
    			button1 = element("button");
    			button1.textContent = "SUBSCRIBE";
    			t27 = space();
    			content0 = element("content");
    			content0.textContent = "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur";
    			t29 = space();
    			hr = element("hr");
    			t30 = space();
    			comments = element("comments");
    			nav2 = element("nav");
    			span = element("span");
    			span.textContent = "125 Comments";
    			t32 = space();
    			sort = element("sort");
    			create_component(icon6.$$.fragment);
    			t33 = text(" SORT BY");
    			t34 = space();

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			t35 = space();
    			create_component(codeview.$$.fragment);
    			attr_dev(a0, "href", "/demos/xoracademy");
    			attr_dev(a0, "class", "svelte-9c6eed");
    			add_location(a0, file$q, 177, 9, 2703);
    			add_location(b, file$q, 177, 6, 2700);
    			attr_dev(input, "placeholder", "Search");
    			attr_dev(input, "class", "svelte-9c6eed");
    			add_location(input, file$q, 178, 6, 2815);
    			attr_dev(button0, "class", "svelte-9c6eed");
    			add_location(button0, file$q, 180, 44, 2899);
    			attr_dev(a1, "href", "/demos/login");
    			attr_dev(a1, "class", "svelte-9c6eed");
    			add_location(a1, file$q, 180, 12, 2867);
    			add_location(li0, file$q, 180, 8, 2863);
    			attr_dev(a2, "class", "svelte-9c6eed");
    			add_location(a2, file$q, 181, 12, 2944);
    			add_location(li1, file$q, 181, 8, 2940);
    			add_location(ul, file$q, 179, 6, 2850);
    			attr_dev(nav0, "class", "svelte-9c6eed");
    			add_location(nav0, file$q, 176, 4, 2688);
    			attr_dev(header, "class", "svelte-9c6eed");
    			add_location(header, file$q, 175, 2, 2675);
    			if (img0.src !== (img0_src_value = holder(1280, 720))) attr_dev(img0, "src", img0_src_value);
    			add_location(img0, file$q, 187, 6, 3027);
    			attr_dev(a3, "class", "svelte-9c6eed");
    			add_location(a3, file$q, 189, 8, 3087);
    			attr_dev(a4, "class", "svelte-9c6eed");
    			add_location(a4, file$q, 189, 20, 3099);
    			attr_dev(p, "class", "svelte-9c6eed");
    			add_location(p, file$q, 190, 8, 3126);
    			add_location(likes, file$q, 192, 10, 3183);
    			add_location(video_buttons, file$q, 193, 10, 3226);
    			set_custom_element_data(video_actions, "class", "svelte-9c6eed");
    			add_location(video_actions, file$q, 191, 8, 3157);
    			attr_dev(figcaption, "class", "svelte-9c6eed");
    			add_location(figcaption, file$q, 188, 6, 3066);
    			add_location(figure, file$q, 186, 4, 3012);
    			if (img1.src !== (img1_src_value = holder(64, 64))) attr_dev(img1, "src", img1_src_value);
    			attr_dev(img1, "class", "svelte-9c6eed");
    			add_location(img1, file$q, 207, 8, 3677);
    			attr_dev(h4, "class", "svelte-9c6eed");
    			add_location(h4, file$q, 209, 8, 3730);
    			add_location(subs, file$q, 210, 8, 3759);
    			attr_dev(info, "class", "svelte-9c6eed");
    			add_location(info, file$q, 208, 8, 3715);
    			attr_dev(card, "class", "svelte-9c6eed");
    			add_location(card, file$q, 206, 8, 3662);
    			attr_dev(button1, "id", "subscribe");
    			attr_dev(button1, "class", "svelte-9c6eed");
    			add_location(button1, file$q, 212, 8, 3809);
    			attr_dev(nav1, "class", "svelte-9c6eed");
    			add_location(nav1, file$q, 205, 6, 3648);
    			attr_dev(content0, "class", "svelte-9c6eed");
    			add_location(content0, file$q, 215, 6, 3871);
    			attr_dev(promotion, "class", "svelte-9c6eed");
    			add_location(promotion, file$q, 204, 6, 3630);
    			attr_dev(hr, "class", "svelte-9c6eed");
    			add_location(hr, file$q, 219, 6, 4796);
    			add_location(span, file$q, 223, 8, 4839);
    			attr_dev(sort, "class", "svelte-9c6eed");
    			add_location(sort, file$q, 223, 34, 4865);
    			attr_dev(nav2, "class", "svelte-9c6eed");
    			add_location(nav2, file$q, 222, 6, 4825);
    			attr_dev(comments, "class", "svelte-9c6eed");
    			add_location(comments, file$q, 221, 6, 4808);
    			attr_dev(lower, "class", "svelte-9c6eed");
    			add_location(lower, file$q, 203, 4, 3616);
    			attr_dev(main, "class", "svelte-9c6eed");
    			add_location(main, file$q, 185, 2, 3001);
    			attr_dev(content1, "class", "svelte-9c6eed");
    			add_location(content1, file$q, 174, 0, 2663);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content1, anchor);
    			append_dev(content1, header);
    			append_dev(header, nav0);
    			append_dev(nav0, b);
    			append_dev(b, a0);
    			mount_component(icon0, a0, null);
    			append_dev(a0, t0);
    			append_dev(nav0, t1);
    			append_dev(nav0, input);
    			append_dev(nav0, t2);
    			append_dev(nav0, ul);
    			append_dev(ul, li0);
    			append_dev(li0, a1);
    			append_dev(a1, button0);
    			append_dev(ul, t4);
    			append_dev(ul, li1);
    			append_dev(li1, a2);
    			append_dev(content1, t6);
    			append_dev(content1, main);
    			append_dev(main, figure);
    			append_dev(figure, img0);
    			append_dev(figure, t7);
    			append_dev(figure, figcaption);
    			append_dev(figcaption, a3);
    			append_dev(figcaption, t9);
    			append_dev(figcaption, a4);
    			append_dev(figcaption, t11);
    			append_dev(figcaption, p);
    			append_dev(figcaption, t13);
    			append_dev(figcaption, video_actions);
    			append_dev(video_actions, likes);
    			append_dev(video_actions, t15);
    			append_dev(video_actions, video_buttons);
    			mount_component(icon1, video_buttons, null);
    			append_dev(video_buttons, t16);
    			mount_component(icon2, video_buttons, null);
    			append_dev(video_buttons, t17);
    			mount_component(icon3, video_buttons, null);
    			append_dev(video_buttons, t18);
    			mount_component(icon4, video_buttons, null);
    			append_dev(video_buttons, t19);
    			mount_component(icon5, video_buttons, null);
    			append_dev(main, t20);
    			append_dev(main, lower);
    			append_dev(lower, promotion);
    			append_dev(promotion, nav1);
    			append_dev(nav1, card);
    			append_dev(card, img1);
    			append_dev(card, t21);
    			append_dev(card, info);
    			append_dev(info, h4);
    			append_dev(info, t23);
    			append_dev(info, subs);
    			append_dev(nav1, t25);
    			append_dev(nav1, button1);
    			append_dev(promotion, t27);
    			append_dev(promotion, content0);
    			append_dev(lower, t29);
    			append_dev(lower, hr);
    			append_dev(lower, t30);
    			append_dev(lower, comments);
    			append_dev(comments, nav2);
    			append_dev(nav2, span);
    			append_dev(nav2, t32);
    			append_dev(nav2, sort);
    			mount_component(icon6, sort, null);
    			append_dev(sort, t33);
    			append_dev(comments, t34);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].m(comments, null);
    			}

    			insert_dev(target, t35, anchor);
    			mount_component(codeview, target, anchor);
    			current = true;

    			if (!mounted) {
    				dispose = [
    					action_destroyer(link_action = link.call(null, a0)),
    					action_destroyer(link_action_1 = link.call(null, a1))
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*holder*/ 0) {
    				each_value = /*cards*/ ctx[0];
    				validate_each_argument(each_value);
    				let i;

    				for (i = 0; i < each_value.length; i += 1) {
    					const child_ctx = get_each_context$8(ctx, each_value, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    						transition_in(each_blocks[i], 1);
    					} else {
    						each_blocks[i] = create_each_block$8(child_ctx);
    						each_blocks[i].c();
    						transition_in(each_blocks[i], 1);
    						each_blocks[i].m(comments, null);
    					}
    				}

    				group_outros();

    				for (i = each_value.length; i < each_blocks.length; i += 1) {
    					out(i);
    				}

    				check_outros();
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon0.$$.fragment, local);
    			transition_in(icon1.$$.fragment, local);
    			transition_in(icon2.$$.fragment, local);
    			transition_in(icon3.$$.fragment, local);
    			transition_in(icon4.$$.fragment, local);
    			transition_in(icon5.$$.fragment, local);
    			transition_in(icon6.$$.fragment, local);

    			for (let i = 0; i < each_value.length; i += 1) {
    				transition_in(each_blocks[i]);
    			}

    			transition_in(codeview.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon0.$$.fragment, local);
    			transition_out(icon1.$$.fragment, local);
    			transition_out(icon2.$$.fragment, local);
    			transition_out(icon3.$$.fragment, local);
    			transition_out(icon4.$$.fragment, local);
    			transition_out(icon5.$$.fragment, local);
    			transition_out(icon6.$$.fragment, local);
    			each_blocks = each_blocks.filter(Boolean);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				transition_out(each_blocks[i]);
    			}

    			transition_out(codeview.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content1);
    			destroy_component(icon0);
    			destroy_component(icon1);
    			destroy_component(icon2);
    			destroy_component(icon3);
    			destroy_component(icon4);
    			destroy_component(icon5);
    			destroy_component(icon6);
    			destroy_each(each_blocks, detaching);
    			if (detaching) detach_dev(t35);
    			destroy_component(codeview, detaching);
    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$r.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$r($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("XorAcademyWatch", slots, []);
    	let cards = [1, 2, 3, 4];
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<XorAcademyWatch> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ link, Icon, CodeView, cards, holder });

    	$$self.$inject_state = $$props => {
    		if ("cards" in $$props) $$invalidate(0, cards = $$props.cards);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [cards];
    }

    class XorAcademyWatch extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$r, create_fragment$r, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "XorAcademyWatch",
    			options,
    			id: create_fragment$r.name
    		});
    	}
    }

    /* src/demos/Login.svelte generated by Svelte v3.30.0 */
    const file$r = "src/demos/Login.svelte";

    function create_fragment$s(ctx) {
    	let content;
    	let spacer0;
    	let t0;
    	let form;
    	let header;
    	let t2;
    	let label0;
    	let t4;
    	let input0;
    	let t5;
    	let label1;
    	let t7;
    	let input1;
    	let t8;
    	let br;
    	let t9;
    	let button;
    	let t11;
    	let spacer1;
    	let t12;
    	let codeview;
    	let current;

    	codeview = new CodeView({
    			props: {
    				source: "/code/Login",
    				notes: "/code/Login.notes.html"
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			spacer0 = element("spacer");
    			t0 = space();
    			form = element("form");
    			header = element("header");
    			header.textContent = "Login";
    			t2 = space();
    			label0 = element("label");
    			label0.textContent = "Username";
    			t4 = space();
    			input0 = element("input");
    			t5 = space();
    			label1 = element("label");
    			label1.textContent = "Password";
    			t7 = space();
    			input1 = element("input");
    			t8 = space();
    			br = element("br");
    			t9 = space();
    			button = element("button");
    			button.textContent = "Login";
    			t11 = space();
    			spacer1 = element("spacer");
    			t12 = space();
    			create_component(codeview.$$.fragment);
    			add_location(spacer0, file$r, 15, 2, 262);
    			add_location(header, file$r, 17, 4, 293);
    			attr_dev(label0, "for", "username");
    			add_location(label0, file$r, 18, 4, 320);
    			attr_dev(input0, "type", "text");
    			attr_dev(input0, "id", "username");
    			attr_dev(input0, "name", "username");
    			attr_dev(input0, "size", "32");
    			attr_dev(input0, "placeholder", "Username");
    			add_location(input0, file$r, 19, 4, 363);
    			attr_dev(label1, "for", "password");
    			add_location(label1, file$r, 20, 4, 450);
    			attr_dev(input1, "type", "password");
    			attr_dev(input1, "id", "password");
    			attr_dev(input1, "name", "password");
    			attr_dev(input1, "size", "32");
    			attr_dev(input1, "placeholder", "Password");
    			add_location(input1, file$r, 21, 4, 493);
    			add_location(br, file$r, 22, 4, 584);
    			attr_dev(button, "type", "submit");
    			add_location(button, file$r, 23, 4, 593);
    			add_location(form, file$r, 16, 2, 282);
    			add_location(spacer1, file$r, 25, 2, 642);
    			attr_dev(content, "class", "svelte-t7gl8c");
    			add_location(content, file$r, 14, 0, 250);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, spacer0);
    			append_dev(content, t0);
    			append_dev(content, form);
    			append_dev(form, header);
    			append_dev(form, t2);
    			append_dev(form, label0);
    			append_dev(form, t4);
    			append_dev(form, input0);
    			append_dev(form, t5);
    			append_dev(form, label1);
    			append_dev(form, t7);
    			append_dev(form, input1);
    			append_dev(form, t8);
    			append_dev(form, br);
    			append_dev(form, t9);
    			append_dev(form, button);
    			append_dev(content, t11);
    			append_dev(content, spacer1);
    			insert_dev(target, t12, anchor);
    			mount_component(codeview, target, anchor);
    			current = true;
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(codeview.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(codeview.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			if (detaching) detach_dev(t12);
    			destroy_component(codeview, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$s.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$s($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Login", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Login> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ CodeView, holder });
    	return [];
    }

    class Login$1 extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$s, create_fragment$s, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Login",
    			options,
    			id: create_fragment$s.name
    		});
    	}
    }

    /* src/demos/Tiles.svelte generated by Svelte v3.30.0 */
    const file$s = "src/demos/Tiles.svelte";

    function create_fragment$t(ctx) {
    	let content;
    	let tile;
    	let left;
    	let img;
    	let img_src_value;
    	let t0;
    	let middle;
    	let h4;
    	let t2;
    	let p;
    	let t4;
    	let right;
    	let button0;
    	let icon0;
    	let t5;
    	let button1;
    	let icon1;
    	let t6;
    	let codeview;
    	let current;

    	icon0 = new Icon({
    			props: {
    				name: "check-circle",
    				color: "var(--color-bg)",
    				size: "24"
    			},
    			$$inline: true
    		});

    	icon1 = new Icon({
    			props: {
    				name: "x-circle",
    				color: "var(--color-bg)",
    				size: "24"
    			},
    			$$inline: true
    		});

    	codeview = new CodeView({
    			props: {
    				source: "/code/Tiles",
    				notes: "/cdoe/Tiles.notes.html"
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			tile = element("tile");
    			left = element("left");
    			img = element("img");
    			t0 = space();
    			middle = element("middle");
    			h4 = element("h4");
    			h4.textContent = "Tile Example";
    			t2 = space();
    			p = element("p");
    			p.textContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
    			t4 = space();
    			right = element("right");
    			button0 = element("button");
    			create_component(icon0.$$.fragment);
    			t5 = space();
    			button1 = element("button");
    			create_component(icon1.$$.fragment);
    			t6 = space();
    			create_component(codeview.$$.fragment);
    			if (img.src !== (img_src_value = holder(48, 48))) attr_dev(img, "src", img_src_value);
    			add_location(img, file$s, 48, 6, 836);
    			add_location(left, file$s, 47, 4, 823);
    			attr_dev(h4, "class", "svelte-fwzpwr");
    			add_location(h4, file$s, 52, 6, 898);
    			add_location(p, file$s, 55, 6, 942);
    			attr_dev(middle, "class", "svelte-fwzpwr");
    			add_location(middle, file$s, 51, 4, 883);
    			attr_dev(button0, "class", "svelte-fwzpwr");
    			add_location(button0, file$s, 59, 4, 1104);
    			attr_dev(button1, "class", "svelte-fwzpwr");
    			add_location(button1, file$s, 60, 4, 1188);
    			attr_dev(right, "class", "svelte-fwzpwr");
    			add_location(right, file$s, 58, 4, 1092);
    			attr_dev(tile, "class", "svelte-fwzpwr");
    			add_location(tile, file$s, 46, 2, 812);
    			attr_dev(content, "class", "svelte-fwzpwr");
    			add_location(content, file$s, 45, 0, 800);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, tile);
    			append_dev(tile, left);
    			append_dev(left, img);
    			append_dev(tile, t0);
    			append_dev(tile, middle);
    			append_dev(middle, h4);
    			append_dev(middle, t2);
    			append_dev(middle, p);
    			append_dev(tile, t4);
    			append_dev(tile, right);
    			append_dev(right, button0);
    			mount_component(icon0, button0, null);
    			append_dev(right, t5);
    			append_dev(right, button1);
    			mount_component(icon1, button1, null);
    			insert_dev(target, t6, anchor);
    			mount_component(codeview, target, anchor);
    			current = true;
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon0.$$.fragment, local);
    			transition_in(icon1.$$.fragment, local);
    			transition_in(codeview.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon0.$$.fragment, local);
    			transition_out(icon1.$$.fragment, local);
    			transition_out(codeview.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_component(icon0);
    			destroy_component(icon1);
    			if (detaching) detach_dev(t6);
    			destroy_component(codeview, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$t.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$t($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Tiles", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Tiles> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ CodeView, Icon, holder });
    	return [];
    }

    class Tiles$1 extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$t, create_fragment$t, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Tiles",
    			options,
    			id: create_fragment$t.name
    		});
    	}
    }

    /* src/demos/Cards.svelte generated by Svelte v3.30.0 */
    const file$t = "src/demos/Cards.svelte";

    function create_fragment$u(ctx) {
    	let content;
    	let card;
    	let top;
    	let img;
    	let img_src_value;
    	let t0;
    	let middle;
    	let h4;
    	let t2;
    	let p;
    	let t4;
    	let bottom;
    	let button0;
    	let icon0;
    	let t5;
    	let button1;
    	let icon1;
    	let t6;
    	let codeview;
    	let current;

    	icon0 = new Icon({
    			props: {
    				name: "check-circle",
    				color: "var(--color-bg)",
    				size: "24"
    			},
    			$$inline: true
    		});

    	icon1 = new Icon({
    			props: {
    				name: "x-circle",
    				color: "var(--color-bg)",
    				size: "24"
    			},
    			$$inline: true
    		});

    	codeview = new CodeView({
    			props: {
    				source: "/code/Cards",
    				notes: "/code/Cards.notes.html"
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			card = element("card");
    			top = element("top");
    			img = element("img");
    			t0 = space();
    			middle = element("middle");
    			h4 = element("h4");
    			h4.textContent = "Card Example";
    			t2 = space();
    			p = element("p");
    			p.textContent = "Lorem ipsum dolor sit amet, consectetur\n      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
    			t4 = space();
    			bottom = element("bottom");
    			button0 = element("button");
    			create_component(icon0.$$.fragment);
    			t5 = space();
    			button1 = element("button");
    			create_component(icon1.$$.fragment);
    			t6 = space();
    			create_component(codeview.$$.fragment);
    			if (img.src !== (img_src_value = holder(16 * 30, 9 * 30))) attr_dev(img, "src", img_src_value);
    			attr_dev(img, "class", "svelte-12f1gxf");
    			add_location(img, file$t, 51, 6, 800);
    			add_location(top, file$t, 50, 4, 788);
    			attr_dev(h4, "class", "svelte-12f1gxf");
    			add_location(h4, file$t, 55, 6, 870);
    			add_location(p, file$t, 58, 6, 914);
    			attr_dev(middle, "class", "svelte-12f1gxf");
    			add_location(middle, file$t, 54, 4, 855);
    			attr_dev(button0, "class", "svelte-12f1gxf");
    			add_location(button0, file$t, 63, 4, 1083);
    			attr_dev(button1, "class", "svelte-12f1gxf");
    			add_location(button1, file$t, 64, 4, 1167);
    			attr_dev(bottom, "class", "svelte-12f1gxf");
    			add_location(bottom, file$t, 62, 4, 1070);
    			attr_dev(card, "class", "svelte-12f1gxf");
    			add_location(card, file$t, 49, 2, 777);
    			attr_dev(content, "class", "svelte-12f1gxf");
    			add_location(content, file$t, 48, 0, 765);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, card);
    			append_dev(card, top);
    			append_dev(top, img);
    			append_dev(card, t0);
    			append_dev(card, middle);
    			append_dev(middle, h4);
    			append_dev(middle, t2);
    			append_dev(middle, p);
    			append_dev(card, t4);
    			append_dev(card, bottom);
    			append_dev(bottom, button0);
    			mount_component(icon0, button0, null);
    			append_dev(bottom, t5);
    			append_dev(bottom, button1);
    			mount_component(icon1, button1, null);
    			insert_dev(target, t6, anchor);
    			mount_component(codeview, target, anchor);
    			current = true;
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon0.$$.fragment, local);
    			transition_in(icon1.$$.fragment, local);
    			transition_in(codeview.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon0.$$.fragment, local);
    			transition_out(icon1.$$.fragment, local);
    			transition_out(codeview.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_component(icon0);
    			destroy_component(icon1);
    			if (detaching) detach_dev(t6);
    			destroy_component(codeview, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$u.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$u($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Cards", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Cards> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ CodeView, Icon, holder });
    	return [];
    }

    class Cards$1 extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$u, create_fragment$u, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Cards",
    			options,
    			id: create_fragment$u.name
    		});
    	}
    }

    /* src/demos/Panels.svelte generated by Svelte v3.30.0 */
    const file$u = "src/demos/Panels.svelte";

    function create_fragment$v(ctx) {
    	let content;
    	let panel;
    	let top;
    	let h1;
    	let t1;
    	let middle;
    	let h4;
    	let t3;
    	let p;
    	let t5;
    	let bottom;
    	let button0;
    	let icon0;
    	let t6;
    	let t7;
    	let button1;
    	let icon1;
    	let t8;
    	let t9;
    	let codeview;
    	let current;

    	icon0 = new Icon({
    			props: {
    				name: "x-circle",
    				color: "var(--color-text)",
    				size: "24"
    			},
    			$$inline: true
    		});

    	icon1 = new Icon({
    			props: {
    				name: "check-circle",
    				color: "var(--color-bg)",
    				size: "24"
    			},
    			$$inline: true
    		});

    	codeview = new CodeView({
    			props: {
    				source: "/code/Panels",
    				notes: "/code/Panels.notes.html"
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			panel = element("panel");
    			top = element("top");
    			h1 = element("h1");
    			h1.textContent = "Panel is a Card";
    			t1 = space();
    			middle = element("middle");
    			h4 = element("h4");
    			h4.textContent = "Panel Example";
    			t3 = space();
    			p = element("p");
    			p.textContent = "Not sure what the big deal is with the difference between panels and cards\n        but I'm doing all the things so here's a panel. Let's say, buttons on a panel\n        are different to demonstrate how to make a button strip.";
    			t5 = space();
    			bottom = element("bottom");
    			button0 = element("button");
    			create_component(icon0.$$.fragment);
    			t6 = text(" CANCEL");
    			t7 = space();
    			button1 = element("button");
    			create_component(icon1.$$.fragment);
    			t8 = text(" OK");
    			t9 = space();
    			create_component(codeview.$$.fragment);
    			add_location(h1, file$u, 60, 4, 1024);
    			attr_dev(top, "class", "svelte-1lajyim");
    			add_location(top, file$u, 59, 4, 1014);
    			add_location(h4, file$u, 64, 6, 1080);
    			add_location(p, file$u, 67, 6, 1125);
    			attr_dev(middle, "class", "svelte-1lajyim");
    			add_location(middle, file$u, 63, 4, 1065);
    			attr_dev(button0, "id", "cancel");
    			attr_dev(button0, "class", "svelte-1lajyim");
    			add_location(button0, file$u, 73, 4, 1391);
    			attr_dev(button1, "class", "svelte-1lajyim");
    			add_location(button1, file$u, 74, 4, 1492);
    			attr_dev(bottom, "class", "svelte-1lajyim");
    			add_location(bottom, file$u, 72, 4, 1378);
    			attr_dev(panel, "class", "svelte-1lajyim");
    			add_location(panel, file$u, 58, 2, 1002);
    			attr_dev(content, "class", "svelte-1lajyim");
    			add_location(content, file$u, 57, 0, 990);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, panel);
    			append_dev(panel, top);
    			append_dev(top, h1);
    			append_dev(panel, t1);
    			append_dev(panel, middle);
    			append_dev(middle, h4);
    			append_dev(middle, t3);
    			append_dev(middle, p);
    			append_dev(panel, t5);
    			append_dev(panel, bottom);
    			append_dev(bottom, button0);
    			mount_component(icon0, button0, null);
    			append_dev(button0, t6);
    			append_dev(bottom, t7);
    			append_dev(bottom, button1);
    			mount_component(icon1, button1, null);
    			append_dev(button1, t8);
    			insert_dev(target, t9, anchor);
    			mount_component(codeview, target, anchor);
    			current = true;
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon0.$$.fragment, local);
    			transition_in(icon1.$$.fragment, local);
    			transition_in(codeview.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon0.$$.fragment, local);
    			transition_out(icon1.$$.fragment, local);
    			transition_out(codeview.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_component(icon0);
    			destroy_component(icon1);
    			if (detaching) detach_dev(t9);
    			destroy_component(codeview, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$v.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$v($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Panels", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Panels> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ CodeView, Icon });
    	return [];
    }

    class Panels$1 extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$v, create_fragment$v, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Panels",
    			options,
    			id: create_fragment$v.name
    		});
    	}
    }

    function fade(node, { delay = 0, duration = 400, easing = identity }) {
        const o = +getComputedStyle(node).opacity;
        return {
            delay,
            duration,
            easing,
            css: t => `opacity: ${t * o}`
        };
    }

    /* src/demos/Modal.svelte generated by Svelte v3.30.0 */
    const file$v = "src/demos/Modal.svelte";

    // (50:0) {#if visible}
    function create_if_block$3(ctx) {
    	let modal;
    	let modal_content;
    	let h1;
    	let t1;
    	let p;
    	let mounted;
    	let dispose;

    	const block = {
    		c: function create() {
    			modal = element("modal");
    			modal_content = element("modal-content");
    			h1 = element("h1");
    			h1.textContent = "This Is A Modal";
    			t1 = space();
    			p = element("p");
    			p.textContent = "Designers love modals. Click anywhere to close this.";
    			add_location(h1, file$v, 52, 4, 981);
    			add_location(p, file$v, 53, 4, 1010);
    			set_custom_element_data(modal_content, "class", "svelte-cwnhgy");
    			add_location(modal_content, file$v, 51, 2, 961);
    			attr_dev(modal, "class", "svelte-cwnhgy");
    			add_location(modal, file$v, 50, 2, 916);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, modal, anchor);
    			append_dev(modal, modal_content);
    			append_dev(modal_content, h1);
    			append_dev(modal_content, t1);
    			append_dev(modal_content, p);

    			if (!mounted) {
    				dispose = listen_dev(modal, "click", /*click_handler_1*/ ctx[2], false, false, false);
    				mounted = true;
    			}
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(modal);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block$3.name,
    		type: "if",
    		source: "(50:0) {#if visible}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$w(ctx) {
    	let content;
    	let button;
    	let t1;
    	let t2;
    	let codeview;
    	let current;
    	let mounted;
    	let dispose;
    	let if_block = /*visible*/ ctx[0] && create_if_block$3(ctx);

    	codeview = new CodeView({
    			props: { source: "/code/Modal" },
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			button = element("button");
    			button.textContent = "Click Me!";
    			t1 = space();
    			if (if_block) if_block.c();
    			t2 = space();
    			create_component(codeview.$$.fragment);
    			attr_dev(button, "class", "svelte-cwnhgy");
    			add_location(button, file$v, 46, 2, 827);
    			attr_dev(content, "class", "svelte-cwnhgy");
    			add_location(content, file$v, 45, 0, 815);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, button);
    			insert_dev(target, t1, anchor);
    			if (if_block) if_block.m(target, anchor);
    			insert_dev(target, t2, anchor);
    			mount_component(codeview, target, anchor);
    			current = true;

    			if (!mounted) {
    				dispose = listen_dev(button, "click", /*click_handler*/ ctx[1], false, false, false);
    				mounted = true;
    			}
    		},
    		p: function update(ctx, [dirty]) {
    			if (/*visible*/ ctx[0]) {
    				if (if_block) {
    					if_block.p(ctx, dirty);
    				} else {
    					if_block = create_if_block$3(ctx);
    					if_block.c();
    					if_block.m(t2.parentNode, t2);
    				}
    			} else if (if_block) {
    				if_block.d(1);
    				if_block = null;
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(codeview.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(codeview.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			if (detaching) detach_dev(t1);
    			if (if_block) if_block.d(detaching);
    			if (detaching) detach_dev(t2);
    			destroy_component(codeview, detaching);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$w.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$w($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Modal", slots, []);
    	let { visible = false } = $$props;
    	const writable_props = ["visible"];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Modal> was created with unknown prop '${key}'`);
    	});

    	const click_handler = () => $$invalidate(0, visible = true);
    	const click_handler_1 = () => $$invalidate(0, visible = false);

    	$$self.$$set = $$props => {
    		if ("visible" in $$props) $$invalidate(0, visible = $$props.visible);
    	};

    	$$self.$capture_state = () => ({ Icon, CodeView, fade, visible });

    	$$self.$inject_state = $$props => {
    		if ("visible" in $$props) $$invalidate(0, visible = $$props.visible);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [visible, click_handler, click_handler_1];
    }

    class Modal extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$w, create_fragment$w, safe_not_equal, { visible: 0 });

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Modal",
    			options,
    			id: create_fragment$w.name
    		});
    	}

    	get visible() {
    		throw new Error("<Modal>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set visible(value) {
    		throw new Error("<Modal>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}
    }

    /* src/demos/NavBar.svelte generated by Svelte v3.30.0 */
    const file$w = "src/demos/NavBar.svelte";

    function create_fragment$x(ctx) {
    	let content;
    	let nav_bar0;
    	let left0;
    	let b0;
    	let icon0;
    	let t0;
    	let t1;
    	let middle0;
    	let input;
    	let t2;
    	let right0;
    	let button0;
    	let t4;
    	let a;
    	let t6;
    	let nav_bar1;
    	let left1;
    	let b1;
    	let icon1;
    	let t7;
    	let t8;
    	let middle1;
    	let t9;
    	let right1;
    	let button1;
    	let t11;
    	let button2;
    	let t13;
    	let codeview;
    	let current;

    	icon0 = new Icon({
    			props: {
    				name: "trash",
    				color: "var(--color-text)"
    			},
    			$$inline: true
    		});

    	icon1 = new Icon({
    			props: {
    				name: "trash",
    				color: "var(--color-text)"
    			},
    			$$inline: true
    		});

    	codeview = new CodeView({
    			props: { source: "/code/NavBar" },
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			nav_bar0 = element("nav-bar");
    			left0 = element("left");
    			b0 = element("b");
    			create_component(icon0.$$.fragment);
    			t0 = text(" fsck CSS");
    			t1 = space();
    			middle0 = element("middle");
    			input = element("input");
    			t2 = space();
    			right0 = element("right");
    			button0 = element("button");
    			button0.textContent = "Log In";
    			t4 = space();
    			a = element("a");
    			a.textContent = "Sign Up";
    			t6 = space();
    			nav_bar1 = element("nav-bar");
    			left1 = element("left");
    			b1 = element("b");
    			create_component(icon1.$$.fragment);
    			t7 = text(" fsck CSS");
    			t8 = space();
    			middle1 = element("middle");
    			t9 = space();
    			right1 = element("right");
    			button1 = element("button");
    			button1.textContent = "Log In";
    			t11 = space();
    			button2 = element("button");
    			button2.textContent = "Sign Up";
    			t13 = space();
    			create_component(codeview.$$.fragment);
    			add_location(b0, file$w, 44, 6, 807);
    			add_location(left0, file$w, 43, 4, 794);
    			attr_dev(input, "placeholder", "Search");
    			attr_dev(input, "class", "svelte-1ofkzoq");
    			add_location(input, file$w, 48, 6, 903);
    			attr_dev(middle0, "class", "svelte-1ofkzoq");
    			add_location(middle0, file$w, 47, 4, 888);
    			add_location(button0, file$w, 52, 6, 965);
    			add_location(a, file$w, 53, 6, 995);
    			add_location(right0, file$w, 51, 4, 951);
    			set_custom_element_data(nav_bar0, "class", "svelte-1ofkzoq");
    			add_location(nav_bar0, file$w, 42, 2, 780);
    			add_location(b1, file$w, 59, 6, 1084);
    			add_location(left1, file$w, 58, 4, 1071);
    			attr_dev(middle1, "class", "svelte-1ofkzoq");
    			add_location(middle1, file$w, 62, 4, 1165);
    			add_location(button1, file$w, 68, 6, 1288);
    			attr_dev(button2, "id", "signup");
    			add_location(button2, file$w, 69, 6, 1318);
    			add_location(right1, file$w, 67, 4, 1274);
    			set_custom_element_data(nav_bar1, "class", "alternate svelte-1ofkzoq");
    			add_location(nav_bar1, file$w, 57, 2, 1039);
    			attr_dev(content, "class", "svelte-1ofkzoq");
    			add_location(content, file$w, 41, 0, 768);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, nav_bar0);
    			append_dev(nav_bar0, left0);
    			append_dev(left0, b0);
    			mount_component(icon0, b0, null);
    			append_dev(b0, t0);
    			append_dev(nav_bar0, t1);
    			append_dev(nav_bar0, middle0);
    			append_dev(middle0, input);
    			append_dev(nav_bar0, t2);
    			append_dev(nav_bar0, right0);
    			append_dev(right0, button0);
    			append_dev(right0, t4);
    			append_dev(right0, a);
    			append_dev(content, t6);
    			append_dev(content, nav_bar1);
    			append_dev(nav_bar1, left1);
    			append_dev(left1, b1);
    			mount_component(icon1, b1, null);
    			append_dev(b1, t7);
    			append_dev(nav_bar1, t8);
    			append_dev(nav_bar1, middle1);
    			append_dev(nav_bar1, t9);
    			append_dev(nav_bar1, right1);
    			append_dev(right1, button1);
    			append_dev(right1, t11);
    			append_dev(right1, button2);
    			insert_dev(target, t13, anchor);
    			mount_component(codeview, target, anchor);
    			current = true;
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon0.$$.fragment, local);
    			transition_in(icon1.$$.fragment, local);
    			transition_in(codeview.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon0.$$.fragment, local);
    			transition_out(icon1.$$.fragment, local);
    			transition_out(codeview.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_component(icon0);
    			destroy_component(icon1);
    			if (detaching) detach_dev(t13);
    			destroy_component(codeview, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$x.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$x($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("NavBar", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<NavBar> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ CodeView, Icon });
    	return [];
    }

    class NavBar$1 extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$x, create_fragment$x, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "NavBar",
    			options,
    			id: create_fragment$x.name
    		});
    	}
    }

    /* src/demos/Tabs.svelte generated by Svelte v3.30.0 */
    const file$x = "src/demos/Tabs.svelte";

    function get_each_context$9(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[3] = list[i];
    	child_ctx[5] = i;
    	return child_ctx;
    }

    function get_each_context_1$5(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[3] = list[i];
    	child_ctx[5] = i;
    	return child_ctx;
    }

    // (73:4) {#each panels as panel, i}
    function create_each_block_1$5(ctx) {
    	let a;
    	let t_value = /*panel*/ ctx[3].title + "";
    	let t;
    	let mounted;
    	let dispose;

    	function click_handler() {
    		return /*click_handler*/ ctx[2](/*i*/ ctx[5]);
    	}

    	const block = {
    		c: function create() {
    			a = element("a");
    			t = text(t_value);
    			attr_dev(a, "class", "svelte-j1ijok");
    			toggle_class(a, "active", /*panel*/ ctx[3].active);
    			add_location(a, file$x, 73, 6, 1404);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, a, anchor);
    			append_dev(a, t);

    			if (!mounted) {
    				dispose = listen_dev(a, "click", click_handler, false, false, false);
    				mounted = true;
    			}
    		},
    		p: function update(new_ctx, dirty) {
    			ctx = new_ctx;
    			if (dirty & /*panels*/ 1 && t_value !== (t_value = /*panel*/ ctx[3].title + "")) set_data_dev(t, t_value);

    			if (dirty & /*panels*/ 1) {
    				toggle_class(a, "active", /*panel*/ ctx[3].active);
    			}
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(a);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block_1$5.name,
    		type: "each",
    		source: "(73:4) {#each panels as panel, i}",
    		ctx
    	});

    	return block;
    }

    // (78:4) {#each panels as panel, i}
    function create_each_block$9(ctx) {
    	let panel;
    	let h1;
    	let t0_value = /*panel*/ ctx[3].title + "";
    	let t0;
    	let t1;
    	let p;
    	let t3;

    	const block = {
    		c: function create() {
    			panel = element("panel");
    			h1 = element("h1");
    			t0 = text(t0_value);
    			t1 = space();
    			p = element("p");
    			p.textContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\n        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate\n        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n        laborum.";
    			t3 = space();
    			add_location(h1, file$x, 79, 6, 1597);
    			add_location(p, file$x, 80, 6, 1629);
    			attr_dev(panel, "class", "svelte-j1ijok");
    			toggle_class(panel, "active", /*panel*/ ctx[3].active);
    			add_location(panel, file$x, 78, 6, 1555);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, panel, anchor);
    			append_dev(panel, h1);
    			append_dev(h1, t0);
    			append_dev(panel, t1);
    			append_dev(panel, p);
    			append_dev(panel, t3);
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*panels*/ 1 && t0_value !== (t0_value = /*panel*/ ctx[3].title + "")) set_data_dev(t0, t0_value);

    			if (dirty & /*panels*/ 1) {
    				toggle_class(panel, "active", /*panel*/ ctx[3].active);
    			}
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(panel);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block$9.name,
    		type: "each",
    		source: "(78:4) {#each panels as panel, i}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$y(ctx) {
    	let content;
    	let h1;
    	let t1;
    	let tabs0;
    	let a0;
    	let t3;
    	let a1;
    	let t5;
    	let a2;
    	let t7;
    	let h2;
    	let t9;
    	let tabs1;
    	let t10;
    	let panels_1;
    	let t11;
    	let codeview;
    	let current;
    	let each_value_1 = /*panels*/ ctx[0];
    	validate_each_argument(each_value_1);
    	let each_blocks_1 = [];

    	for (let i = 0; i < each_value_1.length; i += 1) {
    		each_blocks_1[i] = create_each_block_1$5(get_each_context_1$5(ctx, each_value_1, i));
    	}

    	let each_value = /*panels*/ ctx[0];
    	validate_each_argument(each_value);
    	let each_blocks = [];

    	for (let i = 0; i < each_value.length; i += 1) {
    		each_blocks[i] = create_each_block$9(get_each_context$9(ctx, each_value, i));
    	}

    	codeview = new CodeView({
    			props: {
    				source: "/code/Tabs",
    				notes: "code/Tabs.notes.html"
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			h1 = element("h1");
    			h1.textContent = "Basic Tabs";
    			t1 = space();
    			tabs0 = element("tabs");
    			a0 = element("a");
    			a0.textContent = "Tab1";
    			t3 = space();
    			a1 = element("a");
    			a1.textContent = "Tab2";
    			t5 = space();
    			a2 = element("a");
    			a2.textContent = "Tab3";
    			t7 = space();
    			h2 = element("h2");
    			h2.textContent = "Interactive Demo";
    			t9 = space();
    			tabs1 = element("tabs");

    			for (let i = 0; i < each_blocks_1.length; i += 1) {
    				each_blocks_1[i].c();
    			}

    			t10 = space();
    			panels_1 = element("panels");

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			t11 = space();
    			create_component(codeview.$$.fragment);
    			add_location(h1, file$x, 62, 2, 1226);
    			attr_dev(a0, "class", "active svelte-j1ijok");
    			add_location(a0, file$x, 65, 4, 1260);
    			attr_dev(a1, "class", "svelte-j1ijok");
    			add_location(a1, file$x, 66, 4, 1291);
    			attr_dev(a2, "class", "svelte-j1ijok");
    			add_location(a2, file$x, 67, 4, 1307);
    			attr_dev(tabs0, "class", "svelte-j1ijok");
    			add_location(tabs0, file$x, 64, 2, 1249);
    			add_location(h2, file$x, 70, 2, 1332);
    			attr_dev(tabs1, "class", "svelte-j1ijok");
    			add_location(tabs1, file$x, 71, 2, 1360);
    			add_location(panels_1, file$x, 76, 2, 1509);
    			attr_dev(content, "class", "svelte-j1ijok");
    			add_location(content, file$x, 61, 0, 1214);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, h1);
    			append_dev(content, t1);
    			append_dev(content, tabs0);
    			append_dev(tabs0, a0);
    			append_dev(tabs0, t3);
    			append_dev(tabs0, a1);
    			append_dev(tabs0, t5);
    			append_dev(tabs0, a2);
    			append_dev(content, t7);
    			append_dev(content, h2);
    			append_dev(content, t9);
    			append_dev(content, tabs1);

    			for (let i = 0; i < each_blocks_1.length; i += 1) {
    				each_blocks_1[i].m(tabs1, null);
    			}

    			append_dev(content, t10);
    			append_dev(content, panels_1);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].m(panels_1, null);
    			}

    			insert_dev(target, t11, anchor);
    			mount_component(codeview, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*panels, activate*/ 3) {
    				each_value_1 = /*panels*/ ctx[0];
    				validate_each_argument(each_value_1);
    				let i;

    				for (i = 0; i < each_value_1.length; i += 1) {
    					const child_ctx = get_each_context_1$5(ctx, each_value_1, i);

    					if (each_blocks_1[i]) {
    						each_blocks_1[i].p(child_ctx, dirty);
    					} else {
    						each_blocks_1[i] = create_each_block_1$5(child_ctx);
    						each_blocks_1[i].c();
    						each_blocks_1[i].m(tabs1, null);
    					}
    				}

    				for (; i < each_blocks_1.length; i += 1) {
    					each_blocks_1[i].d(1);
    				}

    				each_blocks_1.length = each_value_1.length;
    			}

    			if (dirty & /*panels*/ 1) {
    				each_value = /*panels*/ ctx[0];
    				validate_each_argument(each_value);
    				let i;

    				for (i = 0; i < each_value.length; i += 1) {
    					const child_ctx = get_each_context$9(ctx, each_value, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    					} else {
    						each_blocks[i] = create_each_block$9(child_ctx);
    						each_blocks[i].c();
    						each_blocks[i].m(panels_1, null);
    					}
    				}

    				for (; i < each_blocks.length; i += 1) {
    					each_blocks[i].d(1);
    				}

    				each_blocks.length = each_value.length;
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(codeview.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(codeview.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_each(each_blocks_1, detaching);
    			destroy_each(each_blocks, detaching);
    			if (detaching) detach_dev(t11);
    			destroy_component(codeview, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$y.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$y($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Tabs", slots, []);

    	let panels = [
    		{ title: "Panel 1", active: true },
    		{ title: "Panel 2", active: false },
    		{ title: "Panel 3", active: false }
    	];

    	const activate = index => {
    		panels.forEach((panel, i) => panel.active = index == i);
    		$$invalidate(0, panels); // for the svelte update
    	};

    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Tabs> was created with unknown prop '${key}'`);
    	});

    	const click_handler = i => activate(i);
    	$$self.$capture_state = () => ({ CodeView, Icon, panels, activate });

    	$$self.$inject_state = $$props => {
    		if ("panels" in $$props) $$invalidate(0, panels = $$props.panels);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [panels, activate, click_handler];
    }

    class Tabs$1 extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$y, create_fragment$y, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Tabs",
    			options,
    			id: create_fragment$y.name
    		});
    	}
    }

    /* src/demos/Calendar.svelte generated by Svelte v3.30.0 */
    const file$y = "src/demos/Calendar.svelte";

    function get_each_context$a(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[1] = list[i];
    	return child_ctx;
    }

    // (58:2) {#each make_dates() as date}
    function create_each_block$a(ctx) {
    	let date;
    	let t_value = /*date*/ ctx[1] + "";
    	let t;

    	const block = {
    		c: function create() {
    			date = element("date");
    			t = text(t_value);
    			attr_dev(date, "class", "svelte-1gt8gt4");
    			add_location(date, file$y, 58, 4, 1183);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, date, anchor);
    			append_dev(date, t);
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(date);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block$a.name,
    		type: "each",
    		source: "(58:2) {#each make_dates() as date}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$z(ctx) {
    	let content;
    	let calendar;
    	let month;
    	let t1;
    	let day0;
    	let day1;
    	let day2;
    	let day3;
    	let day4;
    	let day5;
    	let day6;
    	let t9;
    	let t10;
    	let codeview;
    	let current;
    	let each_value = /*make_dates*/ ctx[0]();
    	validate_each_argument(each_value);
    	let each_blocks = [];

    	for (let i = 0; i < each_value.length; i += 1) {
    		each_blocks[i] = create_each_block$a(get_each_context$a(ctx, each_value, i));
    	}

    	codeview = new CodeView({
    			props: {
    				source: "/code/Calendar",
    				notes: "/code/Calendar.notes.html"
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			calendar = element("calendar");
    			month = element("month");
    			month.textContent = "December";
    			t1 = space();
    			day0 = element("day");
    			day0.textContent = "Sun";
    			day1 = element("day");
    			day1.textContent = "Mon";
    			day2 = element("day");
    			day2.textContent = "Tue";
    			day3 = element("day");
    			day3.textContent = "Wed";
    			day4 = element("day");
    			day4.textContent = "Thu";
    			day5 = element("day");
    			day5.textContent = "Fri";
    			day6 = element("day");
    			day6.textContent = "Sat";
    			t9 = space();

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			t10 = space();
    			create_component(codeview.$$.fragment);
    			attr_dev(month, "class", "svelte-1gt8gt4");
    			add_location(month, file$y, 55, 2, 1023);
    			attr_dev(day0, "class", "svelte-1gt8gt4");
    			add_location(day0, file$y, 56, 2, 1049);
    			attr_dev(day1, "class", "svelte-1gt8gt4");
    			add_location(day1, file$y, 56, 16, 1063);
    			attr_dev(day2, "class", "svelte-1gt8gt4");
    			add_location(day2, file$y, 56, 30, 1077);
    			attr_dev(day3, "class", "svelte-1gt8gt4");
    			add_location(day3, file$y, 56, 44, 1091);
    			attr_dev(day4, "class", "svelte-1gt8gt4");
    			add_location(day4, file$y, 56, 58, 1105);
    			attr_dev(day5, "class", "svelte-1gt8gt4");
    			add_location(day5, file$y, 56, 72, 1119);
    			attr_dev(day6, "class", "svelte-1gt8gt4");
    			add_location(day6, file$y, 56, 86, 1133);
    			attr_dev(calendar, "class", "svelte-1gt8gt4");
    			add_location(calendar, file$y, 54, 2, 1010);
    			attr_dev(content, "class", "svelte-1gt8gt4");
    			add_location(content, file$y, 53, 0, 998);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, calendar);
    			append_dev(calendar, month);
    			append_dev(calendar, t1);
    			append_dev(calendar, day0);
    			append_dev(calendar, day1);
    			append_dev(calendar, day2);
    			append_dev(calendar, day3);
    			append_dev(calendar, day4);
    			append_dev(calendar, day5);
    			append_dev(calendar, day6);
    			append_dev(calendar, t9);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].m(calendar, null);
    			}

    			insert_dev(target, t10, anchor);
    			mount_component(codeview, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*make_dates*/ 1) {
    				each_value = /*make_dates*/ ctx[0]();
    				validate_each_argument(each_value);
    				let i;

    				for (i = 0; i < each_value.length; i += 1) {
    					const child_ctx = get_each_context$a(ctx, each_value, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    					} else {
    						each_blocks[i] = create_each_block$a(child_ctx);
    						each_blocks[i].c();
    						each_blocks[i].m(calendar, null);
    					}
    				}

    				for (; i < each_blocks.length; i += 1) {
    					each_blocks[i].d(1);
    				}

    				each_blocks.length = each_value.length;
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(codeview.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(codeview.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_each(each_blocks, detaching);
    			if (detaching) detach_dev(t10);
    			destroy_component(codeview, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$z.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$z($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Calendar", slots, []);

    	const make_dates = () => {
    		let days = [];

    		for (let i = 0; i < 31; i++) {
    			days.push(i);
    		}

    		return days;
    	};

    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Calendar> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ CodeView, Icon, make_dates });
    	return [make_dates];
    }

    class Calendar$1 extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$z, create_fragment$z, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Calendar",
    			options,
    			id: create_fragment$z.name
    		});
    	}
    }

    /* src/demos/Carousel.svelte generated by Svelte v3.30.0 */
    const file$z = "src/demos/Carousel.svelte";

    function get_each_context$b(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[1] = list[i];
    	return child_ctx;
    }

    // (83:4) {#each images as image}
    function create_each_block$b(ctx) {
    	let figure;
    	let img;
    	let img_src_value;
    	let t0;
    	let figcaption;
    	let t1;
    	let t2_value = /*image*/ ctx[1] + "";
    	let t2;

    	const block = {
    		c: function create() {
    			figure = element("figure");
    			img = element("img");
    			t0 = space();
    			figcaption = element("figcaption");
    			t1 = text("Image #");
    			t2 = text(t2_value);
    			attr_dev(img, "alt", "Stock photo");
    			if (img.src !== (img_src_value = holder(16 * 40, 9 * 40))) attr_dev(img, "src", img_src_value);
    			attr_dev(img, "class", "svelte-12uwa5s");
    			add_location(img, file$z, 84, 8, 1462);
    			attr_dev(figcaption, "class", "svelte-12uwa5s");
    			add_location(figcaption, file$z, 85, 8, 1527);
    			attr_dev(figure, "class", "svelte-12uwa5s");
    			toggle_class(figure, "active", /*image*/ ctx[1] === 1);
    			add_location(figure, file$z, 83, 6, 1416);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, figure, anchor);
    			append_dev(figure, img);
    			append_dev(figure, t0);
    			append_dev(figure, figcaption);
    			append_dev(figcaption, t1);
    			append_dev(figcaption, t2);
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*images*/ 1) {
    				toggle_class(figure, "active", /*image*/ ctx[1] === 1);
    			}
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(figure);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block$b.name,
    		type: "each",
    		source: "(83:4) {#each images as image}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$A(ctx) {
    	let content;
    	let h1;
    	let t1;
    	let carousel;
    	let t2;
    	let prev;
    	let icon0;
    	let t3;
    	let next;
    	let icon1;
    	let t4;
    	let codeview;
    	let current;
    	let each_value = /*images*/ ctx[0];
    	validate_each_argument(each_value);
    	let each_blocks = [];

    	for (let i = 0; i < each_value.length; i += 1) {
    		each_blocks[i] = create_each_block$b(get_each_context$b(ctx, each_value, i));
    	}

    	icon0 = new Icon({
    			props: { name: "arrow-left", size: "48" },
    			$$inline: true
    		});

    	icon1 = new Icon({
    			props: { name: "arrow-right", size: "48" },
    			$$inline: true
    		});

    	codeview = new CodeView({
    			props: {
    				source: "/code/Carousel",
    				notes: "/code/Carousel.notes.html"
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			h1 = element("h1");
    			h1.textContent = "Carousel";
    			t1 = space();
    			carousel = element("carousel");

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			t2 = space();
    			prev = element("prev");
    			create_component(icon0.$$.fragment);
    			t3 = space();
    			next = element("next");
    			create_component(icon1.$$.fragment);
    			t4 = space();
    			create_component(codeview.$$.fragment);
    			add_location(h1, file$z, 79, 2, 1350);
    			attr_dev(prev, "class", "svelte-12uwa5s");
    			add_location(prev, file$z, 88, 4, 1600);
    			attr_dev(next, "class", "svelte-12uwa5s");
    			add_location(next, file$z, 89, 4, 1654);
    			attr_dev(carousel, "class", "svelte-12uwa5s");
    			add_location(carousel, file$z, 81, 2, 1371);
    			attr_dev(content, "class", "svelte-12uwa5s");
    			add_location(content, file$z, 78, 0, 1338);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, h1);
    			append_dev(content, t1);
    			append_dev(content, carousel);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].m(carousel, null);
    			}

    			append_dev(carousel, t2);
    			append_dev(carousel, prev);
    			mount_component(icon0, prev, null);
    			append_dev(carousel, t3);
    			append_dev(carousel, next);
    			mount_component(icon1, next, null);
    			insert_dev(target, t4, anchor);
    			mount_component(codeview, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*images, holder*/ 1) {
    				each_value = /*images*/ ctx[0];
    				validate_each_argument(each_value);
    				let i;

    				for (i = 0; i < each_value.length; i += 1) {
    					const child_ctx = get_each_context$b(ctx, each_value, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    					} else {
    						each_blocks[i] = create_each_block$b(child_ctx);
    						each_blocks[i].c();
    						each_blocks[i].m(carousel, t2);
    					}
    				}

    				for (; i < each_blocks.length; i += 1) {
    					each_blocks[i].d(1);
    				}

    				each_blocks.length = each_value.length;
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon0.$$.fragment, local);
    			transition_in(icon1.$$.fragment, local);
    			transition_in(codeview.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon0.$$.fragment, local);
    			transition_out(icon1.$$.fragment, local);
    			transition_out(codeview.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			destroy_each(each_blocks, detaching);
    			destroy_component(icon0);
    			destroy_component(icon1);
    			if (detaching) detach_dev(t4);
    			destroy_component(codeview, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$A.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$A($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Carousel", slots, []);
    	let images = [1, 2, 3, 4, 5, 6, 7];
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Carousel> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ link, Icon, holder, CodeView, images });

    	$$self.$inject_state = $$props => {
    		if ("images" in $$props) $$invalidate(0, images = $$props.images);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [images];
    }

    class Carousel$1 extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$A, create_fragment$A, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Carousel",
    			options,
    			id: create_fragment$A.name
    		});
    	}
    }

    /* src/demos/GridOverGraphic.svelte generated by Svelte v3.30.0 */
    const file$A = "src/demos/GridOverGraphic.svelte";

    function create_fragment$B(ctx) {
    	let content;
    	let h10;
    	let t1;
    	let icecream;
    	let background;
    	let img;
    	let img_src_value;
    	let t2;
    	let overlay;
    	let one;
    	let h11;
    	let t4;
    	let p0;
    	let t6;
    	let two;
    	let h12;
    	let t8;
    	let p1;
    	let t10;
    	let three;
    	let h13;
    	let t12;
    	let p2;
    	let t14;
    	let codeview;
    	let current;

    	codeview = new CodeView({
    			props: {
    				source: "/code/GridOverGraphic",
    				notes: "/code/GridOverGraphic.notes.html"
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			content = element("content");
    			h10 = element("h1");
    			h10.textContent = "Grid Over Graphic";
    			t1 = space();
    			icecream = element("icecream");
    			background = element("background");
    			img = element("img");
    			t2 = space();
    			overlay = element("overlay");
    			one = element("one");
    			h11 = element("h1");
    			h11.textContent = "Do You Like Icecream?";
    			t4 = space();
    			p0 = element("p");
    			p0.textContent = "This square is placed over this image using a\n          CSS Grid.";
    			t6 = space();
    			two = element("two");
    			h12 = element("h1");
    			h12.textContent = "Icecream Rules";
    			t8 = space();
    			p1 = element("p");
    			p1.textContent = "Sometimes you want to put a graphic behind some creatively\n        organize text and panels.  You can do that with CSS grids.";
    			t10 = space();
    			three = element("three");
    			h13 = element("h1");
    			h13.textContent = "Bottom Left";
    			t12 = space();
    			p2 = element("p");
    			p2.textContent = "I don't know why I put that sphere there.";
    			t14 = space();
    			create_component(codeview.$$.fragment);
    			add_location(h10, file$A, 70, 2, 1170);
    			if (img.src !== (img_src_value = "/ice_cream_graphic.svg")) attr_dev(img, "src", img_src_value);
    			attr_dev(img, "class", "svelte-1c5ml3s");
    			add_location(img, file$A, 74, 4, 1232);
    			attr_dev(background, "class", "svelte-1c5ml3s");
    			add_location(background, file$A, 73, 4, 1215);
    			add_location(h11, file$A, 79, 8, 1322);
    			add_location(p0, file$A, 80, 8, 1361);
    			attr_dev(one, "class", "svelte-1c5ml3s");
    			add_location(one, file$A, 78, 6, 1308);
    			add_location(h12, file$A, 85, 6, 1474);
    			add_location(p1, file$A, 86, 6, 1504);
    			attr_dev(two, "class", "svelte-1c5ml3s");
    			add_location(two, file$A, 84, 6, 1462);
    			add_location(h13, file$A, 90, 6, 1666);
    			add_location(p2, file$A, 91, 6, 1693);
    			attr_dev(three, "class", "svelte-1c5ml3s");
    			add_location(three, file$A, 89, 6, 1652);
    			attr_dev(overlay, "class", "svelte-1c5ml3s");
    			add_location(overlay, file$A, 77, 4, 1292);
    			attr_dev(icecream, "class", "svelte-1c5ml3s");
    			add_location(icecream, file$A, 72, 2, 1200);
    			attr_dev(content, "class", "svelte-1c5ml3s");
    			add_location(content, file$A, 69, 0, 1158);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, content, anchor);
    			append_dev(content, h10);
    			append_dev(content, t1);
    			append_dev(content, icecream);
    			append_dev(icecream, background);
    			append_dev(background, img);
    			append_dev(icecream, t2);
    			append_dev(icecream, overlay);
    			append_dev(overlay, one);
    			append_dev(one, h11);
    			append_dev(one, t4);
    			append_dev(one, p0);
    			append_dev(overlay, t6);
    			append_dev(overlay, two);
    			append_dev(two, h12);
    			append_dev(two, t8);
    			append_dev(two, p1);
    			append_dev(overlay, t10);
    			append_dev(overlay, three);
    			append_dev(three, h13);
    			append_dev(three, t12);
    			append_dev(three, p2);
    			insert_dev(target, t14, anchor);
    			mount_component(codeview, target, anchor);
    			current = true;
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(codeview.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(codeview.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(content);
    			if (detaching) detach_dev(t14);
    			destroy_component(codeview, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$B.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$B($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("GridOverGraphic", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<GridOverGraphic> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ CodeView });
    	return [];
    }

    class GridOverGraphic$1 extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$B, create_fragment$B, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "GridOverGraphic",
    			options,
    			id: create_fragment$B.name
    		});
    	}
    }

    /* src/FAQ.svelte generated by Svelte v3.30.0 */

    const file$B = "src/FAQ.svelte";

    function create_fragment$C(ctx) {
    	let section;
    	let h1;
    	let t1;
    	let h20;
    	let t3;
    	let p0;
    	let t4;
    	let b0;
    	let t6;
    	let b1;
    	let t8;
    	let t9;
    	let p1;
    	let t10;
    	let b2;
    	let t12;
    	let b3;
    	let t14;
    	let b4;
    	let t16;
    	let b5;
    	let t18;
    	let t19;
    	let h21;
    	let t21;
    	let p2;
    	let t23;
    	let p3;
    	let t25;
    	let h22;
    	let t27;
    	let p4;
    	let t28;
    	let b6;
    	let t30;
    	let b7;
    	let t32;
    	let b8;
    	let t34;
    	let b9;
    	let t36;
    	let b10;
    	let t38;
    	let b11;
    	let t40;
    	let t41;
    	let p5;
    	let t42;
    	let b12;
    	let t44;
    	let b13;
    	let t46;
    	let b14;
    	let t48;
    	let b15;
    	let t50;
    	let b16;
    	let t52;
    	let t53;
    	let p6;
    	let t54;
    	let b17;
    	let t56;
    	let b18;
    	let t58;
    	let b19;
    	let t60;
    	let b20;
    	let t62;
    	let b21;
    	let t64;
    	let t65;
    	let h23;
    	let t67;
    	let p7;
    	let t68;
    	let b22;
    	let t70;
    	let b23;
    	let t72;
    	let b24;
    	let t74;
    	let t75;
    	let p8;
    	let t76;
    	let b25;
    	let t78;
    	let b26;
    	let t80;
    	let b27;
    	let t82;
    	let t83;
    	let h24;
    	let t85;
    	let p9;
    	let t87;
    	let h25;
    	let t89;
    	let p10;
    	let t90;
    	let a;
    	let t92;

    	const block = {
    		c: function create() {
    			section = element("section");
    			h1 = element("h1");
    			h1.textContent = "FAQ";
    			t1 = space();
    			h20 = element("h2");
    			h20.textContent = "Why did you do this?";
    			t3 = space();
    			p0 = element("p");
    			t4 = text("It started as an attempt to relearn modern CSS for myself so I can teach others.  As I did this I realized that most of the things I learned have been completely replaced with flexbox and grids, and if I just use those then CSS becomes much easier to understand. Specificity works as expected.  When I change a component with ");
    			b0 = element("b");
    			b0.textContent = "class";
    			t6 = text(" or ");
    			b1 = element("b");
    			b1.textContent = "id";
    			t8 = text(" it actually changes.  The layout flows correctly and is easier to create.  Nearly everything works better and is easier to understand.");
    			t9 = space();
    			p1 = element("p");
    			t10 = text("This website became a demonstration to others that ");
    			b2 = element("b");
    			b2.textContent = "layout";
    			t12 = text(" doesn't need ");
    			b3 = element("b");
    			b3.textContent = "div.class";
    			t14 = text(" structure, subverting ");
    			b4 = element("b");
    			b4.textContent = "ul/li";
    			t16 = text(" tags, and other CSS hacks.  You can use simple ");
    			b5 = element("b");
    			b5.textContent = "truly semantic";
    			t18 = text(" HTML and simple CSS to accomplish 90% of what you're doing today with more reliable results faster.");
    			t19 = space();
    			h21 = element("h2");
    			h21.textContent = "Why is this site in black and white?";
    			t21 = space();
    			p2 = element("p");
    			p2.textContent = "I used an entirely monochrome simplified design because I'm not a designer, and I want people to focus on the visual structure of each demo, not whether my use of Cornflower Blue was appropriate for a button.";
    			t23 = space();
    			p3 = element("p");
    			p3.textContent = "I'm also an experienced oil painter and a fundamental teaching in realist art is that color does not matter for visual comprehension. What matters most is the \"drawing\", or monochrome aspects of visual experience.  If you can't make something work in monochrome then no amount of color will help.  Make it visually understandable in monochrome and any color scheme you choose should work (barring a few rules about color perception's relationship to monochrome values).";
    			t25 = space();
    			h22 = element("h2");
    			h22.textContent = "What's wrong with classes?";
    			t27 = space();
    			p4 = element("p");
    			t28 = text("There's nothing wrong with classes in CSS. How they're used in recent CSS frameworks subverts the normal specificity rules making CSS unnecessarily difficult.  The original specificity rules put the base design of a component at the tag level, then a ");
    			b6 = element("b");
    			b6.textContent = "class";
    			t30 = text(" can be used to modify and extend the design, and an ");
    			b7 = element("b");
    			b7.textContent = "id";
    			t32 = text(" can make this even more specific.  In today's use of ");
    			b8 = element("b");
    			b8.textContent = "div.class";
    			t34 = text(" heavy markup you lose this ability to alter the design as needed where its used, and instead you have to resort to ");
    			b9 = element("b");
    			b9.textContent = "!important";
    			t36 = text(" and specificity hacking to change how something looks, or add more ");
    			b10 = element("b");
    			b10.textContent = "div";
    			t38 = text(" with more ");
    			b11 = element("b");
    			b11.textContent = "class";
    			t40 = text(".");
    			t41 = space();
    			p5 = element("p");
    			t42 = text("The other problem with ");
    			b12 = element("b");
    			b12.textContent = "div.class";
    			t44 = text(" is it's more difficult to debug problems with the layout. There's the obvious problem of debugging failures in layout through a forest of divs, but you're also relying on specificity that can come from anywhere in the cascade.  It's much more difficult to find exactly ");
    			b13 = element("b");
    			b13.textContent = "what";
    			t46 = text(" bit of CSS is overriding your local decisions.  If you've ever had to open the inspector in your browser to troll through CSS locations looking for the culprit then that's why.  If the base design decisions are at the tag level, then your local ");
    			b14 = element("b");
    			b14.textContent = "class";
    			t48 = text(" and ");
    			b15 = element("b");
    			b15.textContent = "id";
    			t50 = text(" specifics will work as expected.  You can also replace many uses of class as design modifiers with scoped CSS variables and reduce the use of ");
    			b16 = element("b");
    			b16.textContent = "div.class";
    			t52 = text(" even further.");
    			t53 = space();
    			p6 = element("p");
    			t54 = text("Finally, using ");
    			b17 = element("b");
    			b17.textContent = "div.class";
    			t56 = text(" heavy layout systems pollutes your markup with structure that's difficult to analyze and maintain.  When you focus on using ");
    			b18 = element("b");
    			b18.textContent = "truly";
    			t58 = text(" semantic named tags and follow specificity as intended then your HTML is lighter and easier to understand because it isn't full of ");
    			b19 = element("b");
    			b19.textContent = "div.grid.col-1.col-mx-auto";
    			t60 = text(" class rules that really have nothing to do with the actual meaning of that particular visual element.  With ");
    			b20 = element("b");
    			b20.textContent = "flexbox";
    			t62 = text(" and ");
    			b21 = element("b");
    			b21.textContent = "CSS grids";
    			t64 = text(" you don't need any layout divs, and can keep the HTML clean and semantic.  This also ends up being more flexible with less or the same effort as using a pre-made grid system full of divs.");
    			t65 = space();
    			h23 = element("h2");
    			h23.textContent = "Should we ban div.class?";
    			t67 = space();
    			p7 = element("p");
    			t68 = text("Hell no.  The current problem of ");
    			b22 = element("b");
    			b22.textContent = "too much";
    			t70 = text(" class based CSS is because of trends in recent years calling for everyone to irrationally ban some practice.  Remember when everyone decided tables were evil?  So then we banned tables and ");
    			b23 = element("b");
    			b23.textContent = "grids";
    			t72 = text(" completely?  Then nobody could do a layout without crazy tricks and JavaScript?  Nobody wants a repeat of the anti-tables \"semantic markup\" war, so please don't ban ");
    			b24 = element("b");
    			b24.textContent = "div.class";
    			t74 = text(".");
    			t75 = space();
    			p8 = element("p");
    			t76 = text("All this website does is demonstrate that you don't need ");
    			b25 = element("b");
    			b25.textContent = "so much div.class";
    			t78 = text(".  You can scrap a lot of what you're using now to do layout and go with clean HTML with flatter structure, then judiciously use ");
    			b26 = element("b");
    			b26.textContent = "div.class";
    			t80 = text(" as needed.  Treat ");
    			b27 = element("b");
    			b27.textContent = "div.class";
    			t82 = text(" like salt. Right now you're pouring a whole box of it on your HTML when a little bit makes it taste better.");
    			t83 = space();
    			h24 = element("h2");
    			h24.textContent = "Do these demos work on phones?";
    			t85 = space();
    			p9 = element("p");
    			p9.textContent = "They could but I haven't taken the time to make them adapt.  That may come in a later release.  Try it anyway\nas you may be surprised how well the layouts still work on smaller screens.";
    			t87 = space();
    			h25 = element("h2");
    			h25.textContent = "Can I suggest a challenge?";
    			t89 = space();
    			p10 = element("p");
    			t90 = text("Yes please.  If you find an example of a layout that you think is impossible with flexbox and CSS grids then tell me on ");
    			a = element("a");
    			a.textContent = "Twitter at @lzsthw";
    			t92 = text(" and I'll attempt a replica. My only requirement is that you also have to tell me what trick the challenge is using.  This is an exercise in replicating layouts, not reverse engineering devious hidden CSS tricks.  Also keep in mind that I am not invested in \"winning\" and only curious about the limits of flexbox and CSS grids.  If you find something I can't do, that means I found a useful limit to avoid.  It doesn't mean that we throw out all of flexbox and CSS grids so you can go back to the float-clear-div-class 1990s.");
    			attr_dev(h1, "class", "svelte-c8ddwn");
    			add_location(h1, file$B, 7, 2, 61);
    			add_location(section, file$B, 6, 0, 49);
    			add_location(h20, file$B, 10, 0, 86);
    			add_location(b0, file$B, 12, 329, 446);
    			add_location(b1, file$B, 12, 345, 462);
    			add_location(p0, file$B, 12, 0, 117);
    			add_location(b2, file$B, 15, 54, 667);
    			add_location(b3, file$B, 15, 81, 694);
    			add_location(b4, file$B, 15, 120, 733);
    			add_location(b5, file$B, 15, 180, 793);
    			add_location(p1, file$B, 15, 0, 613);
    			add_location(h21, file$B, 18, 0, 921);
    			add_location(p2, file$B, 19, 0, 967);
    			add_location(p3, file$B, 22, 0, 1187);
    			add_location(h22, file$B, 25, 0, 1666);
    			add_location(b6, file$B, 27, 254, 1957);
    			add_location(b7, file$B, 27, 319, 2022);
    			add_location(b8, file$B, 27, 382, 2085);
    			add_location(b9, file$B, 27, 514, 2217);
    			add_location(b10, file$B, 27, 599, 2302);
    			add_location(b11, file$B, 27, 620, 2323);
    			add_location(p4, file$B, 27, 0, 1703);
    			add_location(b12, file$B, 29, 26, 2368);
    			add_location(b13, file$B, 29, 312, 2654);
    			add_location(b14, file$B, 29, 569, 2911);
    			add_location(b15, file$B, 29, 586, 2928);
    			add_location(b16, file$B, 29, 738, 3080);
    			add_location(p5, file$B, 29, 0, 2342);
    			add_location(b17, file$B, 31, 18, 3134);
    			add_location(b18, file$B, 31, 159, 3275);
    			add_location(b19, file$B, 31, 303, 3419);
    			add_location(b20, file$B, 31, 445, 3561);
    			add_location(b21, file$B, 31, 464, 3580);
    			add_location(p6, file$B, 31, 0, 3116);
    			add_location(h23, file$B, 33, 0, 3790);
    			add_location(b22, file$B, 35, 36, 3861);
    			add_location(b23, file$B, 35, 241, 4066);
    			add_location(b24, file$B, 35, 419, 4244);
    			add_location(p7, file$B, 35, 0, 3825);
    			add_location(b25, file$B, 37, 60, 4327);
    			add_location(b26, file$B, 37, 213, 4480);
    			add_location(b27, file$B, 37, 248, 4515);
    			add_location(p8, file$B, 37, 0, 4267);
    			add_location(h24, file$B, 39, 0, 4645);
    			add_location(p9, file$B, 40, 0, 4685);
    			add_location(h25, file$B, 43, 0, 4879);
    			attr_dev(a, "href", "https://twitter.com/lzsthw");
    			add_location(a, file$B, 44, 123, 5038);
    			add_location(p10, file$B, 44, 0, 4915);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, section, anchor);
    			append_dev(section, h1);
    			insert_dev(target, t1, anchor);
    			insert_dev(target, h20, anchor);
    			insert_dev(target, t3, anchor);
    			insert_dev(target, p0, anchor);
    			append_dev(p0, t4);
    			append_dev(p0, b0);
    			append_dev(p0, t6);
    			append_dev(p0, b1);
    			append_dev(p0, t8);
    			insert_dev(target, t9, anchor);
    			insert_dev(target, p1, anchor);
    			append_dev(p1, t10);
    			append_dev(p1, b2);
    			append_dev(p1, t12);
    			append_dev(p1, b3);
    			append_dev(p1, t14);
    			append_dev(p1, b4);
    			append_dev(p1, t16);
    			append_dev(p1, b5);
    			append_dev(p1, t18);
    			insert_dev(target, t19, anchor);
    			insert_dev(target, h21, anchor);
    			insert_dev(target, t21, anchor);
    			insert_dev(target, p2, anchor);
    			insert_dev(target, t23, anchor);
    			insert_dev(target, p3, anchor);
    			insert_dev(target, t25, anchor);
    			insert_dev(target, h22, anchor);
    			insert_dev(target, t27, anchor);
    			insert_dev(target, p4, anchor);
    			append_dev(p4, t28);
    			append_dev(p4, b6);
    			append_dev(p4, t30);
    			append_dev(p4, b7);
    			append_dev(p4, t32);
    			append_dev(p4, b8);
    			append_dev(p4, t34);
    			append_dev(p4, b9);
    			append_dev(p4, t36);
    			append_dev(p4, b10);
    			append_dev(p4, t38);
    			append_dev(p4, b11);
    			append_dev(p4, t40);
    			insert_dev(target, t41, anchor);
    			insert_dev(target, p5, anchor);
    			append_dev(p5, t42);
    			append_dev(p5, b12);
    			append_dev(p5, t44);
    			append_dev(p5, b13);
    			append_dev(p5, t46);
    			append_dev(p5, b14);
    			append_dev(p5, t48);
    			append_dev(p5, b15);
    			append_dev(p5, t50);
    			append_dev(p5, b16);
    			append_dev(p5, t52);
    			insert_dev(target, t53, anchor);
    			insert_dev(target, p6, anchor);
    			append_dev(p6, t54);
    			append_dev(p6, b17);
    			append_dev(p6, t56);
    			append_dev(p6, b18);
    			append_dev(p6, t58);
    			append_dev(p6, b19);
    			append_dev(p6, t60);
    			append_dev(p6, b20);
    			append_dev(p6, t62);
    			append_dev(p6, b21);
    			append_dev(p6, t64);
    			insert_dev(target, t65, anchor);
    			insert_dev(target, h23, anchor);
    			insert_dev(target, t67, anchor);
    			insert_dev(target, p7, anchor);
    			append_dev(p7, t68);
    			append_dev(p7, b22);
    			append_dev(p7, t70);
    			append_dev(p7, b23);
    			append_dev(p7, t72);
    			append_dev(p7, b24);
    			append_dev(p7, t74);
    			insert_dev(target, t75, anchor);
    			insert_dev(target, p8, anchor);
    			append_dev(p8, t76);
    			append_dev(p8, b25);
    			append_dev(p8, t78);
    			append_dev(p8, b26);
    			append_dev(p8, t80);
    			append_dev(p8, b27);
    			append_dev(p8, t82);
    			insert_dev(target, t83, anchor);
    			insert_dev(target, h24, anchor);
    			insert_dev(target, t85, anchor);
    			insert_dev(target, p9, anchor);
    			insert_dev(target, t87, anchor);
    			insert_dev(target, h25, anchor);
    			insert_dev(target, t89, anchor);
    			insert_dev(target, p10, anchor);
    			append_dev(p10, t90);
    			append_dev(p10, a);
    			append_dev(p10, t92);
    		},
    		p: noop,
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(section);
    			if (detaching) detach_dev(t1);
    			if (detaching) detach_dev(h20);
    			if (detaching) detach_dev(t3);
    			if (detaching) detach_dev(p0);
    			if (detaching) detach_dev(t9);
    			if (detaching) detach_dev(p1);
    			if (detaching) detach_dev(t19);
    			if (detaching) detach_dev(h21);
    			if (detaching) detach_dev(t21);
    			if (detaching) detach_dev(p2);
    			if (detaching) detach_dev(t23);
    			if (detaching) detach_dev(p3);
    			if (detaching) detach_dev(t25);
    			if (detaching) detach_dev(h22);
    			if (detaching) detach_dev(t27);
    			if (detaching) detach_dev(p4);
    			if (detaching) detach_dev(t41);
    			if (detaching) detach_dev(p5);
    			if (detaching) detach_dev(t53);
    			if (detaching) detach_dev(p6);
    			if (detaching) detach_dev(t65);
    			if (detaching) detach_dev(h23);
    			if (detaching) detach_dev(t67);
    			if (detaching) detach_dev(p7);
    			if (detaching) detach_dev(t75);
    			if (detaching) detach_dev(p8);
    			if (detaching) detach_dev(t83);
    			if (detaching) detach_dev(h24);
    			if (detaching) detach_dev(t85);
    			if (detaching) detach_dev(p9);
    			if (detaching) detach_dev(t87);
    			if (detaching) detach_dev(h25);
    			if (detaching) detach_dev(t89);
    			if (detaching) detach_dev(p10);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$C.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$C($$self, $$props) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("FAQ", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<FAQ> was created with unknown prop '${key}'`);
    	});

    	return [];
    }

    class FAQ extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$C, create_fragment$C, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "FAQ",
    			options,
    			id: create_fragment$C.name
    		});
    	}
    }

    var routes = {
      "/": Home,
      "/demos": Demos,
      "/faq": FAQ,
      "/demos/login": Login$1,
      "/demos/tiles": Tiles$1,
      "/demos/modal": Modal,
      "/demos/cards": Cards$1,
      "/demos/panels": Panels$1,
      "/demos/google": Google$1,
      "/demos/twitter": Twitter$1,
      "/demos/youtube": Youtube$1,
      "/demos/instagram": Instagram$1,
      "/demos/pinterest": Pinterest$1,
      "/demos/navbar": NavBar$1,
      "/demos/tabs": Tabs$1,
      "/demos/calendar": Calendar$1,
      "/demos/carousel": Carousel$1,
      "/demos/gridovergraphic": GridOverGraphic$1,
      "/demos/xoracademy": XorAcademy,
      "/demos/xoracademy/watch": XorAcademyWatch,
      "*": NotFound,
    };

    /* src/components/Darkmode.svelte generated by Svelte v3.30.0 */
    const file$C = "src/components/Darkmode.svelte";

    // (26:0) {:else}
    function create_else_block$1(ctx) {
    	let span;
    	let icon;
    	let current;
    	let mounted;
    	let dispose;

    	icon = new Icon({
    			props: { name: "sunset", size: "32" },
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			span = element("span");
    			create_component(icon.$$.fragment);
    			add_location(span, file$C, 26, 2, 578);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, span, anchor);
    			mount_component(icon, span, null);
    			current = true;

    			if (!mounted) {
    				dispose = listen_dev(span, "click", /*click_handler_1*/ ctx[3], false, false, false);
    				mounted = true;
    			}
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(span);
    			destroy_component(icon);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_else_block$1.name,
    		type: "else",
    		source: "(26:0) {:else}",
    		ctx
    	});

    	return block;
    }

    // (22:0) {#if theme == 'dark'}
    function create_if_block$4(ctx) {
    	let span;
    	let icon;
    	let current;
    	let mounted;
    	let dispose;

    	icon = new Icon({
    			props: { name: "sunrise", size: "32" },
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			span = element("span");
    			create_component(icon.$$.fragment);
    			add_location(span, file$C, 22, 2, 485);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, span, anchor);
    			mount_component(icon, span, null);
    			current = true;

    			if (!mounted) {
    				dispose = listen_dev(span, "click", /*click_handler*/ ctx[2], false, false, false);
    				mounted = true;
    			}
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(span);
    			destroy_component(icon);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block$4.name,
    		type: "if",
    		source: "(22:0) {#if theme == 'dark'}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$D(ctx) {
    	let current_block_type_index;
    	let if_block;
    	let if_block_anchor;
    	let current;
    	const if_block_creators = [create_if_block$4, create_else_block$1];
    	const if_blocks = [];

    	function select_block_type(ctx, dirty) {
    		if (/*theme*/ ctx[0] == "dark") return 0;
    		return 1;
    	}

    	current_block_type_index = select_block_type(ctx);
    	if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);

    	const block = {
    		c: function create() {
    			if_block.c();
    			if_block_anchor = empty();
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			if_blocks[current_block_type_index].m(target, anchor);
    			insert_dev(target, if_block_anchor, anchor);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			let previous_block_index = current_block_type_index;
    			current_block_type_index = select_block_type(ctx);

    			if (current_block_type_index === previous_block_index) {
    				if_blocks[current_block_type_index].p(ctx, dirty);
    			} else {
    				group_outros();

    				transition_out(if_blocks[previous_block_index], 1, 1, () => {
    					if_blocks[previous_block_index] = null;
    				});

    				check_outros();
    				if_block = if_blocks[current_block_type_index];

    				if (!if_block) {
    					if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
    					if_block.c();
    				} else {
    					if_block.p(ctx, dirty);
    				}

    				transition_in(if_block, 1);
    				if_block.m(if_block_anchor.parentNode, if_block_anchor);
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(if_block);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(if_block);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if_blocks[current_block_type_index].d(detaching);
    			if (detaching) detach_dev(if_block_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$D.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$D($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("Darkmode", slots, []);

    	let { theme = localStorage.getItem("theme")
    	? localStorage.getItem("theme")
    	: "light" } = $$props;

    	const set_theme = () => {
    		document.documentElement.setAttribute("data-theme", theme);
    		localStorage.setItem("theme", theme);
    	};

    	const toggle = () => {
    		$$invalidate(0, theme = theme == "light" ? "dark" : "light");
    		set_theme();
    	};

    	onMount(() => {
    		set_theme();
    	});

    	const writable_props = ["theme"];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Darkmode> was created with unknown prop '${key}'`);
    	});

    	const click_handler = () => toggle();
    	const click_handler_1 = () => toggle();

    	$$self.$$set = $$props => {
    		if ("theme" in $$props) $$invalidate(0, theme = $$props.theme);
    	};

    	$$self.$capture_state = () => ({ Icon, onMount, theme, set_theme, toggle });

    	$$self.$inject_state = $$props => {
    		if ("theme" in $$props) $$invalidate(0, theme = $$props.theme);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [theme, toggle, click_handler, click_handler_1];
    }

    class Darkmode extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$D, create_fragment$D, safe_not_equal, { theme: 0 });

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Darkmode",
    			options,
    			id: create_fragment$D.name
    		});
    	}

    	get theme() {
    		throw new Error("<Darkmode>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set theme(value) {
    		throw new Error("<Darkmode>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}
    }

    /* src/App.svelte generated by Svelte v3.30.0 */
    const file$D = "src/App.svelte";

    function create_fragment$E(ctx) {
    	let header;
    	let nav0;
    	let a0;
    	let icon0;
    	let link_action;
    	let t0;
    	let ul0;
    	let li0;
    	let a1;
    	let link_action_1;
    	let t2;
    	let li1;
    	let a2;
    	let link_action_2;
    	let t4;
    	let main;
    	let router;
    	let t5;
    	let hr;
    	let t6;
    	let footer;
    	let nav1;
    	let a3;
    	let p;
    	let link_action_3;
    	let t8;
    	let ul1;
    	let li2;
    	let a4;
    	let icon1;
    	let t9;
    	let li3;
    	let a5;
    	let icon2;
    	let t10;
    	let li4;
    	let darkmode;
    	let current;
    	let mounted;
    	let dispose;

    	icon0 = new Icon({
    			props: { name: "trash-2", size: "64" },
    			$$inline: true
    		});

    	router = new Router({
    			props: { routes, restoreScrollState: true },
    			$$inline: true
    		});

    	icon1 = new Icon({
    			props: { name: "twitter", size: "32" },
    			$$inline: true
    		});

    	icon2 = new Icon({
    			props: { name: "instagram", size: "32" },
    			$$inline: true
    		});

    	darkmode = new Darkmode({ $$inline: true });

    	const block = {
    		c: function create() {
    			header = element("header");
    			nav0 = element("nav");
    			a0 = element("a");
    			create_component(icon0.$$.fragment);
    			t0 = space();
    			ul0 = element("ul");
    			li0 = element("li");
    			a1 = element("a");
    			a1.textContent = "Demos";
    			t2 = space();
    			li1 = element("li");
    			a2 = element("a");
    			a2.textContent = "FAQ";
    			t4 = space();
    			main = element("main");
    			create_component(router.$$.fragment);
    			t5 = space();
    			hr = element("hr");
    			t6 = space();
    			footer = element("footer");
    			nav1 = element("nav");
    			a3 = element("a");
    			p = element("p");
    			p.textContent = "Copyright (C) Zed A. Shaw. All rights reserved.";
    			t8 = space();
    			ul1 = element("ul");
    			li2 = element("li");
    			a4 = element("a");
    			create_component(icon1.$$.fragment);
    			t9 = space();
    			li3 = element("li");
    			a5 = element("a");
    			create_component(icon2.$$.fragment);
    			t10 = space();
    			li4 = element("li");
    			create_component(darkmode.$$.fragment);
    			attr_dev(a0, "href", "/");
    			add_location(a0, file$D, 28, 4, 423);
    			attr_dev(a1, "href", "/demos");
    			add_location(a1, file$D, 32, 10, 513);
    			add_location(li0, file$D, 32, 6, 509);
    			attr_dev(a2, "href", "/faq");
    			add_location(a2, file$D, 33, 10, 564);
    			add_location(li1, file$D, 33, 6, 560);
    			add_location(ul0, file$D, 31, 4, 498);
    			add_location(nav0, file$D, 27, 2, 413);
    			attr_dev(header, "class", "svelte-khlxmc");
    			add_location(header, file$D, 26, 0, 402);
    			attr_dev(main, "class", "svelte-khlxmc");
    			add_location(main, file$D, 38, 0, 631);
    			add_location(hr, file$D, 42, 0, 698);
    			add_location(p, file$D, 46, 6, 752);
    			attr_dev(a3, "href", "/");
    			add_location(a3, file$D, 45, 4, 724);
    			attr_dev(a4, "href", "https://twitter.com/lzsthw");
    			add_location(a4, file$D, 49, 10, 835);
    			add_location(li2, file$D, 49, 6, 831);
    			attr_dev(a5, "href", "https://instagram.com/zedshaw");
    			add_location(a5, file$D, 50, 10, 925);
    			add_location(li3, file$D, 50, 6, 921);
    			add_location(li4, file$D, 51, 6, 1012);
    			add_location(ul1, file$D, 48, 4, 820);
    			attr_dev(nav1, "class", "svelte-khlxmc");
    			add_location(nav1, file$D, 44, 2, 714);
    			attr_dev(footer, "class", "svelte-khlxmc");
    			add_location(footer, file$D, 43, 0, 703);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, header, anchor);
    			append_dev(header, nav0);
    			append_dev(nav0, a0);
    			mount_component(icon0, a0, null);
    			append_dev(nav0, t0);
    			append_dev(nav0, ul0);
    			append_dev(ul0, li0);
    			append_dev(li0, a1);
    			append_dev(ul0, t2);
    			append_dev(ul0, li1);
    			append_dev(li1, a2);
    			insert_dev(target, t4, anchor);
    			insert_dev(target, main, anchor);
    			mount_component(router, main, null);
    			insert_dev(target, t5, anchor);
    			insert_dev(target, hr, anchor);
    			insert_dev(target, t6, anchor);
    			insert_dev(target, footer, anchor);
    			append_dev(footer, nav1);
    			append_dev(nav1, a3);
    			append_dev(a3, p);
    			append_dev(nav1, t8);
    			append_dev(nav1, ul1);
    			append_dev(ul1, li2);
    			append_dev(li2, a4);
    			mount_component(icon1, a4, null);
    			append_dev(ul1, t9);
    			append_dev(ul1, li3);
    			append_dev(li3, a5);
    			mount_component(icon2, a5, null);
    			append_dev(ul1, t10);
    			append_dev(ul1, li4);
    			mount_component(darkmode, li4, null);
    			current = true;

    			if (!mounted) {
    				dispose = [
    					action_destroyer(link_action = link.call(null, a0)),
    					action_destroyer(link_action_1 = link.call(null, a1)),
    					action_destroyer(link_action_2 = link.call(null, a2)),
    					action_destroyer(link_action_3 = link.call(null, a3))
    				];

    				mounted = true;
    			}
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(icon0.$$.fragment, local);
    			transition_in(router.$$.fragment, local);
    			transition_in(icon1.$$.fragment, local);
    			transition_in(icon2.$$.fragment, local);
    			transition_in(darkmode.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(icon0.$$.fragment, local);
    			transition_out(router.$$.fragment, local);
    			transition_out(icon1.$$.fragment, local);
    			transition_out(icon2.$$.fragment, local);
    			transition_out(darkmode.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(header);
    			destroy_component(icon0);
    			if (detaching) detach_dev(t4);
    			if (detaching) detach_dev(main);
    			destroy_component(router);
    			if (detaching) detach_dev(t5);
    			if (detaching) detach_dev(hr);
    			if (detaching) detach_dev(t6);
    			if (detaching) detach_dev(footer);
    			destroy_component(icon1);
    			destroy_component(icon2);
    			destroy_component(darkmode);
    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$E.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$E($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots("App", slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<App> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ Router, routes, link, Icon, Darkmode });
    	return [];
    }

    class App extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$E, create_fragment$E, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "App",
    			options,
    			id: create_fragment$E.name
    		});
    	}
    }

    const app = new App({
    	target: document.body,
    	props: {
    		name: 'world'
    	}
    });

    return app;

}());
//# sourceMappingURL=bundle.js.map