[
  {
    "path": ".github/workflows/static.yml",
    "content": "# Simple workflow for deploying static content to GitHub Pages\nname: Deploy static content to Pages\n\non:\n  # Runs on pushes targeting the default branch\n  push:\n    branches: [\"main\"]\n\n  # Allows you to run this workflow manually from the Actions tab\n  workflow_dispatch:\n\n# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages\npermissions:\n  contents: read\n  pages: write\n  id-token: write\n\n# Allow one concurrent deployment\nconcurrency:\n  group: \"pages\"\n  cancel-in-progress: true\n\njobs:\n  # Single deploy job since we're just deploying\n  deploy:\n    environment:\n      name: github-pages\n      url: ${{ steps.deployment.outputs.page_url }}\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v4 # Updated to v4\n      - name: Setup Pages\n        uses: actions/configure-pages@v4 # Updated to v4\n      - name: Upload artifact\n        uses: actions/upload-pages-artifact@v3 # Updated to v3\n        with:\n          # Upload entire repository\n          path: '.'\n      - name: Deploy to GitHub Pages\n        id: deployment\n        uses: actions/deploy-pages@v4 # Updated to v4"
  },
  {
    "path": ".gitignore",
    "content": "### ignore IDE specific folders ###\n.vscode\n.idea\n\n### ignore MacOS specific files ###\n.DS_Store"
  },
  {
    "path": "CODE_OF_CONDUCT.md",
    "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participation in our\ncommunity a harassment-free experience for everyone, regardless of age, body\nsize, visible or invisible disability, ethnicity, sex characteristics, gender\nidentity and expression, level of experience, education, socio-economic status,\nnationality, personal appearance, race, religion, or sexual identity\nand orientation.\n\nWe pledge to act and interact in ways that contribute to an open, welcoming,\ndiverse, inclusive, and healthy community.\n\n## Our Standards\n\nExamples of behavior that contributes to a positive environment for our\ncommunity include:\n\n* Demonstrating empathy and kindness toward other people\n* Being respectful of differing opinions, viewpoints, and experiences\n* Giving and gracefully accepting constructive feedback\n* Accepting responsibility and apologizing to those affected by our mistakes,\n  and learning from the experience\n* Focusing on what is best not just for us as individuals, but for the\n  overall community\n\nExamples of unacceptable behavior include:\n\n* The use of sexualized language or imagery, and sexual attention or\n  advances of any kind\n* Trolling, insulting or derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or email\n  address, without their explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n  professional setting\n\n## Enforcement Responsibilities\n\nCommunity leaders are responsible for clarifying and enforcing our standards of\nacceptable behavior and will take appropriate and fair corrective action in\nresponse to any behavior that they deem inappropriate, threatening, offensive,\nor harmful.\n\nCommunity leaders have the right and responsibility to remove, edit, or reject\ncomments, commits, code, wiki edits, issues, and other contributions that are\nnot aligned to this Code of Conduct, and will communicate reasons for moderation\ndecisions when appropriate.\n\n## Scope\n\nThis Code of Conduct applies within all community spaces, and also applies when\nan individual is officially representing the community in public spaces.\nExamples of representing our community include using an official e-mail address,\nposting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported to the community leaders responsible for enforcement.\nAll complaints will be reviewed and investigated promptly and fairly.\n\nAll community leaders are obligated to respect the privacy and security of the\nreporter of any incident.\n\n## Enforcement Guidelines\n\nCommunity leaders will follow these Community Impact Guidelines in determining\nthe consequences for any action they deem in violation of this Code of Conduct:\n\n### 1. Correction\n\n**Community Impact**: Use of inappropriate language or other behavior deemed\nunprofessional or unwelcome in the community.\n\n**Consequence**: A private, written warning from community leaders, providing\nclarity around the nature of the violation and an explanation of why the\nbehavior was inappropriate. A public apology may be requested.\n\n### 2. Warning\n\n**Community Impact**: A violation through a single incident or series\nof actions.\n\n**Consequence**: A warning with consequences for continued behavior. No\ninteraction with the people involved, including unsolicited interaction with\nthose enforcing the Code of Conduct, for a specified period of time. This\nincludes avoiding interactions in community spaces as well as external channels\nlike social media. Violating these terms may lead to a temporary or\npermanent ban.\n\n### 3. Temporary Ban\n\n**Community Impact**: A serious violation of community standards, including\nsustained inappropriate behavior.\n\n**Consequence**: A temporary ban from any sort of interaction or public\ncommunication with the community for a specified period of time. No public or\nprivate interaction with the people involved, including unsolicited interaction\nwith those enforcing the Code of Conduct, is allowed during this period.\nViolating these terms may lead to a permanent ban.\n\n### 4. Permanent Ban\n\n**Community Impact**: Demonstrating a pattern of violation of community\nstandards, including sustained inappropriate behavior,  harassment of an\nindividual, or aggression toward or disparagement of classes of individuals.\n\n**Consequence**: A permanent ban from any sort of public interaction within\nthe community.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage],\nversion 2.0, available at\nhttps://www.contributor-covenant.org/version/2/0/code_of_conduct.html.\n\nCommunity Impact Guidelines were inspired by [Mozilla's code of conduct\nenforcement ladder](https://github.com/mozilla/diversity).\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see the FAQ at\nhttps://www.contributor-covenant.org/faq. Translations are available at\nhttps://www.contributor-covenant.org/translations.\n"
  },
  {
    "path": "Game.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n\n<head>\n    <link href=\"https://allfont.net/allfont.css?fonts=ninja-naruto\" rel=\"stylesheet\" type=\"text/css\" />\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css\"\n        integrity=\"sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l\" crossorigin=\"anonymous\">\n    <link rel=\"stylesheet\" href=\"css/style.css\" type=\"text/css\">\n    <link href=\"https://fonts.cdnfonts.com/css/ninja-naruto\" rel=\"stylesheet\">\n\n    <link\n        href=\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.6qtY7eooQBTfiSVjtrLrGQHaEj%26pid%3DApi&f=1\"\n        rel=\"icon\" type=\"image/jpeg\">\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\">\n    <link rel=\"icon\" type=\"image/png\" href=\"Images/favicon.png\">\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Open+Sans:ital@1&display=swap\" rel=\"stylesheet\">\n    <link rel=\"stylesheet\" href=\"./css/Game.css\">\n    <link rel=\"stylesheet\" href=\"css/index.css\">\n    <link href=\"css/translate.css\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" />\n    <title>Naruto</title>\n</head>\n<style>\n    .vid {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        text-align: center;\n        background: rgba(0, 0, 0, 0.5);\n        color: white;\n        font-size: 30px;\n        position: relative;\n        overflow: hidden;\n        min-height: 50vh;\n    }\n\n    .videosrc {\n        position: absolute;\n        z-index: -1;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        min-width: 100%;\n        min-height: 100%;\n    }\n</style>\n\n<body class=\"light-mode\">\n\n    <a href=\"#\" class=\"to-top\">\n        <i class=\"fa fa-arrow-up\"></i>\n    </a>\n    <figure class=\"sky\"></figure>\n    <div class=\"loader \">\n\n        <header>\n            <nav class=\" sticky navbar  navbar-expand-lg navbar-light\" style=\"height: 60px; padding:5px 5px 5px 30px;\">\n                <img src=\"adi image/naruto-advenimiento-los-animes-cortos-2.png\" style=\"max-height: 100%; width: auto;\">\n                <!-- <a class=\"navbar-brand brand1 ml-4\" href=\"#\" style=\"color: beige;\">Naruto</a> -->\n\n\n                <div class=\"search\">\n                    <div class=\"icon\"></div>\n                    <div class=\"input\">\n                        <input type=\"text\" placeholder=\"search\" id=\"mysearch\" oninput=\"filterCards()\">\n                    </div>\n\n                    <span class=\"clear\" onclick=\"clearSearch()\"></span>\n                </div>\n                <button class=\"navbar-toggler\" class=\"menu-btn\" type=\"button\" data-toggle=\"collapse\"\n                    data-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\"\n                    aria-label=\"Toggle navigation\">\n                    <span class=\"navbar-toggler-icon\"></span>\n                </button>\n\n                <div class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\">\n                    <ul class=\"navbar-nav mr-auto\">\n                        <li class=\"nav-item active mx-4\">\n                            <a class=\"nav-link link\" href=\"./index.html\">Home</a>\n                        </li>\n                        <li class=\"nav-item mx-4\">\n                            <a class=\"link nav-link \" href=\"./about.html\">About</a>\n                        </li>\n                        <li class=\"nav-item mx-4\">\n                            <a class=\"link nav-link \" href=\"./contact.html\">Contact</a>\n                        </li>\n                        <li class=\"nav-item mx-4\">\n                            <a class=\"link nav-link \" href=\"./Game.html\">Game</a>\n                        </li>\n                        <div class=\"dark_lang\">\n                            <li>\n                                <div>\n                                    <button onclick=\"darkmode()\" class=\"toggle-mode darkmodebutton\" id=\"toggler\">🌙\n                                        Dark</button>\n                                </div>\n                            </li>\n                            <li class=\"nav-item mx-4\">\n                                <div id=\"google_translate_element\"></div>\n                                <script>\n                                    function googleTranslateElementInit() {\n                                        new google.translate.TranslateElement({\n                                            pageLanguage: 'en',\n                                            autoDisplay: 'true',\n                                            layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL\n                                        }, 'google_translate_element');\n                                    }\n                                </script>\n                                <script\n                                    src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>\n                            </li>\n                        </div>\n                        <li class=\"nav-item mx-4\">\n                            <audio id=\"nyan\" src=\"./sound/naruto.mp3\" preload=\"metadata\" type=\"audio/mpeg\">\n                                Your browser does not support the audio element.\n                            </audio>\n                            <a class=\"btn\" id=\"nyan-btn\">play / pause <img src=\"./adi image/sound.png\"\n                                    class=\"soundicon\">\n                                <script src=\"./audio.js\"></script>\n                            </a>\n                        </li>\n                    </ul>\n\n                </div>\n            </nav>\n\n        </header>\n\n        <!-- header video -->\n        <div class=\"vid\">\n\n            <a href=\"#\"><img src=\"adi image/naruto-shippuden.png\" style=\"width: 600px;\" class=\"logo\"></a>\n\n            <video autoplay loop muted class=\"videosrc\">\n                <source src=\"adi image/naruto - Made with Clipchamp.mp4\" type=\"video/mp4\">\n            </video>\n        </div>\n\n\n        <!-- header video end -->\n        <main>\n\n            <div class=\"chardiv \">\n                <img class=\"heroimg good\" src=\"adi image/Naruto-Uzumaki-No-Background.png\" alt=\"\">\n                <img class=\"heroimg2 good\" src=\"adi image/png-image.png\" alt=\"\">\n                <img class=\"vilimg evil\" src=\"adi image/uchiha_madara___png___by_anvmadara_dewr6zj-pre.png\" alt=\"\">\n                <img class=\"vilimg2 evil\" src=\"adi image/d383ajh-c063f3bf-1787-4484-a75e-5bd8a8892a86.png\" alt=\"\">\n                <h1 class=\"chars\">Game Section</h1>\n            </div>\n            <!DOCTYPE html>\n            <div class=\"game-body\">\n            <h1 class=\"game-h1\">Naruto Character Guessing Game</h1>\n            <p class=\"game-p\">Guess the Naruto character by answering hints!</p>\n            <h2 class=\"game-h2\" id=\"high-score\">Highest Score : 0</h2>\n            <h3  class=\"game-h3\" id=\"score\">Score : 0</h3>\n            <button  class=\"game-button\" id=\"start\" onclick=\"startGame()\">Start Game</button>\n            <p  class=\"game-p\" id=\"hint\"></p>\n            <input  class=\"game-input\"  type=\"text\" id=\"guessInput\">\n            <button class=\"game-button\" id=\"stop\" onclick=\"checkAnswer()\">Submit Guess</button>\n            <div  class=\"game-div\" id=\"imageContainer\"></div>\n            <p class=\"game-p\" id=\"message\"></p>\n        </div>\n\n        </main>\n\n\n\n        <audio src=\"./sound/naruto.mp3\"></audio>\n\n        <footer class=\"footer\">\n            Developed and Designed By <span id=\"idblink\" onclick=\"tap()\" style=\"cursor: pointer;\"><u>Vikhyat\n                    Singh</u></span> | ©\n            All Rights Reserved\n            <h5>Follow Me on : </h5>\n            <div class=\"icon\">\n                <a href=\"https://facebook.com/vikhyatsingh123/\" class=\"fa fa-facebook\" target=\"_blank\"></a>\n                <a href=\"#\" class=\"fa fa-twitter\"></a>\n                <a href=\"https://github.com/vikhyatsingh123/\" class=\"fa fa-github\" target=\"_blank\"></a>\n                <a href=\"https://www.linkedin.com/in/vikhyat-singh-337777197/\" class=\"fa fa-linkedin\"\n                    target=\"_blank\"></a>\n                <a href=\"https://www.instagram.com/vikhyat552/\" class=\"fa fa-instagram\" target=\"_blank\"></a>\n            </div>\n        </footer>\n        <script src=\"Game.js\"></script>\n        <script>\n            function tap() {\n                const link = document.getElementById('idblink')\n                window.location.href = \"https://github.com/vikhyatsingh123\"\n            }\n        </script>\n        <!-- <footer>\n            <nav class=\"navbar navbar-expand-lg navbar-light nav1\">\n                <p class=\"mx-auto text-light font-weight-lighter\">&copy Developed By - <a\n                        href=\"https://github.com/vikhyatsingh123\">Vikhyat Singh</a></p>\n            </nav>\n        </footer> -->\n\n\n\n        <script src=\"js/sound.js\"></script>\n        <script src=\"https://code.jquery.com/jquery-3.5.1.slim.min.js\"\n            integrity=\"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj\" crossorigin=\"anonymous\">\n            </script>\n        <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js\"\n            integrity=\"sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns\" crossorigin=\"anonymous\">\n\n            </script>\n\n        <script src=\"js/searchbar.js\"></script>\n        <script src=\"js/scrollEffect.js\"></script>\n        <script src=\"js/lazyload.js\"></script>\n\n        <script src=\"js/scrolltotop.js\"></script>\n\n        <script src=\"js/switch-toggle.js\"></script>\n\n        <script>\n\n            /* ------- Scroll To Top Button -------*/\n\n            const toTop = document.querySelector(\".to-top\");\n            window.addEventListener(\"scroll\", () => {\n\n                if (window.pageYOffset > 400) {\n                    toTop.classList.add(\"active\");\n                } else {\n                    toTop.classList.remove(\"active\");\n                }\n\n            });\n\n        </script>\n\n\n        <script>\n            function darkmode() {\n                // console.log(\"hello\");\n\n                var element2 = document.querySelector(\"body\");\n                const body = document.body;\n                body.classList.toggle(\"light-mode\");\n                body.classList.toggle(\"dark-mode\");\n\n                if (element2.classList.contains(\"light-mode\")) {\n\n                    document.querySelector(\"#toggler\").innerHTML = \"🌞 Light\"\n                }\n                else {\n\n                    document.querySelector(\"#toggler\").innerHTML = \"🌙 Dark\";\n                }\n            }\n        </script>\n\n        <script>\n            function filterCards() {\n                var input, filter, cards, card, title, i, txtValue;\n                input = document.getElementById('mysearch');\n                filter = input.value.toUpperCase();\n                cards = document.getElementsByClassName('flip-card');\n\n                for (i = 0; i < cards.length; i++) {\n                    card = cards[i];\n                    title = card.querySelector('.card-title');\n                    txtValue = title.textContent || title.innerText;\n\n                    if (txtValue.toUpperCase().indexOf(filter) > -1) {\n                        card.style.display = '';\n                    } else {\n                        card.style.display = 'none';\n                    }\n                }\n            }\n            function clearSearch() {\n                document.getElementById('mysearch').value = '';\n                filterCards(); // Clearing the search should show all cards\n            }\n        </script>\n</body>\n\n</html>"
  },
  {
    "path": "Game.js",
    "content": "//data\nconst characters = [\n    {\n        name: [\"Naruto\", \"Naruto Uzumaki\", \"Uzumaki Naruto\"],\n        hints: [\n            \"A child born during a time of conflict and upheaval in the ninja world.\",\n            \"Sought to realize peace, believing in achieving it through pain and suffering.\",\n            \"Became a beacon of hope and understanding for many, inspiring change through unwavering determination.\",\n            \"Stood against former comrades, challenging their ideals and seeking to break the cycle of hatred.\",\n            \"Become hokage is his dream.\"\n        ],\n        image: \"./Images/naruto_ai.jpg\"\n    },\n    {\n        name: [\"Sasuke\", \"Sasuke Uchiha\", \"Uchiha Sasuke\"],\n        hints: [\n            \"Bearer of the Uchiha name, veiled in mystery and tragedy.\",\n            \"Possesses a compelling Sharingan, a mirror of his brother's power.\",\n            \"Haunted by the shadows of a dark past, fostering vengeance.\",\n            \"Torn between duty, family ties, and a pursuit for retribution.\",\n            \"A skilled wielder of Chidori, channeling lightning's might.\"\n        ],\n        image: \"./Images/sasuke_ai.jpg\"\n    },\n    {\n        name: [\"Sakura\", \"Sakura Haruno\", \"Haruno Sakura\"],\n        hints: [\n            \"A female ninja adept in medical techniques, rising during a turbulent era\",\n            \"Possesses remarkable strength and healing abilities\",\n            \"Grew from a young, ambitious girl into a powerful force within her village\",\n            \"Has exceptional chakra control\",\n            \"Early rivalry and competition with a close friend\"\n        ],\n        image: \"./Images/sakura.jpg\"\n    },\n    {\n        name: [\"Kakashi\", \"Kakashi Hatake\", \"Hatake Kakashi\"],\n        hints: [\n            \"The theme of loss, legacy, and redemption is strongly associated with this character\",\n            \"This character is known for his proficiency in using the Sharingan\",\n            \"Chidori user\",\n            \"Part of team 7\",\n            \"He is recognized for his silver hair\"\n        ],\n        image: \"./Images/Kakashi_Hatake.png\"\n    },\n    {\n        name: [\"Jiraiya\"],\n        hints: [\n            \"A teacher leaving behind a significant legacy for the future.\",\n            \"Holds a special bond with a former teammate\",\n            \"Summons otherworldly allies\",\n            \"Part of an esteemed trio\",\n            \"pervy\"\n        ],\n        image: \"./Images/287665-jiraiya_1.jpg\"\n    },\n    {\n        name: [\"Orochimaru\"],\n        hints: [\n            \"Formerly of the Hidden Leaf Village\",\n            \"Wants a body for more power\",\n            \"Former member of the Legendary trio\",\n            \"Uses snake-related jutsu\",\n            \"Seeks immortality\"\n        ],\n        image: \"./Images/orochimaru.jpg\"\n    },\n    {\n        name: [\"Hinata\", \"Hinata Hyuga\", \"Hyuga Hinata\"],\n        hints: [\n            \"Member of the Hyuga clan\",\n            \"Byakugan user\",\n            \"Develops the Gentle Fist technique\",\n            \"Has a gentle disposition\",\n            \"Has a crush on Naruto\"\n        ],\n        image: \"./Images/hinata_hyuga.jpg\"\n    },\n    {\n        name: [\"Shikamaru\", \"Shikamaru Nara\", \"Nara Shikamaru\"],\n        hints: [\n            \"Lazy but highly intelligent\",\n            \"Strategic thinker\",\n            \"Part of Team 10\",\n            \"Shadow Manipulation Jutsu user\",\n            \"Becomes a Chunin during the Chunin Exams\"\n        ],\n        image: \"./Images/shikamaru.jpg\"\n    },\n    {\n        name: [\"Gaara\"],\n        hints: [\n            \"Jinchuriki\",\n            \"Had a traumatic childhood\",\n            \"Initially an antagonist\",\n            \"from the Hidden Sand Village\",\n            \"Has control over sand\" \n        ],\n        image: \"./Images/gaara.jpg\"\n    },\n    {\n        name: [\"Rock Lee\", \"Lee\", \"Rock\"],\n        hints: [\n            \"Taijutsu specialist\",\n            \"Believes in hard work over natural talent\",\n            \"Wears green jumpsuit\",\n            \"Cannot use ninjutsu or genjutsu\",\n            \"Disciple of Might Guy\",\n        ],\n        image: \"./Images/Rock-Lee.jpg\"\n    },\n    {\n        name: [\"Neji\", \"Neji Hyuga\", \"Hyuga Neji\"],\n        hints: [\n            \"Member of the Hyuga clan\",\n            \"Byakugan user\",\n            \"Develops the Gentle Fist technique\",\n            \"Fate determined by destiny\",\n            \"Initially holds a grudge against Hinata\"\n        ],\n        image: \"./Images/neji-hyuga.jpg\"\n    },\n    {\n        name: [\"Tenten\"],\n        hints: [\n            \"Weapon specialist\",\n            \"Part of Team Guy\",\n            \"Proficient in various ninja tools\",\n            \"Uses summoning scrolls\",\n            \"Aspires to be like legendary weaponsmiths\"\n        ],\n        image: \"./Images/Tenten.jpg\"\n    },\n    {\n        name: [\"Kiba\", \"Kiba Inuzuka\", \"Inuzuka Kiba\"],\n        hints: [\n            \"Member of the Inuzuka clan\",\n            \"Uses beast-like taijutsu\",\n            \"Has enhanced sense of smell\",\n            \"Has a dog companion\",\n            \"Part of Team 8\"\n        ],\n        image: \"./Images/kiba inuzuka.jpg\"\n    },\n    {\n        name: [\"Shino\", \"Shino Aburame\", \"Aburame Shino\"],\n        hints: [\n            \"Member of the Aburame clan\",\n            \"Uses insects as weapons\",\n            \"Has a stoic personality\",\n            \"Part of Team 8\",\n            \"Masters the Parasitic Giant Beetle Jutsu\"\n        ],\n        image: \"./Images/Shino Aburame.jpg\"\n    },\n    {\n        name: [\"Ino\", \"Ino Yamanaka\", \"Yamanaka Ino\"],\n        hints: [\n            \"Uses her family's clan techniques\",\n            \"Has a rivalry with a close friend\",\n            \"Part of Team 10\",\n            \"Has mind-transfer jutsu\",\n            \"Works at a flower shop\"\n        ],\n        image: \"./Images/1701241-ino.jpg\"\n    },\n    {\n        name: [\"Choji\", \"Choji Akimichi\", \"Akimichi Choji\"],\n        hints: [\n            \"Part of Team 10\",\n            \"Has a love for food\",\n            \"Uses Human Bullet Tank jutsu\",\n            \"Member of the Akimichi clan\",\n            \"Struggles with self-confidence\"\n        ],\n        image: \"./Images/choji.jpg\"\n    },\n    {\n        name: [\"Tsunade\"],\n        hints: [\n            \"Has incredible strength\",\n            \"Master of medical ninjutsu\",\n            \"Has a fear of blood\",\n            \"Legendary Sannin\",\n            \"Fifth Hokage\"\n        ],\n        image: \"./Images/Tsunadexx.png\"\n    },\n    {\n        name: [\"Jugo\"],\n        hints: [\n            \"Possesses Sage Transformation\",\n            \"Has the ability to absorb natural energy\",\n            \"Has a volatile and unpredictable nature\",\n            \"Cursed with uncontrollable rage\",\n            \"Part of Sasuke's team\"\n        ],\n        image: \"./Images/Jugo.png\"\n    },\n    {\n        name: [\"Suigetsu\"],\n        hints: [\n            \"Swordsman\",\n            \"Wants to collect all the swords\",\n            \"Desires to reform the Seven Ninja Swordsmen\",\n            \"Can turn his body into liquid\",\n            \"Part of Sasuke's team\"\n        ],\n        image: \"./Images/Suigetsu.jpeg\"\n    },\n    {\n        name: [\"Karin\"],\n        hints: [\n            \"Part of Sasuke's team\",\n            \"Has a past with Orochimaru\",\n            \"Fiercely loyal to Sasuke\",\n            \"Has sensory abilities\",\n            \"Has healing abilities\"\n        ],\n        image: \"./Images/Karin.png\"\n    },\n    {\n        name: [\"Itachi\", \"Itachi Uchiha\", \"Uchiha Itachi\"],\n        hints: [ \n            \"Former ANBU member\",\n            \"Give life for village\",\n            \"Has the Mangekyo Sharingan\",\n            \"Certain Someone\",\n            \"Massacred the Uchiha clan\"\n        ],\n        image: \"./Images/itachi-uchiha-naruto.jpg\"\n    },\n    {\n        name: [\"Kisame\"],\n        hints: [\n            \"Swordsman\",\n            \"Partnered with Itachi\",\n            \"Member of the Akatsuki\",\n            \"Has shark-like features\",\n            \"Uses Samehada as his weapon\"\n        ],\n        image: \"./Images/kisame_hoshigaki.jpg\"\n    },\n    {\n        name: [\"Pain\", \"Nagato\", \"Yahiko\"],\n        hints: [\n            \"member of the Akatsuki\",\n            \"Former student of Jiraiya\",\n            \"Possesses the Rinnegan\",\n            \"Believes in achieving peace\",\n            \"Uses the Six Paths of Pain technique\"\n        ],\n        image: \"./Images/1688202-nagato_six_paths_of__pain.jpg\"\n    },\n    {\n        name: [\"Konan\"],\n        hints: [\n            \"member of the Akatsuki\",\n            \"Former student of Jiraiya\",\n            \"Devoted to Yahiko's ideals\",\n            \"Childhood friend of Yahiko\",\n            \"Uses paper-based jutsu\",\n        ],\n        image: \"./Images/Konan.jpg\"\n    },\n    {\n        name: [\"Deidara\"],\n        hints: [\n            \"Member of the Akatsuki\",\n            \"Fights using long-range techniques\",\n            \"Artistic approach to battles\",\n            \"Uses explosive clay as a weapon\",\n            \"Has mouths on his palms\",\n           \n        ],\n        image: \",/Images/deidara69.jpg\"\n    },\n    {\n        name: [\"Sai\"],\n        hints: [\n            \"Part of Team 7\",\n            \"Uses ink-based jutsu\",\n            \"Initially lacks emotions\",\n            \"Skilled in espionage\",\n            \"Joins Team 7 after Sasuke's departure\"\n        ],\n        image: \"./Images/Sai_Infobox.png\"\n    },\n    {\n        name: [\"Yamato\"],\n        hints: [\n            \"An ANBU captain\",\n            \"Has Wood Style jutsu\",\n            \"Trained to suppress Nine-Tails' chakra in Naruto\",\n            \"Assigned to Team 7 as a replacement for Kakashi\",\n            \"Uses Hashirama Senju's cells\"\n        ],\n        image: \"./Images/326748-yamato.jpg\"\n    },\n    {\n        name: [\"Kurenai\", \"Kurenai Yuhi\", \"Yuhi Kurenai\"],\n        hints: [\n            \"Genjutsu specialist\",\n            \"Part of Team 8\",\n            \"Has a child with Asuma\",\n            \"Trains Hinata in genjutsu\",\n            \"Initially has a romantic interest in Asuma\"\n        ],\n        image: \"./Images/KurenaiYuhi.jpg\"\n    },\n    {\n        name: [\"Asuma\", \"Asuma Sarutobi\", \"Sarutobi Asuma\"],\n        hints: [\n            \"Son of the Hokage\",\n            \"Part of Team 10\",\n            \"Wields trench knives\",\n            \"Has a child with Kurenai\",\n            \"Trains Shikamaru in shogi\"\n        ],\n        image: \"./Images/322897-asuma_sarutobi.jpg\"\n    },\n    {\n        name: [\"Iruka\", \"Iruka Umino\", \"Umino Iruka\"],\n        hints: [\n            \"Academy instructor\",\n            \"Cares for Naruto like a father figure\",\n            \"Survivor of the Nine-Tails attack\",\n            \"Kind-hearted and understanding\",\n            \"Helps Naruto graduate from the Academy\"\n        ],\n        image: \"./Images/Iruka-Umino.jpeg\"\n    },\n    {\n        name: [\"Zabuza\"],\n        hints: [\n            \"Demon of the Hidden Mist\",\n            \"Carries a massive sword\",\n            \"Hired as a mercenary\",\n            \"Has a strong bond with Haku\",\n            \"Fights Kakashi during the Land of Waves arc\"\n        ],\n        image: \"./Images/zabuza.jpg\"\n    },\n    {\n        name: [\"Haku\"],\n        hints: [\n            \"Has ice-based kekkei genkai\",\n            \"Assists Zabuza\",\n            \"Seems delicate but is a skilled fighter\",\n            \"Feels a strong loyalty to Zabuza\",\n            \"Has tragic past\"\n        ],\n        image: \"./Images/Casual_Haku.png\"\n    }\n];\n\n//Game\nlet currentCharacter;\nlet score = 0;\nlet highestScore = 0;\nlet attemptCount = 0;\n\nfunction startGame() {\n    document.getElementById('score').innerText = `Score : ${score}`;\n    document.getElementById('message').textContent = \"\";\n    document.getElementById('imageContainer').innerHTML = \"<div></div>\";\n    attemptCount = 0;\n    const randomIndex = Math.floor(Math.random() * characters.length);\n    currentCharacter = characters[randomIndex];\n    console.log(currentCharacter);\n    document.getElementById('hint').textContent = `Hint 1: ${currentCharacter.hints[0]}`;\n}\nfunction checkAnswer() {\n    const guess = document.getElementById('guessInput').value.toLowerCase();\n    console.log(guess);\n    if (currentCharacter.name.some((el) => (el.toLowerCase() == guess))) {\n        document.getElementById(\"start\").innerText = \"Continue Playing\";\n        score += (25 - (attemptCount * 5));\n        highestScore = Math.max(highestScore, score);\n        document.getElementById('high-score').innerText = `Highest Score : ${highestScore}`;\n        document.getElementById('score').innerText = `Score : ${score}`;\n        document.getElementById('message').textContent = \"Congratulations! You guessed it right!\";\n        const characterImage = document.createElement(\"img\");\n        characterImage.src = currentCharacter.image;\n        characterImage.id = \"game-img\";\n        document.getElementById('imageContainer').appendChild(characterImage);\n        document.getElementById('hint').textContent = '';\n    } else {\n        attemptCount++;\n        if (attemptCount >= 5) {\n            document.getElementById('message').textContent = `Sorry! You've run out of attempts. The correct answer is ${currentCharacter.name[0]}`;\n            highestScore = Math.max(highestScore, score);\n            score = 0;\n            document.getElementById('score').innerText = `Score : ${score}`;\n            document.getElementById('high-score').innerText = `Highest Score : ${highestScore}`;\n            document.getElementById(\"start\").innerText = \"Start Game\";\n            document.getElementById('hint').textContent = '';\n        } else {\n            const hintNumber = attemptCount + 1;\n            document.getElementById('hint').textContent = `Hint ${hintNumber}: ${currentCharacter.hints[hintNumber - 1]}`;\n            document.getElementById('message').textContent = \"Wrong answer! Try again.\";\n        }\n    }\n    document.getElementById('guessInput').value = '';\n}\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2026 vikhyat singh\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "\n\nHacktoberfest, in its 10th year, is a month-long celebration of open source software run by DigitalOcean. It is a great opportunity for everyone, from seasoned developers to students and code newbies, from technical writers to UX designers, to contribute to open source communities and develop your skills, with the perks of winning limited edition items. You can do this in a variety of ways:\n\n* Prepare and share your project for collaboration\n* Contribute to the betterment of a project via pull requests\n* Organize an event\n* Mentor others\n* Donate directly to open source projects\n\n<br>\n<br>\n\n\n# Naruto-Shippuden\n<img width=\"2295\"  height=\"504\" alt=\"series image\" src=\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwallpapercave.com%2Fwp%2Fwp3170365.jpg&f=1&nofb=1\">\n\nThere is no doubt that most  of our childhood was spent watching anime, especially Naruto; we have seen and experienced it all. With Hacktoberfest 2025 coming up and being one of the people who would participate for the very first time, I decided to create this repository that's actually a very basic web-page that let the user view and add their favourite characters.\n\nYou can find all types of characters on https://www.giantbomb.com/naruto-uzumaki/3005-790/friends/ and on https://www.giantbomb.com/naruto-uzumaki/3005-790/enemies/\n\n# Contents of the Webpage\n\n1. index.html - Contains the content of the main/home page.\n2. index.css -  Contains the styling given to the  home page.\n3. about.html - Contains a little information about me.\n\n# What can you contribute?\n\nThere is always something to contribute to a project, whether you are a novice or a veteran. In this project, you can add your favorite character as a card to the website! Or maybe you didn't like the line that you are reading right now and want to change that. Sure! Why not?\n\n# How can you contribute?\nTo contribute in Hacktoberfest2025, checkout the given link and win hacktoberfest digital kits ...\nhttps://hacktoberfest.com/\n\n\nAnd That's It!\nFollow these steps to make your very first Pull request.\n\n# But what if I don't know how to add cards? :(\n\nNot everyone is aware of every tool present in the world no matter how easy or complex it is. It's also not necessary to know each and every tool out there. Use the code below to add your own card!\n\n<b>Code -</b> \n\n                <!-- Hero [character name] card start-->\n                <div class=\"flip-card good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <h2 class=\"card-title\">[name of character]</h2>\n                            <img data-src=[image-link] alt=[name of character] height=\"300px\" width=\"300px\" class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">[Main description about character]</p>\n                            <p>[some more description about character]</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Hero [character name] card end-->\n\n                  <!-- Villain [character name] card start-->\n                <div class=\"flip-card evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <h2 class=\"card-title\">[name of character]</h2>\n                            <img data-src=[image-link] alt=[name of character] height=\"300px\" width=\"300px\" class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">[Main description about character]</p>\n                            <p>[some more description about character]</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Villain [character name] card end-->\n\nNOTE: add image to the Images folder if not present already, and then provide the src in the img tag.\n\nCopy this code and paste it into the index.html file to make your changes. Try and test it on your own system and then create a Pull request. You can adjust height of image of the character so that it will fit in the card.\n\n\n# Congratulations!\n\nCongratulation! You just made your first pull request, and if it gets merged, you can view it using the Link provided above!\n\n# Our Amazing Contributors ⭐\n\n<a href=\"https://github.com/vikhyatsingh123/Naruto-Shippuden/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=vikhyatsingh123/Naruto-Shippuden\" />\n</a>\n\n"
  },
  {
    "path": "about.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css\"\n        integrity=\"sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l\" crossorigin=\"anonymous\">\n    <link rel=\"stylesheet\" href=\"css/style.css\" type=\"text/css\">\n    <link href=\"https://fonts.googleapis.com/css2?family=Righteous&display=swap\" rel=\"stylesheet\" />\n    <link rel=\"stylesheet\" href=\"https://use.fontawesome.com/releases/v5.4.1/css/all.css\"\n        integrity=\"sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz\" crossorigin=\"anonymous\" />\n    <link rel=\"icon\" type=\"image/png\" href=\"Images/favicon.png\">\n    <title>Naruto-About</title>\n    <link rel=\"shortcut icon\" href=\"./Images/favicon.ico\" />\n    <link rel=\"stylesheet\" href=\"css/index.css\">\n    <link rel=\"stylesheet\" href=\"css/contact.css\">\n    <link href=\"css/translate.css\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" />\n    <link\n    rel=\"stylesheet\"\n    href=\"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css\"\n  />\n</head>\n\n<style>\n    .img1{\n        position: absolute;\n        left: 0;\n        bottom:0;\n    }\n    .img2{\n        position: absolute;\n        right: 0;\n        bottom:0;\n    }\n</style>\n<body class=\"light-mode\">\n    <header>\n        <nav class=\" animate__animated animate__fadeInDown navbar fixed-top navbar-expand-lg navbar-light\" style=\"height: 60px; padding:5px 5px 5px 30px;\">\n\n            <img src=\"adi image/naruto-advenimiento-los-animes-cortos-2.png\"  style=\"max-height: 100%; width: auto;\">\n            <!-- <a class=\"navbar-brand brand1 ml-4\" href=\"#\" style=\"color: beige;\">Naruto</a> -->\n\n\n           \n\n                <span class=\"clear\" onclick=\"document.getElementById('mysearch').value = ' '\"></span>\n            </div>\n            <button class=\"navbar-toggler\" class=\"menu-btn\" type=\"button\" data-toggle=\"collapse\"\n                data-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\"\n                aria-label=\"Toggle navigation\">\n                <span class=\"navbar-toggler-icon\"></span>\n            </button>\n\n            <div class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\">\n                <ul class=\"navbar-nav mr-auto\">\n                    <li class=\"nav-item  mx-4\">\n                        <a class=\"nav-link link\" href=\"./index.html\" >Home</a>\n\n                    </li>\n                     <li class=\"nav-item mx-4\">\n                            <a class=\"link nav-link \" href=\"./about.html\" >About</a>\n                        </li>\n                        <li class=\"nav-item mx-4\">\n                            <a class=\"link nav-link \" href=\"./contact.html\" >Contact</a>\n                        </li>\n                        <li class=\"nav-item mx-4\">\n                            <a class=\"link nav-link \" href=\"./Game.html\" >Game</a>\n                        </li>\n                    <div class=\"dark_lang\">\n                        <li>\n                            <div>\n                                <button onclick=\"darkmode()\" class=\"toggle-mode darkmodebutton\" id=\"toggler\">🌙\n                                    Dark</button>\n                            </div>\n                        </li>\n                        <li class=\"nav-item mx-4\">\n                        <div id=\"google_translate_element\"></div>\n                        <script>\n                            function googleTranslateElementInit() {\n                            new google.translate.TranslateElement({\n                            pageLanguage: 'en',\n                            autoDisplay: 'true',\n                            layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL\n                            }, 'google_translate_element');\n                            }\n                        </script>\n                        <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>\n                        </li>\n                    </div>\n                </ul>\n\n            </div>\n        </nav>\n\n    </header>\n\n    <div class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\">\n        <ul class=\"navbar-nav mr-auto\" style=\"margin-left: 78%;\">\n            <li class=\"nav-item active mx-4\">\n                <a class=\"nav-link\" href=\"./index.html\" style=\"color: beige;\">Home</a>\n            </li>\n            <li class=\"nav-item mx-4\">\n                <a class=\"nav-link\" href=\"./about.html\" style=\"color: beige;\">About</a>\n            </li>\n            <li class=\"nav-item mx-4\">\n                <button id=\"darkmode-button\">dark mode</button>\n            </li>\n    </div>\n    </nav>\n    <!--start-->\n    <main>\n        <div class=\"container\">\n            <h1 class=\"about-title animate__animated animate__fadeInUp animate__slow\">\n                This Project Is Developed by Vikhyat Singh\n            </h1>\n            <div class=\"about-content animate__animated  animate__fadeInUp animate__slow\" style=\"position: relative;\">\n                <p>\n                    Hey! I am a Final Year Student. I'm currently pursuing B.Tech degree in Electronics and\n                    Communication Engineering from National Institute of Technology Patna.I love to learn and do code. I\n                    also like Web development and full MERN Stack Web Developer and a Competitive Programmer that's the\n                    reason, I created this project as a starter Repository for Hacktoberfest2020 for the first-time\n                    participants who can learn how to make their first pull request through this project.\n                </p>\n                <img class=\"img1\" src=\"adi image/7cf0fd9c161fe42a044c2eac43c44f6d.gif\" alt=\"\">\n                <img class=\"img2\" src=\"adi image/narutogif.gif\" alt=\"\">\n            </div>\n            <div class=\"row row1 inner-container\">\n                <div class=\"col-lg-4 col-sm-8 about_card animate__animated animate__backInLeft animate__delay-1s\">\n                    <div class=\"text-white\">\n                        <div id=\"one\" class=\"card-body about-card\">\n                            <h5 class=\"card-title1\">\n                                <i class=\"fab fa-linkedin\"></i> LinkedIn\n                            </h5>\n                            <p class=\"card-text font-weight-lighter\">Let's Connect!</p>\n                            <a href=\"https://www.linkedin.com/in/vikhyat-singh-337777197/\"\n                                class=\"btn btn-outline-light btn-sm\">LinkedIn</a>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"col-lg-4 col-sm-8 about_card animate__animated animate__backInRight animate__delay-1s\">\n                    <div class=\"text-white\">\n                        <div id=\"two\" class=\"card-body about-card\">\n                            <h5 class=\"card-title1\"><i class=\"fab fa-github\"></i> Github</h5>\n                            <p class=\"card-text font-weight-lighter\">Check out my Github Profile!</p>\n                            <a href=\"https://github.com/vikhyatsingh123/\"\n                                class=\"btn btn-outline-light btn-sm\">Github</a>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"col-lg-4 col-sm-8 about_card animate__animated animate__backInLeft animate__delay-1s\">\n                    <div class=\"text-white\">\n                        <div id=\"three\" class=\"card-body about-card\">\n                            <h5 class=\"card-title1\">\n                                <i class=\"fab fa-instagram\"></i> Instagram\n                            </h5>\n                            <p class=\"card-text font-weight-lighter\">Let's follow each other!</p>\n                            <a href=\"https://www.instagram.com/vikhyat552?r=nametag/\"\n                                class=\"btn btn-outline-light btn-sm\">Instagram</a>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"col-lg-4 col-sm-8 about_card animate__animated animate__backInRight animate__delay-1s\">\n                    <div class=\"text-white\">\n                        <div id=\"four\" class=\"card-body about-card\">\n                            <h5 class=\"card-title1\"><i class=\"fab fa-facebook\"></i> Facebook</h5>\n                            <p class=\"card-text font-weight-lighter\">Check out my Facebook Profile!</p>\n                            <a href=\"https://facebook.com/vikhyatsingh123/\"\n                                class=\"btn btn-outline-light btn-sm\">Facebook</a>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </main>\n\n    <div class=\"contributors\">\n        <h1>Our Valuable Contributors</h1>\n        <div id=\"contributor\"></div>\n    </div>\n    <script src=\"contributors.js\"></script>\n    <!-- <footer>\n        <nav class=\"navbar navbar-expand-lg navbar-light nav1\">\n            <p class=\"mx-auto text-light font-weight-lighter\">&copyright Developed By- Vikhyat Singh</p>\n        </nav>\n    </footer> -->\n    <footer class=\"footer\" style=\"padding: 20px;\">\n       <marquee> Developed and Designed By <span id=\"idblink\" onclick=\"tap()\" style=\"cursor: pointer;\"><u>Vikhyat\n            Singh</u></span> | © All\n        Rights Reserved</marquee>\n    </footer>\n    <script>\n        function darkmode() {\n           console.log(\"hello\");\n        \n            var element2 = document.querySelector(\"body\");\n            const body = document.body;\n             body.classList.toggle(\"light-mode\");\n             body.classList.toggle(\"dark-mode\");\n     \n            if (element2.classList.contains(\"light-mode\")) {\n         \n                document.querySelector(\"#toggler\").innerHTML = \"🌞 Light\"\n            }\n            else {\n   \n                document.querySelector(\"#toggler\").innerHTML = \"🌙 Dark\";\n            }\n        }\n    </script>\n\n         <script>\n            function tap() {\n                const link = document.getElementById('idblink')\n                window.location.href = \"https://github.com/vikhyatsingh123\"\n            }\n        </script>\n\n    <script src=\"https://code.jquery.com/jquery-3.5.1.slim.min.js\"\n        integrity=\"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj\"\n        crossorigin=\"anonymous\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js\"\n        integrity=\"sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns\"\n        crossorigin=\"anonymous\"></script>\n    <!-- <script src=\"js/aboutdarkmode.js\"></script> -->\n</body>\n</html>"
  },
  {
    "path": "audio.js",
    "content": "var nyan = document.getElementById(\"nyan\");\nvar nyanBtn = document.getElementById(\"nyan-btn\");\n\nfunction playPause(song) {\n  if (song.paused && song.currentTime >= 0 && !song.ended) {\n    song.play();\n  } else {\n    song.pause();\n  }\n}\n\nfunction reset(btn, song) {\n  if (btn.classList.contains(\"playing\")) {\n    btn.classList.toggle(\"playing\");\n  }\n  song.pause();\n  song.currentTime = 0;\n}\n\nfunction progress(btn, song) {\n  setTimeout(function () {\n    var end = song.duration;\n    var current = song.currentTime;\n    var percent = current / (end / 100);\n    //check if song is at the end\n    if (current == end) {\n      reset(btn, song);\n    }\n    //set inset box shadow\n    btn.style.boxShadow =\n      \"inset \" +\n      btn.offsetWidth * (percent / 100) +\n      \"px 0px 0px 0px rgba(0,0,0,0.125)\";\n    //call function again\n    progress(btn, song);\n  }, 1000);\n}\n\nnyanBtn.addEventListener(\"click\", function () {\n  nyanBtn.classList.toggle(\"playing\");\n  playPause(nyan);\n  progress(nyanBtn, nyan);\n});"
  },
  {
    "path": "contact.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n      <link href=\"https://allfont.net/allfont.css?fonts=ninja-naruto\" rel=\"stylesheet\" type=\"text/css\" />\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css\"\n        integrity=\"sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l\" crossorigin=\"anonymous\">\n    <link rel=\"stylesheet\" href=\"css/style.css\" type=\"text/css\">\n    <link href=\"https://fonts.cdnfonts.com/css/ninja-naruto\" rel=\"stylesheet\">\n\n    <link\n        href=\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.6qtY7eooQBTfiSVjtrLrGQHaEj%26pid%3DApi&f=1\"\n        rel=\"icon\" type=\"image/jpeg\">\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\">\n    <link rel=\"icon\" type=\"image/png\" href=\"Images/favicon.png\">\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Open+Sans:ital@1&display=swap\" rel=\"stylesheet\">\n    <link rel=\"stylesheet\" href=\"css/index.css\">\n    <link href=\"css/translate.css\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" />\n    <link rel=\"stylesheet\" href=\"css/contact.css\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/sweetalert2@11\"></script>\n    <link\n    rel=\"stylesheet\"\n    href=\"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css\"\n  />\n    <title>Naruto-Contact</title>\n  </head>\n\n  <body class=\"contact_body light-mode\" style=\"position: relative;\">\n     <header>\n      <nav class=\" animate__animated animate__fadeInDown navbar fixed-top navbar-expand-lg navbar-light\" style=\"height: 60px; padding:5px 5px 5px 30px;\">\n\n              <img src=\"adi image/naruto-advenimiento-los-animes-cortos-2.png\"  style=\"max-height: 100%; width: auto;\">\n                <!-- <a class=\"navbar-brand brand1 ml-4\" href=\"#\" style=\"color: beige;\">Naruto</a> -->\n\n\n              \n             \n                <button class=\"navbar-toggler\" class=\"menu-btn\" type=\"button\" data-toggle=\"collapse\"\n                    data-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\"\n                    aria-label=\"Toggle navigation\">\n                    <span class=\"navbar-toggler-icon\"></span>\n                </button>\n\n                <div class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\">\n                    <ul class=\"navbar-nav mr-auto\">\n                        <li class=\"nav-item  mx-4\">\n                            <a class=\"nav-link link\" href=\"./index.html\" >Home</a>\n                        </li>\n                        <li class=\"nav-item mx-4\">\n                            <a class=\"link nav-link \" href=\"./about.html\" >About</a>\n                        </li>\n                        <li class=\"nav-item active mx-4\">\n                            <a class=\"link nav-link \" href=\"./contact.html\" >Contact</a>\n                        </li>\n                        <li class=\"nav-item active mx-4\">\n                          <a class=\"link nav-link \" href=\"./Game.html\" >Game</a>\n                      </li>\n                        <li>\n                            <div>\n                                <button onclick=\"darkmode()\" class=\"toggle-mode darkmodebutton\" id=\"toggler\">🌙\n                                    Dark</button>\n                            </div>\n                        </li> <li class=\"nav-item mx-4\">\n                          <div id=\"google_translate_element\"></div>\n                          <script>\n                            function googleTranslateElementInit() {\n                            new google.translate.TranslateElement({\n                            pageLanguage: 'en',\n                            autoDisplay: 'true',\n                            layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL\n                            }, 'google_translate_element');\n                            }\n                          </script>\n                          <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>\n          </li>\n                    </ul>\n\n                </div>\n            </nav>\n\n        </header>\n    <h1 class=\" animate__animated animate__fadeInUp animate__slow\">Naruto Friends, Get In Touch with us</h1>\n    <img class=\"img1 animate__animated animate__fadeInLeft\" src=\"adi image/kakashi.png\" alt=\"\">\n      <img class=\"img2 animate__animated animate__fadeInRight\" src=\"adi image/contact_naruto.png \" alt=\"\">\n    <div class=\"wpcf7 container  animate__animated animate__fadeInUp animate__slow\" id=\"wpcf7-f156-p143-o1 formwrap\" >\n  \n      <form\n        action=\"https://formsubmit.co/vikhyatsingh628@gmail.com\"\n        method=\"POST\"\n        class=\"contact__form wpcf7-form \"\n        novalidate=\"novalidate\"\n      >\n        <input type=\"hidden\" name=\"_captcha\" value=\"false\" />\n        <input\n          type=\"hidden\"\n          name=\"_subject\"\n          value=\"New submission!\"\n          class=\"subject\"\n        />\n        <input type=\"hidden\" name=\"_template\" value=\"table\" />\n        <div class=\"msg__status\"></div>\n        <div style=\"display: none\">\n          <input type=\"hidden\" name=\"_wpcf7\" value=\"156\" />\n          <input type=\"hidden\" name=\"_wpcf7_version\" value=\"3.7.2\" />\n          <input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" />\n          <input\n            type=\"hidden\"\n            name=\"_wpcf7_unit_tag\"\n            value=\"wpcf7-f156-p143-o1\"\n          />\n          <input type=\"hidden\" name=\"_wpnonce\" value=\"d1da331d93\" />\n        </div>\n        <p>\n          <span class=\"wpcf7-form-control-wrap Name\">\n            <input\n              type=\"text\"\n              name=\"Name\"\n              size=\"40\"\n              class=\"nameinput wpcf7-form-control wpcf7-text wpcf7-validates-as-required\"\n              aria-required=\"true\"\n              aria-invalid=\"false\"\n              placeholder=\"Name\"\n            />\n          </span>\n          <span class=\"wpcf7-form-control-wrap Email\">\n            <input\n              type=\"email\"\n              name=\"Email\"\n              size=\"40\"\n              class=\"emailinput wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email\"\n              aria-required=\"true\"\n              aria-invalid=\"false\"\n              placeholder=\"Email\"\n            />\n          </span>\n\n          <span class=\"wpcf7-form-control-wrap Message\">\n            <textarea\n              name=\"Message\"\n              cols=\"40\"\n              rows=\"10\"\n              class=\"wpcf7-form-control wpcf7-textarea\"\n              aria-invalid=\"false\"\n              placeholder=\"Message\"\n            ></textarea>\n          </span>\n          <input\n            type=\"submit\"\n            value=\"Send\"\n            class=\"wpcf7-form-control wpcf7-submit btn\" \n            style=\"float: none; margin-left: 165px;\"\n          />\n        </p>\n        <div class=\"wpcf7-response-output wpcf7-display-none\"></div>\n      </form>\n    </div>\n\n    <footer class=\"footer\">\n        Developed and Designed By <span id=\"idblink\" onclick=\"tap()\" style=\"cursor: pointer;\"><u>Vikhyat\n                Singh</u></span> | ©\n        All Rights Reserved\n        <h5>Follow Me on : </h5>\n        <div class=\"icon\">\n            <a href=\"https://www.facebook.com/vikhyat.singh.5/\" class=\"fa fa-facebook\" target=\"_blank\"></a>\n            <a href=\"https://twitter.com/VikhyatSingh6\" class=\"fa fa-twitter\" target=\"_blank\"></a>\n            <a href=\"https://github.com/vikhyatsingh123\" class=\"fa fa-github\" target=\"_blank\"></a>\n            <a href=\"https://www.linkedin.com/in/vikhyat-singh-a8b5b31b6/\" class=\"fa fa-linkedin\"\n                target=\"_blank\"></a>\n            <a href=\"https://www.instagram.com/vikhyat552/\" class=\"fa fa-instagram\" target=\"_blank\"></a>\n        </div>\n    </footer>    \n     <script>\n    function tap() {\n        const link = document.getElementById('idblink')\n        window.location.href = \"https://github.com/vikhyatsingh123\"\n    }\n</script>\n\n    <script>\n      function darkmode() {\n          // console.log(\"hello\");\n      \n          var element2 = document.querySelector(\"body\");\n          const body = document.body;\n          body.classList.toggle(\"light-mode\");\n           body.classList.toggle(\"dark-mode\");\n   \n          if (element2.classList.contains(\"light-mode\")) {\n       \n              document.querySelector(\"#toggler\").innerHTML = \"🌞 Light\"\n          }\n          else {\n \n              document.querySelector(\"#toggler\").innerHTML = \"🌙 Dark\";\n          }\n      }\n  </script>\n    <script src=\"./contact.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "contact.js",
    "content": "// Sending Data to Mail\n\n// Listenig to form\nconst contactForm = document.querySelector(\".contact__form\");\n\nasync function handleFormSubmit(event) {\n  event.preventDefault();\n  const subject = document.querySelector(\".subject\");\n  const msgStatus = document.querySelector(\".msg__status\");\n  subject.value = \"Msg via Naruto Webpage\";\n\n  const form = event.currentTarget;\n\n  const url = form.action;\n\n  try {\n    const formData = new FormData(form);\n\n    const fetchOptions = {\n      method: contactForm.method,\n      headers: {\n        Accept: \"application/json\",\n      },\n      body: formData,\n    };\n\n    await fetch(url, fetchOptions);\n    console.log(url);\n    if (url==\"https://formsubmit.co/vikhytsingh628@gmail.com\"){\n        await Swal.fire({\n            title: \"Success!\",\n            text: \"Message Sent Successfully!\",\n            icon: \"success\"\n        });\n    }\n    else{\n        await Swal.fire({\n            icon: \"error\",\n            title: \"Oops...\",\n            text: \"Something went wrong!\"\n        });\n  }\n    form.reset();\n  } catch (err) {\n    msgStatus.innerHTML =\n      \"Oops! There was a problem delivering your message, please contact via other means.\";\n    msgStatus.style.display = \"block\";\n    msgStatus.style.textAlign = \"center\";\n    setTimeout(() => {\n      msgStatus.style.display = \"none\";\n    }, 4000);\n    form.reset();\n  }\n}\n\ncontactForm.addEventListener(\"submit\", handleFormSubmit);\n"
  },
  {
    "path": "contributors.js",
    "content": "const cont = document.getElementById('contributor');\n\n// Replace these with the owner and repository name of the repository\nconst owner = 'vikhyatsingh123';\nconst repoName = 'Naruto-Shippuden';\n\n// Function to fetch contributors for a given page number\nasync function fetchContributors(pageNumber) {\n    const perPage = 100; // You can adjust this based on your needs\n    const url = `https://api.github.com/repos/${owner}/${repoName}/contributors?page=${pageNumber}&per_page=${perPage}`;\n\n    const response = await fetch(url);\n    if (!response.ok) {\n        throw new Error(`Failed to fetch contributors data. Status code: ${response.status}`);\n    }\n\n    const contributorsData = await response.json();\n    return contributorsData;\n}\n\n// Function to fetch all contributors\nasync function fetchAllContributors() {\n    let allContributors = [];\n    let pageNumber = 1;\n\n    try {\n        while (true) {\n            const contributorsData = await fetchContributors(pageNumber);\n            if (contributorsData.length === 0) {\n                break;\n            }\n            allContributors = allContributors.concat(contributorsData);\n            pageNumber++;\n        }\n\n        // Display contributors in the honeycomb-like layout\n        allContributors.forEach((contributor) => {\n            const contributorCard = document.createElement('div');\n            contributorCard.classList.add('contributor-card');\n\n            const avatarImg = document.createElement('img');\n            avatarImg.src = contributor.avatar_url;\n            avatarImg.alt = `${contributor.login}'s Picture`;\n\n            const loginLink = document.createElement('a');\n            loginLink.href = contributor.html_url;\n            loginLink.appendChild(avatarImg);\n\n            contributorCard.appendChild(loginLink);\n\n            cont.appendChild(contributorCard); // Append the contributor card to the container\n        });\n    } catch (error) {\n        console.error(error);\n    }\n}\n\n// Call the function to fetch all contributors and display them in the honeycomb-like layout\nfetchAllContributors();\n"
  },
  {
    "path": "css/Game.css",
    "content": "/* Naruto-themed CSS styles */\n.game-body {\n    font-family: 'Arial', sans-serif;\n    background-color: #f4f4f4;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    /* height: 100vh; */\n    text-align: center;\n  }\n  \n  .game-h1 {\n    font-size: 2.5em;\n    margin-bottom: 10px;\n    color: #FF6700;\n  }\n  \n  .game-p {\n    font-size: 1.2em;\n    color: #333;\n  }\n  \n  .game-button {\n    padding: 10px 20px;\n    font-size: 1em;\n    background-color: #FF6700;\n    color: white;\n    border: none;\n    cursor: pointer;\n    margin: 10px;\n    transition: background-color 0.3s ease;\n  }\n  \n  .game-button:hover {\n    background-color: #FF8000;\n  }\n  \n  .game-input[type=\"text\"] {\n    padding: 8px;\n    font-size: 1em;\n    margin: 10px;\n    border: 1px solid #ccc;\n  }\n  \n  #imageContainer {\n    margin-top: 20px;\n  }\n  \n  #message {\n    font-size: 1.2em;\n    font-weight: bold;\n    color: #FF6700;\n  }\n  \n  /* Styling for images */\n  .game-img {\n    max-width: 300px;\n    height: auto;\n    margin-top: 10px;\n    border-radius: 8px;\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n  }\n  "
  },
  {
    "path": "css/contact.css",
    "content": "@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);\n\n.contact_body {\n\n  /* background: url(\"/adi image/677425.jpg\"); */\n\n  -webkit-background-size: cover;\n  -moz-background-size: cover;\n  -o-background-size: cover;\n  background-size: cover;\n  padding-top: 0px;\n  z-index: 97247900097799!important;\n  position: fixed;\n  top: 0!important;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  overflow-y: auto;\n\n  height: 100vh;\n}\n.container{\n  margin-top: 50px;\n  margin-bottom: 150px;\n}\n.light-mode .footer {\n  display: block;\n  background: linear-gradient(323deg, rgb(41 59 147) 0%, rgb(15 137 198) 100%);\n  text-align: center;\n  color: white;\n  padding: 10px 20px;\n  font-weight: 700;\n  font-size: 16px;\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  z-index: 1000;\n}\n\n.dark-mode .footer {\n  display: block;\n  background: linear-gradient(337deg, rgb(60, 26, 108) 40%, rgb(163, 16, 255) 100%);\n  text-align: center;\n  color: white;\n  padding: 10px 20px;\n  font-weight: 700;\n  font-size: 16px;\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  z-index: 1000;\n}\n\n.footer h5 {\n  margin-top: 3px;\n  margin-bottom: 5px;\n  font-size: 14px;\n}\n\n.footer .icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: wrap;\n}\n\n.footer .icon .fa {\n  padding: 6px;\n  margin: 3px;\n  color: #f14a16;\n  font-size: 16px;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  border: 2px solid #f14a16;\n  text-decoration: none;\n  transition: all 0.3s ease;\n}\n\n.footer .icon .fa:hover {\n  color: #fff;\n  background: #f14a16;\n}\n\n.footer span {\n  text-decoration: underline;\n}\nh1 {\n  color:rgb(255, 255, 255);\n  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);\n  padding-top: 30px;\n  font-size: 50px;\n  font-weight: 700;\n  text-align: center;\n  font-family: 'Source Sans Pro', sans-serif;\n  margin: 10px;\n}\n\n.dark-mode h1{\n  color:#c0a5ff;\n  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);\n  padding-top: 30px;\n  font-size: 50px;\n  font-weight: 700;\n  text-align: center;\n  font-family: 'Source Sans Pro', sans-serif;\n  margin: 10px;\n}\n\n\n.light-mode form {\n  margin-left: auto;\n  margin-right: auto;\n  width: 600px;\n  height: auto;\n  padding: 30px;\n  -moz-border-radius: 10px;\n  -webkit-border-radius: 10px;\n  border-radius: 10px;\n  -moz-background-clip: padding;\n  -webkit-background-clip: padding-box;\n  background-clip: padding-box;\n  background: rgba( 255, 255, 255, 0.2 );\n  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );\n  backdrop-filter: blur( 5.5px );\n  -webkit-backdrop-filter: blur( 5.5px );\n  border-radius: 10px;\n  border: 1px solid rgba( 255, 255, 255, 0.18 );\n  overflow: hidden;\n}\n\n\n\n.dark-mode form {\n  margin-left: auto;\n  margin-right: auto;\n  width: 600px;\n \n  height: auto;\n  padding: 30px;\n  -moz-border-radius: 10px;\n  -webkit-border-radius: 10px;\n  border-radius: 10px;\n  -moz-background-clip: padding;\n  -webkit-background-clip: padding-box;\n  background-clip: padding-box;\n\n\n  backdrop-filter: blur( 5.5px );\n  -webkit-backdrop-filter: blur( 5.5px );\n  border-radius: 10px;\n  background: rgba(83, 83, 83, 0.25);\n  box-shadow: rgba(145, 56, 255, 0.35) 0px 30px 100px 0px;\n  border: 2px solid rgba(146, 56, 255, 0.711);\n  overflow: hidden;\n}\n.light-mode textarea {\n  font-size: 18px;\n  color: rgb(82, 82, 82);\n  width: 100%;\n  border-radius: 20px;\n  height: 40px;\n  padding: 20px 20px;\n  min-height: 122px;\n  background-color: rgba(255, 255, 255, 0.536);\n  border: 2px solid rgba(70, 70, 70, 0.873);\n  transition: 0.3s ease-in;\n  margin-bottom: 20px;\n  overflow: hidden;\n}\n\n.dark-mode textarea {\n  font-size: 18px;\n  color: rgb(27, 27, 27);\nwidth: 100%;\n    border-radius: 20px;\n    height: 40px;\n    padding: 20px 20px;\n    min-height: 122px;\n\n    background-color: rgb(255, 255, 255);\n    border: 3px solid rgb(146, 56, 255);\n    transition: 0.3s ease-in;\n\n  margin-bottom: 20px;\n  overflow: hidden;\n}\n\n\n\n\n.light-mode .nameinput,\n.light-mode .emailinput {\n  width: 894px;\n  height: 48px;\n  width: 100%;\n  border-radius: 20px;\n  height: 40px;\n  padding: 20px 20px;\n  background-color: rgba(255, 255, 255, 0.536);\n  border: 2px solid rgba(70, 70, 70, 0.873);\n  transition: 0.3s ease-in;\n  font-size: 18px;\n  color: rgb(82, 82, 82);\n  margin-bottom: 20px;\n}\n\n\n.dark-mode .nameinput,\n.dark-mode .emailinput {\n  width: 894px;\n  height: 48px;\n  width: 100%;\n  border-radius: 20px;\n  height: 40px;\n  padding: 20px 20px;\n  border-style: none;\n  background-color: rgb(255, 255, 255);\n  border: 3px solid rgb(146, 56, 255);\n  transition: 0.3s ease-in;\n  font-size: 18px;\n  color: rgb(4, 4, 4);\n  margin-bottom: 20px;\n}\n\n\n\ninput[type=submit] {\n  cursor: pointer;\n}\n\ninput.nameinput {\n\n\n\n  padding-left: 45px;\n}\n\ninput.emailinput {\n  padding-left: 45px;\n}\n\ninput.message {\n  background: white;\n  padding-left: 45px;\n}\n\n\n\n::-webkit-input-placeholder {\n  color: rgb(167, 166, 166);\n}\n\n:-moz-placeholder {\n  color: #fff;\n}\n\n::-moz-placeholder {\n  color: #fff;\n}\n\n:-ms-input-placeholder {\n  color: #fff;\n}\n\n\n.light-mode input:focus,\n.light-mode textarea:focus {\n  background-color: rgb(255, 255, 255);\n  box-shadow: 0 0 2px 5px rgb(132, 222, 236);\n  overflow: hidden;\n  border:none;\n}\n\n.dark-mode input:focus,\n.dark-mode textarea:focus {\n  background-color: rgb(255, 255, 255);\n  box-shadow: 0 0 2px 5px rgb(160, 132, 236);\n  overflow: hidden;\n  border:none;\n}\ninput:focus::placeholder,\ntextarea:focus::placeholder{\n  color:transparent;\n}\n\n.light-mode .btn {\n  border: none;\n  font-family: 'Source Sans Pro', sans-serif;\n  font-size: 18px;\n  width: 200px;\n  height: 48px;\n  color: white;\n  background: black;\n  cursor: pointer;\n  display: inline-block;\n  font-weight: 700;\n  position: relative;\n  outline: none;\n  box-shadow: 0 6px rgb(120, 118, 118);\n  border-radius: 5px;\n  float: right;\n  margin-right: 6px;\n}\n\n.dark-mode .btn {\n  border: none;\n  font-family: 'Source Sans Pro', sans-serif;\n  font-size: 18px;\n  width: 200px;\n  height: 48px;\n  color: rgb(0, 0, 0);\n  background: rgb(255, 255, 255);\n  cursor: pointer;\n  display: inline-block;\n  font-weight: 700;\n  position: relative;\n  outline: none;\n  box-shadow: 0 6px rgb(120, 118, 118);\n  border-radius: 5px;\n  float: right;\n  margin-right: 6px;\n}\n\n.light-mode .btn:hover {\n  background: #fff;\n  outline: none;\n  color:#000000;\n  box-shadow: 0 4px #cecece;\n  top: 2px;\n}\n\n.dark-mode .btn:hover {\n  background: #000000;\n  outline: none;\n  color:#ffffff;\n  box-shadow: 0 4px #cecece;\n  top: 2px;\n}\n\n.btn:active {\n  background: #fff;\n  outline: none;\n  box-shadow: 0 0 #cecece;\n  top: 6px;\n}\n\n.flat {\n  border: none;\n  cursor: pointer;\n  display: inline-block;\n  outline: none;\n  position: relative;\n  -webkit-transition: all 0.3s;\n  -moz-transition: all 0.3s;\n  transition: all 0.3s;\n}\n\n\n.flat:before {\n  position: absolute;\n  height: 100%;\n  left: 0;\n  top: 0;\n  line-height: 3;\n  font-size: 140%;\n  width: 60px;\n}\n\n\n.flat {\n  width: 960px !important;\n  height: 48px;\n  overflow: hidden;\n  margin-bottom: 20px;\n  background: url(http://www.jordancundiff.com/wp-content/uploads/2014/03/icon-dropdown.png) no-repeat right;\n}\n\n@media only screen and (min-width: 768px) and (max-width: 1035px) {\n  h1 {\n    font-size: 80px;\n  }\n\n  form {\n    width: 736px !important;\n  }\n\n  #wpcf7-f156-p143-o1\\20 formwrap>form>p>span.wpcf7-form-control-wrap.Subject.flat>select,\n  #wpcf7-f156-p143-o1\\20 formwrap>form>p>span.wpcf7-form-control-wrap.Subject.flat {\n    width: 731px !important;\n  }\n\n  .nameinput,\n  .emailinput,\n  #wpcf7-f156-p143-o1\\20 formwrap>form>p>span.wpcf7-form-control-wrap.Message>textarea {\n    width: 666px !important;\n  }\n}\n\n@media only screen and (max-width: 804px) {\n  h1 {\n    font-size: 50px;\n  }\n\n  form {\n    width: 450px !important;\n  }\n\n  #wpcf7-f156-p143-o1\\20 formwrap>form>p>span.wpcf7-form-control-wrap.Subject.flat>select,\n  #wpcf7-f156-p143-o1\\20 formwrap>form>p>span.wpcf7-form-control-wrap.Subject.flat {\n    width: 445px !important;\n  }\n\n  .nameinput,\n  .emailinput,\n  #wpcf7-f156-p143-o1\\20 formwrap>form>p>span.wpcf7-form-control-wrap.Message>textarea {\n    width: 380px !important;\n  }\n}\n\n@media only screen and (max-width: 517px) {\n  h1 {\n    font-size: 30px;\n  }\n\n  form {\n    width: 295px !important;\n  }\n\n  #wpcf7-f156-p143-o1\\20 formwrap>form>p>span.wpcf7-form-control-wrap.Subject.flat>select,\n  #wpcf7-f156-p143-o1\\20 formwrap>form>p>span.wpcf7-form-control-wrap.Subject.flat {\n    width: 290px !important;\n  }\n\n  .nameinput,\n  .emailinput,\n  #wpcf7-f156-p143-o1\\20 formwrap>form>p>span.wpcf7-form-control-wrap.Message>textarea {\n    width: 225px !important;\n  }\n\n\n  .btn {\n    width: 110px;\n  }\n}\n.VIpgJd-ZVi9od-ORHb-OEVmcd{\n  display: none;\n  z-index: -10;\n\n}\n\n.img1{\n  position: absolute;\n  left: -30px;\n  bottom: -50px;\n  width: 500px;\n}\n.img2{\n  position: absolute;\n right: -100px;\n  bottom: 50px;\n  width: 500px;\n\n}"
  },
  {
    "path": "css/index.css",
    "content": ".lightmode{\n    z-index: 9724790009779558!important;\n\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n.card-title{\n    font-family: 'Ninja Naruto', sans-serif;\n    \n}\n\n/* Toggle Switch Start */\n.toggle-switch {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    \n}\n\n.hero{\n    color:rgba(247, 117, 4, 0.977);\n    text-shadow: 0px 0px 4px rgba(247, 117, 4, 0.977);\n}\n\n.villian{\n    color:rgb(149, 0, 255);\n    text-shadow: 0px 0px 4px rgb(159, 23, 255);\n}\n.toggle-label {\n    margin: 0 0.9% 0 0.9%;\n    /* margin: 0 10px; */\n    font-size: 25px;\n    \n    font-weight: bold;\n}\n\n.toggle-button {\n    position: relative;\n    cursor: pointer;\n    width: 60px;\n    height: 30px;\n  \n    border-radius: 30px;\n\n\n}\n\n.light-mode .toggle-button{\n    border: 2px solid rgb(6, 168, 222);\n    background-color: #f0eeee;\n}\n.dark-mode .toggle-button{\n    border: 2px solid rgb(128, 0, 255);\n    background-color: #2c2c2c;\n}\n\n\n\n\n.toggle-slider {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 50%;\n    height: 100%;\n    background: linear-gradient(323deg, rgb(201, 77, 1) 0%, rgb(255, 158, 55) 100%);\n    border-radius: 50%;\n    transition: 0.4s;\n    box-shadow: 0 0px 5px 3px #be4001a5;\n}\n\n.toggle-slider:hover{\n    background-color: rgba(56, 0, 130, 0.807);\n}\n\n.toggle-input {\n    display: none;\n}\n\n.toggle-input:checked + .toggle-slider {\n    left: 50%;\n    background: linear-gradient(323deg, rgb(47, 14, 82) 0%, rgb(110, 15, 198) 100%);\n    box-shadow: 0 0px 5px 5px #a928e6d5;\n}\n\n.toggle-input:checked + .toggle-slider:hover {\n    left: 50%;\n    background-color:  #cd7b00;\n\n}\n.hide {\n    display: none;\n}\n.dark_lang{\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n}\n@media (max-width:992px){\n    .dark_lang{\n        position: relative;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        left:-40px;\n    }\n} \n/* Toggle Switch End */\n\n/* to top button present at the bottom right on scrolling starts here */\n.to-top {\n  color: #fff;\n  position: fixed;\n  bottom: 32px;\n  right: 32px;\n\n  width: 50px;\n  height: 50px;\n  border-radius: 50%;\n  background: #1f1f1f;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 28px;\n  text-decoration: none;\n\n \n\n  opacity: 0;\n  pointer-events: none;\n  transition: all 0.4s ease;\n  z-index: 1000;\n}\n\n.to-top.active {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.to-top:hover {\n  color: #ffffff;\n  text-decoration: none;\n}\n\n/* ✅ Make it smaller on mobile but still bottom-right */\n@media only screen and (max-width: 480px) {\n  .to-top {\n    width: 48px;\n    height: 48px;\n    font-size: 26px;\n    bottom: 30px;\n    right: 18px;\n  }\n}\n\n/* progess button ends here */\n\nmain{\n    margin-bottom: 2rem;\n}\n\n.light-mode .footer {\n    display: block;\n    background: linear-gradient(323deg, rgb(41 59 147) 0%, rgb(15 137 198) 100%);\n    text-align: center;\n    padding: 10px 0 5px 0;\n    margin-top: 30px;\n    color: #fff;\n    font-size: 18px;\n    font-weight: 500;\n    z-index: 10000;\n    position: relative;\n\n}\n.dark-mode .footer {\n    display: block;\n    background: linear-gradient(337deg, rgb(60, 26, 108) 40%, rgb(163, 16, 255) 100%);\n    text-align: center;\n    padding: 10px 0 5px 0;\n    margin-top: 30px;\n    color: #fff;\n    font-size: 18px;\n    font-weight: 500;\n    position: relative; \n    z-index: 10000;\n}\n\n.footer a span{\n    color: #062d9b;\n}\n\n@media screen and (max-width:500px) {\n    .footer{\n        font-size: 14px;\n        font-weight: 400;   \n    \n    }\n  } \n\n \n\n  .darkmodebutton{\n    transition: all ease-in-out 0.7s;\n  }\n  .lightmode .darkmodebutton:hover{\n    box-shadow: white  0 0 20px;\n    transition: all ease-in-out 0.7s;\n\n  } \n  .dark-mode .darkmodebutton:hover{\n    box-shadow: rgb(131, 0, 212)  0 0 10px;\n    transition: all ease-in-out 0.7s;\n\n  }\n.contributors {\n    margin: 0;\n    padding: 0;\n\n\n}\n\n.contributors h1 {\n  \n    text-align: center;\n    color: white;\n    font-size: 2.5rem;\n    margin-bottom: 4%;\n}\n\n.contributors h1:hover {\n    text-decoration: underline;\n}\n\n#contributor {\n    margin: 10px;\n    padding: 10px;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n}\n\n.contributor-card {\n    width: 100px;\n    height: auto;\n    clip-path: polygon(50% 0%, 91% 25%, 91% 75%, 50% 100%, 9% 75%, 9% 25%);\n    margin: 5px;\n    transition: all 0.5s ease-in;\n}\n.contributor-card :hover {\n transform: scale(1.2);\n}\n\n.contributor-card img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\n\n/* .VIpgJd-ZVi9od-ORHb-OEVmcd{\n    display: none!important;\n    height: 0;\n    max-height: 0;\n  } */\n  \n\n/* .goog-te-gadget .goog-te-combo{\n    background:#F5F5DC;\n    color:black;\n    border: none;\n    border-radius:3px;\n    padding:10px 8px;\n    font-size:1rem;\n} */\n/* #google_translate_element select {\n    background: yellow!important;\n    color: black;\n    border: none;\n    border-radius: 3px;\n    padding: 10px;\n    margin-top: 5px;\n} */"
  },
  {
    "path": "css/style.css",
    "content": "@import url('https://fonts.googleapis.com/css2?family=Arima:wght@100..700&family=Oswald:wght@200..700&display=swap');\n\n\n#title {\n  color: #fff;\n  height: 950px;\n  background-color: #32081f;\n}\n.navbar img {\n  max-height: 50px;\n  width: auto;\n  padding: 5px 0;\n}\n\n.navbar-brand {\n  font-size: 24px;\n  font-family: Verdana, Geneva, Tahoma, sans-serif;\n  color: #fff;\n  padding-left: 15px;\n  margin-right: 15px;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n}\n.light-mode .navbar {\n  padding: 5px 15px;\n  background-color: #FBAB7E;\n  background-image: linear-gradient(342deg, #ffa16b 0%, #ffcf59 100%);\n  display: flex;\n  align-items: center;\n  min-height: 70px;\n  flex-wrap: wrap;\n}\n\n.dark-mode .navbar {\n  padding: 0 15px;\n  background-color: #FBAB7E;\n  background-image: linear-gradient(342deg, #363636 0%, #000000 100%);\n  display: flex;\n  align-items: center;\n  min-height: 60px;\n}\n\n.dark_lang {\n  display: flex;\n  align-items: center;\n  margin-left: 40px;\n  position: relative;\n  z-index: 1001;\n  min-width: 200px; /* Ensure minimum width for language selector */\n}\n\n/* Adjust the Google Translate element */\n#google_translate_element {\n  min-width: 160px;\n}\n\n/* Ensure play/pause button has its own space */\n#nyan-btn {\n  margin-left: 25px;\n  padding: 5px 10px;\n  white-space: nowrap;\n  position: relative;\n  z-index: 1000;\n  min-width: 100px;\n}\n\n/* Adjust the language selector dropdown */\n.goog-te-gadget {\n  margin-right: 15px !important;\n}\n\n/* Ensure play/pause button has enough space */\n#nyan-btn {\n  margin-left: 15px;\n  white-space: nowrap;\n  position: relative;\n  z-index: 1000;\n}\n\n.sticky{\n  position: -webkit-sticky;\n  position: sticky;\n  top: 0;\n  z-index: 100;\n}\n.image-naruto {\n  padding: 0;\n  margin-top: 50px;\n  height: 60%;\n}\n\n.head {\n  color: #fff;\n  font-size: 400%;\n  padding: 50px 0 50px;\n  font-family: Verdana, Geneva, Tahoma, sans-serif;\n}\n.navbar-toggler {\n  margin-right: 20px;\n}\n\nhtml {\n  scroll-behavior: smooth;\n  \n}\n.nav-item {\n  margin: 0 5px;\n  white-space: nowrap;\n}\n\n.nav-link {\n  padding: 8px 12px !important;\n  font-size: 0.95rem;\n}\n\n.about {\n  margin: 50px;\n  line-height: 2;\n  text-align: left;\n  font-size: 1.5rem;\n  height: 300px;\n  padding-bottom: 100px;\n}\n/* .page{\n  height: 700px;\n} */\n\n@media (1245px>=width>993px) {\n  #title {\n    height: 800px;\n  }\n  .about {\n    position: relative;\n    bottom: 90px;\n    text-align: justify;\n    font-size: 1.2rem;\n    margin: 20px;\n  }\n  .head {\n    position: relative;\n    bottom: 50px;\n    font-size: 3rem;\n  }\n}\n@media (992px>=width>=680px) {\n  #title {\n    height: 1200px;\n  }\n  .about {\n    position: relative;\n    bottom: 150px;\n    font-size: 1.3rem;\n  }\n  .image-naruto {\n    height: 600px;\n  }\n  .head {\n    position: relative;\n    bottom: 100px;\n  }\n}\n@media (680px>width>450px) {\n  .image-naruto {\n    height: 400px;\n  }\n  #title {\n    height: 1100px;\n  }\n  .about {\n    position: relative;\n    bottom: 190px;\n    font-size: 1.2rem;\n    text-align: justify;\n  }\n  .head {\n    position: relative;\n    bottom: 130px;\n    font-size: 2.5rem;\n  }\n}\n@media (max-width: 450px) {\n  .image-naruto {\n    height: 400px;\n  }\n  #title {\n    height: 1400px;\n  }\n  .about {\n    position: relative;\n    bottom: 200px;\n    font-size: 1.2rem;\n    text-align: justify;\n  }\n  .head {\n    position: relative;\n    bottom: 150px;\n    font-size: 2.5rem;\n  }\n}\n\nhtml,\nbody {\n  overflow-x: hidden;\n  overflow-y: scroll;\n}\n\nbody {\n  background-image: linear-gradient(to right, #2193b0, #6dd5ed);\n  width: 100vw;\n  font-family: \"Roboto-Slabs\", sans-serif;\n}\n\n/* Custom Scroll Bar */\n::-webkit-scrollbar {\n  padding: 0;\n  width: 10px;\n}\n\n::-webkit-scrollbar-track {\n  background: linear-gradient(360deg, rgb(41 59 147) 30%, rgb(15 137 198) 100%);\n/*margin top bottom*/\n}\n\n\n::-webkit-scrollbar-thumb {\n  background:  linear-gradient(360deg, #ff8a46 30%, #ffcb46 100%);\n\n  border-radius: 1rem;\n}\n\n/* Dark Mode Switch CSS */\n\n.switch-container {\n  position: absolute;\n  top: 10%;\n}\n\n.switch-container #switch {\n  display: none;\n}\n\n.switch-container .switch-label {\n  position: relative;\n  cursor: pointer;\n  margin: 0;\n}\n\n.switch-container .switch-label .switch-rail {\n  transition: all 0.2s ease-in-out;\n  position: absolute;\n  width: 70px;\n  height: 30px;\n  background: #ff9a47;\n  border-radius: 50px;\n  overflow: hidden;\n  bottom: -14px;\n  right: -6rem;\n}\n\n.switch-container .switch-label .switch-rail .switch-slider {\n  transition: all 0.2s ease-in-out;\n  position: absolute;\n  top: 4px;\n  left: 4px;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  background: #fff;\n}\n\n.switch-container #switch:checked + .switch-label .switch-rail {\n  transition: all 0.2s ease-in-out;\n  background: #2e4a6b;\n}\n\n.switch-container #switch:checked + .switch-label .switch-rail .switch-slider {\n  transition: all 0.2s ease-in-out;\n  transform: translateX(40px);\n}\n\n.loader {\n  filter: hue-rotate(0deg);\n  animation: hue 10000ms infinite linear;\n  /* position: sticky; */\n  /* background: #dc3545 linear-gradient(45deg, #0f8, #08f); */\n}\n\n.fixed-top {\n  /* background-color: black; */\n  position: sticky;\n}\n\n.navbar-nav {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  width: auto;\n  margin: 0;\n  padding: 0;\n  position: relative;\n  z-index: 1000;\n  flex-grow: 1;\n  justify-content: flex-end;\n}\n\n.search {\n  position: absolute;\n  right: 0px; /* Moved further right */\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  width: 200px;\n  height: 38px;\n  background: #fff;\n  border-radius: 19px;\n  padding: 0 15px;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  transition: all 0.3s ease;\n  z-index: 1000;\n  font-size: 14px;\n}\n\n.search .icon {\n  font-size: 0px;\n  color: #666;\n  margin-right: 8px;\n  flex-shrink: 0;\n  margin-bottom: 3px;\n}\n\n.search input {\n  border: none;\n  outline: none;\n  background: transparent;\n  width: 100%;\n  font-size: 14px;\n  padding: 5px 0;\n  color: #333;\n}\n\n.search input::placeholder {\n  color: #999;\n  opacity: 1;\n}\n\n.clear-btn {\n  background: none;\n  border: none;\n  color: #999;\n  font-size: 20px;\n  cursor: pointer;\n  padding: 0 5px;\n  line-height: 1;\n  margin-left: 5px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  transition: all 0.2s ease;\n}\n\n.clear-btn:hover {\n  background: #f0f0f0;\n  color: #666;\n}\n\n/* Dark mode search styles */\n\n.dark-mode .clear-btn {\n  color: #bbb;\n}\n\n.dark-mode .clear-btn:hover {\n  background: #444;\n  color: #fff;\n}\n\n@media (max-width: 1400px) {\n  .search {\n    right: 250px;\n    width: 180px;\n  }\n}\n\n@media (max-width: 1200px) {\n  .search {\n    right: 200px;\n    width: 160px;\n  }\n}\n\n@media (max-width: 992px) {\n  .navbar {\n    padding: 5px 10px !important;\n  }\n  \n  .search {\n    width: 100%;\n    max-width: 100%;\n    position: static;\n    transform: none;\n    margin: 10px 0;\n    height: 42px;\n    border-radius: 21px;\n  }\n  \n  .search input {\n    font-size: 16px;\n  }\n  \n  .navbar-brand {\n    font-size: 20px;\n    padding-left: 10px;\n  }\n  \n  .navbar-nav {\n    width: 100%;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 10px 0;\n  }\n  \n  .nav-item {\n    margin: 5px 0 !important;\n    width: 100%;\n  }\n  \n  .search {\n    position: static !important;\n    transform: none;\n    margin: 10px 0;\n    width: 100%;\n    max-width: 100%;\n    order: 3;\n  }\n  \n  .dark_lang {\n    order: 4;\n    padding: 10px 0;\n    width: 100%;\n    justify-content: flex-start;\n    margin-left: 0 !important;\n  }\n  \n  .navbar-toggler {\n    margin-left: auto;\n  }\n}\n\n.light-mode .search{\n  background: #fff;\n}\n.dark-mode .search{\n  background: #333333;\n}\n\n\n.activated {\n  width: 280px;\n}\n\n.dark-mode .search .icon {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 48px;\n  height: 48px;\n  border-radius: 48px;\n \n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n  cursor: pointer;\n}\n.light-mode .search .icon {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 48px;\n  height: 48px;\n  border-radius: 48px;\n \n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n  cursor: pointer;\n}\n\n.clear {\n  position: absolute;\n  top: 38%;\n  transform: translate(-50%);\n  /* border: 2px solid red; */\n  width: 15px;\n  height: 15px;\n  right: 15px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n\n.clear::before {\n  position: absolute;\n  content: \" \";\n  width: 1px;\n  height: 15px;\n  background: #999;\n  transform: rotate(45deg);\n}\n\n.clear::after {\n  position: absolute;\n  content: \" \";\n  width: 1px;\n  height: 15px;\n  background: #999;\n  transform: rotate(315deg);\n}\n\n.brand1 {\n  font-size: 40px;\n  font-weight: bolder;\n  text-shadow: 1px 1px blue;\n}\n\n/* .nav1 {\n  background-color: black;\n} */\n\n/* Character text animation  */\n\n\n\n/* Add this class to animate the slide-in effect */\n\n.chardiv{\n  margin: 0;\n\n  padding: 50px;\n  height: 200px;\n  overflow: hidden;\n  position: relative;\n}\n\n.light-mode .chardiv{\n  background-color: rgba(169, 195, 232, 0.364);\n}\n.dark-mode .chardiv{\n   background-color: rgba(82, 82, 82, 0.232);\n}\n\n.heroimg {\n height: inherit;\n position: absolute;\n right: 0;\n top:165px;\n scale: 3;\n margin-right: 150px;\nz-index: -1;\n}\n.vilimg2{\n  height: inherit;\n  position: absolute;\n  right: 0;\n  top:-20px;\n  scale: 1.5;\n  margin-right: 100px;\n z-index: -1;\n }\n.heroimg2{\n  height: inherit;\n  position: absolute;\n left: 0;\n  top:50px;\n  scale: 3;\n  margin-left: 150px;\n z-index: -1;\n }\n .vilimg{\n  height: inherit;\n  position: absolute;\n left: 0;\n  top:145px;\n  scale: 3;\n  margin-left: 150px;\n z-index: -1;\n }\n.chars {\n  background: linear-gradient(300deg, rgb(251,228,7),rgb(255,225,130),rgb(242,163,11),rgb(12,47,223),red);\n  background-size: 400%;\n  -webkit-text-fill-color: transparent;\n  -webkit-background-clip: text;\n  \n  text-decoration: none;\n  animation: linrclr 10s ease-in-out infinite;\n}\nh1.chars {\n  font-weight: 1000;\n  padding: 20px;\n  font-size: 3.5rem;\n\n  margin: 0px 0px 10px 0px;\n}\n\n@keyframes linrclr {\n  0% {\n    background-position: 0%;\n  }\n  100% {\n    background-position: 400%;\n  }\n}\nbody.light-mode #cont {\n  display: flex;\n  /* flex-direction: column; */\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  max-width: 2000px;\n  justify-content: center;\n  align-items: center;\n\n}\nbody.dark-mode #cont {\n  display: flex;\n  /* flex-direction: column; */\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  max-width: 2000px;\n  justify-content: center;\n  align-items: center;\n \n}\n.flip-card {\n  cursor: url(\"./Images/kunai_cursor.png\"), pointer;\n  \n}\n\n.topic {\n  text-align: center;\n  font-weight: 900;\n  font-size: 60px;\n  color: red;\n  text-shadow: 2px 4px 4px yellow;\n  text-decoration: underline;\n}\n\n\n\n.col-md-4 {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n\n.card-bg {\n  background-color: rgb(174, 184, 86);\n}\n\nh2 {\n  color: black;\n}\n\n/* body {\n  background-color: white;\n  font-weight: bold;\n  text-align: justify;\n} */\nh1 {\n  color: black;\n  text-align: center;\n  margin-top: 90px;\n  margin-bottom: 40px;\n  line-height: 14pt;\n}\n\n\n.light-mode #one {\n  background-color: #2867b2;\n}\n.dark-mode #one {\n  background-color: #0e3361;\n}\n.light-mode #two {\n  background-color: rgb(33, 31, 31);\n}\n.dark-mode #two {\n  background-color: rgba(40, 40, 40, 0.877);\n}\n\n#three {\n background: radial-gradient(circle at 0% 180%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);\n}\n\n#buttons {\n  margin-bottom: 10px;\n}\n\n.navTitle {\n  color: #ffffff;\n  padding-left: 50px;\n  size: 50px;\n}\n\n.row {\n  margin: 0 auto;\n  text-align: center;\n}\n\n.row1 {\n  margin-top: 6%;\n}\n\n.itemNav {\n  padding: 15px;\n}\n\n.mr-auto {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-decoration: none;\n}\n.nav-link{\n  transition:all ease-in-out 0.3s;\n}\n.light-mode .navbar-light .navbar-nav .nav-link{\n  font-family: \"Oswald\";\n  font-size: 1.4rem;\n  font-weight: 700;\n  color: rgb(255, 255, 255);\n}\n\n.dark-mode .navbar-light .navbar-nav .nav-link{\n  font-size: 1.4rem;\n  font-weight: 700;\n  color:rgb(117, 46, 203);\n}\n.light-mode .navbar-light .navbar-nav .active>.nav-link{\n  font-size: 1.4rem;\n  font-weight: 700;\n  color: rgb(255, 255, 255);\n  text-decoration: underline;\n  border-radius: 5px;\n}\n.dark-mode .navbar-light .navbar-nav .active>.nav-link{\n  font-size: 1.4rem;\n  font-weight: 700;\n  color: #c0a5ff;\n  text-decoration: underline;\n  border-radius: 5px;\n}\n\n.light-mode .toggle-mode {\n  font-size: 1rem;\n  background-color: beige;\n  border: none;\n  outline: none;\n  display: flex;\n  padding: 0.3rem 0.75rem;\n  border-radius: 4rem;\n  align-items: center;\n  justify-content: center;\n  font-weight: 600;\n  color: rgb(255, 210, 63);\n}\n.dark-mode .toggle-mode {\n  font-size: 1rem;\n  background-color: rgb(109, 39, 194);\n  border: none;\n  outline: none;\n  display: flex;\n  padding: 0.3rem 0.75rem;\n  border-radius: 4rem;\n  align-items: center;\n  justify-content: center;\n  font-weight: 600;\n  color: #c0a5ff;\n}\n.about-title {\n  padding-top: 2%;\n  color: white;\n  font-weight: bold;\n\n  line-height: 2.5rem;\n}\n\n.card {\n  overflow: clip;\n}\n\n.card img:hover {\n  transform: scale(1.1);\n  transition: all 0.3s ease-out;\n}\n\n@media only screen and (max-width: 600px) {\n  .display-3 {\n    font-size: 4rem;\n  }\n\n  .lead {\n    font-size: 1.6rem;\n  }\n\n  .gallery-head {\n    font-size: 2rem;\n  }\n\n  .navTitle {\n    padding-left: 3px;\n  }\n  .activated{\n    width: 180px;\n  }\n}\n\n.card h2 {\n  color: #dc3545;\n}\n/* body {\n  background-image: radial-gradient(blue, violet);\n  font-family: \"Ninja Naruto\", arial, sans-serif;\n} */\n\n/* Light mode */\n/* body {\n  background: #fff;\n  color: #000;\n} */\nbody.dark-mode {\n  background: linear-gradient(112.1deg, rgba(0, 60, 255, 0.756) 11.4%, rgb(63, 76, 119) 70.2%);\n}\n\nbody.dark-mode::before {\n  content: \"\";\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(1, 1, 1, 0.9);\n  /* Adjust the alpha (last) value to control darkness */\n  z-index: -1;\n}\n\np.aboutcolor {\n  color: white;\n}\n\nbody.aboutdarkmode {\n  background: black;\n  color: #ffffff;\n}\n\n.brand1 {\n  font-size: 40px;\n  font-weight: bolder;\n  text-shadow: 1px 1px blue;\n}\n\n/* .nav1 {\n  background-color: black;\n} */\n.topic {\n  text-align: center;\n  font-weight: 900;\n  font-size: 60px;\n  color: red;\n  text-shadow: 2px 4px 4px yellow;\n  text-decoration: underline;\n}\n\n\n\n\n.card-bg {\n  background-color: rgb(174, 184, 86);\n}\n\nh2 {\n  color: black;\n}\n\n/*about*/\n.light-mode .about-content {\n  text-align: justify;\n  font-size: 20px;\n  color: black;\n  border-radius: 2rem;\n  background: beige;\n  overflow: hidden;\n  transition: all 0.3s ease-in-out;\n  padding: 30px;\n  margin: 20px;\n  min-height: 50vh;\n  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;\n}\n\n.dark-mode .about-content {\n  text-align: justify;\n  font-size: 20px;\n  color: rgb(172, 83, 245);\n  border-radius: 2rem;\n  background-color: #1a1919c4;\n  overflow: hidden;\n  transition: all 0.3s ease-in-out;\n  padding: 30px;\n  margin: 20px;\n  min-height: 50vh;\n  box-shadow: rgba(145, 56, 255, 0.35) 0px 30px 100px 0px;\n  border: 2px solid rgba(146, 56, 255, 0.711);\n}\n.light-mode .about-content:hover {\n\n  background: #e2a9e5;\n  color: white;\n\n  background: linear-gradient(135deg, #e2a9e5 15%, #2b94e5 100%);\n}\n\n.dark-mode .about-content:hover {\n\n  background: #e2a9e5;\n  color: white;\n\n  background: linear-gradient(135deg, #a950ad 15%, #2271ad 100%);\n}\n\n\n\n/* body {\n  background-color: white;\n  font-family: \"Righteous\", cursive;\n  font-weight: bold;\n} */\n\nh1 {\n  color: black;\n  text-align: center;\n  margin-top: 90px;\n  margin-bottom: 40px;\n  line-height: 14pt;\n}\n\n\n.light-mode #four {\n  background-color: #1877f2;\n}\n.dark-mode #four {\n  background-color: #07499f;\n}\n\n.about-card {\n  border-radius: 8px;\n}\n\n#buttons {\n  margin-bottom: 10px;\n}\n\n.navTitle {\n  color: #ffffff;\n  padding-left: 50px;\n  size: 50px;\n}\n\n.row1 {\n  margin-top: 6%;\n}\n\n.itemNav {\n  padding: 15px;\n}\n\n.card {\n  overflow: clip;\n}\n\n.card img:hover {\n  transform: scale(1.1);\n  transition: all 0.3s ease-out;\n}\n\n@media only screen and (max-width: 600px) {\n  .display-3 {\n    font-size: 4rem;\n  }\n\n  .lead {\n    font-size: 1.6rem;\n  }\n\n  .gallery-head {\n    font-size: 2rem;\n  }\n\n  .navTitle {\n    padding-left: 3px;\n  }\n}\n\n.darkmode-btn {\n  border: none;\n  border-radius: 12px;\n  background-color: #f65c00;\n  color: #200e14;\n}\n\nbody {\n  /* background-color: #ee5522; */\n  /* background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23FB3'/%3E%3Cstop offset='1' stop-color='%23ee5522'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%23f7882b'/%3E%3Cstop offset='1' stop-color='%23ee5522'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg %3E%3Cg transform='translate(0 240)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(-36 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n  background-attachment: fixed;\n  background-size: cover; */\n}\n\n.radius {\n  border-radius: 50px;\n  width: 90% !important;\n  margin: auto;\n}\n.card-bg {\n  transition: all 0.5s;\n  background: rgba(255, 255, 255, 0.25);\n  box-shadow: 0 8px 32px 0 #1f26875e;\n  backdrop-filter: blur(2.5px);\n  -webkit-backdrop-filter: blur(2.5px);\n  border-radius: 10px;\n  border: 1px solid rgba(255, 255, 255, 0.18);\n}\n\n.card-bg:hover {\n  background: rgba(255, 255, 255, 0.4);\n  backdrop-filter: blur(20px);\n  -webkit-backdrop-filter: blur(20px);\n  border-radius: 40px 0 40px 0;\n  border: 1px solid rgba(255, 255, 255, 0.18);\n  box-shadow: #200e14 4px 3px;\n}\n\nh2.card-title {\n  font-size: 25px;\n  font-weight: 900;\n  color: rgb(255, 119, 34);\n\n  text-shadow: 3px 2px 2px #1000c49d ;\n  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.715);\n\n-webkit-background-clip: text; \n  letter-spacing: 2px;\n  text-align: center;\n  font-family: \"Ninja Naruto\";\n}\n\n.topic {\n  color: white;\n  text-shadow: 2px 4px 4px black;\n}\n\n.card:nth-of-type(2n + 1) {\n  transform: translateX(-10%);\n}\n\n.card:nth-of-type(2n) {\n  transform: translateX(10%);\n}\n\n.card {\n  transition: all 550ms ease-in;\n  opacity: 100;\n}\n\n.appear {\n  transform: translateX(0) !important;\n  opacity: 1;\n}\n\n/* Mobile devices */\n@media (min-width: 320px) and (max-width: 480px) {\n  #carouselExampleIndicators {\n    margin-top: 80px;\n  }\n\n  .topic {\n    color: white;\n    text-shadow: 2px 4px 4px black;\n    font-weight: 500;\n    font-size: 40px;\n    margin-top: 30px !important;\n  }\n\n  h2.card-title {\n    text-align: center;\n  }\n\n  .navbar-nav button {\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n\n\n  .search {\n    /* left: 220px; */\n  }\n}\n\n.nav-link:hover {\n  color:rgba(0,0,0,.8);;\n \n}\n\n\nbutton#scrolltopBtn {\n  border-radius: 100%;\n  height: 40px;\n  width: 40px;\n  font-size: 25px;\n  font-weight: bold;\n  /* text-align: center; */\n  /* position: sticky; */\n  margin-top: 100px;\n  position: fixed;\n  margin-left: 89rem;\n  z-index: 2000;\n  border: none;\n}\n .flip-card {\n  float: left;\n  border-radius: 29px;\n  background-color: transparent;\n  width: 300px;\n  /* min-height: 400px; */\n  /* border: 1px solid #e1dfdf; */\n  perspective: 1000px; /* Remove this if you don't want the 3D effect */\n  margin: 20px;\n  display: flex;\n  /* display: none; */\n}\n\n\n\n/* This container is needed to position the front and back side */\n.flip-card-inner {\n  position: relative;\n  width: 100%;\n  min-height: 400px;\n  text-align: justify;\n  transition: transform 0.8s;\n  transform-style: preserve-3d;\n  border-radius: 29px;\n  \n}\n\n/* Do an horizontal flip when you move the mouse over the flip box container */\n.flip-card:hover .flip-card-inner {\n  transform: rotateY(180deg);\n}\n\n/* Position the front and back side */\n.light-mode .flip-card-front,\n.light-mode .flip-card-back {\n  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;\n  border-radius: 15px;\n  position: absolute;\n  min-width: 300px;\n  border: 3px solid #ff7b00; \n  height: 400px;\n  -webkit-backface-visibility: hidden; /* Safari */\n  backface-visibility: hidden;\n  overflow: hidden;\n}\n\n.dark-mode .flip-card-front,\n.dark-mode .flip-card-back {\n  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;\n  border-radius: 15px;\n  position: absolute;\n  min-width: 300px;\n  border: 3px solid #9900ff; \n  height: 400px;\n  -webkit-backface-visibility: hidden; /* Safari */\n  backface-visibility: hidden;\n  overflow: hidden;\n}\n.flip-card-back {\n  overflow-y: scroll;\n}\n\n/* Style the front side (fallback if image is missing) */\n.flip-card-front {\n  \n  background-color: rgb(228 212 212);\n  color: black;\n}\n\n/* Style the back side */\n.light-mode .flip-card-back {\n  background-color: #FBAB7E;\n  background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);\n  box-shadow: rgb(157, 255, 253) 0px 30px 50px 0px;\n  color: #454545;\n  transform: rotateY(180deg);\n  padding: 20px;\n\n  scrollbar-width: none;\n  overflow-y: scroll;\n}\n\n.dark-mode .flip-card-back {\n  background-color: #1a1919c4;\n  \n  box-shadow: rgba(146, 56, 255, 0.59) 0px 30px 50px 0px;\n  color: #969696;\n  transform: rotateY(180deg);\n  padding: 20px;\n\n  scrollbar-width: none;\n  overflow-y: scroll;\n}\n\n.flip-card-back::-webkit-scrollbar {\n  display: none;\n}\n\n\n.card-content {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  max-height: 80px;\n  padding: 10px; /* Adjust the padding as needed */\n  background: rgba(77, 77, 77, 0.5); /* Semi-transparent background for better text visibility */\n  color: white; /* Set text color */\n  box-sizing: border-box;\n}\n\n.card-title {\n  margin: 0;\n}\n\n.flip-card-front img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\nul.navbar-nav.mr-auto {\n  position: absolute;\n  right: 10rem;\n}\n\n@media screen and (max-width: 955px) {\n  ul.navbar-nav.mr-auto {\n    position: absolute;\n    right: 0;\n    left: 0;\n    top: 0;\n    margin-top: 80px;\n    padding: 1rem;\n    background-color: #141a46;\n  }\n}\n\n.inner-container {\n  justify-content: center;\n}\n.about_card {\n  width: 300px;\n  margin: 10px 60px;\n}\n/* social icons */\n.footer h5 {\n  margin-top: 5px;\n}\n.footer .icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: wrap;\n}\n/* @media only screen and (max-width: 600px) {\n  .footer .icon{\n    flex-direction: column;\n  }\n} */\n.footer {\n  text-align: center;\n  padding-top: 20px;\n}\n.footer .icon .fa {\n  padding: 8px;\n  margin: 5px;\n  color: #f14a16;\n  background: #fff;\n  min-width: 43px;\n  /* height: 30px; */\n  font-size: 22px;\n  border-radius: 50%;\n  text-align: center;\n  text-decoration: none;\n  transition: all 0.3s ease;\n}\n.footer .icon .fa:hover {\n  color: #fff;\n  background: #f14a16;\n}\n.footer span {\n  text-decoration: underline;\n}\n\nfigure{\n margin: 0px;\n}\n/* blue */\n\n/* .css-12i25zk {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background: #75c1cc url(/index/sky.webp) no-repeat center/cover;\n} */\n\n/* cloud */\n/* .css-1bhvony {\n    position: absolute;\n    inset: 0px;\n    background: url(/index/cloud.webp) center center / contain no-repeat;\n    animation: 120s linear -60s infinite normal none running animation-1rcfmul;\n} */\n\n/* 0% {\n    transform: translateX(-100%);\n}\n\n<style>\n50% {\n    transform: none;\n}\n<style>\n100% {\n    transform: translateX(100%);\n} */\n\n/* .css-psf7l5 {\n    position: absolute;\n    inset: 0px;\n    background: url(/index/cloud.webp) center center / contain no-repeat;\n    animation: 120s linear 0s infinite normal none running animation-1rcfmul;\n} */\n\n/* statue */\n/* .css-2tjrt4 {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background: url(/index/mountain.webp) no-repeat center/cover;\n} */\n\n.btn {\n  cursor: pointer;\n  position: relative;\n  left: 22vh;\n  margin-right:20px;\n  background: #94a657;\n  border-radius: 4px;\n  color: #fff;\n  text-transform: uppercase;\n  line-height: 20px;\n  }\n\n.soundicon {\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  vertical-align: middle;\n  margin-left: 3px;\n}\n\n#nyan-btn {\n  font-size: 14px;\n  padding: 4px 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n"
  },
  {
    "path": "css/translate.css",
    "content": ".light-mode #google_translate_element select{\n  background:#F5F5DC!important;\n  color:black;\n  border: none;\n  border-radius:3px;\n  padding:10px!important;\n  margin-top: 5px;\n  }\n  .dark-mode #google_translate_element select{\n    background: rgb(109, 39, 194);\n    color:#c0a5ff;\n    border: none;\n    border-radius:3px;\n    padding:10px!important;\n    margin-top: 5px;\n    }\n  \n  .VIpgJd-ZVi9od-aZ2wEe-wOHMyf{\n    z-index: 9724790009779!important;\n    top:0;\n    left:unset;\n    right:-5px;\n    display:none!important;\n    border-radius:50%;\n    border:2px solid gold;\n   }\n   .VIpgJd-ZVi9od-aZ2wEe-OiiCO{\n    width:80px;\n    height:80px;\n  }\n  .VIpgJd-ZVi9od-l4eHX-hSRGPd{\n    display:none;\n  }\n  .goog-logo-link{\n    display:none !important;\n   }\n .goog-te-gadget{\n  color:transparent!important;\n  }\n  .goog-te-banner-frame{\n    display:none !important;\n    }\n.goog-te-gadget {\n  color: transparent!important;\n  font-size:0px;\n}\n\n.goog-text-highlight {\n  background: none !important;\n  box-shadow: none !important;\n}\n#goog-gt-tt, .goog-te-balloon-frame\n{\ndisplay: none !important;\n}\n.goog-text-highlight \n{ \nbackground: none !important;\nbox-shadow: none !important;\n}\n#google_translate_element{\n  width: auto !important;\n  display: inline-block !important;\n}\n.goog-te-combo{\n  margin-left:-15px;\n}"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en-US\">\n\n<head>\n    <link href=\"https://allfont.net/allfont.css?fonts=ninja-naruto\" rel=\"stylesheet\" type=\"text/css\" />\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css\"\n        integrity=\"sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l\" crossorigin=\"anonymous\">\n    <link rel=\"stylesheet\" href=\"css/style.css\" type=\"text/css\">\n    <link href=\"https://fonts.cdnfonts.com/css/ninja-naruto\" rel=\"stylesheet\">\n\n    <link\n        href=\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.6qtY7eooQBTfiSVjtrLrGQHaEj%26pid%3DApi&f=1\"\n        rel=\"icon\" type=\"image/jpeg\">\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\">\n    <link rel=\"icon\" type=\"image/png\" href=\"Images/favicon.png\">\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Open+Sans:ital@1&display=swap\" rel=\"stylesheet\">\n    <link rel=\"stylesheet\" href=\"css/index.css\">\n    <link href=\"css/translate.css\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" />\n\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css\" />\n    <title>Naruto-Home</title>\n</head>\n<style>\n    .vid {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        text-align: center;\n        background: rgba(0, 0, 0, 0.5);\n        color: white;\n        font-size: 30px;\n        position: relative;\n        overflow: hidden;\n        min-height: 50vh;\n    }\n\n    .videosrc {\n        position: absolute;\n        z-index: -1;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        min-width: 100%;\n        min-height: 100%;\n    }\n</style>\n\n<body class=\"light-mode\">\n\n    <a href=\"#\" class=\"to-top\">\n        <i class=\"fa fa-arrow-up\"></i>\n    </a>\n    <figure class=\"sky\"></figure>\n    <div class=\"loader \">\n\n        <header>\n\n            <nav class=\" animate__animated animate__fadeInDown sticky navbar  navbar-expand-lg navbar-light\"\n                style=\"height: 60px; padding:5px 5px 5px 30px;\">\n\n                <img src=\"adi image/naruto-advenimiento-los-animes-cortos-2.png\" style=\"max-height: 100%; width: auto;\">\n                <!-- Removed duplicate search bar -->\n                <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\"\n                    data-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\"\n                    aria-label=\"Toggle navigation\">\n                    <span class=\"navbar-toggler-icon\"></span>\n                </button>\n\n                <div class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\">\n                    <ul class=\"navbar-nav mr-auto\">\n                        <li class=\"nav-item active mx-4\">\n                            <a class=\"nav-link link\" style=\"text-decoration: none;\" href=\"./index.html\">Home</a>\n                        </li>\n                        <li class=\"nav-item mx-4\">\n                            <a class=\"link nav-link \"  href=\"./about.html\">About</a>\n                        </li>\n                        <li class=\"nav-item mx-4\">\n                            <a class=\"link nav-link \" href=\"./contact.html\">Contact</a>\n                        </li>\n                        <li class=\"nav-item mx-4\">\n                            <a class=\"link nav-link \" href=\"./Game.html\">Game</a>\n                        </li>\n                        <div class=\"search\">\n                            <i class=\"fa fa-search icon\"></i>\n                            <input type=\"text\" id=\"mysearch\" onkeyup=\"filterCards()\" placeholder=\"Search characters...\">\n                            <button onclick=\"clearSearch()\" class=\"clear-btn\">×</button>\n                        </div>\n                        <div class=\"dark_lang\">\n                            <li>\n                                <div>\n                                    <button onclick=\"darkmode()\" class=\"toggle-mode darkmodebutton\" id=\"toggler\">🌙\n                                        Dark</button>\n                                </div>\n                            </li>\n                            <li class=\"nav-item mx-4\">\n                                <div id=\"google_translate_element\"></div>\n                                <script>\n                                    function googleTranslateElementInit() {\n                                        new google.translate.TranslateElement({\n                                            pageLanguage: 'en',\n                                            autoDisplay: 'true',\n                                            layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL\n                                        }, 'google_translate_element');\n                                    }\n                                </script>\n                                <script\n                                    src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>\n                            </li>\n                        </div>\n                        <li class=\"nav-item mx-4\">\n                            <audio id=\"nyan\" src=\"./sound/naruto.mp3\" preload=\"metadata\" type=\"audio/mpeg\">\n                                Your browser does not support the audio element.\n                            </audio>\n                            <a class=\"btn\" id=\"nyan-btn\">play / pause <img src=\"./adi image/sound.png\"\n                                    class=\"soundicon\">\n                                <script src=\"./audio.js\"></script>\n                            </a>\n                        </li>\n                    </ul>\n\n                </div>\n            </nav>\n\n        </header>\n\n        <!-- header video -->\n\n        <div class=\"vid animate__animated animate__fadeIn\">\n\n            <a href=\"#\"><img src=\"adi image/naruto-shippuden.png\" style=\"width: 600px;\" class=\"logo\"></a>\n\n            <video autoplay loop muted class=\"videosrc\">\n                <source src=\"adi image/naruto - Made with Clipchamp.mp4\" type=\"video/mp4\">\n            </video>\n        </div>\n\n\n        <!-- header video end -->\n        <main>\n            <!-- \n            <div id=\"carouselExampleIndicators\" class=\"carousel slide\" data-ride=\"carousel\">\n                <ol class=\"carousel-indicators\">\n                    <li data-target=\"#carouselExampleIndicators\" data-slide-to=\"0\" class=\"active\"></li>\n                    <li data-target=\"#carouselExampleIndicators\" data-slide-to=\"1\"></li>\n                    <li data-target=\"#carouselExampleIndicators\" data-slide-to=\"2\"></li>\n                </ol>\n                <div class=\"carousel-inner\">\n                    <div class=\"carousel-item active\">\n                        <img src=\"./Images/229954.jpg\" class=\"radius d-block\" alt=\"...\">\n                    </div>\n                    <div class=\"carousel-item\">\n                        <img src=\"./Images/377906.jpg\" class=\"radius d-block\" alt=\"...\">\n                    </div>\n                    <div class=\"carousel-item\">\n                        <img src=\"./Images/377922.jpg\" class=\"radius d-block\" alt=\"...\">\n                    </div>\n                    <div class=\"carousel-item\">\n                        <img src=\"./Images/123456.jpg\" class=\"radius d-block\" alt=\"...\">\n                    </div>\n                </div>\n                <a class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\" data-slide=\"prev\">\n                    <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"sr-only\">Previous</span>\n                </a>\n                <a class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\" data-slide=\"next\">\n                    <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"sr-only\">Next</span>\n                </a>\n            </div> -->\n            <div class=\"chardiv \">\n                <img class=\"heroimg good animate__animated animate__fadeInRight \"\n                    src=\"adi image/Naruto-Uzumaki-No-Background.png\" alt=\"\">\n                <img class=\"heroimg2 good animate__animated animate__fadeInLeft \" src=\"adi image/png-image.png\" alt=\"\">\n                <img class=\"vilimg evil animate__animated animate__fadeInLeft\"\n                    src=\"adi image/uchiha_madara___png___by_anvmadara_dewr6zj-pre.png\" alt=\"\">\n                <img class=\"vilimg2 evil animate__animated animate__fadeInRight  \"\n                    src=\"adi image/d383ajh-c063f3bf-1787-4484-a75e-5bd8a8892a86.png\" alt=\"\">\n                <h1 class=\"chars\">CHARACTERS</h1>\n                <!-- Toggle Button Start -->\n                <div class=\"toggle-switch\">\n                    <span class=\"toggle-label hero\">Heroes</span>\n                    <label class=\"toggle-button\" for=\"toggle-input\">\n                        <input type=\"checkbox\" class=\"toggle-input\" id=\"toggle-input\">\n                        <div class=\"toggle-slider\" id=\"toggle-slider\"></div>\n                    </label>\n                    <span class=\"toggle-label villian\">Villains</span>\n                </div>\n            </div>\n            <!--Card section start-->\n            <div class=\"container \" id=\"cont\">\n                <!--[Shinki] card Start-->\n                <div class=\"flip-card animate__animated animate__flipInX good \">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title \">Shinki</h2>\n                            </div>\n                            <img data-src=\"./Images/Shinki.webp\" alt=\"Shinki\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">\n                                In the anime, as a young boy, Shinki was unable to control his power prompting Gaara to\n                                approach him. Fearful, he attacked the Kazekage, who surprised him by hugging him\n                                despite\n                                Shinki injuring him. Offering to teach Shinki how to use his power, he told Gaara his\n                                name\n                                before accepting his offer. Following the encounter, Gaara adopted him, and soon after\n                                began teaching Shinki proper control of his power and how to effectively use it in\n                                battle.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n                \n\n\n\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title \">Himawari Uzumaki</h2>\n                            </div>\n                            <img data-src=\"./Images/Himawari Uzumaki.jpg\" alt=\"Himawari Uzumaki\" height=\"330px\"\n                                width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">\n                                Himawari is the daughter of Naruto and Hinata, as well as the younger sister of Boruto.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n                \n\n               \n\n\n               \n\n\n                <!--[Naruto] card start -->\n\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title \">Naruto Uzumaki</h2>\n                            </div>\n                            <img data-src=\"./Images/naruto.png\" alt=\"Naruto\" height=\"260px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Naruto Uzumaki is the main protagonist in the popular manga and anime\n                                series Naruto. He is a cheerful, hyperactive, strong-willed, and occasionally\n                                simple-minded young shinobi from the village of Konoha (or Leaf Village).</p>\n                            <p>Since Naruto has the Nine Tails Fox sealed inside him, he is able to use the Fox's\n                                chakra, which is much greater than the average human. Initially Naruto and the Fox hated\n                                each other, and would rarely grant Naruto his power\n                                unless they were going to die. Eventually, they become friends, and Naruto then refers\n                                to the fox by his name, Kurama. At this point, Naruto can use Kurama's chakra at\n                                will.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--[Naruto] card end -->\n                <!-- Hero [character name] card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Konohamaru Sarutobi</h2>\n                            </div>\n                            <img data-src=\"https://static1.cbrimages.com/wordpress/wp-content/uploads/2019/11/Konohamaru-FactS.jpg?q=50&fit=contain&w=1140&h=&dpr=1.5\"\n                                of character] height=\"300px\" width=\"300px\" class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Konohamaru Sarutobi (猿飛木ノ葉丸, Sarutobi Konohamaru) is a shinobi of\n                                Konohagakure's Sarutobi clan. After later becoming a jōnin, he becomes the leader of his\n                                own genin team. He strives to one day become Hokage after his idol, Naruto Uzumaki.</p>\n                            <p>Konohamaru was born into the Sarutobi clan and was named after Konoha by his grandfather.\n                                While being raised by his Anbu parents,[7] Konohamaru was never referred to by his name\n                                by the villagers, only ever called \"Honourable Grandson\" (お孫様, Omago-sama) because of\n                                his relationship to the Hokage. Wanting to be acknowledged as a person and not simply\n                                the Hokage's grandson, Konohamaru began trying to defeat Hiruzen in order to replace him\n                                as Hokage.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Hero [character name] card end-->\n\n\n                <!--[Jiraiya] card start -->\n\n                \n                <!--[Kawaki] card start -->\n\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title \">Kawaki Uzumaki</h2>\n                            </div>\n                            <img data-src=\"./Images/kawaki_img2.jpg\" alt=\"Kawaki\" height=\"260px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Kawaki (カワキ, Kawaki) is a shinobi raised by Jigen and his organization\n                                Kara to be the future vessel for Isshiki Ōtsutsuki. After being brought to Konohagakure,\n                                he is taken in by Naruto Uzumaki and develops a brotherly bond with Boruto Uzumaki.</p>\n                            <p>Kawaki is a fictional character from Ukyō Kodachi and Mikio Ikemoto's manga Boruto:\n                                Naruto Next Generations. Initially appearing in the flashforward in the series' debut,\n                                Kawaki is a young man who apparently would become the nemesis of the series' lead\n                                character, Boruto Uzumaki. </p>\n                        </div>\n                    </div>\n                </div>\n                <!--[Kawaki] card end -->\n\n                <!--[Sasuke Uchiha] card start-->\n\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Sasuke Uchiha</h2>\n                            </div>\n                            <img data-src=\"./Images/Sasuke.png\" alt=\"Sasuke Uchiha\" height=\"350px\" width=\"250px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Sasuke Uchiha (うちはサスケ, Uchiha Sasuke) is one of the last surviving\n                                members of Konohagakure's Uchiha clan. After his older brother, Itachi, slaughtered\n                                their clan, Sasuke made it his mission in life to avenge them by killing\n                                Itachi. He is added to Team 7 upon becoming a ninja and, through competition with his\n                                rival and best friend, Naruto Uzumaki, .</p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- [Sasuke Uchiha] card end-->\n\n                    <!--[Moegi] card start-->\n\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Moegi</h2>\n                            </div>\n                            <img data-src=\"https://i.pinimg.com/originals/25/de/af/25deaf7da91ee985d79d02d668c4b6c6.jpg\" alt=\"Moegi\" height=\"350px\" width=\"250px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Moegi (モエギ) is a kunoichi of Konohagakure and a member of Team 10.\n                                She is known for her cheerful personality and her skills in ninjutsu. Moegi has a close\n                                friendship with her teammates and often supports them in their missions.</p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- [Moegi] card end-->\n\n\n                <!-- [Sarada Uchiha] card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Sarada Uchiha</h2>\n                            </div>\n                            <img data-src=\"./Images/Sarada_Infobox.webp\" alt=Sarada height=\"300px\" width=\"300px\"\n                                class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Sarada Uchiha is the daughter of Sasuke Uchiha and Sakura Haruno.\n                                She seems to have inherited traits from both her parents, like her mother's \"Cha!\"\n                                verbal tic\n                                and her father's aloofness and reluctance to acknowledge and commend others.\n                                Sarada is the central character of Naruto: The Seventh Hokage and the Scarlet Spring,\n                                searching for her estranged father while mistakenly feeling she and Sakura are not\n                                related.\n                                Gaining her Sharingan in the process,but not having a good first impression of her\n                                father Sasuke,\n                                Sarada feels hurt and betrayed when she incorrectly suspects being Karin's biological\n                                child as the\n                                two wear similar glasses. While Naruto helps her realize that family is not a matter of\n                                blood,\n                                Sarada eventually learns that Sakura is her biological mother as Karin later explains\n                                she was Sakura's midwife. Before leaving again, Sasuke shows Sarada how much he loves\n                                her by poking her\n                                forehead, and promises to come home soon. Having admired Naruto and his dedication to\n                                his village,\n                                Sarada makes it her goal to become the next Hokage. Sarada is voiced by Kokoro Kikuchi\n                                in Japanese,\n                                while in the English version she is voiced by Laura Bailey in Naruto Shippuden: Ultimate\n                                Ninja\n                                Storm 4 and by Cherami Leigh in all subsequent appearances.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--[Sarada Uchiha] card end-->\n\n                <!-- Villian [Toneri Ōtsutsuki] card start-->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Toneri Ōtsutsuki</h2>\n                            </div>\n                            <img data-src=\"./Images/Toneri Ōtsutsuki.jpg\" alt=\"Toneri Ōtsutsuki\" height=\"250px\"\n                                width=\"300px\" class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\"></p>\n                            <p>Toneri Ōtsutsuki is a descendant of Hamura Ōtsutsuki and the sole survivor of the\n                                Ōtsutsuki Clan's branch family on the Moon.\n                                Toneri carries hatred towards mankind for weaponising chakra and once plotted to destroy\n                                humanity as punishment,\n                                a goal which he states that the branch family of his clan desired for a thousand years.\n                                He usually displays a calm and cool demeanour driven to completing the Thousand Year\n                                Plan to wipe out the shinobi world.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Villian [Toneri Ōtsutsuki] card end-->\n\n                <!-- [Sumire kakei] card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Sumire Kakei</h2>\n                            </div>\n                            <img src=\"./Images/sumire.jpg\" alt=\"Sumire Kakei\" height=\"393px\" width=\"737px\"\n                                class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">\n                                Sumire Kakei is a former member of Team 15 and a kunoichi of Konohagakure's Scientific\n                                Ninja Weapons Team.\n                                She served as the Ninja Academy's Class Representative for Boruto's class. After\n                                Danzo Shimura passed away and the village learned of Root's existence and its deeds, all\n                                of its members, including Sumire's family, were shunned.\n                                This led to Sumire's mother's illness and eventual death.\n                                Sumire was profoundly affected by the loss because one of her few delights was brushing\n                                her hair with her mother.\n                                Over time, Sumire lost even the memory of her mother's voice.\n                                Tanuki Shigaraki, Sumire's father and a crazed Danzo devotee, raised her with the goal\n                                of exacting revenge on Root.\n                                He eventually awarded her the Gozu Tenno.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--[Sumire Kakei] card end-->\n\n\n\n                <!--[SAKUMO HATAKE] card start-->\n\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Sakumo Hatake</h2>\n                            </div>\n                            <img data-src=\"./Images/Sakumo_Hatake_pic.jpg\" alt=\"Sakumo Hatake\" height=\"350px\"\n                                width=\"250px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Sakumo Hatake is the father of Kakashi Hatake. He was classified in the\n                                same bracket as the Legendary Sannin. Sakumo earned the epithet of \" White Fang of the\n                                Hidden Leaf.\" His name was known throughout the other villages. Sakumo was also\n                                responsible for the killing of Sasori's parents. Sakumo's life took a turn for the worse\n                                when he chose to save the lives of his comrades instead of completing the mission.\n                                Sakumo was rebuked for his decision and in the end, he fell into despair and then\n                                committed suicide.</p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- [SAKUMO HATAKE] card end-->\n\n\n\n\n\n               \n\n                <!-- [Itachi Uchiha] card start-->\n\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Itachi Uchiha</h2>\n                            </div>\n                            <img data-src=\"./Images/Itachi_Uchiha.jpg\" alt=\"Could not load image\" height=\"300px\"\n                                width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Itachi Uchiha is a character in the Naruto manga and anime series\n                                created by Masashi Kishimoto. Itachi is the older brother of Sasuke Uchiha, and is\n                                responsible for killing all the members of their clan, sparing only Sasuke</p>\n                        </div>\n                    </div>\n                </div>\n\n\n\n\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Code</h2>\n                            </div>\n                            <img data-src=\"https://comicvine.gamespot.com/a/uploads/square_small/11112/111121983/7944995-6688316931-latest.png\"\n                                alt=\"Black Zetsu\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Code is the last active Inner from Kara. Carrying Isshiki Ōtsutsuki's\n                                legacy within him..</p>\n                        </div>\n                    </div>\n                </div>\n\n\n               \n\n                \n\n                <!-- [Hayate Gekko] card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Hayate Gekko</h2>\n                            </div>\n                            <img data-src=\"./Images/gekko.jpeg\" alt=\"Hayate Gekko\" height=\"300px\" width=\"300px\"\n                                class=\"img_card\">\n\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Hayate was a tokubetsu jounin from the Hidden village of Konoha. He\n                                served as the\n                                proctor for the final round of the chunnin exams. He died fighting Baki from the Hidden\n                                village of\n                                Sand and was replaced by Genma Shiranui as the proctor for the chunnin exams. He was\n                                later reanimated\n                                by Kabuto during the fourth great ninja war.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--[Hayate Gekko] card end-->\n\n\n\n\n                <!--[Princess Kasumi] card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Princess Kasumi</h2>\n                            </div>\n                            <img data-src=\"./Images/Princess_kasumi.jpg\" alt=\"Princess Kasumi\" height=\"250px\"\n                                width=\"250px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Kasumi (かすみ, Kasumi) or Princess Dusk (キリ姫, Kiri-hime) The main\n                                antagonist of Naruto: Ultimate Ninja Heroes 2. She thirsts for revenge against Konoha\n                                Village, but her anger is amplified by Orochimaru's manipulation.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--[Princess Kasumi] card end-->\n\n\n                <!-- [Sai] card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Sai Yamanaka</h2>\n                            </div>\n                            <img data-src=\"./Images/Sai_Infobox.png\" alt=\"Sai Yamanaka\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Sai Yamanaka (山中サイ, Yamanaka Sai) is the Anbu Chief of\n                                Konohagakure's Yamanaka clan. Prior to this, he was a Root member.\n                                As per standard Root training, Sai was conditioned to remove all emotions and as such,\n                                had difficulty connecting with others. When he is added to Team Kakashi as a replacement\n                                for the rogue Sasuke Uchiha, Sai begins to learn more about people's feelings and tries\n                                to develop his\n                                personality and identity by forming genuine bonds and rediscovering the emotions he was\n                                taught to suppress..</p>\n\n                        </div>\n                    </div>\n                </div>\n\n                <!--[Sai] card end-->\n\n                <!-- [Anko Mitarashi] card start-->\n\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Anko Mitarashi</h2>\n                            </div>\n                            <img data-src=\"./Images/anko.jpg\" alt=\"Anko Mitarashi\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n\n                            <p class=\"card-text\">The proctor of the survival leg of the Chuunin exams, she goes through\n                                her enemies like a blazing inferno. She was once tutored by Orochimaru, but was\n                                abandoned by him when she refused to follow his evil path.\n                                Anko Mitarashi is a Jonin of the Hidden Leaf Village. She was a proctor of the survival\n                                portion of the Chunin exams. She was also a former student of longtime series\n                                antagonist, Orochimaru, but did not share his vision and refused to follow him further.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n\n                <!--[Anko Mitarashi] card end-->\n\n\n                <!-- [Chiriku] card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Chiriku</h2>\n                            </div>\n                            <img data-src=\"./Images/chiriku.jpg\" alt=\"Chiriku\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n\n                            <p class=\"card-text\">Chiriku is a Fire Temple monk, formerly a member of the “12 Guardian\n                                Ninjas” of the Lord of the Fire Land. There he will meet Asuma Sarutobi, son of the\n                                third Hokage. Their mission was to escort and protect the Daimyo of the Land of\n                                Fire.</p>\n                            <p>Today he lives in the Temple of Fire with his disciples. He took under his wing a young\n                                man named Sora, the son of one of the 12 deceased guardian ninjas. His head having been\n                                put on a price of 30 million ryos, he was assassinated by Kakuzu and Hidan during a\n                                fight at the Fire temple. After this clash, the Fire Temple was destroyed. Hidan and\n                                Kakuzu then returned the body to collect the bounty. And thus fill the crates of\n                                Akatsuki.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--[Chiriku] card end-->\n                <!-- [Fukusaku] card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Fukusaku</h2>\n                            </div>\n                            <img src=\"./Images/Fukusaku.jpg\" alt=\"Fukusaku\" height=\"225px\" width=\"300px\"\n                                class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">When Jiraiya accidentally reverse-summoned himself to Mount Myōboku,\n                                Fukasaku greeted the young shinobi and stated that the Great Toad Sage was expecting\n                                him.\n                                Some time after this, Fukasaku taught Jiraiya senjutsu.\n                                Fukasaku was later present when the Great Toad Sage called\n                                for Jiraiya to tell him about his prophecy.</p>\n                            <p>Fukasaku, like his wife Shima, is considered very wise and is greatly respected\n                                by all who know them well enough. In reality, he constantly bickers with Shima\n                                over small things when they should focus on the bigger picture, such as the fact\n                                that a battle will cause them to miss dinner. They are still close, as Shima\n                                is heartbroken after Fukasaku is killed by Pain. Though Fukasaku remains serious\n                                in even the worst situation, he and his wife will constantly find a reason to bicker\n                                with each other. He also has a tendency to call the Great Toad Sage, \"senile\" for\n                                constantly forgetting everything</p>\n                        </div>\n                    </div>\n                </div>\n                <!--[Fukusaku] card end-->\n                <!-- [ten tails] card start-->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Ten Tails - Juubi</h2>\n                            </div>\n                            <img data-src=\"./Images/ten tails.jpeg\" alt=\"Ten Tails - Juubi\" height=\"270px\"\n                                width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">This Ten-Tails (十尾, Jūbi) is the combined form of Kaguya Ōtsutsuki and\n                                the God Tree, created to reclaim the chakra inherited by her sons, Hagoromo and Hamura.\n                                It is regarded as the progenitor of chakra, and is tied to the legend of the Sage of Six\n                                Paths and the birth of shinobi. To end the beast's rampage, the Sage became the\n                                Ten-Tails' jinchūriki and later split its chakra into the nine tailed beasts to prevent\n                                it from causing further harm. Centuries later, its revival became the objective of\n                                Madara and Obito Uchiha, who both sought to become the beast's jinchūriki in order to\n                                further their objectives.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--[ten tails] card end-->\n\n                <!-- [Eight Tails] card start -->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Eight Tails - Gyuki</h2>\n                            </div>\n                            <img data-src=\"./Images/Gyuki-Eight-Tails-in-Naruto.webp\" alt=\"Eight Tails - Gyuki\"\n                                height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Gyuki was sold to the Hidden Cloud village along with Matatabi, but the\n                                nation struggled to find a Jinchuriki who could control it. One of these was Blue B, the\n                                nephew of the Third Raikage, but after Gyuki went on a rampage, the Raikage was\n                                forced to seal him away, causing his nephew's tragic death. Gyuki was ultimately sealed\n                                within Killer Bee, the Third Raikage's adopted son, who surprisingly proved himself a\n                                compatible host. Bee befriended his Bijuu through the power of rap, and their\n                                relationship became perfectly two-way, allowing the ninja to draw out Eight-Tails' power\n                                at will. Gyuki is an ox-like yokai with sheep horns and tentacle tails, and is regarded\n                                as the second strongest bijuu.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- [Eight Tails] card end -->\n\n                <!-- [Seven Tails] card start -->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Seven-Tails - Chomei</h2>\n                            </div>\n                            <img data-src=\"./Images/Chomei-Seven-Tails-in-Naruto.webp\" alt=\"Seven Tails - Chomei\"\n                                height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Chomei was formerly sealed within Fu, a female ninja from the Hidden\n                                Waterfall, after being sold to the village by Hashirama. This was unusual, since the\n                                Waterfall isn't one of Naruto's five major nations, but were considered powerful enough\n                                to be included in the arrangement. Naruto flashbacks show each of the tailed beasts as\n                                babies, soon after their creation by the Sage of Six Paths, but while most of these\n                                young creatures are cuter, smaller versions of their present-day selves, Chomei actually\n                                took a larval state, reflecting its insect-like design as an adult. Chomei is similar to\n                                a Japanese rhinoceros beetle, and compared to its Bijuu kin, is remarkably placid and\n                                laid-back, which is likely why Chomei doesn't resemble typical demons in anime.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- [Seven Tails] card end -->\n\n                <!-- [Asura] card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Asura</h2>\n                            </div>\n                            <img data-src=\"./Images/Asura.png\" alt=\"Asura\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Asura Ōtsutsuki (大筒木アシュラ, Ōtsutsuki Ashura) was the younger son of\n                                Hagoromo Ōtsutsuki. Though not the obvious choice to most, he would go on to inherit his\n                                father's teachings, and as a result, would have to clash bitterly against his elder\n                                brother Indra. Asura is also credited with being the progenitor of both the Senju and\n                                Uzumaki clans.</p>\n                            <p>With the power entrusted to him by his father, Asura gained access to the Six Paths\n                                Senjutsu, allowing him to augment himself and his various techniques. In this state, he\n                                could fly and manifest a giant three-faced, six-armed avatar, Six Paths: Kunitsukami.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n                <!--[Asura] card end-->\n\n                <!-- Hero Yoshino Nara card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Yoshino Nara</h2>\n                            </div>\n                            <img data-src=\"./Images/YoshinoNara.jfif\" alt=\"Yoshino Nara\" height=\"300px\" width=\"300px\"\n                                class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">\n                                Yoshino Nara is a character in the \"Naruto\" series,\n                                created by Masashi Kishimoto. She is a member of the Nara Clan,\n                                a prominent and influential family in the Hidden Leaf Village.\n                                Yoshino is the wife of Shikaku Nara and the mother of Shikamaru Nara,\n                                who is one of the central characters in the series.</p>\n                            <p>Yoshino Nara, while not a central character in the \"Naruto\" series,\n                                is an important part of the Nara Clan and the broader Hidden Leaf Village community.\n                                Her character reflects the strong family bonds and the supportive relationships\n                                that are often explored in the series.\n                                Yoshino Nara is not depicted as either good or evil in the \"Naruto\" series.\n                                She is a neutral character and is primarily portrayed as a loving mother\n                                and supportive wife. Yoshino's character does not engage\n                                in acts of villainy or evil,\n                                nor does she take on a hero or protagonist role. </p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Hero Yoshino Nara card end-->\n\n                <!-- [Inuzuka Hana] card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Inuzuka Hana</h2>\n                            </div>\n                            <img data-src=\"./Images/inuzuka_hana.jpg\" alt=\"Inuzuka Hana\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Hana is a kunoichi from Konoha village. She is Kiba's sister and\n                                Tsume's daughter</p>\n                            <p>Hana also specializes in animal medicine: she is a veterinarian. His companions are 3 dog\n                                brothers: Les Trois Frères Haimaru.</p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Izumi Uchiha card start -->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\"> Izumi Uchiha </h2>\n                            </div>\n                            <img data-src=\"./Images/Izumi_Uchiha.jpg\" alt=\"Izumi Uchiha\" height=\"350px\" width=\"380px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Izumi was the daughter of Hazuki Uchiha. Unlike her mother, Izumi's\n                                father was not an Uchiha.During the Nine-Tailed Demon Fox's Attack, her father died\n                                while protecting her.From the grief brought on by his death, as well as feelings of\n                                guilt that he would not have died had Izumi been stronger,Izumi eventually awakened her\n                                Sharingan. She and her mother afterwards rejoined the Uchiha clan.</p>\n                            <p>Izumi enrolled in Konoha's Academy a few years later.Like other girls her age, Izumi\n                                developed a crush on Itachi Uchiha, a boy in the class next to hers.As such, she tried\n                                to talk with him during school breaks, walk home with him after lessons, and defend him\n                                from their peers' criticism. Itachi initially took the same disinterest in Izumi that he\n                                had in all the other girls until discovering that she had the Sharingan, which he\n                                himself had yet to awaken.He afterwards became warmer to her whenever their paths\n                                crossed. </p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Izumi Uchiha card end -->\n\n                \n\n                <!-- [Neji Hyuga] card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Neji Hyuga </h2>\n                            </div>\n                            <img data-src=\"./Images/neji-hyuga.jpg\" alt=\"Neji Hyuga\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Neji Hyuga was a shinobi of Konohagakure's Hyūga clan. Though a prodigy\n                                even by the Hyūga's standards, Neji was a member of the clan's branch house; no matter\n                                how skilled he became, he would always be in service to the Hyūga's main house. </p>\n                            <p>As a member of Team Guy he sought the strength necessary to make the future he wanted for\n                                his family and friends, and ultimately sacrificed his life to protect the very same\n                                person who taught him about the freedom of one's choice of fate, Naruto.</p>\n                        </div>\n                    </div>\n                </div>\n\n\n                <!--[Neji Hyuga] card end-->\n\n\n                <!-- Rôshi Card start -->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Rôshi</h2>\n                            </div>\n                            <img data-src=\"./Images/roshi.jpg\" alt=\"Rôshi\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Rôshi was the last Jinchûriki of Yonbi, the 4-tailed demon. He was\n                                killed by Kisame Hoshigaki, a former member of the Akatsuki, who aimed to reunite all\n                                the Biju.</p>\n                            <p>Rôshi will be resurrected later during the Fourth Great Ninja War by Kabuto Yakushi. He\n                                will fight Bee and Naruto.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--[Rôshi] card end-->\n\n                <!-- [Suigetsu] card start-->\n\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Suigetsu</h2>\n                            </div>\n\n                            <img data-src=\"./Images/Suigetsu.jpeg\" alt=\"Suigetsu\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">\n                                Suigetsu was a member of Sasuke's renegade group consisting of himself, Suigetsu, Karin,\n                                and Jugo. Of the quartet, Suigetsu was the self-styled comedian. He had plenty of\n                                sarcastic lines and made every effort he could to get under Karin's skin.\n                            </p>\n                            <p>The above line was especially funny coming from Suigetsu, as the audience got the\n                                distinct impression that he probably wasn't a true believer in Sasuke's dream. It was\n                                even funnier in the moment, as he made a decisive gesture with a spoon he was using at\n                                the time.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--[Suigetsu] card end-->\n\n                <!-- [Boruto] card start -->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\"> Boruto Uzumaki</h2>\n                            </div>\n\n                            <img data-src=\"./Images/boruto.jpg\" alt=\"Boruto Uzumaki\" height=\"350px\" width=\"380px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Boruto Uzumaki (うずまきボルト, Uzumaki Boruto) is a shinobi from\n                                Konohagakure's Uzumaki Clan and a direct descendant of the Hyūga clan through his\n                                mother. Initially nonchalant in his duties as a member of Team 7 and resentful of his\n                                father and the office of Hokage because it left him with no time for his family; Boruto\n                                eventually comes to respect and reconcile with his father and his role as Hokage, yet\n                                vows to become like his mentor Sasuke Uchiha — a support system for the Hokage and the\n                                village.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- [Boruto] card end-->\n\n               \n\n                \n\n                <!-- Yukimaru card start -->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\"> Yukimaru </h2>\n                            </div>\n\n                            <img data-src=\"./Images/yukimaru.png\" alt=\"Yukimaru\" height=\"350px\" width=\"380px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Yukimaru is a young orphan who became one of Orochimaru's test\n                                subjects, due to his ability to partially control the Three-Tails.</p>\n                            <p>Yukimaru lived with his mother in a village that was attacked by Orochimaru's followers\n                                when Yukimaru was a child.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Yukimaru card end-->\n\n\n                <!-- Yamato card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Yamato</h2>\n                            </div>\n                            <img data-src=\"./Images/yamato.png\" alt=\"Yamato\" height=\"300px\" width=\"300px\">\n\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Yamato is a very discreet, cautious, careful and well prepared person.\n                                He projects a calm, stoic demeanour in stressful situations. He takes his missions very\n                                seriously, even insisting on being referred to by whatever his current codename</p>\n                            <p>Yamato is one of the main supporting characters in the Naruto anime/manga series and the\n                                Boruto: Naruto Next Generations anime/manga series. He is an ANBU in the service of\n                                Konohagakure. Because of his unique jutsu, he is added to Team Kakashi as a temporary\n                                for Kakashi Hatake. Though Kakashi eventually returns to the team, Yamato stays on to\n                                provide assistance when he's needed.</p>\n                        </div>\n                    </div>\n                </div>\n                \n\n                <!-- [Hanabi Hyuga] card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Hanabi Hyuga</h2>\n                            </div>\n                            <img data-src=\"Images/download.jfif\" alt=\"Hanabi Hyuga\" height=\"350px\" width=\"380px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Hanabi is the younger sister of Hinata. She plays an important role in\n                                The Last: Naruto the Movie. Her father is Hiashi Hyuga and is auntie to Hinata's\n                                children, Boruto and Himawari. Her cousin is Neji Hyuga.\n                                Naruto Uzumaki is her brother-in-law.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--[Hanabi hyuga] card end-->\n\n                <!-- [Tsunade] card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Tsunade</h2>\n                            </div>\n                            <img data-src=\"Images/Tsunade.jpg\" alt=\"Tsunade\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Tsunade is a kunoichi from the Hidden Leaf Village and posses\n                                Monstrous physical strength, extremely advanced healing and regenerative techniques,\n                                physician/surgeon\n                                level of knowledge of the human body and great Chakra control. At once formed part of\n                                \"The Legendary\n                                Sannin\" along with\n                                Jiraiya and Orochimaru, and under the tutelage of the Third Hokage. Currently, she\n                                has become the Fifth Hokage of The Hidden Leaf Village. Her grandparents are revealed to\n                                be Hashirama\n                                Senju and Mito Uzumaki.</p>\n                            <p>Tsunade's trademark ability is her inhuman strength, which is derived from her\n                                excellent chakra control. By storing chakra and releasing it at the point of contact,\n                                she can enhance her strength to the point where she can break through boulders her bare\n                                hands. She is also an extremely talented Medical-nin, and can heal wounds that most\n                                others would consider impossible.\n                                She went as far as to use the Shadow Seal: Release to store her chakra in her forehead\n                                to Creation Rebirth, a technique that releases the chakra to rapidly regenerate the\n                                cells in her body to heal any wound. It gives her a \"immortality\" in battle thateven\n                                Orochimaru envied. However, because of the rapid cell regeneration, the technique\n                                shortens her life similar to the Four-Tailed\n                                transformation, however more controlled. Because of the risk associated with the\n                                technique, Tsunade has made the choice to only use Creation Rebirth in extremely\n                                desperate situations.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--[Tsunade] card end-->\n\n                <!-- [Jirobo] card start-->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Jirobo</h2>\n                            </div>\n                            <img data-src=\"https://www.giantbomb.com/a/uploads/scale_small/0/5756/330799-jirobo.jpg\"\n                                alt=\"Jirobo\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">A ninja from The Hidden Sound Village and member of The Sound Five.he\n                                was the physically strongest member of the Sound Four, but the weakest overall.\n                                According to the other members of the group, nevertheless, he was a formidable opponent.\n                                Furthermore, Shikamaru stated that Jirōbō's prowess was at jōnin-level. In the anime,\n                                another testament to his prowess was him being chosen for reincarnation by Kabuto.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- [Jirobo] card end-->\n\n                <!-- [Hanare] card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Hanare</h2>\n                            </div>\n                            <img data-src=\"https://qph.fs.quoracdn.net/main-qimg-85fae3ac8ec01ad91d4a5304cf3a2b1a\"\n                                alt=\"Hanare\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Hanare (ハナレ, Hanare) is a kunoichi from the Jōmae Village. </p>\n                            <p>As a young child, Hanare was said to be very lonely since she had never known her family\n                                or seen\n                                her own village. She was trained from an early age in the art of espionage. One day, she\n                                was\n                                found crying in a place near her village by the young Kakashi, who spotted her and\n                                carried her\n                                on his back. He then explained to her that she can look up to the clouds above and find\n                                her way.\n                                They both were then seen by a ninja from Hanare's village and Kakashi put her down on\n                                her feet,\n                                said goodbye and left. She was then excited that someone like Kakashi was able to help\n                                her in\n                                her life.\n                                At one point, she met Kakashi Hatake and developed romantic feelings for him. Hanare, a\n                                spy from\n                                Jōmae Village from the Land of Keys, was summoned to infiltrate the Land of Fire and to\n                                investigate Konoha affairs. She was captured by Anbu and placed in the Honesty Room to\n                                be\n                                tortured. </p>\n                        </div>\n                    </div>\n                </div>\n                <!--[Hanare]  card end-->\n\n                <!--[Fūka] card start-->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Fūka</h2>\n                            </div>\n                            <img data-src=\"./Images/fuka.jpg\" alt=\"Fūka\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Fūka was portrayed as a seductive vixen as a way to lure her prey in\n                                and kill them with an Execution by Kiss.</p>\n                            <p>She would further speed up the process by giving her targets a choice between a French or\n                                traditional kiss. Her most preferable victims were those with a natural affinity for\n                                wind chakra. She took great pride in her appearance and would become infuriated when any\n                                harm came to her physical being, especially her hair, the very casing of her soul.\n                                During her second fight against Naruto Uzumaki, she showcased a sadistic side when she\n                                delighted in Naruto's anguish. She has shown an intelligent side as seen when she\n                                thought that Sora and Naruto were connected somehow.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--Fūka card end-->\n\n                <!-- Mizuki card start-->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Mizuki</h2>\n                            </div>\n                            <img data-src=\"Images/Mizuki.png\" alt=\"Mizuki\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">The first-ever person whom Naruto faced in a battle in order to know\n                                his power and also get to know about his own ninja way. He thrashed him in the battle\n                                against him while saving Iruka Umino his sensei in his elementary Training Academy</p>\n                            <p> Mizuki duped Naruto Uzumaki into stealing Konoha's Scroll of Seals for him. Originally,\n                                Mizuki had the plan set up to have Naruto as a scapegoat and kill him to hide the truth\n                                of his deception and secretly leave the village with the scroll in his possession.\n                                However, Mizuki's plan is derailed when Iruka found Naruto first and decided to reveal\n                                Naruto's identity as the Nine-Tails's jinchūriki to ensure he runs off disillusioned.\n                                However, overhearing Iruka standing up for him, Naruto comes to his teacher's aid and\n                                uses the Multiple Shadow Clone Technique he had learned from the scroll to beat Mizuki\n                                unconscious for harming Iruka.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--Mizuki card end-->\n\n                <!-- The Demon Brothers card start-->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">The Demon Brothers</h2>\n                            </div>\n                            <img data-src=\"Images/Naruto-Demon-Brothers.jpg\" alt=\"The Demon Brothers\" height=\"300px\"\n                                width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Naruto's first battle against non-Konoha ninja happened at the start of\n                                the Land of Waves Escort Mission arc. Two allies of Zabuza waited outside of Konoha in\n                                order to ambush Tazuna, who was being escorted by Team 7.</p>\n                            <p>These were two former Hidden Mist shinobi, known as the Demon Brothers, who had defected\n                                from their village in order to join Zabuza's coup.\n\n                                Kakashi and Sasuke were able to easily dispose of the Demon Brothers and keep Tazuna\n                                alive. They were then tied up next to a tree and left to be arrested.\n\n                                We never actually see the Demon Brothers being arrested in the manga and escaping from\n                                being tied up is one of the most basic parts of ninja training. Were the Demon Brothers\n                                able to escape? If so, did they choose to abandon Zabuza? Why did they never reappear in\n                                the story afterward?</p>\n                        </div>\n                    </div>\n                </div>\n\n                <!--The Demon Brothers card end-->\n\n\n               \n\n                <!-- Tayuya Card start -->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Tayuya</h2>\n                            </div>\n                            <img data-src=\"./Images/tayuya.jpg\" alt=\"Tayuya\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">A kunoichi from The Hidden Sound Village and a member of The Sound\n                                Five.</p>\n                            <p>Tayuya is one of Orochimaru's Sound Four Ninja. She is foul mouthed and ill tempered yet\n                                very powerful. Her only weapon is a flute which she can use to summon three giant demons\n                                known as the Doki. Tayuya is also very intelligent and can think up excellent strategies\n                                and tactics.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Tayuya Card End -->\n\n                <!-- Kagura card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Kagura</h2>\n                            </div>\n                            <img data-src=\"https://www.giantbomb.com/a/uploads/scale_small/16/164924/2399930-kagura.png\"\n                                alt=\"Kagura\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n\n                            <p class=\"card-text\">The main villain of Clash of Ninja Revolution 2, she's an ex-ANBU\n                                member.</p>\n\n                        </div>\n                    </div>\n                </div>\n                <!-- Kagura card end-->\n\n               \n                <!-- Itachi Uchiha card start-->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Itachi Uchiha</h2>\n                            </div>\n                            <img data-src=\"Images/itachi.png\" alt=\"Itachi Uchiha\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Itachi Uchiha is a fictional character in the Naruto manga and anime\n                                series created by Masashi Kishimoto.</p>\n                            <p>Itachi is the older brother of Sasuke Uchiha, and is responsible for killing all the\n                                members of their clan, sparing only Sasuke. He appears working as a terrorist from the\n                                organisation Akatsuki and serves as Sasuke's greatest enemy. During the second part of\n                                the manga, Itachi becomes involved in attacks to ninjas possessing tailed-beast\n                                creatures until facing Sasuke in a one-on-one battle. Although Itachi perishes during\n                                the final duel, it is later revealed that Itachi had a secret reason for assassinating\n                                the Uchiha clan.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--Itachi Uchiha card end-->\n                <!-- Isaribi card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Isaribi</h2>\n                            </div>\n                            <img data-src=\"Images/Isaribi.jpg\" alt=\"Isaribi\" height=\"280px\" width=\"400px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\"> Isaribi was a part sea creature whose charecter arc was similar to\n                                that of Naruto. She received a lot of hate for not being/behaving like the other members\n                                of her clan. Naruto shows her the power of friendship and fills her with hope. Amachi-\n                                the scientist to made Isaribi into the sea creature clearly exrpesses he had no\n                                intentions of killing her but only wnated to disscet her once she became worthless to\n                                him.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Isaribi end-->\n\n\n               \n\n\n               \n\n                <!-- Bansai Card start -->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Bansai</h2>\n                            </div>\n\n                            <img data-src=\"./Images/bansai.png\" alt=\"Bansai\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Bansai is an elder ninja monk in the Fire Temple as well as the Head\n                                Monk of the temple.</p>\n                            <p>Bansai is a very kind person who cares about his comrades deeply as seen when he said a\n                                prayer for Asuma Sarutobi before he set out for battle.</p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Minato card start -->\n\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Minato Namikaze</h2>\n                            </div>\n\n                            <img data-src=\"Images/minatoNew.jpg\" alt=\"Minato\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Minato Namikaze is a character in the Naruto universe. He is better\n                                known as The Fourth Hokage or as Konoha's Yellow Flash for his ability to use the Flying\n                                Thunder God Technique. He is also the father of series protagonist, Naruto. He is the\n                                teacher of Kakashi Hatake, Obito Uchiha and Rin Nohara. He is also one of Jiraiya's\n                                students.</p>\n                        </div>\n                    </div>\n                </div>\n\n                \n\n                <!-- Rajulkoshta Card Start -->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Kawaki</h2>\n                            </div>\n\n                            <img data-src=\"./Images/kawaki2.jpg\" alt=\"Kawaki\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Kawaki (カワキ, Kawaki) is a tattooed youth who became a member of Kara\n                                after being brought by Jigen from a drunkard father, bearing a tattoo of the Roman\n                                numeral IX under his left eye and bestowed a Kama mark by Jigen to be made into a living\n                                weapon for Kara. He was heavily modified with microscopic Shinobi-Ware implanted in his\n                                body that give him abilities similar to Jugo's Sage Transformation in altering his\n                                physiology at a cellular level.</p>\n                            <p> For reasons yet to be revealed, Kawaki left Kara and encountered Boruto who brings him\n                                to the Hidden Leaf as he lives with the Uzumaki family. The two would end up becoming\n                                enemies as hinted in prologue of the Boruto series, an older Kawaki appearing to have\n                                perpetrated Konoha's destruction as he confronts an older Boruto while declaring the age\n                                of shinobi has come to an end. His voice actor in the Japanese anime is Yūma Uchida.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Rajulkoshta Card End -->\n\n                <!-- Eida Card start -->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Eida</h2>\n                            </div>\n\n                            <img data-src=\"./Images/eida.png\" alt=\"Eida\" height=\"350px\" width=\"350px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">In his plot to kill Jigen, Amado heavily modified Eida, along with her\n                                younger brother Daemon with Shinobi-Ware with capabilities exceeding that of Jigen.\n                                The effects of her modifications left her forever despising Amado.\n                                Because of her superior might, Jigen had ordered for her disposal.\n                                Boro was given the order.\n                                However, affected by Eida's powers, Boro could not bring himself to complete the task,\n                                and instead hid Eida and Daemon in a remote location operated by his cult for his own\n                                uses.</p>\n                            <p> Eida is a very cold and indifferent person.\n                                She cares little for the events around her.\n                                This comes from having grown bored in the life that was forced upon her.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Eida Card End -->\n\n                <!-- Daemon Card start -->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Daemon</h2>\n                            </div>\n\n                            <img data-src=\"./Images/Daemon.webp\" alt=\"Daemon\" height=\"350px\" width=\"350px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Daemon used to be a member of Kara.\n                                He was one of the cyborgs that Isshiki ordered to be dismantled.\n                                However, Boro was allured by Ada, and he couldn't bring himself to finish the task, and\n                                he was manipulated to safely store Ada and Daemon in pods for several years.\n                                Later on, the two would be awakened by Code.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Eida Card End -->\n\n                <!-- card start -->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Nagato Uzumaki</h2>\n                            </div>\n\n                            <img data-src=\"./Images/nagato.png\" alt=\"Nagato Uzumaki\" height=\"320px\" width=\"380px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Nagato was known primarily under the alias of Pain. Nagato is the\n                                figurehead leader of the Akatsuki who wishes to capture the tailed beasts sealed into\n                                various people around the shinobi world. After acquiring and sealing most\n                                of the beasts within a statue, Nagato's superior sends him to capture the Nine-Tailed\n                                Demon Fox sealed inside the series' protagonist , Naruto Uzumaki (whom he turns out to\n                                be related to). Before leaving to capture Naruto,\n                                Nagato engages in a mortal battle with his former mentor, Jiraiya. His past as a war\n                                orphan, and his loss of his best friend are explored. Due to his traumatic experiences,\n                                which stemmed from human conflict, Nagato aims\n                                to create a new world, free from the chaos of war.</p>\n                        </div>\n                    </div>\n                </div>\n\n                <!--card start-->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">YAMATO</h2>\n                            </div>\n\n                            <img data-src=\"./Images/yamato.png\" alt=\"Yamato\" height=\"350px\" width=\"380px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Seeing how pivotal of a role Kakashi played as the leader of Team Seven\n                                with Naruto, Sakura, and Sasuke, there were high expectations for Yamato when he\n                                temporarily filled Kakashi's leadership position with the new Team Seven.\n\n                                As a former Anbu who shares the same wood-style technique as the First Hokage, Yamato\n                                had a mysterious aura about him in an attempt to spark curiosity amongst fans. However,\n                                after Kabuto captured him and Kakashi reclaimed leadership over Team Seven, Yamato\n                                disappeared into the abyss and was left as a character without any agency.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--card end-->\n\n\n                <!-- card start -->\n\n              \n\n\n                <!-- card start -->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\"> Yahiko </h2>\n                            </div>\n\n                            <img data-src=\"./Images/Yahiko.png\" alt=\"Yahiko\" height=\"350px\" width=\"380px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Yahiko (弥彦, Yahiko) was a shinobi from Amegakure. Alongside his fellow\n                                war orphans, Nagato and Konan, he founded and led the Akatsuki in an attempt to bring\n                                peace. Following Yahiko's death, Nagato would turn his body into the\n                                Deva Path of his Six Paths of Pain, which he used as the continued public image of\n                                Akatsuki's leadership.</p>\n                            <p> Yahiko was orphaned during the Second Shinobi World War, forcing him to steal food in\n                                order to survive prior to teaming\n                                up with a fellow war orphan named Konan. Soon after they found a place to call home,\n                                Yahiko expressed his displeasure from Konan bringing another war orphan. </p>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Deidara</h2>\n                            </div>\n\n                            <img data-src=\"./Images/deidara69.jpg\" alt=\"Deidara\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Deidara is a member of the Akatsuki group, Deidara was partnered with\n                                Sasori before his death, after which he partnered Tobi.</p>\n                            <p>Deidara has a very unique ability, he uses his hands where his palms posses mouths that\n                                when feed a certain clay explosive can create a flying bird or many small spiders that\n                                can be controlled or control them self after which will explode on command or when they\n                                deem suitable.</p>\n                        </div>\n                    </div>\n                </div>\n\n\n                <!--card end-->\n                <!-- card start -->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\"> Tsuande </h2>\n                            </div>\n\n                            <img data-src=\"./Images/Tsunadexx.png\" alt=\"Tsuande\" height=\"350px\" width=\"380px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Tsunade (綱手, Tsunade) is a descendant of the Senju and Uzumaki Clan,\n                                and is one of Konohagakure's Sannin. She is famed as the world's strongest kunoichi and\n                                its greatest medical-nin. The repeated loss of her loved ones caused Tsunade to later\n                                abandon the life of a shinobi for many years. She is eventually persuaded to return to\n                                Konoha and take on the mantle of Fifth Hokage (五代目火影, Godaime Hokage, literally meaning:\n                                Fifth Fire Shadow), where her skills prove invaluable to the village.</p>\n\n                        </div>\n                    </div>\n                </div>\n\n                <!--card end-->\n\n                <!-- card start -->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\"> Mei Terumī </h2>\n                            </div>\n\n                            <img data-src=\"./Images/mei.png\" alt=\"Mei\" height=\"350px\" width=\"380px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Mei Terumī is one of the supporting characters of the Naruto franchise.\n                                She is the Fifth Mizukage of Kirigakure. She became Mizukage in recent years, after the\n                                dreadful reign of Yagura ended, and has worked tirelessly to recreate diplomatic\n                                relations\n                                with other villages, as well as reform internal policies. Twelve years after the war,\n                                she\n                                remained single, complaining about the scarcity of nice men in her life.\n                        </div>\n                    </div>\n                </div>\n\n                <!--card end-->\n\n                <!--card start-->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">KIMIMARO</h2>\n                            </div>\n\n                            <img data-src=\"./Images/kimimaro.png\" alt=\"Kimimaro\" height=\"350px\" width=\"380px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">\n                                Kimimaro was the sole survivor of the Kaguya clan. Upon dedicating his life to\n                                Orochimaru, he became the leader of the formerly-named Sound Five (音隠れの忍五人衆, Otogakure\n                                no Shinobi Gonin Shū, literally meaning: Hidden Sound Shinobi Five People), until he\n                                fell ill, which forced him to leave the group.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--card end-->\n                <!-- card start -->\n                <!-- [character name] card start-->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Zabuza</h2>\n                            </div>\n                            <img data-src=\"https://www.giantbomb.com/a/uploads/scale_small/3/34651/3376238-zabuza.png\"\n                                alt=\"Zabuza\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n\n                            <p class=\"card-text\">Zabuza Momochi, a mercenary assassin and former member of the Seven\n                                Swordsmen of the Mist. He is a master of silent assassinations\n                                and together with his water Jutsu he is feared as The Demon of the Hidden Mist. He was\n                                defeated by Kakashi and he gave his live to compensate the feelingof sorrow he felt\n                                after\n                                the death of Haku.</p>\n\n                        </div>\n                    </div>\n                </div>\n                <!--[character name] card end-->\n                <!-- Haku card start -->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\"> Haku </h2>\n                            </div>\n\n                            <img data-src=\"./Images/Casual_Haku.png\" alt=\"Haku\" height=\"350px\" width=\"380px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Haku was an orphan from the Land of Water, and a descendant of the Yuki\n                                clan. He later became a shinobi under Zabuza Momochi's tutelage whom he later partnered\n                                with, ultimately becoming a Mercenary Ninja</p>\n                            <p>Haku was a 15-year-old boy with an androgynous appearance and was even viewed as being\n                                beautiful by Naruto, who exclaimed that he was \"prettier than Sakura\", even after he\n                                informed him that he was male. He had long black hair, pale skin and large, dark-brown\n                                eyes, and a slender frame.</p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Haku card end-->\n\n               \n\n                <!-- Tonton card start -->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\"> Tonton </h2>\n                            </div>\n\n                            <img data-src=\"./Images/Tonton.png\" alt=\"Tonton\" height=\"350px\" width=\"380px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Tonton is Tsunade's ninja pig, often kept in the care of Shizune.</p>\n                            <p>Above all else, Tonton is a highly devoted, and dutiful pet pig. Her devotion to Tsunade\n                                was noted during her master's battle with the other Sannin, which she watched in earnest\n                                as Gamakichi and Gamatatsu bickered. This even surfaced during the Fourth Shinobi World\n                                War, where, in her earnest to aid the Logistical Support and Medical Division, Tonton\n                                carried around several large sized crates around the camp ground, eventually spraining\n                                her foot.</p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Tonton card end-->\n\n                <!-- first card end-->\n                <!-- card start  -->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Sand Siblings</h2>\n                            </div>\n\n                            <img data-src=\"./Images/sand siblings.jpeg\" alt=\"Sand-Siblings\" height=\"350px\"\n                                width=\"250px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">\n                                The Three Sand Siblings is the collective name for the children of Sunagakure's Fourth\n                                Kazekage: Temari, Kankurō and Gaara. Having undergone the gruelling training of their\n                                village, these three are regarded as elite shinobi of their village that excel\n                                in long-range combat. </p>\n                            <p>Some time after the Konoha Crush failed, its members were promoted: Gaara became the\n                                Kazekage, Kankurō and Temari became jōnin, Temari also becoming an ambassador.In Part\n                                II, Temari and Kankurō attended Gaara to the Five Kage\n                                Summit as his bodyguards.\n\n                            </p>\n\n                        </div>\n                    </div>\n                </div>\n                <!-- card end -->\n\n                <!-- Hidan card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Hidan</h2>\n                            </div>\n\n                            <img data-src=\"./Images/Hidan.png\" alt=\"Hidan\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Hidan is an S-rank missing-nin who defected from Yugakure and later\n                                joined the Akatsuki. There, he was partnered with Kakuzu,\n                                despite the two's somewhat mutual dislike of each other.</p>\n                            <p>Hidan doesn't always seem like the most intelligent of the Akatsuki. He certainly doesn't\n                                have the knack for long-term planning that Pain or Tobi do,\n                                for example. Hidan does, however, much like Kakuzu, have a great understanding of\n                                anatomy and just how shinobi abilities work. That's how he\n                                manages to keep himself functionally immortal. That gives him an edge in a fight even\n                                when he isn't using his head for strategy.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Hidan card end-->\n\n                <!-- card start  -->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Sakon and Ukon</h2>\n                            </div>\n\n                            <img data-src=\"./Images/sakon_ukon.jpg\" alt=\"Sakon and Ukon\" height=\"280px\" width=\"250px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">\n                                They work for Orochi-Maru, an evil genius dead set on discovering and mastering every\n                                jutsu in the world. Sakon and Ukon are one his main pawns, as a member of the sound 5\n                                (Dark sound ninja with horrifying skills and abilities.)\n                            </p>\n\n                            <p>\n                                Sakon and Ukon have the ability to when touching there opponent attach there cells to\n                                their opponents, there for, making them one and slowly killing there opponents cells in\n                                place for there own. No one had ever survived it but no one had ever been as\n                                brave as Kiba, and he stabbed himself, breaking up their 2 cells and being freed.\n                                Eventully Sakon and Ukon were defeated by Kiba and Akamaru's signiture jutsu, the \"Giant\n                                2 headed wolf Tsuuga!\"\n                            </p>\n                        </div>\n                    </div>\n                </div>\n\n                <!--Konan card end-->\n        \n\n                <!--Tenten card end-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Tenten</h2>\n                            </div>\n\n                            <img data-src=\"./Images/Tenten.jpg\" alt=\"Tenten\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">In the Konoha 11, which consists of many of Naruto's peers in Team\n                                Seven, Team Eight, Team Ten, and Team Guy, there are ninjas like Rock Lee who excel in\n                                taijutsu as well as ninjas who are considered geniuses like Shikamaru\n                                and Neji. There is one ninja among the eleven, however, who definitely falls short of\n                                the spotlight--Tenten</p>\n                            <p>While Tenten was introduced as a character who specializes in ninja tools and weapons,\n                                there is little that we know about her clan and background. Even in her most well-known\n                                battle against Temari during the Chunin Exams, she\n                                was practically defeated before anyone had a chance to see her true fighting\n                                abilities.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--Tenten card end-->\n                <!-- Might Guy card-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n\n                                <h2 class=\"card-title\">Might Guy</h2>\n                            </div>\n\n                            <img data-src=\"./Images/GuyGawd.png\" alt=\"Might Guy\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Might Guy (マイト・ガイ, Maito Gai) is a jōnin of Konohagakure. A master of\n                                taijutsu, Guy leads and passes his wisdom onto the members of Team Guy.</p>\n                            <p>Guy is the son of Might Duy, who was known throughout Konoha as the \"Eternal Genin\". Duy\n                                was not bothered by this moniker and instead was grateful that other people cared enough\n                                to know him at all. Duy encouraged this same kind of optimism in Guy, as well as his\n                                belief that one always has youth and that they could both become taijutsu masters\n                                through diligent training. Guy did his best to embody his father's teachings, but had\n                                doubts that Duy's words were devoid of meaning.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--Might Guy card end-->\n\n               \n               \n\n                <!-- card start -->\n\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Kakashi Hatake</h2>\n                            </div>\n\n                            <img data-src=\"./Images/kakashi.jpg\" alt=\"Kakashi Hatake\" height=\"280px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Kakashi Hatake is one of the higher level Ninjas in the hiddenleaf\n                                village. He is the teacher (sensei) of Uzumaki Naruto, Haruno Sakura and Uchiha Sasuke.\n                                His teacher was the fourth hokage, Minato Namikaze and his teammates\n                                were Obito Uchiha and Rin Nohara. His rival is Might Guy.</p>\n                            <p>He's worked and thrived at all levels, including among the ANBU. He has a summoning\n                                ability with a pack of Ninja Dogs, one of which speaks and all of which are excellent\n                                trackers. He's never been shown without his masks on.\n                                He wears at least two of them, and even his close friends don't know what he looks like.\n                                Shortly after the ninja war, Kakashi becomes the Sixth Hokage of the Hidden Leaf\n                                Village, after heading Obito's advice.</p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Fugaku card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Fugaku</h2>\n                            </div>\n\n                            <img data-src=\"./Images/fugaku.jpeg\" alt=\"Fugaku\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Fugaku Uchiha (うちはフガク, Uchiha Fugaku) was a shinobi of Konohagakure. He\n                                was the head of the Uchiha clan as well as the leader of the Konoha Military Police\n                                Force.\n                            </p>\n                            <p>Fugaku Uchiha was as strong as fourth hokage Minato Namikaze. Let's talk about the great\n                                ninja war. Minato killed an 1000 strong army using the “flying thunder god\" ie hirashino\n                                jutsu. In that same war Fugaku killed countless\n                                using genjutsu alone. One of his comrades died covering him and he unlocked the Mangekyo\n                                Sharingan. During the war he earned the name “Wicked Eye\" Fugaku. .\n                            </p>\n                        </div>\n                    </div>\n                </div>\n                <!--Fugaku card end-->\n\n\n                <!-- Inari card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Inari</h2>\n                            </div>\n\n                            <img data-src=\"./Images/inari.png\" alt=\"Inari\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Inari (イナリ, Inari) is a young citizen of the Land of Waves. </p>\n                            <p>Inari is the son of Tsunami, and is also Tazuna's grandson. His biological father died\n                                before he got to know him.\n                            </p>Inari first appeared to be a very tough individual, though this was just a ruse he put\n                            on to hide the loneliness he felt since the death of Kaiza. He would often spend most of his\n                            time in his room staring at a photo of his father, conflicted by the feelings he had of loss\n                            and anger towards the man for dying, though he did so protecting their small village.\n                        </div>\n                    </div>\n                </div>\n                <!--Inari card end-->\n\n\n                <!-- Shikadai card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Shikadai Nara</h2>\n                            </div>\n\n                            <img data-src=\"./Images/Shikadai_Nara.webp\" alt=\"Shikadai Nara\" height=\"300px\"\n                                width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Shikadai Nara (奈良シカダイ, Nara Shikadai) is a chūnin of Konohagakure, and\n                                the heir to the Nara clan.[2] As a member of Team 10 with his team-mates Chōchō Akimichi\n                                and Inojin Yamanaka, they form the seventeenth generation of the Ino–Shika–Chō trio.\n                            </p>\n                            <p>Shikadai takes after his father, Shikamaru, in several ways, possessing a similar\n                                relaxed, unenthusiastic personality. He finds participating in activities to be very\n                                tiresome and is quick to shirk out of them as seen when he rejected an invitation from\n                                Inojin to train after school. Also like his father, he tends to say \"complete\" when\n                                successfully performing a technique or battle plan.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n                <!--Shikadai card end-->\n\n                <!-- Mikoto card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Mikoto Uchiha</h2>\n                            </div>\n\n                            <img data-src=\"https://wallpapercave.com/wp/wp4126361.png\" alt=\"Mikoto Uchiha\"\n                                height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Mikoto Uchiha (うちはミコト, Uchiha Mikoto) was a jōnin from Konohagakure's\n                                Uchiha clan.\n                            </p>\n                            <p>Mikoto was a very gentle and kind woman, but could also be stern and strict when she\n                                needed to be, as seen when Itachi came back from the Academy and she told Sasuke that he\n                                could not play because he had homework. She loved\n                                her sons deeply and knew how to help them with their problems. Mikoto cared for and also\n                                held high respect for her husband as well and understood the importance of his position\n                                as the Uchiha clan leader and was a dutiful\n                                and loyal wife to him. .\n                            </p>\n                        </div>\n                    </div>\n                </div>\n                <!--Mikoto card end-->\n\n                <!-- BlackZetsu card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Black Zetsu</h2>\n                            </div>\n\n                            <img data-src=\"https://wallpapercave.com/wp/wp8345725.jpg\" alt=\"Black Zetsu\" height=\"300px\"\n                                width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Black Zetsu (黒ゼツ, Kuro Zetsu) was the physical manifestation of\n                                Princess Kaguya Ōtsutsuki's will. It secretly instigated many of the events that shaped\n                                the shinobi world to secure Kaguya's revival. To further its plans, it\n                                posed as Madara Uchiha's manifested will and then partnered with White Zetsu to become\n                                half of the Akatsuki member known simply as Zetsu (ゼツ, Zetsu).\n                            </p>\n                            <p>Black Zetsu was created by Kaguya Ōtsutsuki shortly before she was sealed as the\n                                Ten-Tails by her twin sons, Hagoromo and Hamura. In the anime, Black Zetsu would\n                                approach Indra alone periodically, goading him with praises and\n                                curiosity towards Indra's true potential, even going so far as to say he could rival if\n                                not surpass the Sage of Six Paths himself.[6] When Hagoromo later named his younger son,\n                                Asura, as the new leader of Ninshū, Black\n                                Zetsu tempted Hagoromo's elder son, Indra, to go in war with his younger brother. It\n                                decided that Indra's descendants, the Uchiha, would be the main cast of the shinobi\n                                history it was creating and also modified Hagoromo's\n                                tablet to claim that among other things; the Infinite Tsukuyomi would be the Uchiha's\n                                salvation.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n                <!--BlackZetsu card end-->\n\n               \n\n                <!-- Guren card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\"> Guren</h2>\n                            </div>\n\n                            <img data-src=\"./Images/Guren.png\" alt=\"Guren\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Guren (紅蓮, Guren) is a kunoichi from Otogakure and the leader of a\n                                group of Orochimaru's subordinates,\n                                possessing the unique Crystal Release kekkei genkai.\n                            </p>\n                            <p>she was offered the chance to become one of Orochimaru's future vessels. When Sasuke\n                                Uchiha defected from Konohagakure and Kimimaro was no longer a\n                                suitable vessel for Orochimaru, Guren became the next best choice in Orochimaru's eyes.\n                                Unfortunately, by the time she arrived, Orochimaru couldn't\n                                wait any longer and instead chose Gen'yūmaru. She was also told that Sasuke would be the\n                                next vessel after Gen'yūmaru. Feeling no longer of use to\n                                Orochimaru, Guren went into isolation.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Guren card end-->\n\n                <!-- HANZO card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Hanzō</h2>\n                            </div>\n\n                            <img data-src=\"./Images/Hanzo-the-Salamander.jpg\" alt=\"Hanzō\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Hanzō (半蔵, Hanzō), feared as Hanzō of the Salamander (山椒魚の半蔵, Sanshōuo\n                                no Hanzō),\n                                was a legendary shinobi, and the leader of Amegakure during his lifetime.\n                            </p>\n                            <p>At some point during Hanzō's childhood, he found a black salamander with deadly venom\n                                residing in his village.\n                                When it died, its venom sac was embedded into his body in the hopes of creating a\n                                venomous ninja who himself was immune to toxins.\n                                This required him to wear a mask constantly, in order to protect others from his\n                                venom-laced breath.[4] At some point after this,\n                                Hanzō became well known and renowned throughout the shinobi world, so much that enemies\n                                have been known to flee at the very sight of him.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n                <!--HANZO card end-->\n\n                <!-- Konan card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Konan</h2>\n                            </div>\n\n                            <img data-src=\"https://cdnb.artstation.com/p/assets/images/images/029/881/599/medium/lilimonada-lilimon-konan.jpg?1598920736\"\n                                alt=\"Konan\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Konan (小南, Konan) was a kunoichi from Amegakure and a founding member\n                                of the original Akatsuki. After Yahiko's death, she was partnered with Nagato, who had\n                                since taken control of Akatsuki, and was the only member to call him\n                                by his name. After Nagato's death, Konan defected from Akatsuki and became the de facto\n                                village head of Amegakure.\n                            </p>\n                            <p>When she was young, Konan's family was killed during the Second Shinobi World War, and\n                                she was left to fend for herself.[4] Some time later, Yahiko found her, and the two\n                                worked together to survive. Not long after that, Konan\n                                went for a walk and found a young, dying Nagato and his dog, Chibi. She rescued him and\n                                brought him back to their hideout. Gradually the three became best friends. They\n                                eventually encountered the Sannin, who gave them some\n                                food. Konan impressed them by making an elaborate flower out of the paper wrappers left\n                                behind as a sign of gratitude. When Orochimaru suggested to kill them so they would not\n                                have to suffer the horrors of war, Jiraiya\n                                instead opted to stay and teach the three how to look after themselves.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--Konan card end-->\n\n                <!-- Kidomaru card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Kidomaru</h2>\n                            </div>\n\n                            <img data-src=\"https://www.giantbomb.com/a/uploads/scale_small/0/5756/330403-kidomaru.jpg\"\n                                alt=\"Kidomaru\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n\n                            <p class=\"card-text\">A ninja from The Hidden Sound Village and member of The Sound Five.</p>\n                            <p>Kidomaru was killed fighting against Neji Hyuga</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Kidomaru card end-->\n\n\n                <!-- Karin card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Karin</h2>\n                            </div>\n\n                            <img data-src=\"./Images/Karin.png\" alt=\"Karin\" height=\"300px\" width=\"300px\"\n                                class=\"img_card\">\n\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Karin (香燐, Karin) is a subordinate of Orochimaru, a former kunoichi of\n                                Kusagakure, and a member of the Uzumaki clan.[3][4] She assisted Orochimaru in his\n                                experiments, and was left in charge as warden of his Southern Hideout while he was away.\n                                She was later recruited into Sasuke Uchiha's group Taka, which was initially called\n                                \"Hebi\" at the time of its creation.</p>\n                            <p>Karin has been praised for her abilities by both Obito Uchiha and Orochimaru, the latter\n                                deciding to take her with him for that reason. Despite being mostly a non-combatant,\n                                Orochimaru referred to Karin as one of his good experiments,[4] and had enough faith in\n                                her skills to put her in charge of the Southern Hideout's prison, since she made\n                                escaping impossible. Karin later demonstrated these skills most predominantly during the\n                                Fourth Shinobi World War, where she destroyed much of Tobi's giant wooden statue.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Karin card end-->\n\n\n                <!-- Ebisu card start-->\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Ebisu Sensei</h2>\n                            </div>\n\n                            <img data-src=\"./Images/ebisu.png\" alt=\"Ebisu Sensei\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Ebisu (エビス, Ebisu) is a tokubetsu jōnin from Konohagakure who\n                                specialises in training elite ninja. He also served as the leader of Team Ebisu, which\n                                consisted of Konohamaru Sarutobi, Udon, and Moegi.</p>\n                            <p>Ebisu is portrayed as a stern and \"by-the-book\" type of person. Initially, he expressed\n                                hatred for Naruto Uzumaki, and believed he was nothing but a worthless nuisance and\n                                mocked his dream of becoming Hokage as he believes\n                                that only people of high lineage could amount to anything. Upon seeing what Naruto had\n                                done for Konohamaru his perspective changed drastically, and later the village during\n                                Pain's assault on it, he chose not to surrender\n                                Naruto's location and would rather be killed. He is also rather attached to his pupils,\n                                and has shown immense pride in them, such as when Konohamaru performed the Rasengan on\n                                Pain while rescuing Ebisu.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n\n\n                <!-- Tobirama card start-->\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Tobirama Senju</h2>\n                            </div>\n\n                            <img data-src=\"./Images/tobirama senju.png\" alt=\"Tobirama Senju\" height=\"280px\"\n                                width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Tobirama Senju (千手扉間, Senju Tobirama) was a member of the renowned\n                                Senju clan, who together with his elder brother and the Uchiha clan, founded the first\n                                shinobi village: Konohagakure. Throughout his lifetime, Tobirama would\n                                work tirelessly to achieve political stability and implement the institutions that made\n                                the village system work, thus ensuring Konoha's continuity and prosperity. After his\n                                brother's death, he would earn the title of Second\n                                Hokage (二代目火影, Nidaime Hokage, literally meaning: Second Fire Shadow).</p>\n                            <p>Like Hashirama before him, Tobirama tried to foster good relations with the other\n                                villages. He planned an alliance between Konoha and Kumogakure, but during a formal\n                                ceremony he and the Second Raikage were attacked by the Gold\n                                and Silver Brothers and left near death. During the First Shinobi World War, Team\n                                Tobirama, as well as Danzō Shimura, Torifu Akimichi, and Kagami Uchiha found themselves\n                                surrounded by Kumo's Kinkaku Force. With no way for\n                                all of them to escape, Tobirama volunteered to act as a decoy in place of Hiruzen. As he\n                                departed, he passed the title of Hokage to Hiruzen, before being killed by Kinkaku</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- card end-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Hinata Hyuga</h2>\n                            </div>\n\n                            <img data-src=\"./Images/hinata.jpeg\" alt=\"Hinata Hyuga\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Hinata, the eldest of Hiashi Hyuga's two children, is raised as the\n                                heiress to Hyuga clan's main household due to Hiashi being the elder between him and his\n                                twin brother, Hizashi, and thereby making Hiashi head of the clan\n                                while Hizashi is demoted to the Branch House whose only purpose is to serve the upper\n                                branch.</p>\n                            <p>Hinata also meets Naruto Uzumaki during her youth, developing an interest in him after he\n                                defends her while she is being bullied because of her eyes.[25] That event and Naruto's\n                                refusal to give up against adversity inspire\n                                Hinata to become a stronger person. However, Hinata's admiration for Naruto gradually\n                                turns into romantic feelings.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--card end-->\n                <!-- Hiashi Hyuga card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Hiashi Hyuga</h2>\n                            </div>\n\n                            <img data-src=\"./Images/hiashi.jpeg\" alt=\"Hiashi Hyuga\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Hiashi Hyūga (日向ヒアシ, Hyūga Hiashi) is a shinobi from Konohagakure, as\n                                well as the current head of the Hyūga clan.</p>\n                            <p>Hiashi was born just seconds before his twin brother Hizashi, which makes Hiashi the mind\n                                of this Hyūga clan. Since the leader of the Hyūga clan, Hiashi is undoubtedly a strong\n                                shinobi. He's well-versed in all of his clan's secret procedures and fighting style.\n\n                                As a member of this Hyūga clan, Hiashi possesses the Byakugan: a dōjutsukekkei genkai\n                                which grants him an almost 360° field of vision. Hiashi is a true master of this Hyūga\n                                clan's secret taijutsu design; the Gentle Fist.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--Hiashi Hyuga card end-->\n\n                <!-- Konan card start-->\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Asuma Sarutobi</h2>\n                            </div>\n\n                            <img data-src=\"./Images/322897-asuma_sarutobi.jpg\" alt=\"Asuma Sarutobi\" height=\"280px\"\n                                width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">A Jounin from The Hidden Leaf Village. A very calm and strong ninja,\n                                who always enjoys a good smoke. He goes out with Kurenai, a strong Genjutsu user.\n                                Revealed to be the son of Hiruzen Sarutobi, the third Hokage and is uncle\n                                to Konohamaru Sarutobi. Jonin squad leader of Team 10, the current Ino-Shika-Chou Trio\n                                until he meets his end by the Akatsuki Member, Hidan. He was later resurrected with the\n                                impure world resurrection technique to participate\n                                in the Fourth Shinobi World War.</p>\n                            <p>His abilities earned him a position into the Twelve Guardian Ninja — an elite hand-picked\n                                team which served to protect the Land of Fire's daimyō — a role which later earned him a\n                                bounty of 35,000,000 ryō.[9][21] He could effortlessly\n                                take down nine Oto-nin during the Konoha Crush, noted to have been chūnin-level or\n                                above,[22] and was able compete against Hidan, a powerful member of the Akatsuki, while\n                                also protecting his team.</p>\n                        </div>\n                    </div>\n                </div>\n\n                <!--second card end-->\n\n                <!-- Choza card start-->\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Choza Akimichi</h2>\n                            </div>\n\n                            <img data-src=\"./Images/choza_akimichi.png\" alt=\"Choza Akimichi\" height=\"300px\"\n                                width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Choza Akimichi (秋道チョウザ, Akimichi Chōza) is a jōnin of Konohagakure and\n                                former teammate of Shikaku Nara and Inoichi Yamanaka. Together they were the previous\n                                Ino–Shika–Chō trio. He is also the fifteenth head of the Akimichi clan (秋道15代目当主,\n                                Akimichi Jūgodaime Tōshu).</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Choza card end-->\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Madara Uchiha</h2>\n                            </div>\n\n                            <img data-src=\"./Images/madara-uchiha.jpeg\" alt=\"Madara Uchiha\" height=\"300px\"\n                                width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Madara Uchiha (うちはマダラ, Uchiha Madara) was the legendary leader of the\n                                Uchiha clan. He founded Konohagakure alongside his childhood friend and rival, Hashirama\n                                Senju, with the intention of beginning an era of peace. When thetwo couldn't agree on\n                                how to achieve that peace, they fought for control of the village, a conflict which\n                                ended in Madara's death. Madara, however, rewrote his death and went into hiding to work\n                                on his own plans. Unableto complete it in his natural life, he entrusted his knowledge\n                                and plans to Obito shortly before his actual death. Years later, Madara would be\n                                revived, only to see his plans foiled and ultimately, and finally, realising the error\n                                of his ways and making amends with Hashirama before his final death. </p>\n                        </div>\n                    </div>\n                </div>\n                <!--Izuna Uchiha-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Izuna Uchiha</h2>\n                            </div>\n\n                            <img data-src=\"./Images/Izuna_Uchiha.png\" alt=\"Izuna Uchiha\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Izuna Uchiha (うちはイズナ, Uchiha Izuna) was a shinobi of the Uchiha clan.\n                                He, along with his brother Madara, were renowned as the clan's two strongest members in\n                                their lifetime. </p>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Hashirama Senju</h2>\n                            </div>\n\n                            <img data-src=\"./Images/hashirama.jpg\" alt=\"Hashirama Senju\" height=\"280px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">The First hokage, leader of the Senju clan, one of the founders of\n                                Konohagakure. Older brother to the Second Hokage and Grandfather to the Fifth Hokage. He\n                                possesses the Wood Style and has a friend and rival called Madara Uchiha.</p>\n                            <p>He also showed great tactical skill and deceptive abilities, waiting until Madara became\n                                so exhausted that he couldn't maintain his Sharingan to create a wood clone for Madara\n                                to strike down so he could attack from behind without\n                                his opponent even realising it.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- card end-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Kaguya Otsutsuki</h2>\n                            </div>\n\n                            <img data-src=\"./Images/Kaguya_Ōtsutsuki.png\" alt=\"Kaguya Otsutsuki\" height=\"270px\"\n                                width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Kaguya was the originator of shinobi in the world in which Naruto takes\n                                place. She was once benevolent and respected, but became corrupted. She is the final\n                                villain to oppose Naruto's team in the manga.</p>\n                            <p>The final boss of Naruto turned out to be a woman! Who could've seen that coming?! One\n                                would begin to wonder if Kishimoto had finally turned over a new leaf and realized that\n                                women too can be characters who can be a lot more\n                                beyond their gender. But alas, such hopes were dashed immediately when fans realized\n                                that not only was this big baddie only revealed at the very last second (without any\n                                foreshadowing, for that matter), but her backstory\n                                was so over the top that even die-hard fans couldn't defend her presence.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n                <!--card end-->\n\n                <!--Killer Bee Card Start  -->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Killer Bee</h2>\n                            </div>\n                            <img data-src=\"./Images/KillerBee.png\" alt=\"Killer Bee\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Killer B is a major supporting character in the anime and manga Naruto\n                                Shippuden. He is the host of Gyuki, The Eight-tailed demon Ox. He was a shinobi who\n                                trained Naruto and is partners with him while fighting Obito Uchiha.</p>\n                            <p>Killer B (キラービー, Kirā Bī, Viz: Killer Bee) is a shinobi from Kumogakure. He is the most\n                                recent jinchūriki of the Eight-Tails, Gyūki, though, unlike his predecessors, he was\n                                able to befriend it and hone its power for Kumo's benefit. Despite being responsible for\n                                the village's protection, B aspires to be the world's greatest rapper.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--card end-->\n\n\n\n                <!-- Card Start For Gamabunta -->\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Gamabunta</h2>\n                            </div>\n\n                            <img data-src=\"./Images/Gamabunta.png\" alt=\"Gamabunta\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Gamabunta is a grumpy, stubborn and highly apathetic toad. He was\n                                summoned by lord fourth Hokage , sensei Jiraiya and by Naruto.</p>\n                            <p>Gamabunta can spew oil from his mouth and use it to enhance fire. He is one of the\n                                biggest summon animal in the series. He was firest summoned by naruto when he was\n                                Falling from potential death.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Card End For Gamabunta-->\n               \n\n                <!-- Card start For Matatabi-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Matatabi</h2>\n                            </div>\n\n                            <img data-src=\"./Images/matatabi.png\" alt=\"Matatabi\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Matatabi also known as Two-Tails, is one of the nine tailed\n                                beast.Yugito Nii is the jinchūriki of her</p>\n                            <p>Matatabi has shown to be respectful and polite towards others,she is completely engulfed\n                                in blue flames.Matatabi also has flexible muscles, which grant it great speed despite\n                                its large size\n                            </p>\n                        </div>\n                    </div>\n\n                </div>\n                <!-- Obito Uchiha card start-->\n\n                <div class=\"flip-card\">\n\n                    <div class=\"flip-card-inner\">\n\n                        <div class=\"flip-card-front\">\n\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Obito Uchiha </h2>\n                            </div>\n\n                            <img data-src=\"https://wallpaperaccess.com/full/5536097.jpg\" alt=\"Obito Uchiha\"\n                                height=\"300px\" width=\"300px\">\n\n                        </div>\n\n                        <div class=\"flip-card-back\">\n\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Obito Uchiha</h2>\n                            </div>\n\n                            <p class=\"card-text\">\n\n                                A character from the anime series Naruto. He claimed to be Madara Uchiha the man who\n                                fought the First Hokage, Hashirama. He is the main antagonist of the Naruto Series. He\n                                also goes by the name of Tobi. He is a former student of the fourth hokage, Minato. He\n                                is responsible for the Nine-Tails Attack on Konoha as well as the Uchiha clan massacre,\n                                ruining both Naruto and Sasuke's lives. His best friend is Kakashi Hatake and his love\n                                interest is Rin Nohara\n\n                            </p>\n\n                        </div>\n\n                    </div>\n\n                </div>\n\n                <!--[Obito Uchiha] card end-->\n                <!-- Card End-->\n\n                <!-- Rin Nohara card start-->\n\n                <div class=\"flip-card\">\n\n                    <div class=\"flip-card-inner\">\n\n                        <div class=\"flip-card-front\">\n\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Rin Nohara </h2>\n                            </div>\n\n                            <img data-src=\"Images/Rin_Nohara.jpg\" alt=\"Rin Nohara\" height=\"300px\" width=\"300px\">\n\n                        </div>\n\n                        <div class=\"flip-card-back\">\n\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Rin Nohara</h2>\n                            </div>\n\n                            <p class=\"card-text\">\n\n                                Rin Nohara was a chūnin of Konohagakure and a member of Team Minato alongside Kakashi\n                                Hatake and Obito Uchiha. Rin was forcibly made a vessel for the Three-Tails (Isobu) as a\n                                strategy to destroy her village by the Hidden Mist. She ultimately sacrificed herself\n                                for the sake of the village and for those she loved.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n\n                <!--[Rin Nohara] card end-->\n\n                <!-- jiraiya card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Jiraiya</h2>\n                            </div>\n\n                            <img data-src=\"https://www.giantbomb.com/a/uploads/scale_super/9/95613/2225257-jiraiya.jpg\"\n                                alt=\"Jiraiya\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Jiraiya</h2>\n                            </div>\n                            <p class=\"card-text\">\n                                Jiraiya is one of the \"Three Legendary Sannin\" that is known through out the ninja\n                                world. Jiraiya is the teacher of many characters in the Naruto universe including\n                                Naruto and the 4th Hokage. He is a renowned pervert and author of many adult books.\n                                He is one of the three legendary sannin and at the time of the series is between the\n                                ages of 51-54. Jiraiya started out as a pupil of the Third Hokage, along with teammates\n                                Orochimaru\n                                and Tsunade.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n                <!--[Jiraya] card end-->\n\n\n\n\n                <!-- Iruka Umino card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Iruka Umino</h2>\n                            </div>\n\n                            <img data-src=\"https://www.giantbomb.com/a/uploads/square_small/1/17433/595228-iruka.jpg\"\n                                alt=\"Iruka Umino\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-body\">\n                                <div class=\"card-content\">\n                                    <h2 class=\"card-title\">Iruka Umino</h2>\n                                </div>\n\n                                <p class=\"card-text\">The main teacher in the ninja acedemy he grow up like Naruto as\n                                    an orphan and thus acts like a father to Naruto. The man that voices Iruka umino\n                                    is Quinton Flynn.</p>\n                            </div>\n                        </div>\n\n                    </div>\n                </div>\n                <!-- Iruka Umino card end-->\n\n                <!-- Orochimaru card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Orochimaru</h2>\n                            </div>\n                            <img data-src=\"https://www.giantbomb.com/a/uploads/square_medium/0/5892/482861-naruto_orochi0244.jpg\"\n                                alt=\"Orochimaru\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-body\">\n                                <div class=\"card-content\">\n                                    <h2 class=\"card-title\">Orochimaru</h2>\n                                </div>\n                                <p class=\"card-text\">With a life-ambition to learn all of the world's secrets,\n                                    Orochimaru seeks immortality so that he might live all of the lives necessary to\n                                    accomplish his task. After being caught red-handed performing unethical\n                                    experiments on his fellow citizens for the sake of this immortality</p>\n\n\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <!--Orochimaru card end-->\n\n                <!-- Sasori card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Sasori</h2>\n                            </div>\n                            <img data-src=https://www.giantbomb.com/a/uploads/original/3/33873/1724192-sasori.jpg\n                                alt=Sasori height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-body\">\n                                <div class=\"card-content\">\n                                    <h2 class=\"card-title\">Sasori</h2>\n                                </div>\n                                <p class=\"card-text\">Sasori is a member of Akatsuki and partner to Deidara, he was once\n                                    the partner of Orochimaru. Sasori is a modified human/puppet. Sasori had a rough\n                                    childhood his parents were killed on a mission by the White Fang, Kakashi's\n                                    dad.Sasori left the sand village at a young age and with him took the lives of two\n                                    kazekage.\n                                </p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <!--Sasori card end-->\n\n                <!-- Kakuzu card start-->\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Kakuzu</h2>\n                            </div>\n                            <img data-src=\"https://www.giantbomb.com/a/uploads/scale_small/1/14242/826300-300px_kakuzu.png\"\n                                alt=\"Kakuzu\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-body\">\n                                <div class=\"card-content\">\n                                    <h2 class=\"card-title\">Kakuzu</h2>\n                                </div>\n                                <p class=\"card-text\">Kakuzu is a member of the criminal organization known as\n                                    Akatsuki. He is the accountant for the Akatsuki which makes him obsessed\n                                    with money, he also possesses five hearts. He once fought the first hokage\n                                    Hashirama and lost. He is a former shinobi from the village hidden in the\n                                    waterfalls.</p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <!--Kakuzu card end-->\n\n                <!-- Kurama card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Kurama</h2>\n                            </div>\n                            <img data-src=\"Images/Kurama-2.png\" alt=\"Kurama\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-body\">\n                                <div class=\"card-content\">\n                                    <h2 class=\"card-title\">Kurama</h2>\n                                </div>\n\n                                <p class=\"card-text\">Kurama (九喇嘛, Kurama), more commonly known as the\n                                    Nine-Tails (九尾, Kyūbi),\n                                    was one of the nine tailed beasts.\n                                    After being sealed into Naruto Uzumaki, Kurama attempts to maintain its\n                                    cynical perspective about the world, but with Naruto's\n                                    insistence on treating it with respect, the fox overturns its hatred and\n                                    willingly\n                                    strives to use its power for the world's salvation.</p>\n                            </div>\n\n                        </div>\n                    </div>\n                </div>\n                <!--Kurama card end-->\n\n                <!-- [Teuchi] card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n\n                                <h2 class=\"card-title\">Teuchi</h2>\n                            </div>\n                            <img data-src=\"https://static.wikia.nocookie.net/naruto/images/d/d6/Teuchi_Infobox.png\"\n                                alt=\"Teuchi\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Teuchi</h2>\n                            </div>\n                            <p class=\"card-text\">As a teenager 34 years before the Fourth Shinobi World\n                                War, Teuchi devoted his life to making\n                                ramen. More than a decade later, he had a daughter called Ayame.</p>\n                            <p>Teuchi is a very kind and jovial man. Often seen smiling, he and Ayame\n                                have always treated Naruto Uzumaki well,\n                                considering him their best customer, sometimes even giving him free\n                                ramen on special occasions.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n                <!--[Teuchi] card end-->\n\n                \n\n                <!-- Ebizo card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Ebizo</h2>\n                            </div>\n                            <img data-src=\"./Images/ebiZoo.jpg\" alt=\"Ebizo\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-body\">\n                                <div class=\"card-content\">\n                                    <h2 class=\"card-title\">Ebizo</h2>\n                                </div>\n                                <p class=\"card-text\">\n                                    Ebizō (エビゾウ, Ebizō), called Honoured Grandfather Ebizō (エビゾウジイ様,\n                                    Ebizō-jiisama) by the Suna villagers, is highly revered in\n                                    Sunagakure. He and his older sister, Chiyo, are known as the\n                                    Honoured Siblings (御姉弟, Gokyōdai).\n                                </p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <!-- Ebizo card end-->\n\n                <!-- Nekobaa card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Nekobaa</h2>\n                            </div>\n\n                            <img data-src=\"./Images/Nekobaa.jpg\" alt=\"Nekobaa\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-body\">\n                                <div class=\"card-content\">\n                                    <h2 class=\"card-title\">Nekobaa</h2>\n                                </div>\n\n                                <p class=\"card-text\">Nekobaa (猫バア, Nekobaa, English TV: Granny Cat,\n                                    literally meaning: Grandma Cat) is an old woman who lives in an\n                                    abandoned city together with her granddaughter, Tamaki. She runs\n                                    a supplies shop that the Uchiha clan used to use. She lives with\n                                    lots of cats, including talking ones such as Denka and Hina.</p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <!-- Nekobaa card end-->\n\n                <!-- Jūzō Biwa card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Jūzō Biwa</h2>\n                            </div>\n\n                            <img data-src=\"./Images/J3F_Biwa.png\" alt=\"Jūzō Biwa\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-body\">\n                                <div class=\"card-content\">\n                                    <h2 class=\"card-title\">Jūzō Biwa</h2>\n                                </div>\n\n                                <p class=\"card-text\">Jūzō Biwa (枇杷十蔵, Biwa Jūzō) was a jōnin\n                                    from Kirigakure and a member of the Seven Ninja Swordsmen of\n                                    the Mist. In the anime, Jūzō deserted his village and became\n                                    a member of Akatsuki, where he was partnered with Itachi\n                                    Uchiha</p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <!-- Jūzō Biwa card end-->\n\n               \n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Kisame Hoshigaki</h2>\n                            </div>\n                            <img data-src=\"./Images/kisame.jpg\" alt=\"Kisame Hoshigaki\" height=\"270px\" width=\"300px\"\n                                class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p>Kisame Hoshigaki (干柿 鬼鮫, Hoshigaki Kisame) is a former ninja\n                                of Kirigakure and partnered to Itachi Uchiha, having a\n                                unique appearance with pale blue skin, a gill-like facial\n                                structure, and sharp triangular teeth. While he was loyal to\n                                Kirigakure, Kisame was one of the Seven Swordsmen of the\n                                Mist, a group of violent ninja that use particularly large\n                                swords in battle. His sword, Samehada (鮫肌, \"Sharkskin\" in\n                                Shippuden), is a living weapon covered in scales that can\n                                absorb untold amounts of an opponent's chakra.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--[Kisame Hoshigaki] card end-->\n\n                <!-- Rasa card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Rasa</h2>\n                            </div>\n                            <img data-src=\"Images\\Rasa.jpg\" alt=\"Rasa\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Rasa (羅砂, Rasa) was the Fourth Kazekage (四代目風影, Yondaime Kazekage,\n                                literally meaning: Fourth Wind Shadow) of Sunagakure. Renowned for his ability to use\n                                Gold Dust, Rasa's reign as Kazekage was marked by his frequent quelling of rampages by\n                                the One-Tailed Shukaku, which he had sealed into his youngest son, Gaara.Rasa was a very\n                                powerful shinobi, as evidenced by his title of Kazekage. He could even subdue a fully\n                                released tailed beast like Shukaku. The prospect of his retaliation was enough to keep a\n                                great group of Iwa-nin from sparking a conflict at the Land of Wind's border.He was\n                                shown to be quite observant,\n                                pinpointing Gaara's Third Eye that was spying on him and the other reincarnated Kage\n                                after Mū sensed his chakra. </p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Nekobaa card end-->\n\n                <!-- Karui card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Karui</h2>\n                            </div>\n                            <img data-src=\"Images\\Karui.webp\" alt=\"Rasa\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Karui (カルイ) is one of Killer Bee's subordinates, a part of Team Samui.\n                                She is greatly worried by her teacher's disappearance following his fight with Taka and\n                                visits Konohagakure with her team in order to find him. A passionate and bold young\n                                woman, she quickly becomes involved in an altercation with Team Kakashi, blaming them\n                                for befriending and defending Sasuke Uchiha. She even proceeds to brutally punch Naruto\n                                in the face repeatedly after he allows her to do so as compensation for not giving up\n                                information on Sasuke. Karui is assigned as part of the Second Division during the\n                                Fourth Ninja War. </p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Nekobaa card end-->\n\n               \n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\"> Shizune</h2>\n                            </div>\n\n                            <img data-src=\"./Images/Shizune.jpeg\" alt=\"anko\" height=\"350px\" width=\"380px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Shizune is an apprentice of Tsunade, Shizune became a talented\n                                medical-nin under her tutelage. She accompanies Tsunade during her years-long sabbatical\n                                from active shinobi duty, only returning to Konoha once Tsunade becomes its Fifth\n                                Hokage. Her talent in the medical field is rivalled only by that of Sakura Haruno and\n                                Tsunade herself. </p>\n                        </div>\n                    </div>\n                </div>\n\n                \n\n                <!-- [Gold and Silver Brothers] card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Gold and Silver Brothers</h2>\n                            </div>\n                            <img data-src=\"Images/gold_silver_bros.png\" alt=\"Gold and Silver Brothers\" height=\"250px\"\n                                width=\"300px\" class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">The Gold and Silver Brothers (金銀兄弟, Kingin\n                                Kyōdai), also known as the \"Two Lights\" (二つの光, Futatsu no\n                                Hikari), were two infamous shinobi from Kumogakure, that\n                                were distantly related to the Sage of Six Paths.</p>\n                            <p>They were the ones who attacked Tobirama, the Second Hokage,\n                                and A, the Second Raikage, during an alliance meeting and\n                                tried to steal the Nine-tails for themselves. Later they\n                                were eaten by the Nine-Tailed Demon Fox and the brothers ate\n                                the meat inside the demon fox to stay alive but they\n                                acquired a piece of the fox's chakra.\n                                They were revived for the Fourth Shinobi World War.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n                <!--[Gold and Silver Brothers] card end-->\n\n                <!-- [Shino Aburame] card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Shino Aburame</h2>\n                            </div>\n                            <img data-src=\"https://wiki.gbl.gg/images/thumb/b/bb/SCON4_Shino_Portrait.png/800px-SCON4_Shino_Portrait.png\" alt=\"shino\" height=\"300px\" width=\"300px\" class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">A member of the Aburame clan, an expert in ninja\n                                techniques that involve insects in them. A very mysterious and stoic\n                                person since childhood. He is a member of Team 8, alongside his\n                                teammates Kiba Inuzuka and Hinata Hyuuga.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--[Shino Aburame] card end-->\n\n                <!-- [Asura Path of Pain] card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Asura Path of Pain</h2>\n                            </div>\n                            <img data-src=\"Images/asura-path-pain.jpg\" alt=\"Asura Path of Pain\" height=\"300px\"\n                                width=\"300px\" class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">The Asura Path (修羅道) grants the user the\n                                ability to augment their own body to summon mechanised\n                                armour and various ballistic and mechanical weaponry.</p>\n                            <p>Through the Asura Path, the user is able to form up to four\n                                additional arms and two additional faces, as well as a\n                                folded, serrated blade-like sash around their waist.</p>\n                        </div>\n                    </div>\n                </div>\n\n                <!--[Asura Path of Pain] card end-->\n                <!-- [A (First Raikage)] card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">A First Raikage</h2>\n                            </div>\n                            <img data-src=\"Images/1stRaikage.webp\" alt=\"A (First Raikage)\" height=\"300px\" width=\"300px\"\n                                class=\"img_card\" />\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">A (エー, Ē, Viz: Ei, English TV: Ay) was the First Raikage (初代雷影, Shodai\n                                Raikage, literally meaning:\n                                First or Founding Lightning Shadow) who founded Kumogakure in the Land of\n                                Lightning.During his leadership in the early days of Kumogakure after the Warring States\n                                Period,\n                                A presumably sent the Gold and Silver Brothers to capture the Nine-Tails, a task at\n                                which they ultimately failed.\n                                While not much was seen of his personality, A did seemingly have a verbal tic, ending\n                                his sentences with \"yo\" (よ).\n                                He also seemed to have a habit of folding his arms. He was a prideful man and held the\n                                idea that shinobi shouldn't lower their heads so easily.\n                                A had a strong will to protect Kumogakure, something he passed down to his successor.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n                <!--[A (First Raikage)] card end-->\n\n                <!-- [A (Second Raikage)] card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">A Second Raikage</h2>\n                            </div>\n                            <img data-src=\"Images/2nd_Raikage.webp\" alt=\"A (Second Raikage)\" height=\"270px\"\n                                width=\"300px\" class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">A (エー, Ē, Viz: Ei, English TV: Ay) was the Second Raikage (二代目雷影,\n                                Nidaime Raikage, literally meaning: Second Lightning Shadow) of Kumogakure.\n                                Throughout his reign he worked hard towards building peace between the other hidden\n                                villages.Before becoming the Second Raikage, he had a long tenure as the First Raikage's\n                                guard. During his service, he accompanied him to the first ever Five Kage Summit.\n                                There he stood behind the First watching diligently as the proceedings unfolded.\n                                Eventually, his long service and dedication earned him the appointment of Second\n                                Raikage.\n                                During his tenure, A entered Kumogakure into a formal alliance with Konohagakure,\n                                however, during the ceremony both he, and the Second Hokage were ambushed by the Gold\n                                and Silver Brothers, who were attempting to stage a coup d'état.\n                                It is unknown what happened to A, but the Hokage was said to have barely escaped with\n                                his life.Overall A's actions helped Kumogakure a lot in the way of achieving peace.\n                                A inherited the strong will of his predecessor to protect Kumogakure. He was also\n                                described as being friendly and intelligent, seen by his versed knowledge in politics\n                            </p>\n                        </div>\n                    </div>\n                </div>\n                <!--[A (Second Raikage)] card end-->\n                <!-- [A (Third Raikage)] card start-->\n\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n\n                                <h2 class=\"card-title\">A Third Raikage</h2>\n                            </div>\n                            <img data-src=\"Images/Raikage3.webp\" alt=\"A (Third Raikage)\" height=\"270px\" width=\"300px\"\n                                class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">A (エー, Ē, Viz: Ei, English TV: Ay) was the Third Raikage (三代目雷影,\n                                Sandaime Raikage, literally meaning:\n                                Third Lightning Shadow) of Kumogakure, renowned to be the greatest Raikage the village\n                                has ever had.\n                                A's rule was punctuated by the berserk attacks of the Eight-Tails but as Kumogakure\n                                couldn't afford to dispose of such a valuable war deterrent, he was forced to look for a\n                                suitable jinchūriki in quick succession, after the conclusion of each rampage.\n                                During one of these attacks, A fought the Eight-Tails alone, allowing his comrades to\n                                escape. Their battle resulted in A receiving a self-inflicted wound to the chest after\n                                he collapsed upon his own hand, which became his life's shame.\n                                Since this event, he made it a personal duty to combat the Eight-Tails whenever its\n                                jinchūriki lost control, eventually making even his son become part of the group that\n                                supported him during these occurrences.\n                                He chose to seal the Eight-Tails in the Kohaku no Jōhei, resulting in his nephew's\n                                death, hoping that someone else would have more success in controlling it.\n                                A is a calm and seemingly level-headed person. He is also a man of honour as seen when\n                                he became outraged when Mū urges Ōnoki to take advantage of the Allied Shinobi Forces\n                                after it is disbanded, telling him that he wouldn't allow the alliance to become\n                                destroyed.\n                                He is also a very proud and caring individual who will readily use himself as a shield\n                                or \"go-between\" to protect his comrades. This was also exemplified when it was revealed\n                                that after he received a scar from fighting the Eight-Tails, not even his son asked him\n                                about it in detail, out of his respect for his father's pride.\n                                A was also a firm believer of children being destined to surpass their parents, so much\n                                so he told his fellow Kage who were reincarnated not to worry about being forced to\n                                fight against their fellow shinobi as their children would be able to defeat them.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--[A (Third Raikage)] card end-->\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n\n                                <h2 class=\"card-title\">Tazuna</h2>\n                            </div>\n                            <img data-src=\"Images/Tazuna.jfif\" alt=\"Tazuna\" height=\"300px\" width=\"300px\"\n                                class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Tazuna is a master bridge builder from the Land of Waves. He can be\n                                harsh sometimes, though he is a diligent man. He also likes to drink. Even after he\n                                deceived Konoha into believing that a mission was of a lower rank, Tazuna was able to\n                                guilt-trip the ninjas into carrying out the mission. Konoha later requested Tazuna and\n                                Inari, now a carpenter, to help rebuild the village after Pain destroyed the town.</p>\n\n                        </div>\n                    </div>\n                </div>\n\n                <!-- [Ichiraku Ramen] card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Ichiraku Ramen</h2>\n                            </div>\n                            <img data-src=\"Images/ichiraku-ramen.jpeg\" alt=\"Ichiraku Ramen\" height=\"270px\" width=\"300px\"\n                                class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Ichiraku Ramen</h2>\n                            </div>\n                            <p class=\"card-text\">Ramen Ichiraku is Naruto Uzumaki's favourite dining establishment. He\n                                eats there regularly usually stopping by between missions and he is often joined by\n                                Iruka Umino, another frequent customer. </p>\n                            <p>Like any ramen establishment, Ramen from Ichiraku is offered with various toppings, such\n                                as char siu and boiled eggs.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--[Ichiraku Ramen] card end-->\n                <!-- Kankuro card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Kankuro</h2>\n                            </div>\n                            <img src=\"Images\\kankuro.webp\" alt=\"Kankuro\" height=\"300px\" width=\"300px\" class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">[Mito Uzumaki (うずまきミト, Uzumaki Mito) was a kunoichi who originated from\n                                Uzushiogakure's Uzumaki clan.\n                                After migrating to Konohagakure, she married Hashirama Senju, the village's First\n                                Hokage.]\n                            </p>\n                            <p>Mito seemed to be a very calm and composed individual with a dignified air about her. She\n                                also had a strong\n                                sense of duty to her husband and the village as seen when she turned herself into a\n                                jinchūriki by sealing\n                                Kurama into herself in order to gain power for her husband.[2] During the time when\n                                Kushina discovered\n                                that she was to be made a jinchūriki, Mito comforted her, and told her about how to cope\n                                with being a\n                                jinchūriki sharing how she usually climbed the stairs of her residence in order to see\n                                her husband's\n                                face on the Hokage Rock. Mito was also described as gentle and reassuring</p>\n                        </div>\n                    </div>\n                </div>\n                <!--[kanuro] card end-->\n\n\n                <!-- [Kushina Uzumaki] card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Kushina Uzumaki</h2>\n                            </div>\n                            <img src=\"Images\\Kushina_Uzumaki.png\" alt=\"Kushina\" height=\"300px\" width=\"300px\"\n                                class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">[Kushina Uzumaki (うずまき クシナ, Uzumaki Kushina) is the mother of the\n                                series' protagonist, Naruto Uzumaki and the wife of the Fourth Hokage, Minato Namikaze.]\n                            </p>\n                            <p>While Naruto physically resembles his father, Minato, he inherits most of his personality\n                                from Kushina, who is brash, temperamental, likes ramen, and even has the \"Believe it!\".\n                                Being a member of the Uzumaki Clan, Kushina possesses a special chakra that was\n                                distinguished even among her peers, causing her to be sent from her homeland to\n                                Konohagakure to be the host of Kurama, replacing Mito Uzumaki.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--[Kushina Uzumaki] card end-->\n\n\n                <!-- [Mito Uzumaki] card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Mito Uzumaki</h2>\n                            </div>\n                            <img src=\"Images\\Mito.webp\" alt=\"Mito\" height=\"300px\" width=\"300px\" class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">[Mito Uzumaki (うずまきミト, Uzumaki Mito) was a kunoichi who originated from\n                                Uzushiogakure's Uzumaki clan.\n                                After migrating to Konohagakure, she married Hashirama Senju, the village's First\n                                Hokage.]\n                            </p>\n                            <p>Mito seemed to be a very calm and composed individual with a dignified air about her. She\n                                also had a strong\n                                sense of duty to her husband and the village as seen when she turned herself into a\n                                jinchūriki by sealing\n                                Kurama into herself in order to gain power for her husband.[2] During the time when\n                                Kushina discovered\n                                that she was to be made a jinchūriki, Mito comforted her, and told her about how to cope\n                                with being a\n                                jinchūriki sharing how she usually climbed the stairs of her residence in order to see\n                                her husband's\n                                face on the Hokage Rock. Mito was also described as gentle and reassuring</p>\n                        </div>\n                    </div>\n                </div>\n                <!--[Mito Uzumaki] card end-->\n\n\n                <!-- [Kushina Uzumaki] card start-->\n                <!-- <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Kushina Uzumaki</h2>\n                            </div>\n                            <img src=\"Images\\Kushina_Uzumaki.png\" alt=\"Kushina\" height=\"300px\" width=\"300px\"\n                                class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">[Kushina Uzumaki (うずまき クシナ, Uzumaki Kushina) is the mother of the\n                                series' protagonist, Naruto Uzumaki and the wife of the Fourth Hokage, Minato Namikaze.]\n                            </p>\n                            <p>While Naruto physically resembles his father, Minato, he inherits most of his personality\n                                from Kushina, who is brash, temperamental, likes ramen, and even has the \"Believe it!\".\n                                Being a member of the Uzumaki Clan, Kushina possesses a special chakra that was\n                                distinguished even among her peers, causing her to be sent from her homeland to\n                                Konohagakure to be the host of Kurama, replacing Mito Uzumaki.</p>\n                        </div>\n                    </div>\n                </div> -->\n                <!--[Kushina Uzumaki] card end -->\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Kiba Inuzuka</h2>\n                            </div>\n                            <img data-src=\"Images/Kiba.jpeg\" alt=\"Kiba\" height=\"300px\" width=\"300px\" class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Kiba Inuzuka</h2>\n                            </div>\n                            <p class=\"card-text\">Kiba is a character from the manga/anime Naruto. He is a member of team\n                                8 along with Hinata and Shino and their teacher is Kurenai. He is always seen with his\n                                pet dog and best friend Akamaru. He is a member of the Inuzuka clan and is a Leaf\n                                Chunin.</p>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Ino Yamanaka</h2>\n                            </div>\n                            <img data-src=\"Images/ino.jpg\" alt=\"Ino Yamanaka\" height=\"300px\" width=\"300px\"\n                                class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Ino Yamanaka</h2>\n                            </div>\n                            <p class=\"card-text\">Ino Yamanaka is a headstrong ninja of the Hidden Leaf Village and a\n                                member of Team 10 as their medic, Ino is a member of the Yamanaka-Clan of Konoha. She\n                                uses a family ninja technique that can control the minds of her enemies. She is married\n                                to Sai and had a son with him named Inojin.</p>\n                        </div>\n                    </div>\n                </div>\n\n\n\n                <!-- Butsuma Senju card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Butsuma Senju</h2>\n                            </div>\n                            <img src=\"Images/Butsuma_Senju.jpg\" alt=\"Butsuma Senju\" height=\"300px\" width=\"300px\"\n                                class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Butsuma Senju (千手仏間, Senju Butsuma) was a member of the Senju clan\n                                during the war-torn era preceding the era of hidden villages.</p>\n                            <p>He was the father of Hashirama Senju. A man of tall stature, he also possessed black eyes\n                                and shoulder-length black hair kept back out of his face by a piece of light green cloth\n                                tied around his forehead.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--Butsuma Senju card end-->\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Onoki</h2>\n                            </div>\n                            <img data-src=\"Images/onoki.png\" alt=\"Gold and Silver Brothers\" height=\"300px\" width=\"300px\"\n                                class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Onoki was a character in the manga and anime series Naruto: Shippuden.\n                                He was the third Tsuchikage of the village hidden in the stones. </p>\n                            <p>He was trained by Mu (the Second Tsuchikage) and had fought Madara Uchiha years ago.His\n                                loyal partners are Akatsuchi and Onoki's granddaughter, Kurotsuchi. After Kaguya's\n                                defeat, He retired as a Tsuchikage and his granddaughter Kurotsuchi succeeded as the\n                                Fourth Tsuchikage due to his powers gotten weaker by his old age.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Shisui Uchiha</h2>\n                            </div>\n                            <img data-src=\"Images/Shisui Uchiha.png\" alt=\"Shisui Uchiha\" height=\"300px\" width=\"300px\"\n                                class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Shisui Uchiha (うちはシスイ, Uchiha Shisui), renowned as \"Shisui of the Body\n                                Flicker\" (瞬身のシスイ, Shunshin no Shisui, English TV: Shisui the Teleporter), was an Anbu\n                                from Konohagakure's Uchiha clan.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Kae Yukiwari card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Kae Yukiwari</h2>\n                            </div>\n\n                            <img src=\"./Images/Kae_Yukiwari.png\" alt=\"Kae Yukiwari\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Kae Yukiwari (雪割カエ, Yukiwari Kae) is an exchange student to the\n                                Konohagakure Academy and the princess of the Land of Bamboo.Kae is a very cheerful and\n                                kind girl.\n                                While proper and dignified, she secretly prefers the more carefree life of the\n                                commoners,\n                                disliking having to meet the expectations people have for royalty.\n                                She enjoys reading romance novels and meeting new people.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Kae Yukiwari card end-->\n\n                <!-- Kabuto Yakushi card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Kabuto Yakushi</h2>\n                            </div>\n\n                            <img src=\"./Images/Kabuto_Yakushi.png\" alt=\"Kabuto Yakushi\" height=\"270px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n\n                            <p class=\"card-text\">Kabuto Yakushi was an Orphan in the Konoha Orphanage, and he was the\n                                Caster of Reanimation Jutsu,\n                                which played a major role in theFourth Shinobi World War.\n                                Yakushi worked as a spy for a variety of people, organizations, and nations during the\n                                majority of his life.\n                                When Kabuto was younger, Orochimaru saw his inherent medical and information-gathering\n                                abilities and appointed\n                                him as his right-hand man.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Kabuto Yakushi card end-->\n\n                <!-- Jugo card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Jugo</h2>\n                            </div>\n                            <img data-src=\"Images/Jugo.png\" alt=\"jugo\" height=\"300px\" width=\"300px\" class=\"img_card\" />\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Jugo is a member of Orochimaru's research team. He possesses a \"Cursed\n                                Seal\" that grants immense strength and regenerative abilities but also drives him into\n                                uncontrollable fits of rage due to his connection with Natural Energy Chakra. Throughout\n                                the series, Jugo struggles to manage his violent tendencies, forming a close bond with\n                                Sasuke Uchiha, who seeks to utilize his abilities. This partnership allows Jugo to find\n                                some semblance of control and purpose as he becomes an integral part of Sasuke's team,\n                                adding depth to the narrative by exploring themes of internal conflict and the quest for\n                                self-identity.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--Jugo card end-->\n\n                <!-- Rock Lee card start -->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Rock Lee </h2>\n                            </div>\n                            <img data-src=\"Images/rocklee.jpg\" alt=\"Rock Lee\" height=\"300px\" width=\"400px\"\n                                class=\"img_card\" />\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Ashinobi of Konohagakure's Lee clan and a member of Team Guy</p>\n                            <p>He lacked the skills necessary to use ninjutsu or genjutsu. However, he overcomes those\n                                shortcomings by undergoing special training from Might Guy that would make him a\n                                taijutsu master while still a genin</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Rock Lee card end -->\n\n                <!-- Baki card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Baki</h2>\n                            </div>\n                            <img src=\"Images/Baki_Infobox.png\" alt=\"Baki_Infobox\" height=\"300px\" width=\"300px\"\n                                class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Baki</h2>\n                            </div>\n                            <p class=\"card-text\">Baki is a very tall man. He has two distinctive, red markings on the\n                                right side of his\n                                face (left side as well in the anime),the only visible part of his head, with the rest\n                                being covered by his\n                                turban-like head gear and by a sheet hanging from it on the left side his face. He dons\n                                the standard attire\n                                of a Suna-nin, complete with a forehead protector and flak jacket. </p>\n\n                        </div>\n                    </div>\n                </div>\n                <!-- Baki card end-->\n\n                <!-- Mitsuki card start  -->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Mitsuki</h2>\n                            </div>\n                            <img data-src=\"https://th.bing.com/th/id/OIP.z2fj6G6eisgTh-vSZGMoMwHaFr?w=272&h=209&c=7&r=0&o=5&pid=1.7\"\n                                alt=\"Mitsuki\" height=\"300px\" width=\"300px\" class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Mitsuki</h2>\n                            </div>\n                            <p class=\"card-text\">Mitsuki (ミツキ) is a synthetic human that was created as a partial\n                                clone of Orochimaru.Immigrating to Konohagakure to confirm whether or not Boruto Uzumaki\n                                was his \"sun\",he became a shinobi and was placed on Team Konohamaru. </p>\n                            <p>Mitsuki has a very calm and matter-of-fact demeanour. He is generally seen very cheerful,\n                                if not indifferent, towards the situation at hand. While not confrontational, he freely\n                                speaks his mind in any situation, and does things at his own pace.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Mitsuki card end  -->\n\n                <!-- </div> -->\n\n                \n\n\n                <!--[Kurenai] card start-->\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Kurenai</h2>\n                            </div>\n                            <img data-src=\"https://i.pinimg.com/originals/56/58/5c/56585cee0ace0b959df37ca3739214e1.jpg\"\n                                alt=\"Kurenai\" height=\"350px\" width=\"250px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Kurenai</h2>\n                            </div>\n                            <p class=\"card-text\">Kurenai is a character in the anime Naruto who is the overseer of\n                                Hinata Hyuuga, Shino Aburame,\n                                and Kiba Inuzuka in the Genin Team 81. She is an expert in Genjutsu, or illusion ninja\n                                techniques1. Kurenai is portrayed as a cool, efficient, and attention-grabbing woman\n\n                            </p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- [Kurenai] card end-->\n                <!--[Mirai Sarutobi] card start-->\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Mirai</h2>\n                            </div>\n                            <img data-src=\"https://i.redd.it/re2bht0wfpkb1.jpg\"\n                                alt=\"Mirai\" height=\"350px\" width=\"250px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Mirai Sarutobi</h2>\n                            </div>\n                            <p class=\"card-text\">Mirai is the child of Kurenai Yūhi and Asuma Sarutobi, born in the\n                                depths of Autumn.\n                                Her name was chosen by Asuma in belief of protecting the future well-being of the\n                                children of the world.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- [Mirai Sarutobi] card end-->\n                <!--[Temari] card start-->\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Temari</h2>\n                            </div>\n                            <img data-src=\"https://th.bing.com/th/id/OIP.VLNfQJX3TxPnAYDDV8v9_QHaGV?pid=ImgDet&rs=1\"\n                                alt=\"Temari\" height=\"350px\" width=\"250px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Temari</h2>\n                            </div>\n                            <p class=\"card-text\">Temari Nara is a Hidden Sand Village Ninja that is most known for her\n                                affiliation with Three Sand\n                                Siblings and marriage to Shikamaru Nara.\n                                Although somewhat of a side character, she has very powerful ninjitsu and analytical\n                                skills.\n\n                            </p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- [Temari] card end-->\n\n                <!-- start temari -->\n                <!-- <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Temari</h2>\n                            </div>\n                            <img data-src=\"https://th.bing.com/th/id/OIP.VLNfQJX3TxPnAYDDV8v9_QHaGV?pid=ImgDet&rs=1\"\n                                alt=\"Temari\" height=\"350px\" width=\"250px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Temari</h2>\n                            </div>\n                            <p class=\"card-text\">Temari Nara is a Hidden Sand Village Ninja that is most known for her\n                                affiliation with Three Sand\n                                Siblings and marriage to Shikamaru Nara.\n                                Although somewhat of a side character, she has very powerful ninjitsu and analytical\n                                skills.\n\n                            </p>\n                        </div>\n                    </div>\n                </div> -->\n\n                <!-- [Temari] card end-->\n\n                <!-- [Shikamaru] card start -->\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Shikamaru</h2>\n                            </div>\n                            <img data-src=\"https://i.pinimg.com/originals/e6/24/64/e624640aac22e9fdf5b00036e6bf29fb.jpg\"\n                                alt=\"Shikamaru\" height=\"350px\" width=\"250px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Shikamaru</h2>\n                            </div>\n                            <p class=\"card-text\">Shikamaru Nara is a fictional character in the manga and anime\n                                franchise, Naruto1.\n                                He is the 8th Hokage affiliated with the village Hidden in the Leaves1.\n                                Shikamaru trained under Asuma Sarutobi as part of Team 10, and became the first of his\n                                generation to become a chunin\n                                level shinobi2. His intelligence allowed him to adapt well to many situations,\n                                and his friends often looked to him as a leader2.\n\n                            </p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- [Shikamaru] card end-->\n\n                \n\n                <!-- [Gamatatsu] card start -->\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Gamatatsu</h2>\n                            </div>\n                            <img data-src=\"https://i.pinimg.com/originals/f2/db/5e/f2db5e6fa948ae6040047efe7eab3c7e.png\"\n                                alt=\"Gamatatsu\" height=\"350px\" width=\"250px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Gamatatsu</h2>\n                            </div>\n                            <p class=\"card-text\">Gamatatsu is a minor character from the anime series Naruto and Naruto\n                                Shippuden.\n                                He is a Mount Myōboku toad and the youngest son of Gamabunta, as well as the younger\n                                brother of Gamakichi.\n                                Gamatatsu is a bit on the dim-witted side and has a fixation with snacks.\n                                He first appeared in the series when Naruto Uzumaki accidentally summoned him during a\n                                battle against Orochimaru.\n\n                            </p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- [Gamatatsu] card end-->\n\n                <!-- [Gamakichi] card start -->\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Gamakichi</h2>\n                            </div>\n                            <img data-src=\"https://i.pinimg.com/originals/26/13/06/26130661c8195fe788e68a44169d2df1.png\"\n                                alt=\"Gamakichi\" height=\"350px\" width=\"250px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Gamakichi</h2>\n                            </div>\n                            <p class=\"card-text\">Gamakichi is a toad from Mount Myōboku and the personal summon of\n                                Naruto Uzumaki.\n                                He is the eldest son of Gamabunta and the older brother of Gamatatsu.\n                                Gamakichi is rather comedic, and has the mannerisms of a smart aleck.\n                                He is also often very condescending as well as light-hearted in most situations,\n                                preferring the levity of talk to the seriousness of battle .\n                                In Part I, he was small enough to fit on top of Naruto’s head like Akamaru could fit on\n                                top of Kiba’s head and wore a blue jacket 1. In Part II, during Pain’s assault on\n                                Konoha, Gamakichi had grown big enough so that Naruto could stand on his head, but was\n                                still small enough that he stand on Gamabunta 1.\n                                He has formed a bond with Naruto because he saved him from Gaara in his miniature\n                                Shukaku form\n                            </p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- [Gamakichi] card end-->\n                \n                <!-- [Matsuri] card start -->\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Matsuri</h2>\n                            </div>\n                            <img data-src=\"https://i.pinimg.com/originals/f3/ff/6a/f3ff6a450df8f3741fc694dc6fc77078.jpg\"\n                                alt=\"Matsuri\" height=\"350px\" width=\"250px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Matsuri</h2>\n                            </div>\n                            <p class=\"card-text\">Matsuri is a genin from Sunagakure,\n                                who appears in the Naruto anime and manga series 1. She is part of a team\n                                alongside Yukata and Mikoshi 1.\n                                Matsuri witnessed her parents’ murder in the past, making her adverse to\n                                weapons and violence 1. In the anime, she is shown to be a reverent admirer\n                                of Gaara or any other powerful ninja 1. Matsuri has straight chin-length\n                                brown hair, dark eyes, and fair skin. She is 158 cm tall.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- [Matsuri] card end-->\n                <!-- [Aoba] card start -->\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Aoba</h2>\n                            </div>\n                            <img data-src=\"https://i.pinimg.com/originals/a1/26/44/a12644b942ba4b755b6631488013d479.jpg\"\n                                alt=\"Aoba\" height=\"350px\" width=\"250px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Aoba</h2>\n                            </div>\n                            <p class=\"card-text\">Aoba is a soft-spoken and introverted character with a\n                                penchant for art and literature. They possess a unique ability to empathize with others,\n                                making them a\n                                trusted confidant among their friends. Aoba's sense of style is remarkable, often seen\n                                in eccentric and meticulously\n                                put-together outfits that reflect their artistic inclinations. Their depth of character\n                                lies in their contemplative\n                                nature, making\n                                them an excellent companion for profound conversations and creative endeavors. </p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- [Aoba] card end-->\n                <!-- [Katsuyu] card start -->\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Katsuyu</h2>\n                            </div>\n                            <img data-src=\"https://i.pinimg.com/originals/9c/3e/d8/9c3ed87b5a1a3037162fdb63c68d12da.png\"\n                                alt=\"Katsuyu\" height=\"350px\" width=\"250px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Katsuyu</h2>\n                            </div>\n                            <p class=\"card-text\">Katsuyu is a gentle and nurturing character with a deep love for nature\n                                and animals. They\n                                find solace in spending time in the outdoors and have a remarkable bond with creatures\n                                of all kinds. Katsuyu's\n                                calming presence and kindness make them a cherished friend to many, and their skills as\n                                a healer and caretaker\n                                are well-known. They often dedicate their time to the betterment of their\n                                environment and are a symbol of harmony and compassion.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n\n\n                <!-- [Katsuyu] card end-->\n                <!-- [Enma] card start -->\n\n                <!-- Hero [character name] card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Amado</h2>\n                            </div>\n                            <img data-src=\"./Images/Amado.webp\" alt=\"amado\" height=\"300px\" width=\"300px\"\n                                class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Amado</h2>\n                            </div>\n                            <p class=\"card-text\">Amado's daughter Akebi died of an unknown disease twelve years prior to\n                                Isshiki Ōtsutsuki's assault on Konoha. Despite this, Amado wasn't discouraged, believing\n                                he could resurrect Akebi by cloning her and transferring her memories into her into a\n                                new body by preserving her brain, rather than try to develop a cure for her disease.\n                                However, Amado's hopes were crushed as her daughter's clones, later named Delta, despite\n                                having the same appearance and memories as Akebi, were completely different individuals.\n                                Amado tried to recreate Akebi's personality multiple times, but failed to do so and\n                                finally broke down, realising his daughter was gone for good. It was then when Jigen\n                                approached Amado, promising to bring his daughter back to life if Amado aided him with\n                                his plans, Amado accepting it immediately.During his time in Kara, he became an Inner\n                                and served as the head of its research and development division, used Scientific Ninja\n                                Tools to augment the various members. He also analysed the remains of Shibai Ōtsutsuki,\n                                transplanting his DNA to imprint his abilities onto other Kara members. Eventually, he\n                                learned a lot about the Ōtsutsuki Clan, discovering Isshiki's true motive which would\n                                destroy all life on the planet, making Akebi's resurrection moot. He switched his focus\n                                to destroying Isshiki, but didn't give up on resurrecting Akebi, having realised that\n                                Kāma resurrection was able to accomplish the restoration of personality he failed at. He\n                                even created cyborgs that exceeded Jigen's power, Ada and Daemon, but the latter quickly\n                                ordered them to be eliminated. Amado imbued Ada with the Senrigan and made her become\n                                irresistibly attractive to anyone who saw her except blood relatives or the Ōtsutsuki\n                                Clan. He also imbued Daemon with the ability to instantly turn an opponent's attack\n                                against him. Ada's entrancing ability prevented Boro from getting rid of her and her\n                                brother as ordered, and Ada came to hate Amado for taking the ability to be genuinely\n                                loved from her</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Hero [character name] card end-->\n                <!-- Yugito Nii card start-->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Yugito Nii</h2>\n                            </div>\n                            <img data-src=\"./Images/YugitoNii.jpg\" alt=\"Yugito Nii\" height=\"300px\" width=\"300px\"\n                                class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Yugito Nii: The Two-Tails Jinchūriki</p>\n                            <p>Yugito Nii, a formidable kunoichi from Kumogakure,\n                                was the chosen jinchūriki of the Two-Tails, Matatabi.\n                                Symbolizing both strength and loyalty to her village,\n                                she mastered control over her Tailed Beast, showcasing\n                                a harmony not seen in many jinchūriki. Despite her prowess,\n                                she fell victim to the Akatsuki's hunt for the tailed beasts.\n                                Her legacy in the Naruto series provides insight into the\n                                challenges and solitude faced by those carrying the weight\n                                of a tailed beast within them.</p>\n                        </div>\n                    </div>\n                </div>\n                <!--Yugito Nii card end-->\n\n               \n\n                <!-- [Katsuyu] card end-->\n                <!-- [Enma] card start -->\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Enma</h2>\n                            </div>\n                            <img data-src=\"https://i.pinimg.com/originals/4c/d9/c4/4cd9c4d5bd9a01877bdf430720ab3efc.png\"\n                                alt=\"Enma\" height=\"350px\" width=\"250px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Enma</h2>\n                            </div>\n                            <p class=\"card-text\">Enma is a dynamic character, known for their assertive and fearless\n                                personality.\n                                They thrive in challenging situations, often taking the lead in high-stakes scenarios.\n                                Enma's confidence and charisma make them a natural leader, and they excel in\n                                decision-making and\n                                problem-solving. With a strong\n                                sense of justice and an unwavering determination to protect others, Enma is a force to\n                                be reckoned with.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- [Enma] card end-->\n\n\n\n                <!-- Hero [character name] card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Choji Akimichi</h2>\n                            </div>\n                            <img src=\"./Images/chijoi_image.jpg\" alt=\"\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">A member of the Akimichi clan. His biggest talent is eating and\n                                protecting his friends. His best friend is Shikamaru Nara. He, like Shikamaru, is a\n                                member of Team 10. He seems to lack confidence in himself.</p>\n                            <p>Choji is on a team with Shikamaru and Ino. His main power is his partial expansion jutsu\n                                which allows him to enlarge his limbs for added effectiveness. He can also eat a pill\n                                that rapidly burns off his fat so that he gains an immense amount of Chakra. Choji plays\n                                a minor role in the series, but offers a powerful ally for the protagonists.\n\n                                During the Sasuke Retrieval Arc Choji fought Jiroubou alone. He forced Jiroubou to\n                                activate the second state of his curse mark but after taking the third and final\n                                Akimichi soldier pill he was able to kill him.\n\n                                It is revealed that after the 2.5 year timeskip that Choji has become a Chunin.\n\n                                At the end of the series, Choji marries Karui, whom the two have a daughter together\n                                named Chocho</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Hero [character name] card end-->\n\n                <!-- Hero [Hamura-Otsutsuki] card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Hamura Otsutsuki</h2>\n                            </div>\n                            <img data-src=\"./Images/Hamura-otsutsuki.jpeg\" alt=\"Hamura-otsutsuki\" height=\"300px\"\n                                width=\"300px\" class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Hamura is the brother of Hagoromo Otsutsuki (also known as the Sage of\n                                the Six Paths) and the son of Kaguya Otsutsuki. He played a crucial role in the series\n                                as one of the first users of chakra and a protector of Earth alongside his brother.</p>\n                            <p>After defeating Kaguya, Hamura chose to remain on the moon to guard the powerful Ten\n                                Tails beast, while his brother stayed on Earth. He established the Moon Clan, which\n                                later became known as the Hyuga clan in the Naruto series. Hamura's legacy echoes\n                                throughout the series, emphasizing the importance of balance and cooperation between\n                                different forces for the world's harmony. His story adds depth to the intricate\n                                mythology of the Naruto universe.</p>\n\n                        </div>\n                    </div>\n                </div>\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Hagoromo Otsutsuki</h2>\n                            </div>\n                            <img data-src=\"https://qph.cf2.quoracdn.net/main-qimg-565fc9c933cb267db9c0d1ba5d385417-lq\"\n                                alt=\"Hagoromo-otsutsuki\" height=\"300px\" width=\"300px\" class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Hagoromo Otsutsuki</h2>\n                            </div>\n                            <p class=\"card-text\">Hagoromo Ōtsutsuki (大筒木ハゴロモ, Ōtsutsuki Hagoromo), known to Earth's\n                                population at large as the Sage of Six Paths (六道仙人, Rikudō Sennin, English TV: The Sage\n                                of the Six Paths), was a legendary godlike figure who is regarded as the ancestor of\n                                shinobi,[4] for his act of founding ninshū which led to the creation of the ninja world.\n                                He was the son of Princess Kaguya and alongside his fraternal twin brother, Hamura, were\n                                the first to be born with the same powerful chakra as their mother.</p>\n\n\n                        </div>\n                    </div>\n                </div>\n                <!-- Hero card end-->\n                <!-- Hero [Hamura-Otsutsuki] card end-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Danzo Shimura</h2>\n                            </div>\n                            <img data-src=\"./Images/danzo.jpg\" alt=\"Hamura-otsutsuki\" height=\"300px\" width=\"300px\"\n                                class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Danzō Shimura (志村ダンゾウ, Shimura Danzō) was an elder of Konohagakure. As\n                                the founder and leader of Root, Danzō gained notoriety as The Darkness of the Shinobi\n                                (忍の闇, Shinobi no Yami, English TV: The Shinobi of Darkness)[3] because of his frequent\n                                unsanctioned actions and his often-suspected (but rarely proven) undermining of specific\n                                Konoha personnel.</p>\n                            <p>Despite his decades of suspicious deeds, Danzō only ever acted in what he believed were\n                                the village's best interests. He was appointed the Sixth Hokage Candidate (六代目火影候補,\n                                Rokudaime Hokage Kōho, literally meaning: Sixth Fire Shadow Candidate) after Pain's\n                                Assault, but died before he could be formally approved to the position.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Hero Sakura Haruno card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Sakura Haruno</h2>\n                            </div>\n                            <img data-src=https://i.pinimg.com/736x/e1/f0/de/e1f0de7c07b30e7cd8e30b0ac1960175.jpg\n                                alt=Sakura Haruno height=\"300px\" width=\"300px\" class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Sakura Haruno is a central character in the \"Naruto\" series. Initially,\n                                she is a determined, yet inexperienced ninja on Team 7 under the mentorship of Kakashi\n                                Hatake. Her expertise lies in medical jutsu, making her a valuable asset to her team and\n                                the village.</p>\n                            <p>Sakura Haruno, a key character in \"Naruto,\" is initially a determined but inexperienced\n                                ninja on Team 7. Known for her medical jutsu skills, she undergoes significant growth,\n                                evolving from a weak ninja into a strong kunoichi due to determination and training. Her\n                                character is defined by inner strength, as she overcomes her infatuation with Sasuke to\n                                become more independent. Her deep love for Sasuke drives her to take risks to bring him\n                                back to the village. Throughout the series, Sakura's enduring friendships with Naruto\n                                and Sasuke play a central role. In essence, Sakura's intelligence, growth, inner\n                                strength, love, loyalty, and friendships make her a complex and compelling character in\n                                the \"Naruto\" universe.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Hero Sakura Haruno card end-->\n\n                <!-- Villian Gengetsu Hōzuki card start-->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Gengetsu Hōzuki</h2>\n                            </div>\n                            <img data-src=https://i.pinimg.com/474x/06/a8/d0/06a8d0591033aa5c49b1181fdd93f013.jpg\n                                alt=Gengetsu Hōzuki height=\"300px\" width=\"300px\" class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Gengetsu Hōzuki, known as the \"Second Mizukage,\" was a formidable\n                                leader from the Hidden Mist Village, revered for his mastery of Water Release jutsu and\n                                tactical acumen in the world of \"Naruto.\"</p>\n                            <p>Gengetsu Hōzuki was also renowned for his ability to create mirages using water-based\n                                techniques, making him a deceptive and formidable adversary in battle. His strategic\n                                mind and powerful jutsu contributed to his legacy as the Second Mizukage in the \"Naruto\"\n                                series.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Villian Gengetsu Hōzuki card end-->\n                <!-- Villian Menma card start-->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Menma</h2>\n                            </div>\n                            <img data-src=https://staticg.sportskeeda.com/editor/2023/01/daac3-16729363394246-1920.jpg\n                                alt=\"Menma\" height=\"300px\" width=\"300px\" class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Menma</h2>\n                            </div>\n                            <p class=\"card-text\">Menma Uzumaki is a character that appears in Road to Ninja: Naruto the\n                                Movie as the main antagonist. He is the son of Kushina Uzumaki and Minato Namikaze in\n                                the alternate universe of Konohagakure, thus making him the \"Naruto Uzumaki\" of that\n                                world. He is also the jinchūriki of Kurama's counterpart: the Black Nine-Tails.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Villian Menma card end-->\n                <!-- Villian Indra Otsutsuki card start-->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Indra Otsutsuki</h2>\n                            </div>\n                            <img src=\"Images/Indra_otsutsuki.webp\"\n                                alt=\"Indra Otsutsuki\" height=\"300px\" width=\"300px\" class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Indra Otsutsuki</h2>\n                            </div>\n                            <p class=\"card-text\">Indra Ōtsutsuki was the first born son of Hagoromo Ōtsutsuki. He was\n                                initially thought to be the most suitable successor of his father's teachings, however,\n                                it was his younger brother Asura that ended up inheriting this mantle — a decision that\n                                would lead the two brothers to fight against each other. Indra is also credited with\n                                being the creator of ninjutsu, and the progenitor of the Uchiha clan.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Villian Indra Otsutsuki card end-->\n                <!-- Villian Tobi card start-->\n                <div class=\"flip-card animate__animated animate__flipInX evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Tobi</h2>\n                            </div>\n                            <img data-src=https://i.pinimg.com/originals/0a/eb/a0/0aeba04f772c9bbada1d671978642909.jpg\n                                alt=\"Tobi\" height=\"300px\" width=\"300px\" class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Tobi</h2>\n                            </div>\n                            <p class=\"card-text\">Tobi (トビ, Tobi), nicknamed Guruguru by Obito Uchiha for the swirl\n                                pattern of his face, was one of the first victims of the Infinite Tsukuyomi, and\n                                eventually was pulled from the Demonic Statue of the Outer Path by Black Zetsu</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Villian Tobi card end-->\n                <!-- Hero Son Goku card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Four-Tails:Son Goku</h2>\n                            </div>\n                            <img data-src=\"https://i.pinimg.com/originals/85/c5/4d/85c54d57ba318dd8d94bcc497fd6dbc7.jpg\"\n                                of character] height=\"250px\" width=\"300px\" class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Seiten Taisei Son Gokū (斉天大聖孫悟空, literally meaning: Great Sage\n                                Equalling Heaven Son Gokū), more commonly known as Son Gokū (孫悟空) or simply the\n                                Four-Tails (四尾, Yonbi), is one of the nine tailed beasts. It was last sealed within\n                                Rōshi of Iwagakure.</p>\n                            <p>Son Gokū is a red-furred and green-skinned monkey, with a body-build of a gorilla. It has\n                                eyes with yellow irides and white pupils, spike-like protrusions along the length of its\n                                tails, elongated blunt fangs, and two long horns curving upwards on its forehead like a\n                                crown. In its mouth, Son doesn't have atongue, but has an opening that is shaped like a\n                                dome volcano.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Hero Son Goku card end-->\n\n                <!-- Hero Akamaru card start-->\n                <div class=\"flip-card good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <h2 class=\"card-title\">Akamaru</h2>\n                            <img data-src=\"./Images/319922-akamaru.jpg\" of character] height=\"300px\" width=\"300px\"\n                                class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Faithful dog companion to Kiba Inuzuka. His proof of Kiba's kinship\n                                with the Inuzuka clan.\n                            </p>\n                            <p>In Part I, Kiba carries Akamaru around on top of his head or inside his jacket. In Part\n                                II, Akamaru grows large enough for Kiba to ride on his back, a difference Kiba fails to\n                                notice due to the amount of time they spend together. Akamaru's heightened senses, such\n                                as smell and hearing, along with Kiba's ability to communicate with him, make him a\n                                powerful tool for gathering and sharing information; he can also sense chakra with his\n                                nose, so he can judge an enemy's strength and warn Kiba if they are particularly\n                                powerful. In combat, Akamaru typically takes Kiba's form (albeit having a much more\n                                feral appearance) upon Kiba's use of Beast Human Clone (Jūjin Bunshin; English TV \"Man\n                                Beast Clone\"), or combining with Kiba into a single entity in more desperate situations.\n                                Because Akamaru lacks his own chakra reserves Kiba performs many of the jutsu that\n                                Akamaru takes part in, though Akamaru is able to contribute when it comes to physical\n                                attacks. Akamaru can also use Dynamic Marking (Dainamikku Mākingu) by peeing on a target\n                                with great accuracy, allowing either Kiba or Akamaru to easily find the target by scent,\n                                particularly when fused together.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Hero Akamaru card end-->\n\n               \n\n                <!-- Villian Akatsuki card start-->\n                 <div class=\"flip-card evil\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <h2 class=\"card-title\">Akatsuki</h2>\n                            <img data-src=\"./Images/Akatsuki.webp\" alt=\"Akatsuki\" height=\"300px\" width=\"300px\" class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Akatsuki is a powerful and notorious criminal organization whose members are all S-rank missing nin.</p>\n                            <p>Their primary objective is to capture all nin tailed beasts in order to harness their immense power\n                                and establish world domination. Each member of this feared group possesses unique abilities, making \n                                them a formidable threat to the Shonobi World.</p>\n                        </div>\n                    </div>\n                 </div>\n                 <!-- Villian Akatsuki card end -->\n\n                <!-- Hero Gara card start-->\n                <div class=\"flip-card animate__animated animate__flipInX good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Gaara of the Desert (我愛羅) </h2>\n                            </div>\n                            <img data-src=\"https://i.pinimg.com/474x/a3/e9/a0/a3e9a091bf0e3cd7b6aab3fc1b58bccf.jpg\"\n                                of character] height=\"250px\" width=\"300px\" class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Gaara (我愛羅) is a shinobi of Sunagakure and the youngest of the Three\n                                Sand Siblings. He was made the jinchūriki of the One-Tailed Shukaku before he was born,\n                                causing the villagers of Suna to fear him as a monster. With nobody to connect to, Gaara\n                                grew up hating the world and looking out only for himself, giving his life meaning by\n                                killing anyone he came across.</p>\n                            <p>After being defeated by Naruto Uzumaki — a jinchūriki like himself who found strength in\n                                his friendships — Gaara began emulating him. He later became Suna's Fifth Kazekage\n                                (五代目風影, Godaime Kazekage, literally meaning: Fifth Wind Shadow) so that he can protect\n                                the village and all those who live there, dispelling the fears he cast on the villagers.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Hero Gara card end-->\n\n                <!-- Hero Ibiki Morino card start -->\n                <div class=\"flip-card good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Ibiki Morino</h2>\n                            </div>\n                            <img data-src=\"./Images/Ibiki.png\" alt=\"Ibiki Morino\" height=\"300px\" width=\"300px\"\n                                class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Ibiki Morino is the head of Konohagakure's Torture and Interrogation\n                                Force, known for his cold and intimidating demeanor.</p>\n                            <p>His skill lies in psychological warfare, as he uses his sharp mind to extract information\n                                from enemies without physical force.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Hero Ibiki Morino card end -->\n\n                <!-- Hero Shira card start -->\n                <div class=\"flip-card good\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Shira</h2>\n                            </div>\n                            <img data-src=\"./Images/shira.jpeg\" alt=\"Shira\" height=\"300px\" width=\"300px\"\n                                class=\"img_card\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <p class=\"card-text\">Shira is a talented taijutsu specialist from the Hidden Sand Village,\n                                known for his dedication to hard work and training.</p>\n                            <p>Despite being unable to use ninjutsu or genjutsu, Shira honed his physical abilities to\n                                an extraordinary level, similar to Rock Lee's determination.</p>\n                        </div>\n                    </div>\n                </div>\n                <!-- Hero Shira card end -->\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Pain </h2>\n                            </div>\n                            <img data-src=\"https://fictionhorizon.com/wp-content/uploads/2021/09/pain-quotes.jpg\"\n                                alt=\"Pain\" height=\"300px\" width=\"300px\">\n                        </div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"card-content\">\n                                <h2 class=\"card-title\">Pain </h2>\n                            </div>\n                            <p class=\"card-text\">\n\n                                Pain is the recognised leader of Akatsuki and leader of Amegakure. He\n                                wields the legendary Rinnegan and refers to himself as a god. His real\n                                name is revealed to be Nagato and was once orphaned by war along with\n                                his friends Yahiko and Konan. The Three were trained by Jiraiya in\n                                Ninjutsu.\n\n                            </p>\n                        </div>\n                    </div>\n                </div>\n                \n\n            \n\n                     <!-- [Rion Kurokaze] card start -->\n         <div class=\"flip-card animate__animated animate__flipInX good\">\n            <div class=\"flip-card-inner\">\n                <div class=\"flip-card-front\">\n                    <div class=\"card-content\">\n                        <h2 class=\"card-title\">Rion Kurokaze</h2>\n                    </div>\n                    <img data-src=\"./Images/Rion_Kurokaze.jpeg\" alt=\"Rion Kurokaze\" height=\"300px\" width=\"300px\">\n                </div>\n                <div class=\"flip-card-back\">\n                    <p class=\"card-text\">\n                                        Rion Kurokaze, often called the *Storm’s Last Sentinel*, is the sole survivor of the ancient floating city of Aetherion — \n                a civilization that soared above the clouds and harnessed the endless power of the wind. When the city fell during \n                the Great Celestial War, Rion was struck by lightning at the heart of the Tempest Core — the mythical source of Aetherion’s strength. \n                Instead of perishing, his body merged with the core, transforming him into a living embodiment of the storm itself. <br><br>\n                \n                With hair streaked by silver wind and eyes glowing with teal lightning, Rion wanders the mortal lands below, searching for traces \n                of the lost skies. The air bends at his command; storms rise when his emotions flare. Yet beneath his calm exterior lies \n                an eternal loneliness — the silence of a man who once heard the voice of the sky itself. His power is both a blessing and a curse: \n                to protect the balance between heaven and earth, even if it means standing forever in the storm’s eye. <br><br>\n                    </p>\n                </div>\n                         </div>\n         </div>\n         <!-- [Rion Kurokaze] card end -->\n\n\n        </main>\n\n\n\n        <audio src=\"./sound/naruto.mp3\"></audio>\n\n        <footer class=\"footer\" >\n            Developed and Designed By <span id=\"idblink\" onclick=\"tap()\" style=\"cursor: pointer;\"><u>Vikhyat\n                    Singh</u></span> | ©\n            All Rights Reserved\n            <h5>Follow Me on : </h5>\n            <div class=\"icon\">\n                <a href=\"https://facebook.com/vikhyatsingh123/\" class=\"fa fa-facebook\" target=\"_blank\"></a>\n                <a href=\"#\" class=\"fa fa-twitter\"></a>\n                <a href=\"https://github.com/vikhyatsingh123/\" class=\"fa fa-github\" target=\"_blank\"></a>\n                <a href=\"https://www.linkedin.com/in/vikhyat-singh-337777197/\" class=\"fa fa-linkedin\"\n                    target=\"_blank\"></a>\n                <a href=\"https://www.instagram.com/vikhyat552/\" class=\"fa fa-instagram\" target=\"_blank\"></a>\n            </div>\n        </footer>\n        <script>\n            function tap() {\n                const link = document.getElementById('idblink')\n                window.location.href = \"https://github.com/vikhyatsingh123\"\n            }\n        </script>\n        <!-- <footer>\n            <nav class=\"navbar navbar-expand-lg navbar-light nav1\">\n                <p class=\"mx-auto text-light font-weight-lighter\">&copy Developed By - <a\n                        href=\"https://github.com/vikhyatsingh123\">Vikhyat Singh</a></p>\n            </nav>\n        </footer> -->\n\n\n\n        <script src=\"js/sound.js\"></script>\n        <script src=\"https://code.jquery.com/jquery-3.5.1.slim.min.js\"\n            integrity=\"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj\" crossorigin=\"anonymous\">\n            </script>\n        <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js\"\n            integrity=\"sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns\" crossorigin=\"anonymous\">\n\n            </script>\n\n        <script src=\"js/searchbar.js\"></script>\n        <script src=\"js/scrollEffect.js\"></script>\n        <script src=\"js/lazyload.js\"></script>\n\n        <script src=\"js/scrolltotop.js\"></script>\n\n        <script src=\"js/switch-toggle.js\"></script>\n\n        <script>\n\n            /* ------- Scroll To Top Button -------*/\n\n            const toTop = document.querySelector(\".to-top\");\n            window.addEventListener(\"scroll\", () => {\n\n                if (window.pageYOffset > 400) {\n                    toTop.classList.add(\"active\");\n                } else {\n                    toTop.classList.remove(\"active\");\n                }\n\n            });\n\n        </script>\n\n\n        <script>\n            function darkmode() {\n                // console.log(\"hello\");\n\n                var element2 = document.querySelector(\"body\");\n                const body = document.body;\n                body.classList.toggle(\"light-mode\");\n                body.classList.toggle(\"dark-mode\");\n\n                if (element2.classList.contains(\"light-mode\")) {\n\n                    document.querySelector(\"#toggler\").innerHTML = \"🌞 Light\"\n                }\n                else {\n\n                    document.querySelector(\"#toggler\").innerHTML = \"🌙 Dark\";\n                }\n            }\n        </script>\n\n        <script>\n            function filterCards() {\n                var input, filter, cards, card, title, i, txtValue;\n                input = document.getElementById('mysearch');\n                filter = input.value.toUpperCase();\n                cards = document.getElementsByClassName('flip-card');\n\n                for (i = 0; i < cards.length; i++) {\n                    card = cards[i];\n                    title = card.querySelector('.card-title');\n                    txtValue = title.textContent || title.innerText;\n\n                    if (txtValue.toUpperCase().indexOf(filter) > -1) {\n                        card.style.display = '';\n                    } else {\n                        card.style.display = 'none';\n                    }\n                }\n            }\n            function clearSearch() {\n                document.getElementById('mysearch').value = '';\n                filterCards(); // Clearing the search should show all cards\n            }\n        </script>\n</body>\n\n</html>\n"
  },
  {
    "path": "index.md",
    "content": "           <!-- card end-->\n           <div class=\"card mb-3 card-bg my-4\" style=\"max-width: 100%;\">\n              <div class=\"row no-gutters\">\n                  <div class=\"col-md-4\">\n                     <img src= https://static.wikia.nocookie.net/naruto/images/2/27/Kakashi_Hatake.png/revision/latest?cb=20170628120149 alt=kakasi height=\"390px\" width=\"300px\">  \n                  </div>\n              <div class=\"col-md-8\">\n                 <div class=\"card-body\">\n                    <h2 class=\"card-title\">Kakashi Hatake</h2>\n                    <p class=\"card-text\">He is a shinobi of Konohagakure's Hatake clan.</p>\n                    <p>Kakashi is the son of Sakumo Hatake, one of the most powerful shinobi Konoha ever produced, renowned throughout the ninja world as \"White Fang of the Leaf\".</p>\n                </div>\n             </div>\n           </div>\n         </div>\n       <!--card end-->\n"
  },
  {
    "path": "js/aboutdarkmode.js",
    "content": "let buttonText = document.getElementById(\"darkmode-button\");\nlet theme=localStorage.getItem('theme');\n//    let theme=localStorage.getItem('theme');\nlet para=document.getElementById('para');\nlet h1=document.querySelector('h1');\nconsole.log(para.innerText);\n\nvar bodyelem=document.body;\n\nfunction darkmode(){\nlocalStorage.setItem('theme','darkmode');\nlet val=localStorage.getItem('theme');\n// bodyelem=document.body;\nbodyelem.classList.add(val);\npara.style.color=\"white\";\nh1.style.color=\"white\";\n}\n\nfunction lightmode(){\n//let bodyelem=document.body;\nlocalStorage.setItem('theme','');\nlet val=localStorage.getItem('theme');\nbodyelem.classList.value=val;\npara.style.color=\"black\";\nh1.style.color=\"black\";\n// localStorage.setItem('theme','');\n}\nif(theme=='darkmode')\n{\ndarkmode();\n}\nbuttonText.addEventListener('click',()=>{\ntheme=localStorage.getItem('theme');\nconsole.log(theme);\nif(theme==='darkmode')\n{\n      lightmode();    \n}\nelse\n{\n    darkmode();\n}\n})\n\n\n"
  },
  {
    "path": "js/indexdarkmode.js",
    "content": "    let buttonText = document.getElementById(\"switch\");\n    let theme=localStorage.getItem('theme');\nvar bodyelem=document.body;\nfunction darkmode(){\n    localStorage.setItem('theme','darkmode');\n    let val=localStorage.getItem('theme');\n\n    bodyelem.classList.add(val);    \n}\nfunction lightmode(){\n    //let bodyelem=document.body;\n    localStorage.setItem('theme','');\n    let val=localStorage.getItem('theme');\n    bodyelem.classList.value=val;\n   // localStorage.setItem('theme','');\n}\nif(theme=='darkmode')\n{\n    darkmode();\n    buttonText.checked = true;\n}\nbuttonText.addEventListener('click',()=>{\n   theme=localStorage.getItem('theme');\n    console.log(theme);\n    if(theme==='darkmode')\n    {\n          lightmode();    \n    }\n    else\n    {\n        darkmode();\n    }\n})\n"
  },
  {
    "path": "js/lazyload.js",
    "content": "const imgs=document.querySelectorAll(\"[data-src]\")\nlet imgOptions={threshold:0,rootMargin:\"0px 0px 600px 0px\"}\nfunction preloadImg(img){\n        const src=img.getAttribute(\"data-src\")\n\n        if(!src) return;\n        \n        img.src=src\n}\nconst imgObserver= new IntersectionObserver((entries,imgObserver)=>{\n        entries.forEach(entry=>{\n                if(!entry.isIntersecting){\n                        return \n                }else{\n                        preloadImg(entry.target)\n                        imgObserver.unobserve(entry.target)\n                }\n        })\n},imgOptions )\n\n\nimgs.forEach(image=>{\n        imgObserver.observe(image)\n})"
  },
  {
    "path": "js/scrollEffect.js",
    "content": "const cards = document.querySelectorAll('.card');\n\nconst Options = {\n    thresold: 1,\n    rootMargin: \"0px 0px -150px 0px\"\n}\n\nconst animationAppear = new IntersectionObserver(function(entries, animationOnAppear){\n    entries.forEach(entry => {\n        if(!entry.isIntersecting){\n            return;\n        }\n        else{\n            entry.target.classList.add('appear');\n            animationOnAppear.unobserve(entry.target);\n        }\n    })\n}, Options);\n\ncards.forEach(card => {\n    animationAppear.observe(card);\n})"
  },
  {
    "path": "js/scrolltotop.js",
    "content": "document.getElementById('scrolltopBtn').onclick = () => {\n    window.scrollTo({\n        top: 0,\n        behavior: 'smooth'\n    })\n}"
  },
  {
    "path": "js/searchbar.js",
    "content": "const icon = document.querySelector('.icon');\nconst search = document.querySelector('.search');\nconst clearbtn = document.querySelector('.clear');\nclearbtn.style.display ='none';\nicon.addEventListener('click',()=>{\n    search.classList.toggle('activated');\n    if (search.classList.contains('activated')) {\n        clearbtn.style.display = 'block';\n    } else {\n        clearbtn.style.display = 'none';\n    }\n})\n\n\nconst search_box = document.querySelector('#mysearch');\n\nsearch_box.addEventListener('input',()=>{\n\n    window.scrollTo(0, 1383.33);\n    \n   const filter = search_box.value.toUpperCase(); \n  \n   \n    let container =  document.getElementById('cont');\n    let cont = container.getElementsByClassName('card')\n   \n     for(let i=0;i<cont.length;i++)\n     {\n        const h = cont[i].getElementsByTagName('h2')[0];\n\n        const textValue = h.textContent.toUpperCase()\n      \n\n        if(textValue.includes(filter))\n        {\n            cont[i].style.display = 'block'\n          \n        }\n        else{\n            cont[i].style.display = 'none';\n        }\n     }\n   \n   \n\n})\n"
  },
  {
    "path": "js/smooth-scroll.js",
    "content": "/*! SmoothScroll v16.1.4 | (c) 2020 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/smooth-scroll */\n(function (global, factory) {\n\ttypeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :\n\ttypeof define === 'function' && define.amd ? define(factory) :\n\t(global = global || self, global.SmoothScroll = factory());\n}(this, (function () { 'use strict';\n\n\t//\n\t// Default settings\n\t//\n\n\tvar defaults = {\n\n\t\t// Selectors\n\t\tignore: '[data-scroll-ignore]',\n\t\theader: null,\n\t\ttopOnEmptyHash: true,\n\n\t\t// Speed & Duration\n\t\tspeed: 1000,\n\t\tspeedAsDuration: false,\n\t\tdurationMax: null,\n\t\tdurationMin: null,\n\t\tclip: true,\n\t\toffset: 50,\n\n\t\t// Easing\n\t\teasing: 'easeInOutCubic',\n\t\tcustomEasing: null,\n\n\t\t// History\n\t\tupdateURL: true,\n\t\tpopstate: true,\n\n\t\t// Custom Events\n\t\temitEvents: true\n\n\t};\n\n\n\t//\n\t// Utility Methods\n\t//\n\n\t/**\n\t * Check if browser supports required methods\n\t * @return {Boolean} Returns true if all required methods are supported\n\t */\n\tvar supports = function () {\n\t\treturn (\n\t\t\t'querySelector' in document &&\n\t\t\t'addEventListener' in window &&\n\t\t\t'requestAnimationFrame' in window &&\n\t\t\t'closest' in window.Element.prototype\n\t\t);\n\t};\n\n\t/**\n\t * Merge two or more objects together.\n\t * @param   {Object}   objects  The objects to merge together\n\t * @returns {Object}            Merged values of defaults and options\n\t */\n\tvar extend = function () {\n\t\tvar merged = {};\n\t\tArray.prototype.forEach.call(arguments, function (obj) {\n\t\t\tfor (var key in obj) {\n\t\t\t\tif (!obj.hasOwnProperty(key)) return;\n\t\t\t\tmerged[key] = obj[key];\n\t\t\t}\n\t\t});\n\t\treturn merged;\n\t};\n\n\t/**\n\t * Check to see if user prefers reduced motion\n\t * @param  {Object} settings Script settings\n\t */\n\tvar reduceMotion = function () {\n\t\tif ('matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches) {\n\t\t\treturn true;\n\t\t}\n\t\treturn false;\n\t};\n\n\t/**\n\t * Get the height of an element.\n\t * @param  {Node} elem The element to get the height of\n\t * @return {Number}    The element's height in pixels\n\t */\n\tvar getHeight = function (elem) {\n\t\treturn parseInt(window.getComputedStyle(elem).height, 10);\n\t};\n\n\t/**\n\t * Escape special characters for use with querySelector\n\t * @author Mathias Bynens\n\t * @link https://github.com/mathiasbynens/CSS.escape\n\t * @param {String} id The anchor ID to escape\n\t */\n\tvar escapeCharacters = function (id) {\n\n\t\t// Remove leading hash\n\t\tif (id.charAt(0) === '#') {\n\t\t\tid = id.substr(1);\n\t\t}\n\n\t\tvar string = String(id);\n\t\tvar length = string.length;\n\t\tvar index = -1;\n\t\tvar codeUnit;\n\t\tvar result = '';\n\t\tvar firstCodeUnit = string.charCodeAt(0);\n\t\twhile (++index < length) {\n\t\t\tcodeUnit = string.charCodeAt(index);\n\t\t\t// Note: there’s no need to special-case astral symbols, surrogate\n\t\t\t// pairs, or lone surrogates.\n\n\t\t\t// If the character is NULL (U+0000), then throw an\n\t\t\t// `InvalidCharacterError` exception and terminate these steps.\n\t\t\tif (codeUnit === 0x0000) {\n\t\t\t\tthrow new InvalidCharacterError(\n\t\t\t\t\t'Invalid character: the input contains U+0000.'\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t// If the character is in the range [\\1-\\1F] (U+0001 to U+001F) or is\n\t\t\t\t// U+007F, […]\n\t\t\t\t(codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F ||\n\t\t\t\t// If the character is the first character and is in the range [0-9]\n\t\t\t\t// (U+0030 to U+0039), […]\n\t\t\t\t(index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||\n\t\t\t\t// If the character is the second character and is in the range [0-9]\n\t\t\t\t// (U+0030 to U+0039) and the first character is a `-` (U+002D), […]\n\t\t\t\t(\n\t\t\t\t\tindex === 1 &&\n\t\t\t\t\tcodeUnit >= 0x0030 && codeUnit <= 0x0039 &&\n\t\t\t\t\tfirstCodeUnit === 0x002D\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\t// http://dev.w3.org/csswg/cssom/#escape-a-character-as-code-point\n\t\t\t\tresult += '\\\\' + codeUnit.toString(16) + ' ';\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t// If the character is not handled by one of the above rules and is\n\t\t\t// greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or\n\t\t\t// is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to\n\t\t\t// U+005A), or [a-z] (U+0061 to U+007A), […]\n\t\t\tif (\n\t\t\t\tcodeUnit >= 0x0080 ||\n\t\t\t\tcodeUnit === 0x002D ||\n\t\t\t\tcodeUnit === 0x005F ||\n\t\t\t\tcodeUnit >= 0x0030 && codeUnit <= 0x0039 ||\n\t\t\t\tcodeUnit >= 0x0041 && codeUnit <= 0x005A ||\n\t\t\t\tcodeUnit >= 0x0061 && codeUnit <= 0x007A\n\t\t\t) {\n\t\t\t\t// the character itself\n\t\t\t\tresult += string.charAt(index);\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t// Otherwise, the escaped character.\n\t\t\t// http://dev.w3.org/csswg/cssom/#escape-a-character\n\t\t\tresult += '\\\\' + string.charAt(index);\n\n\t\t}\n\n\t\t// Return sanitized hash\n\t\treturn '#' + result;\n\n\t};\n\n\t/**\n\t * Calculate the easing pattern\n\t * @link https://gist.github.com/gre/1650294\n\t * @param   {Object} settings Easing pattern\n\t * @param   {Number} time     Time animation should take to complete\n\t * @returns {Number}\n\t */\n\tvar easingPattern = function (settings, time) {\n\t\tvar pattern;\n\n\t\t// Default Easing Patterns\n\t\tif (settings.easing === 'easeInQuad') pattern = time * time; // accelerating from zero velocity\n\t\tif (settings.easing === 'easeOutQuad') pattern = time * (2 - time); // decelerating to zero velocity\n\t\tif (settings.easing === 'easeInOutQuad') pattern = time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time; // acceleration until halfway, then deceleration\n\t\tif (settings.easing === 'easeInCubic') pattern = time * time * time; // accelerating from zero velocity\n\t\tif (settings.easing === 'easeOutCubic') pattern = (--time) * time * time + 1; // decelerating to zero velocity\n\t\tif (settings.easing === 'easeInOutCubic') pattern = time < 0.5 ? 4 * time * time * time : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1; // acceleration until halfway, then deceleration\n\t\tif (settings.easing === 'easeInQuart') pattern = time * time * time * time; // accelerating from zero velocity\n\t\tif (settings.easing === 'easeOutQuart') pattern = 1 - (--time) * time * time * time; // decelerating to zero velocity\n\t\tif (settings.easing === 'easeInOutQuart') pattern = time < 0.5 ? 8 * time * time * time * time : 1 - 8 * (--time) * time * time * time; // acceleration until halfway, then deceleration\n\t\tif (settings.easing === 'easeInQuint') pattern = time * time * time * time * time; // accelerating from zero velocity\n\t\tif (settings.easing === 'easeOutQuint') pattern = 1 + (--time) * time * time * time * time; // decelerating to zero velocity\n\t\tif (settings.easing === 'easeInOutQuint') pattern = time < 0.5 ? 16 * time * time * time * time * time : 1 + 16 * (--time) * time * time * time * time; // acceleration until halfway, then deceleration\n\n\t\t// Custom Easing Patterns\n\t\tif (!!settings.customEasing) pattern = settings.customEasing(time);\n\n\t\treturn pattern || time; // no easing, no acceleration\n\t};\n\n\t/**\n\t * Determine the document's height\n\t * @returns {Number}\n\t */\n\tvar getDocumentHeight = function () {\n\t\treturn Math.max(\n\t\t\tdocument.body.scrollHeight, document.documentElement.scrollHeight,\n\t\t\tdocument.body.offsetHeight, document.documentElement.offsetHeight,\n\t\t\tdocument.body.clientHeight, document.documentElement.clientHeight\n\t\t);\n\t};\n\n\t/**\n\t * Calculate how far to scroll\n\t * Clip support added by robjtede - https://github.com/cferdinandi/smooth-scroll/issues/405\n\t * @param {Element} anchor       The anchor element to scroll to\n\t * @param {Number}  headerHeight Height of a fixed header, if any\n\t * @param {Number}  offset       Number of pixels by which to offset scroll\n\t * @param {Boolean} clip         If true, adjust scroll distance to prevent abrupt stops near the bottom of the page\n\t * @returns {Number}\n\t */\n\tvar getEndLocation = function (anchor, headerHeight, offset, clip) {\n\t\tvar location = 0;\n\t\tif (anchor.offsetParent) {\n\t\t\tdo {\n\t\t\t\tlocation += anchor.offsetTop;\n\t\t\t\tanchor = anchor.offsetParent;\n\t\t\t} while (anchor);\n\t\t}\n\t\tlocation = Math.max(location - headerHeight - offset, 0);\n\t\tif (clip) {\n\t\t\tlocation = Math.min(location, getDocumentHeight() - window.innerHeight);\n\t\t}\n\t\t\treturn location;\n\t};\n\n\t/**\n\t * Get the height of the fixed header\n\t * @param  {Node}   header The header\n\t * @return {Number}        The height of the header\n\t */\n\tvar getHeaderHeight = function (header) {\n\t\treturn !header ? 0 : (getHeight(header) + header.offsetTop);\n\t};\n\n\t/**\n\t * Calculate the speed to use for the animation\n\t * @param  {Number} distance The distance to travel\n\t * @param  {Object} settings The plugin settings\n\t * @return {Number}          How fast to animate\n\t */\n\tvar getSpeed = function (distance, settings) {\n\t\tvar speed = settings.speedAsDuration ? settings.speed : Math.abs(distance / 1000 * settings.speed);\n\t\tif (settings.durationMax && speed > settings.durationMax) return settings.durationMax;\n\t\tif (settings.durationMin && speed < settings.durationMin) return settings.durationMin;\n\t\treturn parseInt(speed, 10);\n\t};\n\n\tvar setHistory = function (options) {\n\n\t\t// Make sure this should run\n\t\tif (!history.replaceState || !options.updateURL || history.state) return;\n\n\t\t// Get the hash to use\n\t\tvar hash = window.location.hash;\n\t\thash = hash ? hash : '';\n\n\t\t// Set a default history\n\t\thistory.replaceState(\n\t\t\t{\n\t\t\t\tsmoothScroll: JSON.stringify(options),\n\t\t\t\tanchor: hash ? hash : window.pageYOffset\n\t\t\t},\n\t\t\tdocument.title,\n\t\t\thash ? hash : window.location.href\n\t\t);\n\n\t};\n\n\t/**\n\t * Update the URL\n\t * @param  {Node}    anchor  The anchor that was scrolled to\n\t * @param  {Boolean} isNum   If true, anchor is a number\n\t * @param  {Object}  options Settings for Smooth Scroll\n\t */\n\tvar updateURL = function (anchor, isNum, options) {\n\n\t\t// Bail if the anchor is a number\n\t\tif (isNum) return;\n\n\t\t// Verify that pushState is supported and the updateURL option is enabled\n\t\tif (!history.pushState || !options.updateURL) return;\n\n\t\t// Update URL\n\t\thistory.pushState(\n\t\t\t{\n\t\t\t\tsmoothScroll: JSON.stringify(options),\n\t\t\t\tanchor: anchor.id\n\t\t\t},\n\t\t\tdocument.title,\n\t\t\tanchor === document.documentElement ? '#top' : '#' + anchor.id\n\t\t);\n\n\t};\n\n\t/**\n\t * Bring the anchored element into focus\n\t * @param {Node}     anchor      The anchor element\n\t * @param {Number}   endLocation The end location to scroll to\n\t * @param {Boolean}  isNum       If true, scroll is to a position rather than an element\n\t */\n\tvar adjustFocus = function (anchor, endLocation, isNum) {\n\n\t\t// Is scrolling to top of page, blur\n\t\tif (anchor === 0) {\n\t\t\tdocument.body.focus();\n\t\t}\n\n\t\t// Don't run if scrolling to a number on the page\n\t\tif (isNum) return;\n\n\t\t// Otherwise, bring anchor element into focus\n\t\tanchor.focus();\n\t\tif (document.activeElement !== anchor) {\n\t\t\tanchor.setAttribute('tabindex', '-1');\n\t\t\tanchor.focus();\n\t\t\tanchor.style.outline = 'none';\n\t\t}\n\t\twindow.scrollTo(0 , endLocation);\n\n\t};\n\n\t/**\n\t * Emit a custom event\n\t * @param  {String} type    The event type\n\t * @param  {Object} options The settings object\n\t * @param  {Node}   anchor  The anchor element\n\t * @param  {Node}   toggle  The toggle element\n\t */\n\tvar emitEvent = function (type, options, anchor, toggle) {\n\t\tif (!options.emitEvents || typeof window.CustomEvent !== 'function') return;\n\t\tvar event = new CustomEvent(type, {\n\t\t\tbubbles: true,\n\t\t\tdetail: {\n\t\t\t\tanchor: anchor,\n\t\t\t\ttoggle: toggle\n\t\t\t}\n\t\t});\n\t\tdocument.dispatchEvent(event);\n\t};\n\n\n\t//\n\t// SmoothScroll Constructor\n\t//\n\n\tvar SmoothScroll = function (selector, options) {\n\n\t\t//\n\t\t// Variables\n\t\t//\n\n\t\tvar smoothScroll = {}; // Object for public APIs\n\t\tvar settings, toggle, fixedHeader, animationInterval;\n\n\n\t\t//\n\t\t// Methods\n\t\t//\n\n\t\t/**\n\t\t * Cancel a scroll-in-progress\n\t\t */\n\t\tsmoothScroll.cancelScroll = function (noEvent) {\n\t\t\tcancelAnimationFrame(animationInterval);\n\t\t\tanimationInterval = null;\n\t\t\tif (noEvent) return;\n\t\t\temitEvent('scrollCancel', settings);\n\t\t};\n\n\t\t/**\n\t\t * Start/stop the scrolling animation\n\t\t * @param {Node|Number} anchor  The element or position to scroll to\n\t\t * @param {Element}     toggle  The element that toggled the scroll event\n\t\t * @param {Object}      options\n\t\t */\n\t\tsmoothScroll.animateScroll = function (anchor, toggle, options) {\n\n\t\t\t// Cancel any in progress scrolls\n\t\t\tsmoothScroll.cancelScroll();\n\n\t\t\t// Local settings\n\t\t\tvar _settings = extend(settings || defaults, options || {}); // Merge user options with defaults\n\n\t\t\t// Selectors and variables\n\t\t\tvar isNum = Object.prototype.toString.call(anchor) === '[object Number]' ? true : false;\n\t\t\tvar anchorElem = isNum || !anchor.tagName ? null : anchor;\n\t\t\tif (!isNum && !anchorElem) return;\n\t\t\tvar startLocation = window.pageYOffset; // Current location on the page\n\t\t\tif (_settings.header && !fixedHeader) {\n\t\t\t\t// Get the fixed header if not already set\n\t\t\t\tfixedHeader = document.querySelector(_settings.header);\n\t\t\t}\n\t\t\tvar headerHeight = getHeaderHeight(fixedHeader);\n\t\t\tvar endLocation = isNum ? anchor : getEndLocation(anchorElem, headerHeight, parseInt((typeof _settings.offset === 'function' ? _settings.offset(anchor, toggle) : _settings.offset), 10), _settings.clip); // Location to scroll to\n\t\t\tvar distance = endLocation - startLocation; // distance to travel\n\t\t\tvar documentHeight = getDocumentHeight();\n\t\t\tvar timeLapsed = 0;\n\t\t\tvar speed = getSpeed(distance, _settings);\n\t\t\tvar start, percentage, position;\n\n\t\t\t/**\n\t\t\t * Stop the scroll animation when it reaches its target (or the bottom/top of page)\n\t\t\t * @param {Number} position Current position on the page\n\t\t\t * @param {Number} endLocation Scroll to location\n\t\t\t * @param {Number} animationInterval How much to scroll on this loop\n\t\t\t */\n\t\t\tvar stopAnimateScroll = function (position, endLocation) {\n\n\t\t\t\t// Get the current location\n\t\t\t\tvar currentLocation = window.pageYOffset;\n\n\t\t\t\t// Check if the end location has been reached yet (or we've hit the end of the document)\n\t\t\t\tif (position == endLocation || currentLocation == endLocation || ((startLocation < endLocation && window.innerHeight + currentLocation) >= documentHeight)) {\n\n\t\t\t\t\t// Clear the animation timer\n\t\t\t\t\tsmoothScroll.cancelScroll(true);\n\n\t\t\t\t\t// Bring the anchored element into focus\n\t\t\t\t\tadjustFocus(anchor, endLocation, isNum);\n\n\t\t\t\t\t// Emit a custom event\n\t\t\t\t\temitEvent('scrollStop', _settings, anchor, toggle);\n\n\t\t\t\t\t// Reset start\n\t\t\t\t\tstart = null;\n\t\t\t\t\tanimationInterval = null;\n\n\t\t\t\t\treturn true;\n\n\t\t\t\t}\n\t\t\t};\n\n\t\t\t/**\n\t\t\t * Loop scrolling animation\n\t\t\t */\n\t\t\tvar loopAnimateScroll = function (timestamp) {\n\t\t\t\tif (!start) { start = timestamp; }\n\t\t\t\ttimeLapsed += timestamp - start;\n\t\t\t\tpercentage = speed === 0 ? 0 : (timeLapsed / speed);\n\t\t\t\tpercentage = (percentage > 1) ? 1 : percentage;\n\t\t\t\tposition = startLocation + (distance * easingPattern(_settings, percentage));\n\t\t\t\twindow.scrollTo(0, Math.floor(position));\n\t\t\t\tif (!stopAnimateScroll(position, endLocation)) {\n\t\t\t\t\tanimationInterval = window.requestAnimationFrame(loopAnimateScroll);\n\t\t\t\t\tstart = timestamp;\n\t\t\t\t}\n\t\t\t};\n\n\t\t\t/**\n\t\t\t * Reset position to fix weird iOS bug\n\t\t\t * @link https://github.com/cferdinandi/smooth-scroll/issues/45\n\t\t\t */\n\t\t\tif (window.pageYOffset === 0) {\n\t\t\t\twindow.scrollTo(0, 0);\n\t\t\t}\n\n\t\t\t// Update the URL\n\t\t\tupdateURL(anchor, isNum, _settings);\n\n\t\t\t// If the user prefers reduced motion, jump to location\n\t\t\tif (reduceMotion()) {\n\t\t\t\tadjustFocus(anchor, Math.floor(endLocation), false);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Emit a custom event\n\t\t\temitEvent('scrollStart', _settings, anchor, toggle);\n\n\t\t\t// Start scrolling animation\n\t\t\tsmoothScroll.cancelScroll(true);\n\t\t\twindow.requestAnimationFrame(loopAnimateScroll);\n\n\t\t};\n\n\t\t/**\n\t\t * If smooth scroll element clicked, animate scroll\n\t\t */\n\t\tvar clickHandler = function (event) {\n\n\t\t\t// Don't run if event was canceled but still bubbled up\n\t\t\t// By @mgreter - https://github.com/cferdinandi/smooth-scroll/pull/462/\n\t\t\tif (event.defaultPrevented) return;\n\n\t\t\t// Don't run if right-click or command/control + click or shift + click\n\t\t\tif (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey) return;\n\n\t\t\t// Check if event.target has closest() method\n\t\t\t// By @totegi - https://github.com/cferdinandi/smooth-scroll/pull/401/\n\t\t\tif (!('closest' in event.target)) return;\n\n\t\t\t// Check if a smooth scroll link was clicked\n\t\t\ttoggle = event.target.closest(selector);\n\t\t\tif (!toggle || toggle.tagName.toLowerCase() !== 'a' || event.target.closest(settings.ignore)) return;\n\n\t\t\t// Only run if link is an anchor and points to the current page\n\t\t\tif (toggle.hostname !== window.location.hostname || toggle.pathname !== window.location.pathname || !/#/.test(toggle.href)) return;\n\n\t\t\t// Get an escaped version of the hash\n\t\t\tvar hash;\n\t\t\ttry {\n\t\t\t\thash = escapeCharacters(decodeURIComponent(toggle.hash));\n\t\t\t} catch(e) {\n\t\t\t\thash = escapeCharacters(toggle.hash);\n\t\t\t}\n\n\t\t\t// Get the anchored element\n\t\t\tvar anchor;\n\t\t\tif (hash === '#') {\n\t\t\t\tif (!settings.topOnEmptyHash) return;\n\t\t\t\tanchor = document.documentElement;\n\t\t\t} else {\n\t\t\t\tanchor = document.querySelector(hash);\n\t\t\t}\n\t\t\tanchor = !anchor && hash === '#top' ? document.documentElement : anchor;\n\n\t\t\t// If anchored element exists, scroll to it\n\t\t\tif (!anchor) return;\n\t\t\tevent.preventDefault();\n\t\t\tsetHistory(settings);\n\t\t\tsmoothScroll.animateScroll(anchor, toggle);\n\n\t\t};\n\n\t\t/**\n\t\t * Animate scroll on popstate events\n\t\t */\n\t\tvar popstateHandler = function () {\n\n\t\t\t// Stop if history.state doesn't exist (ex. if clicking on a broken anchor link).\n\t\t\t// fixes `Cannot read property 'smoothScroll' of null` error getting thrown.\n\t\t\tif (history.state === null) return;\n\n\t\t\t// Only run if state is a popstate record for this instantiation\n\t\t\tif (!history.state.smoothScroll || history.state.smoothScroll !== JSON.stringify(settings)) return;\n\n\t\t\t// Get the anchor\n\t\t\tvar anchor = history.state.anchor;\n\t\t\tif (typeof anchor === 'string' && anchor) {\n\t\t\t\tanchor = document.querySelector(escapeCharacters(history.state.anchor));\n\t\t\t\tif (!anchor) return;\n\t\t\t}\n\n\t\t\t// Animate scroll to anchor link\n\t\t\tsmoothScroll.animateScroll(anchor, null, {updateURL: false});\n\n\t\t};\n\n\t\t/**\n\t\t * Destroy the current initialization.\n\t\t */\n\t\tsmoothScroll.destroy = function () {\n\n\t\t\t// If plugin isn't already initialized, stop\n\t\t\tif (!settings) return;\n\n\t\t\t// Remove event listeners\n\t\t\tdocument.removeEventListener('click', clickHandler, false);\n\t\t\twindow.removeEventListener('popstate', popstateHandler, false);\n\n\t\t\t// Cancel any scrolls-in-progress\n\t\t\tsmoothScroll.cancelScroll();\n\n\t\t\t// Reset variables\n\t\t\tsettings = null;\n\t\t\ttoggle = null;\n\t\t\tfixedHeader = null;\n\t\t\tanimationInterval = null;\n\n\t\t};\n\n\t\t/**\n\t\t * Initialize Smooth Scroll\n\t\t * @param {Object} options User settings\n\t\t */\n\t\tvar init = function () {\n\n\t\t\t// feature test\n\t\t\tif (!supports()) throw 'Smooth Scroll: This browser does not support the required JavaScript methods and browser APIs.';\n\n\t\t\t// Destroy any existing initializations\n\t\t\tsmoothScroll.destroy();\n\n\t\t\t// Selectors and variables\n\t\t\tsettings = extend(defaults, options || {}); // Merge user options with defaults\n\t\t\tfixedHeader = settings.header ? document.querySelector(settings.header) : null; // Get the fixed header\n\n\t\t\t// When a toggle is clicked, run the click handler\n\t\t\tdocument.addEventListener('click', clickHandler, false);\n\n\t\t\t// If updateURL and popState are enabled, listen for pop events\n\t\t\tif (settings.updateURL && settings.popstate) {\n\t\t\t\twindow.addEventListener('popstate', popstateHandler, false);\n\t\t\t}\n\n\t\t};\n\n\n\t\t//\n\t\t// Initialize plugin\n\t\t//\n\n\t\tinit();\n\n\n\t\t//\n\t\t// Public APIs\n\t\t//\n\n\t\treturn smoothScroll;\n\n\t};\n\n\treturn SmoothScroll;\n\n})));\n"
  },
  {
    "path": "js/sound.js",
    "content": "\n\nsetTimeout(()=>{\n    (()=>{\n        let sound=document.getElementsByTagName('audio')[0];\n        sound.play()\n        console.log(sound);\n    })()\n    \n},1000)"
  },
  {
    "path": "js/switch-toggle.js",
    "content": "/* \n    Add the class good/evil to make the character show when the good or evil slider is toggled. Simply leave no class to have \n    the card always show. This is good for morally ambiguous characters. \n*/\nconst toggleInput = document.getElementById(\"toggle-input\");\nconst toggleSlider = document.getElementById(\"toggle-slider\");\n\nconst goodCharacters = document.getElementsByClassName(\"good\");\nconst heroimg = document.getElementsByClassName(\"heroimg\");\nconst goodCharactersArray = Array.from(goodCharacters);\n\nconst evilCharacters = document.getElementsByClassName(\"evil\");\nconst vilimg = document.getElementsByClassName(\"vilimg\");\nconst evilCharactersArray = Array.from(evilCharacters);\n\nconst isToggled = toggleInput.checked;\nif (isToggled) {\n    hideCharacters(goodCharactersArray);\n} else {\n    hideCharacters(evilCharactersArray);\n}\n\ntoggleInput.addEventListener(\"change\", () => {\n    toggleSlider.style.left = toggleInput.checked ? \"50%\" : \"0\";\n    \n    if (!toggleInput.checked) {\n        showCharacters(goodCharactersArray);\n        hideCharacters(evilCharactersArray);\n        addSlideInAnimation(heroimg);\n    } else {\n        showCharacters(evilCharactersArray);\n        hideCharacters(goodCharactersArray);\n        addSlideInAnimation(vilimg);\n    }\n});\n\nfunction hideCharacters(characters) {\n    characters.forEach(character => {\n        character.classList.add(\"hide\");\n    });\n}\n\nfunction showCharacters(characters) {\n    characters.forEach(character => {\n        character.classList.remove(\"hide\");\n    });\n}\n\n\nfunction addSlideInAnimation(images) {\n    images.forEach(image => {\n        image.classList.add(\"slide-in\");\n    });\n}\n\nfunction hideSlideInAnimation(images) {\n    images.forEach(image => {\n        image.classList.remove(\"slide-in\");\n    });\n}\n\nevilCharactersArray.forEach(character => {\n    console.log(character);\n})\ngoodCharactersArray.forEach(character => {\n    console.log(character);\n})\n\n"
  },
  {
    "path": "js/translate.js",
    "content": "$('document').ready(function () {\n$('#google_translate_element').on(\"click\", function () {\n    $(\"iframe\").contents().find(\".goog-te-menu2-item div, .goog-te-menu2-item:link div, .goog-te-menu2-item:visited div, .goog-te-menu2-item:active div, .goog-te-menu2 *\")\n        .css({\n            'color': '#544F4B',\n            'font-family': 'Roboto',\n                            'width':'100%'\n        });\n    $(\"iframe\").contents().find('.goog-te-menu2-item-selected').css ('display', 'none');\n\n    $(\"iframe\").contents().find('.goog-te-menu2').css ('padding', '0px');\n\n    // Change the padding of the languages\n    $(\"iframe\").contents().find('.goog-te-menu2-item div').css('padding', '20px');\n\n    // Change the width of the languages\n    $(\"iframe\").contents().find('.goog-te-menu2-item').css('width', '100%');\n    $(\"iframe\").contents().find('td').css('width', '100%');\n\n    // Change hover effects\n    $(\"iframe\").contents().find(\".goog-te-menu2-item div\").hover(function () {\n        $(this).css('background-color', '#4385F5').find('span.text').css('color', 'white');\n    }, function () {\n        $(this).css('background-color', 'white').find('span.text').css('color', '#544F4B');\n    });\n\n    // Change Google's default blue border\n    $(\"iframe\").contents().find('.goog-te-menu2').css('border', 'none');\n\n    // Change the iframe's box shadow\n    $(\".goog-te-menu-frame\").css('box-shadow', '0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3)');\n\n\n\n    // Change the iframe's size and position?\n    $(\".goog-te-menu-frame\").css({\n        'height': '100%',\n        'width': '100%',\n        'top': '0px'\n    });\n    // Change iframes's size\n    $(\"iframe\").contents().find('.goog-te-menu2').css({\n        'height': '100%',\n        'width': '100%'\n    });\n});\n});"
  },
  {
    "path": "manifest.json",
    "content": "{\n    \"name\": \"Naruto-Shippuden\",\n    \"version\": \"1.0.0\",\n    \"description\": \"Character List\",\n    \"manifest_version\": 3,\n    \"author\": \"Vedant Pol\",\n    \"icons\": { \"16\": \"Images/naruto-logo-16.png\",\n           \"48\": \"Images/naruto-logo-48.png\",\n          \"128\": \"Images/naruto-logo-128.png\" },\n    \"action\":{\n        \"default_popup\": \"index.html\",\n        \"default_title\": \"Naruto-Shippuden\"\n    }\n}\n"
  }
]