<!-- svg used in the project -->
<svg viewBox="0 0 100 100" style="display: none;">
    <!-- fish icon -->
    <symbol
        id="fish">
        <g
            transform="translate(50 50)"
            fill="none"
            stroke="hsl(0, 0%, 0%)"
            stroke-width="1.5">
            <!-- add a background with the outline of the body of the fish and benefiting from the color set on the svg -->
            <path
                transform="translate(-5 -8)"
                stroke="none"
                fill="currentColor"
                d="M -44 0 c 30 -50 70 -10 75 0 c -5 10 -45 50 -75 0"
                stroke-dasharray="105 10 75">
            </path>

            <!-- draw the actual fish, using the stroke-dasharray property to segment the lines where needed -->
            <path
                stroke-dasharray="0 11 72 10"
                d="M 18 0 a 35 35 0 0 1 25 -16 v 32 a 35 35 0 0 1 -25 -16">
            </path>

            <g>
                <path
                    d="M -10 -25 l 25 -8 l -3 15">
                </path>
                <path
                    transform="scale(1 -1)"
                    d="M -10 -25 l 25 -8 l -3 15">
                </path>
            </g>

            <path
                d="M -44 0 c 30 -50 70 -10 75 0 c -5 10 -45 50 -75 0"
                stroke-dasharray="105 10 75">
            </path>

            <g>
                <path
                    d="M -18 -23 q 10 15 5 35">
                </path>
                <circle
                    fill="hsl(0, 0%, 0%)"
                    stroke="none"
                    r="2"
                    cx="-25"
                    cy="-8">
                </circle>
            </g>
        </g>
    </symbol>

    <!-- anchor icon -->
    <symbol
        id="anchor">
        <g
            transform="translate(50 50) rotate(30)"
            stroke="currentColor"
            stroke-width="10"
            fill="none">
            <circle
                cx="0"
                cy="-30"
                r="10"
                >
            </circle>
            <path
                stroke-linejoin="round"
                stroke-linecap="round"
                d="M 0 -15 v 50 q 20 -10 30 -20 v -7.5 M 0 -15 v 50 q -20 -10 -30 -20 v -7.5">
            </path>
            <path
                stroke-linejoin="round"
                stroke-linecap="round"
                d="M -5 -12 h 10">
            </path>
            <path
                stroke-linejoin="round"
                stroke-linecap="round"
                d="M -10 -2 h 20">
            </path>
        </g>
    </symbol>
</svg>

<!-- html structure
div, wrapping container
    form, allowing to search for fish' names
        input, type search
        label, with the sprite animated to match the state of the input
    section, showing the list of matching results

-->

