diff --git a/public/light.css b/public/light.css
new file mode 100644
index 0000000..90df5ed
--- /dev/null
+++ b/public/light.css
@@ -0,0 +1,378 @@
+body {
+ background-color: #F5F5F5;
+ text-align: center;
+ font-family: Verdana, Geneva, Tahoma, sans-serif;
+ scrollbar-width: thin;
+}
+
+h1,
+h3,
+h4,
+#scan {
+ margin: 0 auto;
+ color: #333333;
+ text-align: center;
+}
+
+h3 {
+ padding: 10px 0;
+ border-bottom: 1px solid #ccc;
+ margin-bottom: 1rem;
+}
+
+a,
+a:hover {
+ color: #333333;
+ text-decoration: none;
+}
+
+input[type="text"] {
+ padding: 10px;
+ border: none;
+ border-bottom: 1px solid #ccc;
+ background-color: #F0F0F0;
+ color: #333333;
+}
+
+#placeholder {
+ font-size: small;
+ margin: 0 auto;
+ color: #333333;
+}
+
+hr {
+ margin: 1rem auto;
+ border-bottom: 1px solid #ccc;
+ width: 50%;
+}
+
+#tooltip {
+ visibility: hidden;
+ font-size: small;
+ text-align: left;
+ width: 2.2in;
+ background-color: #F5F5F5;
+ color: #333333;
+ border-radius: 5px;
+ padding: 1rem 1rem 0 0;
+ position: absolute;
+ z-index: 1;
+ opacity: 0;
+ transition: 0.5s;
+ border: 1px solid #ccc;
+}
+
+#count:hover #tooltip {
+ visibility: visible;
+ opacity: 1;
+}
+
+#reverse {
+ margin: 0.5rem;
+ padding: 0.5rem;
+ border: 1px solid #ccc;
+ background-color: #333333;
+ color: #F5F5F5;
+}
+
+#reverse:hover {
+ color: #333333;
+ background-color: #F5F5F5;
+ cursor: pointer;
+}
+
+#instancelist {
+ list-style-type: none;
+ margin: 20px 0;
+ padding: 0;
+ color: #333333;
+ max-height: 58vh;
+ overflow: auto;
+ scrollbar-width: thin;
+}
+
+@media (min-width: 992px) {
+ #instancelist li {
+ width: 28%;
+ }
+
+ #instancelist li:hover {
+ width: 33%;
+ }
+
+ #instance,
+ #placeholder,
+ h4 {
+ width: 30%;
+ }
+}
+
+@media (min-width: 600px) and (max-width: 992px) {
+ #instancelist li {
+ width: 60%;
+ }
+
+ #instancelist li:hover {
+ width: 65%;
+ }
+
+ #instance,
+ #placeholder,
+ h4 {
+ width: 63%;
+ }
+}
+
+@media (max-width: 600px) {
+ #instancelist li {
+ width: 80%;
+ }
+
+ #instancelist li:hover {
+ width: 85%;
+ }
+
+ #instance,
+ #placeholder,
+ h4 {
+ width: 83%;
+ }
+
+ #apigit {
+ display: none;
+ }
+}
+
+#instancelist li {
+ color: #333333;
+ padding: 10px;
+ border-bottom: 1px solid #ccc;
+ margin: 0 auto;
+ max-height: 1.5em;
+ overflow: hidden;
+ min-height: 1.5em;
+ line-height: 1.5;
+}
+
+#instancelist li:hover {
+ background-color: #F0F0F0;
+ cursor: pointer;
+ max-height: fit-content;
+}
+
+#instancelist li img {
+ width: 70%;
+ margin: 0 auto;
+}
+
+@keyframes opacity {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+footer {
+ text-align: center;
+ font-size: 12px;
+ padding: 10px;
+ color: #666666;
+}
+
+#count {
+ text-decoration: underline dotted #333333;
+ cursor: help;
+ position: relative;
+ display: inline-block;
+ text-underline-offset: 2px;
+}
+
+#blocklist {
+ width: 90%;
+ text-align: left;
+ list-style: none;
+ padding: 1rem;
+}
+
+#blocklist li {
+ color: #F5F5F5;
+ white-space: nowrap;
+ word-wrap: break-word;
+ overflow: hidden;
+}
+
+#blocklist li:hover {
+ white-space: inherit;
+ cursor: pointer;
+ color: #F5F5F5;
+}
+
+#blocklist li a,
+#blocklist li a:hover,
+#blocklist li a:visited {
+ color: #F5F5F5;
+ text-decoration: underline;
+}
+
+#blockinstance a,
+#blockinstance a:hover {
+ color: #F5F5F5;
+ text-decoration: underline;
+ cursor: help;
+}
+
+#blockcount {
+ font-weight: bolder;
+}
+
+#modal {
+ display: none;
+ position: fixed;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ scrollbar-width: thin;
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-content {
+ position: relative;
+ background-color: #F5F5F5;
+ margin: 10px auto;
+ padding: 0;
+ border: 1px solid #888;
+ width: 25%;
+ -webkit-animation-name: animatetop;
+ -webkit-animation-duration: 0.4s;
+ animation-name: animatetop;
+ animation-duration: 0.4s;
+}
+
+@media only screen and (max-width: 600px) {
+ .modal-content {
+ width: 90%;
+ }
+}
+
+.modal-header {
+ padding: 6px;
+ background-color: #333333;
+ color: #F5F5F5;
+}
+
+.modal-body {
+ padding: 6px;
+}
+
+.modal-footer {
+ padding: 6px;
+ background-color: #333333;
+ color: #F5F5F5;
+}
+
+#closemodal,
+#download,
+#capture {
+ color: #aaa;
+ float: right;
+ font-size: 3rem;
+ font-weight: bolder;
+ margin: 0px 15px;
+}
+
+#closemodal:hover,
+#closemodal:focus,
+#download:hover,
+#download:focus,
+#capture:hover,
+#capture:focus {
+ color: #333333;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+@keyframes animatetop {
+ from {
+ top: -300px;
+ opacity: 0;
+ }
+
+ to {
+ top: 0;
+ opacity: 1;
+ }
+}
+
+@keyframes animatebottom {
+ from {
+ top: 0;
+ opacity: 1;
+ }
+
+ to {
+ top: -300px;
+ opacity: 0
+ }
+}
+
+h4 {
+ white-space: nowrap;
+ overflow: hidden;
+ position: relative;
+ border-left: 1px solid #f5f5f5;
+ border-right: 1px solid #f5f5f5;
+ transition: 0.2s;
+}
+
+h4 p {
+ margin: 0.3rem 0;
+}
+
+h4:hover {
+ width: 90%;
+}
+
+#bounce {
+ display: inline-block;
+ animation: marquee 90s linear infinite;
+}
+
+#bounce:hover {
+ animation-play-state: paused;
+}
+
+@keyframes marquee {
+ 0% {
+ transform: translateX(100vw);
+ }
+
+ 100% {
+ transform: translateX(-100%);
+ }
+}
+
+#loader-content {
+ z-index: 1;
+ background-color: #0004;
+ width: 100%;
+ height: 100%;
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ overflow: auto;
+ scrollbar-width: thin;
+}
+
+#loader {
+ background-color: #f5f5f5;
+ width: fit-content;
+ margin: 50vh auto;
+ z-index: 2;
+}
\ No newline at end of file
diff --git a/public/main.js b/public/main.js
index 7143ddb..e3e6ad3 100644
--- a/public/main.js
+++ b/public/main.js
@@ -128,6 +128,15 @@ document.addEventListener('DOMContentLoaded', function () {
event.preventDefault()
event.stopPropagation()
})
+ document.getElementById('darklight').addEventListener('click', function(event) {
+ if(event.target.innerText === '☼') {
+ document.getElementById('css').setAttribute('href', 'light.css')
+ event.target.innerText = '☽'
+ } else {
+ document.getElementById('css').setAttribute('href', 'main.css')
+ event.target.innerText = '☼'
+ }
+ })
function keypress(content) {
loading()
if (timeout) {