diff --git a/index.html b/index.html
index 607a50c..a0c5a90 100755
--- a/index.html
+++ b/index.html
@@ -1,68 +1,486 @@
-
-
+
-
-
+
+
+ RADIO WORLDING
+
+
+
+
+
+
+
-
- Blackhole
+ #p5-canvas {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100% !important;
+ height: 100% !important;
+ z-index: 0;
+ }
+
+ header *:not(canvas) {
+ position: relative;
+ z-index: 1;
+ }
+
+ .ascii-art {
+ font-family: 'Amatic SC';
+ font-size: clamp(24px, 5vw, 36px);
+ font-weight: bold;
+ background-color: rgba(109, 226, 16, 0.58);
+ box-shadow: -3px -1px 1px 7px rgb(0, 107, 255);
+ color: #000000;
+ border: dotted 5px #ffc600;
+ border-radius: 28% 54%;
+ padding: 5px 25px;
+ margin-bottom: 10px;
+ animation: colorShift 5s infinite alternate;
+ }
+
+ @keyframes colorShift {
+ 0% {
+ color: #ff4e87;
+ }
+ 25% {
+ color: #ff7900;
+ }
+ 50% {
+ color: #f33333;
+ }
+ 75% {
+ color: #00ff17;
+ }
+ 100% {
+ color: #0045ff;
+ }
+ }
+
+ .audio-controls {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .audio-controls button,
+ .audio-controls input[type="range"] {
+ width: 30px;
+ height: 25px;
+ background-color: #00a98c;
+ color: #fff200;
+ border: groove 2px #0bff6e;
+ border-radius: 10px 10px 10px 10px;
+ font-size: 12px;
+ cursor: pointer;
+ }
+
+ .audio-controls button.active {
+ background-color: #fb1111;
+ color: #165010;
+ border: ridge 2px #0bfffd;
+ border-radius: 10px 10px 10px 10px;
+ }
+
+ .audio-controls input[type="range"] {
+ width: 100px;
+ }
+
+ #elapsed-time {
+ font-size: 14px;
+ color: white;
+ min-width: 60px;
+ }
+
+ main {
+ position: absolute;
+ top: 160px;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ overflow-y: auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 1rem;
+ }
+
+ .converse-container {
+ position: relative;
+ top: 160px;
+ /* header height */
+ width: 70vw;
+ max-width: 800px;
+ margin: 0 auto;
+ height: calc(100vh - 200px);
+ }
+
+ .conversejs .converse-chatboxes .chatbox .box-flyout {
+ width: 100% !important;
+ }
+
+ .conversejs converse-chats.converse-embedded .chat-head {
+ display: none;
+ }
+
+ .conversejs converse-chats.converse-embedded .chatroom .box-flyout .chatroom-body .occupants {
+ display: none;
+ }
+
+ .conversejs,
+ .conversejs.theme-dracula {
+ --current-line: #44475a;
+ --comment: #6272a4;
+ --cyan: #8be9fd;
+ --green: #50fa7b;
+ --orange: #ffb86c;
+ --pink: #ff79c6;
+ --purple: #bd93f9;
+ --red: #ff5555;
+ --yellow: #f1fa8c;
+ --background: #282a36;
+ --foreground: #f8f8f2;
+ --subdued-color: var(--comment);
+ --muc-color: var(--orange);
+ --chat-color: var(--green);
+ --disabled-color: var(--comment);
+ --error-color: var(--red);
+ --focus-color: var(--comment);
+ --headlines-color: var(--pink);
+ --headlines-head-text-color: var(--headlines-color);
+ --headlines-head-fg-color: var(--headlines-color);
+ --headlines-head-bg-color: var(--background);
+ --headline-message-color: var(--headlines-color);
+ --headline-separator-border-bottom: 2px solid var(--headlines-color);
+ --headlines-head-border-bottom: 0.15em solid var(--headlines-color);
+ --icon-hover-color: var(--cyan);
+ --gray-color: var(--comment);
+ --highlight-color: var(--foreground);
+ --highlight-color-darker: var(--comment);
+ --redder-orange: var(--muc-color);
+ --light-background-color: var(--background);
+ --chat-background-color: var(--background);
+ --chat-content-background-color: var(--background);
+ --chat-textarea-background-color: var(--background);
+ --chat-textarea-disabled-bg-color: var(--disabled-color);
+ --controlbox-pane-background-color: var(--background);
+ --controlbox-pane-bg-hover-color: var(--list-item-hover-color);
+ --chat-msg-hover-color: var(--current-line);
+ --chat-textarea-color: var(--foreground);
+ --close-color: var(--foreground);
+ --close-color-hover: var(--purple);
+ --global-background-color: var(--background);
+ --groupchats-header-color-dark: var(--muc-color);
+ --groupchats-header-color: var(--muc-color);
+ --img-thumbnail-background-color: var(--comment);
+ --img-thumbnail-border-color: black;
+ --modal-background-color: var(--background);
+ --occupants-background-color: var(--background);
+ --raised-el-shadow: 1px 1px 10px black;
+ --badge-color: var(--background);
+ --chatroom-correcting-color: var(--comment);
+ --chatroom-head-bg-color-dark: var(--muc-color);
+ --chatroom-head-bg-color: var(--background);
+ --chatroom-head-border-bottom: 0.15em solid var(--muc-color);
+ --chatroom-head-fg-color: var(--muc-color);
+ --chatroom-head-color: var(--muc-color);
+ --chatroom-head-description-link-color: var(--link-color);
+ --chatroom-message-input-border-top: 0.15em solid var(--muc-color);
+ --chatroom-separator-border-bottom: 0.15em solid var(--muc-color);
+ --muc-toolbar-btn-disabled-color: var(--disabled-color);
+ --occupants-border-left: 0.15em solid var(--muc-color);
+ --occupants-border-bottom: 0.15em solid var(--muc-color);
+ --chat-correcting-color: var(--comment);
+ --chat-head-border-bottom: 0.15em solid var(--chat-color);
+ --chat-head-fg-color: var(--chat-color);
+ --chat-head-color-dark: var(--chat-color);
+ --chat-head-color-darker: var(--chat-color);
+ --chat-head-color-lighten-50-percent: var(--chat-color);
+ --chat-head-color: var(--background);
+ --chat-head-text-color: var(--chat-color);
+ --chat-toolbar-btn-color: var(--chat-color);
+ --chat-toolbar-btn-color: var(--green);
+ --chatbox-message-input-border-top: 0.15em solid var(--chat-color);
+ --toolbar-btn-text-color: var(--background);
+ --unread-msgs-color: var(--yellow);
+ --panel-divider-color: var(--comment);
+ --chat-status-online: var(--green);
+ --chat-status-busy: var(--red);
+ --chat-status-away: var(--orange);
+ --chat-info-color: var(--orange);
+ --brand-heading-color: var(--cyan);
+ --completion-light-color: var(--pink);
+ --completion-normal-color: var(--red);
+ --completion-dark-color: var(--current-line);
+ --button-text-color: var(--background);
+ --button-hover-text-color: var(--background);
+ --controlbox-text-color: var(--foreground);
+ --message-text-color: var(--foreground);
+ --text-color: var(--foreground);
+ --text-color-lighten-15-percent: var(--yellow);
+ --text-color-invert: var(--background);
+ --message-author-color: var(--purple);
+ --controlbox-head-color: var(--purple);
+ --controlbox-head-btn-color: var(--subdued-color);
+ --message-receipt-color: var(--green);
+ --heading-color: var(--purple);
+ --inverse-link-color: var(--foreground);
+ --link-color: var(--cyan);
+ --dark-link-color: var(--cyan);
+ --link-hover-color: var(--green);
+ --primary-color: var(--purple);
+ --primary-color-dark: var(--purple);
+ --primary-color-light: var(--pink);
+ --danger-color-dark: var(--pink);
+ --danger-color: var(--pink);
+ --error-color: var(--red);
+ --info-color: var(--comment);
+ --secondary-color-dark: var(--cyan);
+ --secondary-color: var(--cyan);
+ --warning-color-dark: var(--orange);
+ --warning-color: var(--orange);
+ --list-toggle-color: var(--comment);
+ --list-toggle-hover-color: var(--comment);
+ --list-item-hover-color: var(--current-line);
+ --list-item-action-color: var(--comment);
+ --list-item-link-color: var(--foreground);
+ --list-item-link-hover-color: var(--link-color);
+ --list-item-open-color: var(--current-line);
+ --list-item-open-hover-color: var(--current-line);
+ --list-dot-circle-color: var(--orange);
+ --list-item-action-hover-color: var(--cyan);
+ --list-group-item-bg-color: var(--comment);
+ }
+
+ .conversejs,
+ .conversejs.theme-dracula {
+ --background: transparent;
+ --current-line: transparent;
+ --toolbar-btn-text-color: chocolate;
+ --chat-textarea-background-color: #ff69b3;
+ --subdued-color: aquamarine;
+ }
+
+ .conversejs .btn-primary {
+ background-color: #007bff;
+ }
+
+ .conversejs .btn {
+ color: turquoise;
+ }
+
+ .conversejs form .form-control::placeholder {
+ color: pink;
+ }
+
+ .conversejs converse-chats.converse-embedded .chat-textarea::placeholder {
+ color: cornsilk;
+ }
+
+ .conversejs .message.date-separator .separator-text, .conversejs .message.separator .separator-text {
+ background: blueviolet;
+ }
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/test.html b/test.html
new file mode 100755
index 0000000..77117eb
--- /dev/null
+++ b/test.html
@@ -0,0 +1,486 @@
+
+
+
+
+
+ RADIO WORLDING
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/test2.html b/test2.html
new file mode 100755
index 0000000..825e92d
--- /dev/null
+++ b/test2.html
@@ -0,0 +1,396 @@
+
+
+
+
+
+ RADIO WORLDING
+
+
+
+
+
+
+
+
+
+ RADIO WORLDING
+
+
+
+
+
+
+
+ 00:00
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/test3.html b/test3.html
new file mode 100755
index 0000000..d6caf47
--- /dev/null
+++ b/test3.html
@@ -0,0 +1,355 @@
+
+
+
+
+
+ RADIO WORLDING
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file