diff --git a/index.html b/index.html
index 71b2107..fb2dc4e 100644
--- a/index.html
+++ b/index.html
@@ -2,37 +2,33 @@
 <html lang="zh-Hant-TW">
 
     <head>
+        <!-- 基本設定 -->
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
         <meta name="theme-color" content="#ffffff">
         <meta name="robots" content="index, follow">
+        <meta name="author" content="邱敬幃 Pardn Chiu">
 
+        <!-- 網站資訊 -->
         <title>PDPlayerKit | 邱敬幃 Pardn Chiu | GitHub.io</title>
-        <meta name="title" content="PDPlayerKit | 邱敬幃 Pardn Chiu | GitHub.io">
         <meta name="description" content="(JavaScript Library) A pure JavaScript-based PDPlayerKit, supporting YouTube and general video links, with play, pause, volume adjustment, and fullscreen capabilities. Developed by 邱敬幃 Pardn Chiu.">
-        <meta name="author" content="邱敬幃 Pardn Chiu">
         <link rel="author" href="https://pardnchiu.github.io">
         <link rel="canonical" href="https://pardnchiu.github.io/PDPlayerKit/">
 
-        <!-- Open Graph / Facebook -->
+        <!-- Open Graph / Social Media -->
         <meta property="og:title" content="PDPlayerKit | 邱敬幃 Pardn Chiu | GitHub.io">
-        <meta property="og:description" content="(JavaScript Library) A pure JavaScript-based PDPlayerKit, supporting YouTube and general video links, with play, pause, volume adjustment, and fullscreen capabilities. Developed by 邱敬幃 Pardn Chiu.">
+        <meta property="og:description" content="A pure JavaScript-based PDPlayerKit, supporting YouTube and general video links, with play, pause, volume adjustment, and fullscreen capabilities.">
         <meta property="og:image" content="https://opengraph.githubassets.com/1/pardnchiu/PDPlayerKit">
         <meta property="og:url" content="https://pardnchiu.github.io/PDPlayerKit/">
         <meta property="og:site_name" content="邱敬幃 Pardn Chiu 的 Github Page">
         <meta property="og:type" content="website">
-
-        <!-- Twitter -->
         <meta name="twitter:card" content="summary_large_image">
         <meta property="twitter:title" content="PDPlayerKit | 邱敬幃 Pardn Chiu | GitHub.io">
-        <meta property="twitter:description" content="(JavaScript Library) A pure JavaScript-based PDPlayerKit, supporting YouTube and general video links, with play, pause, volume adjustment, and fullscreen capabilities. Developed by 邱敬幃 Pardn Chiu.">
+        <meta property="twitter:description" content="A pure JavaScript-based PDPlayerKit, supporting YouTube and general video links, with play, pause, volume adjustment, and fullscreen capabilities.">
         <meta property="twitter:image" content="https://opengraph.githubassets.com/1/pardnchiu/PDPlayerKit">
         <meta property="twitter:url" content="https://pardnchiu.github.io/PDPlayerKit/">
 
-        <!-- Google Verification -->
-        <meta name="google-site-verification" content="YQQ2f6AchR8dcb55Az2BYd_mw4TrP0J1RApD-v2v65Y">
-
         <!-- Google Analytics -->
         <script async src="https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX"></script>
         <script>
@@ -44,26 +40,24 @@
 
         <!-- Preload and Preconnect -->
         <link rel="preconnect" href="https://cdn.jsdelivr.net">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
+        <!-- 外部資源 -->
         <link rel="preload" href="https://cdn.jsdelivr.net/npm/pdquickui@0.5.4/dist/PDQuickUI.js" as="script" crossorigin="anonymous">
         <script src="https://cdn.jsdelivr.net/npm/pdquickui@0.5.4/dist/PDQuickUI.js"></script>
-
         <link rel="preload" href="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/loader/run_prettify.min.js" as="script" crossorigin="anonymous">
         <script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/loader/run_prettify.min.js"></script>
-
         <link rel="preload" href="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/styles/desert.min.css" as="style" crossorigin="anonymous">
         <link href="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/styles/desert.min.css" rel="stylesheet">
 
-
-        <link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-
+        <!-- 字體 -->
         <link rel="preload" href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap" as="style" crossorigin="anonymous">
         <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap" rel="stylesheet">
-        <!-- Local Resources -->
+
+        <!-- 本地資源 -->
         <link rel="stylesheet" href="./dist/PDPlayerKit.css">
         <link rel="stylesheet" href="./static/css/index.css">
-        
         <script src="./dist/PDPlayerKit.js"></script>
     </head>
 
@@ -75,13 +69,16 @@ <h1><span class="material-symbols-outlined">subscriptions</span>PDPlayerKit</h1>
                 <h2>模組化影片/音訊播放器</h2>
                 <p>簡單易用，適合個人網站嵌入。</p>
             </section>
-            <section id="header-video"></section>
+            <section>
+                <section id="header-video"></section>
+                <p>Source: <a href="https://pixabay.com/videos/temple-pond-garden-kinkakuji-temple-214940/" target="_blank">pixabay (Kanenori)</a></p>
+            </section>
         </header>
 
         <section>
             <h2>輕鬆嵌入到個人網站</h2>
             <p>只需從 cdn.jsdelivr.net 引入核心源碼</p>