<div class="app">
    <form class="app__search">
        <input type="text" id="search" name="search" placeholder="Search fish by name" />
        <label for="search">
            <svg id="sprite" role="img" viewBox="0 0 21 31" width="42" height="63"><path d="M44 0h10v1H44z"/><path fill="#E8D8A7" d="M43 1h12v10H43z"/><path d="M43 1h1v1h-1zM54 1h1v1h-1zM42 2h1v8h-1zM43 10h1v1h-1zM44 11h10v1H44zM54 10h1v1h-1zM55 2h1v8h-1zM48 2h2v5h-2zM48 8h2v2h-2zM47 12h2v1h-2zM48 13h1v1h-1z"/><path fill="#ABA071" d="M44 16h9v4h-9z"/><path d="M45 15h7v1h-7zM44 16h1v1h-1zM52 16h1v1h-1zM43 17h1v1h-1zM53 17h1v1h-1zM43 18h1v1h-1z"/><path fill="#E8D8A7" d="M52 18h1v1h-1z"/><path d="M53 18h2v1h-2zM42 19h3v1h-3z"/><path fill="#E8D8A7" d="M51 19h4v1h-4z"/><path d="M55 19h1v1h-1zM42 20h7v1h-7z"/><path fill="#E8D8A7" d="M49 20h4v1h-4z"/><path d="M53 20h2v1h-2zM61 20h2v1h-2zM42 21h6v1h-6z"/><path fill="#E8D8A7" d="M48 21h5v1h-5z"/><path d="M51 21h1v1h-1zM53 21h1v1h-1zM59 21h2v1h-2zM43 22h2v1h-2z"/><path fill="#E8D8A7" d="M45 22h8v1h-8z"/><path d="M47 22h1v1h-1zM51 22h1v1h-1zM53 22h1v1h-1zM57 22h2v1h-2zM44 23h1v1h-1z"/><path fill="#E8D8A7" d="M45 23h8v1h-8z"/><path d="M53 23h1v1h-1zM55 23h2v1h-2zM45 24h2v1h-2z"/><path fill="#E8D8A7" d="M47 24h5v1h-5z"/><path d="M52 24h3v1h-3zM44 25h2v1h-2z"/><path fill="#ABA071" d="M46 25h2v1h-2z"/><path d="M48 25h7v1h-7zM44 26h3v1h-3z"/><path fill="#ABA071" d="M47 26h3v1h-3z"/><path d="M50 26h1v1h-1z"/><path fill="#E8D8A7" d="M51 26h2v1h-2z"/><path d="M53 26h1v1h-1zM44 27h1v1h-1z"/><path fill="#ABA071" d="M45 27h1v1h-1z"/><path d="M46 27h5v1h-5z"/><path fill="#E8D8A7" d="M51 27h2v1h-2z"/><path d="M53 27h1v1h-1zM44 28h3v1h-3z"/><path fill="#ABA071" d="M47 28h2v1h-2z"/><path d="M49 28h4v1h-4zM45 29h1v1h-1z"/><path fill="#ABA071" d="M46 29h4v1h-4z"/><path d="M50 29h1v1h-1zM46 30h4v1h-4z"/><g><path fill="#ABA071" d="M23 16h9v4h-9z"/><path d="M24 15h7v1h-7zM23 16h1v1h-1zM31 16h1v1h-1zM22 17h1v1h-1zM32 17h1v1h-1zM22 18h1v1h-1z"/><path fill="#E8D8A7" d="M31 18h1v1h-1z"/><path d="M32 18h2v1h-2zM21 19h3v1h-3z"/><path fill="#E8D8A7" d="M30 19h4v1h-4z"/><path d="M34 19h1v1h-1zM21 20h7v1h-7z"/><path fill="#E8D8A7" d="M28 20h4v1h-4z"/><path d="M32 20h2v1h-2zM40 20h2v1h-2zM21 21h6v1h-6z"/><path fill="#E8D8A7" d="M27 21h5v1h-5z"/><path d="M30 21h1v1h-1zM32 21h1v1h-1zM38 21h2v1h-2zM22 22h2v1h-2z"/><path fill="#E8D8A7" d="M24 22h8v1h-8z"/><path d="M26 22h1v1h-1zM30 22h1v1h-1zM32 22h1v1h-1zM36 22h2v1h-2zM23 23h1v1h-1z"/><path fill="#E8D8A7" d="M24 23h8v1h-8z"/><path d="M32 23h1v1h-1zM34 23h2v1h-2zM24 24h2v1h-2z"/><path fill="#E8D8A7" d="M26 24h5v1h-5z"/><path d="M31 24h3v1h-3zM23 25h2v1h-2z"/><path fill="#ABA071" d="M25 25h2v1h-2z"/><path d="M27 25h7v1h-7zM23 26h3v1h-3z"/><path fill="#ABA071" d="M26 26h3v1h-3z"/><path d="M29 26h1v1h-1z"/><path fill="#E8D8A7" d="M30 26h2v1h-2z"/><path d="M32 26h1v1h-1zM23 27h1v1h-1z"/><path fill="#ABA071" d="M24 27h1v1h-1z"/><path d="M25 27h5v1h-5z"/><path fill="#E8D8A7" d="M30 27h2v1h-2z"/><path d="M32 27h1v1h-1zM23 28h3v1h-3z"/><path fill="#ABA071" d="M26 28h2v1h-2z"/><path d="M28 28h4v1h-4zM24 29h1v1h-1z"/><path fill="#ABA071" d="M25 29h4v1h-4z"/><path d="M29 29h1v1h-1zM25 30h4v1h-4z"/></g><g><path fill="#ABA071" d="M2 16h9v4H2z"/><path d="M3 15h7v1H3zM2 16h1v1H2zM10 16h1v1h-1zM1 17h1v1H1zM11 17h1v1h-1zM1 18h1v1H1z"/><path fill="#E8D8A7" d="M10 18h1v1h-1z"/><path d="M11 18h2v1h-2zM0 19h3v1H0z"/><path fill="#E8D8A7" d="M9 19h4v1H9z"/><path d="M13 19h1v1h-1zM0 20h7v1H0z"/><path fill="#E8D8A7" d="M7 20h4v1H7z"/><path d="M11 20h2v1h-2zM0 21h6v1H0z"/><path fill="#E8D8A7" d="M6 21h5v1H6z"/><path d="M9 21h1v1H9zM11 21h1v1h-1zM1 22h2v1H1z"/><path fill="#E8D8A7" d="M3 22h8v1H3z"/><path d="M5 22h1v1H5zM9 22h1v1H9zM11 22h1v1h-1zM2 23h1v1H2z"/><path fill="#E8D8A7" d="M3 23h8v1H3z"/><path d="M11 23h1v1h-1zM1 24h1v1H1z"/><path fill="#ABA071" d="M2 24h1v1H2z"/><path d="M3 24h2v1H3z"/><path fill="#E8D8A7" d="M5 24h5v1H5z"/><path d="M10 24h1v1h-1zM1 25h1v1H1z"/><path fill="#ABA071" d="M2 25h2v1H2z"/><path d="M4 25h1v1H4zM5 25h5v1H5zM1 26h1v1H1z"/><path fill="#ABA071" d="M2 26h1v1H2z"/><path d="M3 26h1v1H3z"/><path fill="#E8D8A7" d="M4 26h2v1H4z"/><path d="M6 26h2v1H6zM1 27h1v1H1z"/><path fill="#ABA071" d="M2 27h1v1H2z"/><path d="M3 27h1v1H3z"/><path fill="#E8D8A7" d="M4 27h2v1H4z"/><path d="M6 27h2v1H6zM2 28h4v1H2z"/><path fill="#ABA071" d="M6 28h2v1H6z"/><path d="M8 28h1v1H8zM3 29h1v1H3z"/><path fill="#ABA071" d="M4 29h4v1H4z"/><path d="M8 29h1v1H8zM4 30h4v1H4z"/></g></svg>
        </label>
    </form>

    <section class="app__results">
        <!-- the results are grouped in article elements and structured as follows
            svg, fish icon
            a, forwarding toward the wiki page
                heading, fish' name
                svg, anchor icon

            the elements are added through the script according to the input element's value
        -->
    </section>
</div>