-            <code>https://cdn.jsdelivr.net/npm/pdplayerkit@1.0.0/dist/PDPlayerKit.min.js</code>
+            <code>https://cdn.jsdelivr.net/npm/pdplayerkit@latest/dist/PDPlayerKit.js</code>
             <p>使用 JavaScript 代碼添加播放器</p>
             <pre class="prettyprint">
                 <code class="language-javascript">
@@ -161,16 +158,25 @@ <h2>多種不同風格的面板做選擇</h2>
                     <label draggable="true" @dragstart="dragStart" @dragend="dragEnd" @dragover="dragOver" @dragleave="dragLeave" @drop="drop" @change="change">
                         <input type="checkbox" name="buttonItem" value="full" checked>full
                     </label>
+                    <hr>
+                    <button type="button" @click="copyDemoStyle">
+                        <span class="material-symbols-outlined">
+                            content_copy
+                        </span>
+                        複製代碼
+                    </button>
                 </form>
             </section>
             <section>
                 <section id="sample-video"></section>
+                <p id="sample-video-hint"></p>
             </section>
         </section>
 
         <section>
             <section>
                 <section id="sample-youtube"></section>
+                <p id="sample-youtube-hint"></p>
             </section>
             <section>
                 <h2>支持 Vimeo / YouTube</h2>
@@ -194,11 +200,12 @@ <h2>音源播放支援</h2>
             </section>
             <section>
                 <section id="sample-audio"></section>
+                <p id="sample-audio-hint"></p>
             </section>
         </section>
 
         <footer>
-            <p>Developed by <strong>邱敬幃</strong></p>
+            <p>Created by <a href="https://github.com/pardnchiu" target="_blank">邱敬幃</a></p>
             <p><a href="https://github.com/pardnchiu/PDPlayerKit" target="_blank">PDPlayerKit on GitHub</a></p>
             <p>&copy; 2024</p>
         </footer>
@@ -206,18 +213,18 @@ <h2>音源播放支援</h2>
         <script type="module">
             // import { player as PDPlayer } from "./dist/PDPlayerKit.module.js";
 
-            let dragTarget;
+            let dragTarget, demoVideoCode, copyTimer;
             const demoStyle = [
-                ["", "https://cdn.pixabay.com/video/2023/11/28/191159-889246512_tiny.mp4"],
-                ["minimal", "https://cdn.pixabay.com/video/2024/06/06/215484_tiny.mp4"],
-                ["classic", "https://cdn.pixabay.com/video/2023/10/22/186115-877653483_tiny.mp4"],
-                ["retro", "https://cdn.pixabay.com/video/2019/01/06/20495-310204614_tiny.mp4"],
-                ["simple", "https://cdn.pixabay.com/video/2020/09/16/50109-459915579_tiny.mp4"]
+                ["", "https://cdn.pixabay.com/video/2023/11/28/191159-889246512_tiny.mp4", "https://pixabay.com/videos/gull-bird-snow-plumage-sitting-191159/", "NickyPe"],
+                ["minimal", "https://cdn.pixabay.com/video/2024/06/06/215484_tiny.mp4", "https://pixabay.com/videos/sea-waves-reflection-undulations-215484/", "xBriantcx"],
+                ["classic", "https://cdn.pixabay.com/video/2023/10/22/186115-877653483_tiny.mp4", "https://pixabay.com/videos/beach-sea-ocean-sand-drone-aerial-186115/", "Anewlifetraveling"],
+                ["retro", "https://cdn.pixabay.com/video/2019/01/06/20495-310204614_tiny.mp4", "https://pixabay.com/videos/pixel-bit-coin-game-video-vector-20495/", "Gam-Ol"],
+                ["simple", "https://cdn.pixabay.com/video/2020/09/16/50109-459915579_tiny.mp4", "https://pixabay.com/videos/tennis-match-sport-ball-game-50109/", "xat-ch"]
             ];
             const demoAudio = [
-                ["retro", "https://cdn.pixabay.com/download/audio/2024/09/16/audio_a10608d6cd.mp3?filename=creative-technology-showreel-241274.mp3"],
-                ["classic", "https://cdn.pixabay.com/download/audio/2024/10/21/audio_78251ef8e3.mp3?filename=beautiful-loop-253269.mp3"],
-                ["simple", "https://cdn.pixabay.com/download/audio/2024/04/12/audio_3118cb3f2a.mp3?filename=groovy-ambient-funk-201745.mp3"],
+                ["retro", "https://cdn.pixabay.com/download/audio/2024/09/16/audio_a10608d6cd.mp3?filename=creative-technology-showreel-241274.mp3", "https://pixabay.com/music/beats-creative-technology-showreel-241274/", "Pumpupthemind"],
+                ["classic", "https://cdn.pixabay.com/download/audio/2024/10/21/audio_78251ef8e3.mp3?filename=beautiful-loop-253269.mp3", "https://pixabay.com/music/beautiful-loop-253269/", "DaveJf"],
+                ["simple", "https://cdn.pixabay.com/download/audio/2024/04/12/audio_3118cb3f2a.mp3?filename=groovy-ambient-funk-201745.mp3", "https://pixabay.com/music/groovy-ambient-funk-201745/", "moodmode"],
             ];
 
             document.addEventListener("DOMContentLoaded", _ => {
@@ -226,6 +233,19 @@ <h2>音源播放支援</h2>
                     return [...document.querySelectorAll("input[name='buttonItem']:checked")].map(e => e.value);
                 };
 
+                function demoStyleCode(data) {
+                    return `\<script src="https://cdn.jsdelivr.net/npm/pdplayerkit@latest/dist/PDPlayerKit.js"\>\</script\>
+\<script\>
+const dom = new PDPlayer({
+    type: "${data[0]}",
+    video: "${data[1]}",
+    volume: 100,
+    mute: false,
+    panel: ${JSON.stringify(getButtonItems())}
+});
+\</script\>`;
+                }
+
                 const page = new QUI({
                     id: "page",
                     event: {
@@ -239,6 +259,7 @@ <h2>音源播放支援</h2>
                                 mute: false,
                                 panel: getButtonItems()
                             });
+
                             document.getElementById("sample-video").innerHTML = ""
                             document.getElementById("sample-video").appendChild(dom.body);
                         },
@@ -301,9 +322,29 @@ <h2>音源播放支援</h2>
                             });
                             document.getElementById("sample-video").innerHTML = ""
                             document.getElementById("sample-video").appendChild(dom.body);
+                            document.getElementById("sample-video-hint").innerHTML = `Source: <a href="${data[2]}" target="_blank">pixabay (${data[3]})</a>`;
 
                             _this.parentElement.dataset.selected = index;
                         },
+                        copyDemoStyle: e => {
+                            const _this = e.target;
+                            const index = +document.getElementById("demo-style").dataset.selected;
+                            const data = demoStyle[index];
+
+                            clearTimeout(copyTimer);
+                            
+                            try {
+                                navigator.clipboard.writeText(demoStyleCode(data));
+
+                                _this.innerHTML = _this.innerHTML.replace(/複製代碼/, "已複製");
+                                copyTimer = setTimeout(() => {
+                                    _this.innerHTML = _this.innerHTML.replace(/已複製/, "複製代碼");
+                                }, 500);
+                            }
+                            catch (err) {
+                                alert(err);
+                            };
+                        },
                         showDemoAudio: e => {
                             const _this = e.target;
                             const index = +_this.dataset.index;
@@ -317,6 +358,7 @@ <h2>音源播放支援</h2>
                             });
                             document.getElementById("sample-audio").innerHTML = ""
                             document.getElementById("sample-audio").appendChild(dom.body);
+                            document.getElementById("sample-audio-hint").innerHTML = `Source: <a href="${data[2]}" target="_blank">pixabay (${data[3]})</a>`;
 
                             _this.parentElement.dataset.selected = index;
                         },
@@ -330,6 +372,7 @@ <h2>音源播放支援</h2>
                             });
                             document.getElementById("sample-youtube").innerHTML = "";
                             document.getElementById("sample-youtube").appendChild(dom.body);
+                            document.getElementById("sample-youtube-hint").innerHTML = `Source: <a href="https://www.youtube.com/watch?v=O5O3yK8DJCc" target="_blank">youtube (Sony)</a>`;
 
                             if (e != null) {
                                 e.target.parentElement.dataset.selected = 1;
@@ -345,6 +388,7 @@ <h2>音源播放支援</h2>
                             });
                             document.getElementById("sample-youtube").innerHTML = "";
                             document.getElementById("sample-youtube").appendChild(dom.body);
+                            document.getElementById("sample-youtube-hint").innerHTML = `Source: <a href="https://vimeo.com/458695734" target="_blank">vimeo (UAS Flight Ops)</a>`;
 
                             if (e != null) {
                                 e.target.parentElement.dataset.selected = 0;
@@ -356,6 +400,7 @@ <h2>音源播放支援</h2>
                             const dom = new PDPlayer({
                                 type: "",
                                 video: "https://cdn.pixabay.com/video/2024/06/02/214940_tiny.mp4",
+                                // 
                                 volume: 100,
                                 mute: false,
                                 panel: getButtonItems()
diff --git a/package.json b/package.json
index ae6ff64..3b6ee90 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "pdplayerkit",
-    "version": "2.0.0",
+    "version": "2.0.1",
     "description": "PDPlayerKit is a lightweight JavaScript library that provides embedded HTML5 video players and YouTube players, featuring highly customizable control panels and visual effects.",
     "main": "dist/PDPlayerKit.js",
     "scripts": {
diff --git a/static/css/index.css b/static/css/index.css
index 40d898d..a58113c 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -1 +1 @@
-*{margin:0;padding:0;box-sizing:border-box}body{position:relative;display:flex;flex-flow:column;align-items:center;justify-content:flex-start;font-family:"Orbitron",sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal;width:100%;height:100%;background:#fff;overflow:scroll}body>header:first-child{position:relative;display:flex;justify-content:center;align-items:center;flex-flow:column;gap:2rem;padding:5rem 0;width:100%}@media screen and (min-width: 1024px){body>header:first-child{flex-flow:row;gap:5rem}}body>header:first-child>section{position:relative;display:flex;flex-flow:column;gap:.5rem}body>header:first-child>section:nth-child(2){width:calc(100% - 2rem);max-width:32rem;aspect-ratio:16/9;border-radius:.5rem;box-shadow:0 .75rem 2.75rem -0.25rem rgba(50,50,93,.2509803922),0 .5rem 1rem -0.5rem rgba(0,0,0,.3019607843),0 -0.5rem 1rem -0.5rem rgba(0,0,0,.031372549);overflow:hidden}body>header:first-child h1{text-align:center;font-size:2rem}@media screen and (min-width: 480px){body>header:first-child h1{font-size:2.5rem}}body>header:first-child h1 span{margin-right:.5rem;font-size:2.5rem}body>header:first-child h2{text-align:center;font-size:1.5rem;font-weight:400}@media screen and (min-width: 480px){body>header:first-child h2{font-size:1.75rem}}body>header:first-child p{text-align:center}body>section:nth-child(2){position:relative;display:flex;justify-content:center;align-items:center;flex-flow:column;gap:2rem;padding:5rem 0;width:100%;background-color:#f4f7fc}body>section:nth-child(2) h2{text-align:center;font-size:1.5rem}@media screen and (min-width: 480px){body>section:nth-child(2) h2{font-size:1.75rem}}body>section:nth-child(2) p{text-align:center}body>section:nth-child(2) pre{padding:1rem 2rem;width:calc(100% - 2rem);max-width:512px;font-family:monospace;background-color:#27282c;border-radius:.5rem;overflow:scroll}body>section:nth-child(2)>code{padding:1rem;width:calc(100% - 2rem);max-width:512px;font-family:monospace;background-color:#27282c;border-radius:.5rem;color:#fff;overflow:scroll}body>section:nth-child(3),body>section:nth-child(4),body>section:nth-child(5){position:relative;display:flex;justify-content:center;align-items:center;flex-flow:column;width:100%;max-width:1024px;gap:2rem;padding:5rem 0}@media screen and (min-width: 1024px){body>section:nth-child(3),body>section:nth-child(4),body>section:nth-child(5){flex-flow:row;gap:5rem}}body>section:nth-child(3)>section,body>section:nth-child(4)>section,body>section:nth-child(5)>section{flex-grow:1;position:relative;display:flex;flex-flow:column;justify-content:center;align-items:center;gap:.5rem}body>section:nth-child(3)>section:not(:has(video)):not(:has(iframe)):not(:has(audio)),body>section:nth-child(4)>section:not(:has(video)):not(:has(iframe)):not(:has(audio)),body>section:nth-child(5)>section:not(:has(video)):not(:has(iframe)):not(:has(audio)){flex-grow:0}@media screen and (max-width: 1023.99px){body>section:nth-child(3)>section:not(:has(video)):not(:has(iframe)):not(:has(audio)),body>section:nth-child(4)>section:not(:has(video)):not(:has(iframe)):not(:has(audio)),body>section:nth-child(5)>section:not(:has(video)):not(:has(iframe)):not(:has(audio)){order:1}}@media screen and (min-width: 1024px){body>section:nth-child(3)>section:not(:has(video)):not(:has(iframe)):not(:has(audio)),body>section:nth-child(4)>section:not(:has(video)):not(:has(iframe)):not(:has(audio)),body>section:nth-child(5)>section:not(:has(video)):not(:has(iframe)):not(:has(audio)){align-items:flex-start;max-width:472px}}body>section:nth-child(3)>section:has(video),body>section:nth-child(3)>section:has(iframe),body>section:nth-child(4)>section:has(video),body>section:nth-child(4)>section:has(iframe),body>section:nth-child(5)>section:has(video),body>section:nth-child(5)>section:has(iframe){width:calc(100% - 2rem);max-width:32rem}body>section:nth-child(3)>section:has(video)>section,body>section:nth-child(3)>section:has(iframe)>section,body>section:nth-child(4)>section:has(video)>section,body>section:nth-child(4)>section:has(iframe)>section,body>section:nth-child(5)>section:has(video)>section,body>section:nth-child(5)>section:has(iframe)>section{width:100%;max-width:32rem;aspect-ratio:16/9;border-radius:.5rem;box-shadow:0 .75rem 2.75rem -0.25rem rgba(50,50,93,.2509803922),0 .5rem 1rem -0.5rem rgba(0,0,0,.3019607843),0 -0.5rem 1rem -0.5rem rgba(0,0,0,.031372549);overflow:hidden}@media screen and (max-width: 1023.99px){body>section:nth-child(3)>section:has(video),body>section:nth-child(3)>section:has(iframe),body>section:nth-child(4)>section:has(video),body>section:nth-child(4)>section:has(iframe),body>section:nth-child(5)>section:has(video),body>section:nth-child(5)>section:has(iframe){order:2}}body>section:nth-child(3)>section:has(audio),body>section:nth-child(4)>section:has(audio),body>section:nth-child(5)>section:has(audio){width:calc(100% - 2rem);max-width:32rem}@media screen and (max-width: 1023.99px){body>section:nth-child(3)>section:has(audio),body>section:nth-child(4)>section:has(audio),body>section:nth-child(5)>section:has(audio){order:2}}body>section:nth-child(3)>section>form,body>section:nth-child(4)>section>form,body>section:nth-child(5)>section>form{margin-top:1rem;display:flex;flex-flow:row wrap;justify-content:center;align-items:center;gap:.5rem .75rem;width:100%}@media screen and (min-width: 1024px){body>section:nth-child(3)>section>form,body>section:nth-child(4)>section>form,body>section:nth-child(5)>section>form{justify-content:flex-start}}body>section:nth-child(3)>section>form label,body>section:nth-child(4)>section>form label,body>section:nth-child(5)>section>form label{display:flex;align-items:center;gap:.25rem}body>section:nth-child(3)>section>form p,body>section:nth-child(4)>section>form p,body>section:nth-child(5)>section>form p{text-align:center}@media screen and (min-width: 1024px){body>section:nth-child(3)>section>form p,body>section:nth-child(4)>section>form p,body>section:nth-child(5)>section>form p{text-align:left}}body>section:nth-child(3)>section>section.button,body>section:nth-child(4)>section>section.button,body>section:nth-child(5)>section>section.button{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;gap:.75rem;margin-top:1rem}body>section:nth-child(3)>section>section.button[data-selected="0"]>button:nth-child(1),body>section:nth-child(4)>section>section.button[data-selected="0"]>button:nth-child(1),body>section:nth-child(5)>section>section.button[data-selected="0"]>button:nth-child(1){background-color:#000;color:#fff}body>section:nth-child(3)>section>section.button[data-selected="1"]>button:nth-child(2),body>section:nth-child(4)>section>section.button[data-selected="1"]>button:nth-child(2),body>section:nth-child(5)>section>section.button[data-selected="1"]>button:nth-child(2){background-color:#000;color:#fff}body>section:nth-child(3)>section>section.button[data-selected="2"]>button:nth-child(3),body>section:nth-child(4)>section>section.button[data-selected="2"]>button:nth-child(3),body>section:nth-child(5)>section>section.button[data-selected="2"]>button:nth-child(3){background-color:#000;color:#fff}body>section:nth-child(3)>section>section.button[data-selected="3"]>button:nth-child(4),body>section:nth-child(4)>section>section.button[data-selected="3"]>button:nth-child(4),body>section:nth-child(5)>section>section.button[data-selected="3"]>button:nth-child(4){background-color:#000;color:#fff}body>section:nth-child(3)>section>section.button[data-selected="4"]>button:nth-child(5),body>section:nth-child(4)>section>section.button[data-selected="4"]>button:nth-child(5),body>section:nth-child(5)>section>section.button[data-selected="4"]>button:nth-child(5){background-color:#000;color:#fff}@media screen and (min-width: 1024px){body>section:nth-child(3)>section>section.button,body>section:nth-child(4)>section>section.button,body>section:nth-child(5)>section>section.button{justify-content:flex-start}}body>section:nth-child(3) h2,body>section:nth-child(4) h2,body>section:nth-child(5) h2{text-align:left;font-size:1.5rem}@media screen and (min-width: 480px){body>section:nth-child(3) h2,body>section:nth-child(4) h2,body>section:nth-child(5) h2{font-size:1.75rem}}body>section:nth-child(3) button,body>section:nth-child(4) button,body>section:nth-child(5) button{padding:0 1rem;line-height:2.5rem;font-size:1rem;background-color:#fff;color:#000;border:1px solid #000;border-radius:.75rem;font-family:"Orbitron",sans-serif;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}body>footer{position:relative;display:flex;justify-content:center;align-items:center;flex-flow:column;gap:2rem;padding:5rem 0;width:100%;background-color:#000;color:#fff}body>footer a{text-decoration:none;color:#fff}
+*{margin:0;padding:0;box-sizing:border-box}body{position:relative;display:flex;flex-flow:column;align-items:center;justify-content:flex-start;font-family:"Orbitron",sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal;width:100%;height:100%;background:#fff;overflow:scroll}body>header:first-child{position:relative;display:flex;justify-content:center;align-items:center;flex-flow:column;gap:2rem;padding:5rem 0;width:100%}@media screen and (min-width: 1024px){body>header:first-child{flex-flow:row;gap:5rem}}body>header:first-child>section{flex-grow:1;position:relative;display:flex;flex-flow:column;justify-content:center;align-items:center;gap:.5rem}body>header:first-child>section:not(:has(video)):not(:has(iframe)):not(:has(audio)){flex-grow:0}@media screen and (max-width: 1023.99px){body>header:first-child>section:not(:has(video)):not(:has(iframe)):not(:has(audio)){order:1}}@media screen and (min-width: 1024px){body>header:first-child>section:not(:has(video)):not(:has(iframe)):not(:has(audio)){align-items:flex-start;max-width:472px}}body>header:first-child>section:has(video),body>header:first-child>section:has(iframe){width:calc(100% - 2rem);max-width:32rem}body>header:first-child>section:has(video)>section,body>header:first-child>section:has(iframe)>section{width:100%;max-width:32rem;aspect-ratio:16/9;border-radius:.5rem;box-shadow:0 .75rem 2.75rem -0.25rem rgba(50,50,93,.2509803922),0 .5rem 1rem -0.5rem rgba(0,0,0,.3019607843),0 -0.5rem 1rem -0.5rem rgba(0,0,0,.031372549);overflow:hidden}@media screen and (max-width: 1023.99px){body>header:first-child>section:has(video),body>header:first-child>section:has(iframe){order:2}}body>header:first-child>section:has(audio){width:calc(100% - 2rem);max-width:32rem}@media screen and (max-width: 1023.99px){body>header:first-child>section:has(audio){order:2}}body>header:first-child>section>form{margin-top:1rem;display:flex;flex-flow:row wrap;justify-content:center;align-items:center;gap:.5rem .75rem;width:100%}@media screen and (min-width: 1024px){body>header:first-child>section>form{justify-content:flex-start}}body>header:first-child>section>form label{display:flex;align-items:center;gap:.25rem}body>header:first-child>section>form p{text-align:center}@media screen and (min-width: 1024px){body>header:first-child>section>form p{text-align:left}}body>header:first-child>section>section.button{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;gap:.75rem;margin-top:1rem}body>header:first-child>section>section.button[data-selected="0"]>button:nth-child(1){background-color:#000;color:#fff}body>header:first-child>section>section.button[data-selected="1"]>button:nth-child(2){background-color:#000;color:#fff}body>header:first-child>section>section.button[data-selected="2"]>button:nth-child(3){background-color:#000;color:#fff}body>header:first-child>section>section.button[data-selected="3"]>button:nth-child(4){background-color:#000;color:#fff}body>header:first-child>section>section.button[data-selected="4"]>button:nth-child(5){background-color:#000;color:#fff}@media screen and (min-width: 1024px){body>header:first-child>section>section.button{justify-content:flex-start}}body>header:first-child h1{text-align:center;font-size:2rem}@media screen and (min-width: 480px){body>header:first-child h1{font-size:2.5rem}}body>header:first-child h1 span{margin-right:.5rem;font-size:2.5rem}body>header:first-child h2{text-align:center;font-size:1.5rem;font-weight:400}@media screen and (min-width: 480px){body>header:first-child h2{font-size:1.75rem}}body>header:first-child p{margin-top:.5rem;text-decoration:none;color:#000}body>header:first-child a{text-decoration:none;color:#6c61ff}body>header:first-child p{text-align:center}body>section:nth-child(2){position:relative;display:flex;justify-content:center;align-items:center;flex-flow:column;gap:2rem;padding:5rem 0;width:100%;background-color:#f4f7fc}body>section:nth-child(2) h2{text-align:center;font-size:1.5rem}@media screen and (min-width: 480px){body>section:nth-child(2) h2{font-size:1.75rem}}body>section:nth-child(2) p{text-align:center}body>section:nth-child(2) pre{padding:1rem 2rem;width:calc(100% - 2rem);max-width:512px;font-family:monospace;background-color:#27282c;border-radius:.5rem;overflow:scroll}body>section:nth-child(2)>code{padding:1rem;width:calc(100% - 2rem);max-width:512px;font-family:monospace;background-color:#27282c;border-radius:.5rem;color:#fff;overflow:scroll}body>section:nth-child(3),body>section:nth-child(4),body>section:nth-child(5){position:relative;display:flex;justify-content:center;align-items:center;flex-flow:column;width:100%;max-width:1024px;gap:2rem;padding:5rem 1rem}@media screen and (min-width: 1024px){body>section:nth-child(3),body>section:nth-child(4),body>section:nth-child(5){flex-flow:row;gap:5rem}}body>section:nth-child(3)>section,body>section:nth-child(4)>section,body>section:nth-child(5)>section{flex-grow:1;position:relative;display:flex;flex-flow:column;justify-content:center;align-items:center;gap:.5rem}body>section:nth-child(3)>section:not(:has(video)):not(:has(iframe)):not(:has(audio)),body>section:nth-child(4)>section:not(:has(video)):not(:has(iframe)):not(:has(audio)),body>section:nth-child(5)>section:not(:has(video)):not(:has(iframe)):not(:has(audio)){flex-grow:0}@media screen and (max-width: 1023.99px){body>section:nth-child(3)>section:not(:has(video)):not(:has(iframe)):not(:has(audio)),body>section:nth-child(4)>section:not(:has(video)):not(:has(iframe)):not(:has(audio)),body>section:nth-child(5)>section:not(:has(video)):not(:has(iframe)):not(:has(audio)){order:1}}@media screen and (min-width: 1024px){body>section:nth-child(3)>section:not(:has(video)):not(:has(iframe)):not(:has(audio)),body>section:nth-child(4)>section:not(:has(video)):not(:has(iframe)):not(:has(audio)),body>section:nth-child(5)>section:not(:has(video)):not(:has(iframe)):not(:has(audio)){align-items:flex-start;max-width:472px}}body>section:nth-child(3)>section:has(video),body>section:nth-child(3)>section:has(iframe),body>section:nth-child(4)>section:has(video),body>section:nth-child(4)>section:has(iframe),body>section:nth-child(5)>section:has(video),body>section:nth-child(5)>section:has(iframe){width:calc(100% - 2rem);max-width:32rem}body>section:nth-child(3)>section:has(video)>section,body>section:nth-child(3)>section:has(iframe)>section,body>section:nth-child(4)>section:has(video)>section,body>section:nth-child(4)>section:has(iframe)>section,body>section:nth-child(5)>section:has(video)>section,body>section:nth-child(5)>section:has(iframe)>section{width:100%;max-width:32rem;aspect-ratio:16/9;border-radius:.5rem;box-shadow:0 .75rem 2.75rem -0.25rem rgba(50,50,93,.2509803922),0 .5rem 1rem -0.5rem rgba(0,0,0,.3019607843),0 -0.5rem 1rem -0.5rem rgba(0,0,0,.031372549);overflow:hidden}@media screen and (max-width: 1023.99px){body>section:nth-child(3)>section:has(video),body>section:nth-child(3)>section:has(iframe),body>section:nth-child(4)>section:has(video),body>section:nth-child(4)>section:has(iframe),body>section:nth-child(5)>section:has(video),body>section:nth-child(5)>section:has(iframe){order:2}}body>section:nth-child(3)>section:has(audio),body>section:nth-child(4)>section:has(audio),body>section:nth-child(5)>section:has(audio){width:calc(100% - 2rem);max-width:32rem}@media screen and (max-width: 1023.99px){body>section:nth-child(3)>section:has(audio),body>section:nth-child(4)>section:has(audio),body>section:nth-child(5)>section:has(audio){order:2}}body>section:nth-child(3)>section>form,body>section:nth-child(4)>section>form,body>section:nth-child(5)>section>form{margin-top:1rem;display:flex;flex-flow:row wrap;justify-content:center;align-items:center;gap:.5rem .75rem;width:100%}@media screen and (min-width: 1024px){body>section:nth-child(3)>section>form,body>section:nth-child(4)>section>form,body>section:nth-child(5)>section>form{justify-content:flex-start}}body>section:nth-child(3)>section>form label,body>section:nth-child(4)>section>form label,body>section:nth-child(5)>section>form label{display:flex;align-items:center;gap:.25rem}body>section:nth-child(3)>section>form p,body>section:nth-child(4)>section>form p,body>section:nth-child(5)>section>form p{text-align:center}@media screen and (min-width: 1024px){body>section:nth-child(3)>section>form p,body>section:nth-child(4)>section>form p,body>section:nth-child(5)>section>form p{text-align:left}}body>section:nth-child(3)>section>form hr,body>section:nth-child(4)>section>form hr,body>section:nth-child(5)>section>form hr{width:100%;height:0;border:none;border-bottom:.5px solid #000}body>section:nth-child(3)>section>form button,body>section:nth-child(4)>section>form button,body>section:nth-child(5)>section>form button{display:flex;gap:.125rem;align-items:center;padding:0;line-height:22px;font-size:.875rem;color:#6c61ff;border:none}body>section:nth-child(3)>section>form button:active,body>section:nth-child(4)>section>form button:active,body>section:nth-child(5)>section>form button:active{color:#5950d7}body>section:nth-child(3)>section>form button span,body>section:nth-child(4)>section>form button span,body>section:nth-child(5)>section>form button span{font-size:.875rem;pointer-events:none}body>section:nth-child(3)>section>section.button,body>section:nth-child(4)>section>section.button,body>section:nth-child(5)>section>section.button{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;gap:.75rem;margin-top:1rem}body>section:nth-child(3)>section>section.button[data-selected="0"]>button:nth-child(1),body>section:nth-child(4)>section>section.button[data-selected="0"]>button:nth-child(1),body>section:nth-child(5)>section>section.button[data-selected="0"]>button:nth-child(1){background-color:#000;color:#fff}body>section:nth-child(3)>section>section.button[data-selected="1"]>button:nth-child(2),body>section:nth-child(4)>section>section.button[data-selected="1"]>button:nth-child(2),body>section:nth-child(5)>section>section.button[data-selected="1"]>button:nth-child(2){background-color:#000;color:#fff}body>section:nth-child(3)>section>section.button[data-selected="2"]>button:nth-child(3),body>section:nth-child(4)>section>section.button[data-selected="2"]>button:nth-child(3),body>section:nth-child(5)>section>section.button[data-selected="2"]>button:nth-child(3){background-color:#000;color:#fff}body>section:nth-child(3)>section>section.button[data-selected="3"]>button:nth-child(4),body>section:nth-child(4)>section>section.button[data-selected="3"]>button:nth-child(4),body>section:nth-child(5)>section>section.button[data-selected="3"]>button:nth-child(4){background-color:#000;color:#fff}body>section:nth-child(3)>section>section.button[data-selected="4"]>button:nth-child(5),body>section:nth-child(4)>section>section.button[data-selected="4"]>button:nth-child(5),body>section:nth-child(5)>section>section.button[data-selected="4"]>button:nth-child(5){background-color:#000;color:#fff}@media screen and (min-width: 1024px){body>section:nth-child(3)>section>section.button,body>section:nth-child(4)>section>section.button,body>section:nth-child(5)>section>section.button{justify-content:flex-start}}body>section:nth-child(3) p,body>section:nth-child(4) p,body>section:nth-child(5) p{margin-top:.5rem;text-decoration:none;color:#000}body>section:nth-child(3) a,body>section:nth-child(4) a,body>section:nth-child(5) a{text-decoration:none;color:#6c61ff}body>section:nth-child(3) h2,body>section:nth-child(4) h2,body>section:nth-child(5) h2{text-align:left;font-size:1.5rem}@media screen and (min-width: 480px){body>section:nth-child(3) h2,body>section:nth-child(4) h2,body>section:nth-child(5) h2{font-size:1.75rem}}body>section:nth-child(3) button,body>section:nth-child(4) button,body>section:nth-child(5) button{padding:0 1rem;line-height:2.5rem;font-size:1rem;background-color:#fff;color:#000;border:1px solid #000;border-radius:.75rem;font-family:"Orbitron",sans-serif;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}body>footer{position:relative;display:flex;justify-content:center;align-items:center;flex-flow:column;gap:2rem;padding:5rem 0;width:100%;background-color:#000;color:#fff}body>footer a{text-decoration:none;color:#fff}
diff --git a/static/sass/index.scss b/static/sass/index.scss
index b0a36b5..6da4120 100644
--- a/static/sass/index.scss
+++ b/static/sass/index.scss
@@ -36,18 +36,126 @@ body {
         }
 
         >section {
+            flex-grow: 1;
             position: relative;
             display: flex;
             flex-flow: column;
+            justify-content: center;
+            align-items: center;
             gap: 0.5rem;
 
-            &:nth-child(2) {
+            &:not(:has(video)):not(:has(iframe)):not(:has(audio)) {
+                flex-grow: 0;
+
+                @media screen and (max-width: 1023.99px) {
+                    order: 1;
+                }
+
+                @media screen and (min-width: 1024px) {
+                    align-items: flex-start;
+                    max-width: 472px;
+                }
+            }
+
+            &:has(video),
+            &:has(iframe) {
                 width: calc(100% - 2rem);
                 max-width: 32rem;
-                aspect-ratio: 16 / 9;
-                border-radius: 0.5rem;
-                box-shadow: 0 0.75rem 2.75rem -0.25rem #32325d40, 0 0.5rem 1rem -0.5rem #0000004d, 0 -0.5rem 1rem -0.5rem #00000008;
-                overflow: hidden;
+
+                >section {
+                    width: 100%;
+                    max-width: 32rem;
+                    aspect-ratio: 16 / 9;
+                    border-radius: 0.5rem;
+                    box-shadow: 0 0.75rem 2.75rem -0.25rem #32325d40, 0 0.5rem 1rem -0.5rem #0000004d, 0 -0.5rem 1rem -0.5rem #00000008;
+                    overflow: hidden;
+
+                    // @media screen and (min-width: 1024px) {
+                    //     width: 32rem;
+                    // }
+                }
+
+                @media screen and (max-width: 1023.99px) {
+                    order: 2;
+                }
+            }
+
+            &:has(audio) {
+                width: calc(100% - 2rem);
+                max-width: 32rem;
+
+                @media screen and (max-width: 1023.99px) {
+                    order: 2;
+                }
+            }
+
+            ;
+
+            >form {
+                margin-top: 1rem;
+                display: flex;
+                flex-flow: row wrap;
+                justify-content: center;
+                align-items: center;
+                gap: 0.5rem 0.75rem;
+                width: 100%;
+
+                @media screen and (min-width: 1024px) {
+                    justify-content: flex-start;
+                }
+
+                label {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.25rem;
+                }
+
+                p {
+                    text-align: center;
+
+                    @media screen and (min-width: 1024px) {
+                        text-align: left;
+                    }
+                }
+            }
+
+
+            >section.button {
+                display: flex;
+                flex-flow: row wrap;
+                justify-content: center;
+                align-items: center;
+                gap: 0.75rem;
+                margin-top: 1rem;
+
+                &[data-selected="0"]>button:nth-child(1) {
+                    background-color: #000;
+                    color: #fff;
+                }
+
+                &[data-selected="1"]>button:nth-child(2) {
+                    background-color: #000;
+                    color: #fff;
+                }
+
+                &[data-selected="2"]>button:nth-child(3) {
+                    background-color: #000;
+                    color: #fff;
+                }
+
+                &[data-selected="3"]>button:nth-child(4) {
+                    background-color: #000;
+                    color: #fff;
+                }
+
+                &[data-selected="4"]>button:nth-child(5) {
+                    background-color: #000;
+                    color: #fff;
+                }
+
+                @media screen and (min-width: 1024px) {
+                    justify-content: flex-start;
+                }
             }
         }
 
@@ -75,6 +183,17 @@ body {
             }
         }
 
+        p {
+            margin-top: 0.5rem;
+            text-decoration: none;
+            color: #000;
+        }
+
+        a {
+            text-decoration: none;
+            color: #6c61ff;
+        }
+
         p {
             text-align: center;
         }
@@ -138,7 +257,7 @@ body {
         width: 100%;
         max-width: 1024px;
         gap: 2rem;
-        padding: 5rem 0;
+        padding: 5rem 1rem;
 
         @media screen and (min-width: 1024px) {
             flex-flow: row;
@@ -227,6 +346,33 @@ body {
                         text-align: left;
                     }
                 }
+
+                hr {
+                    width: 100%;
+                    height: 0;
+                    border: none;
+                    border-bottom: 0.5px solid #000;
+                }
+
+                button {
+                    display: flex;
+                    gap: 0.125rem;
+                    align-items: center;
+                    padding: 0;
+                    line-height: 22px;
+                    font-size: 0.875rem;
+                    color: #6c61ff;
+                    border: none;
+
+                    &:active {
+                        color: #5950d7;
+                    }
+
+                    span {
+                        font-size: 0.875rem;
+                        pointer-events: none;
+                    }
+                }
             }
 
 
@@ -269,6 +415,17 @@ body {
             }
         }
 
+        p {
+            margin-top: 0.5rem;
+            text-decoration: none;
+            color: #000;
+        }
+
+        a {
+            text-decoration: none;
+            color: #6c61ff;
+        }
+
         h2 {
             text-align: left;
             font-size: 1.5rem;
