diff --git a/run.sh b/run.sh
index 9f1f69e..c16b09a 100755
--- a/run.sh
+++ b/run.sh
@@ -1,3 +1,3 @@
 #!/bin/bash
 
-python run.py -d ./data/ -nf -s styles/aurora.css --no-hidden --no-underscore --unfolding -e .git
+python run.py -d ./data/ -nf -s styles/yoshi.css --no-hidden --no-underscore --unfolding -e .git
diff --git a/styles/yoshi.css b/styles/yoshi.css
new file mode 100644
index 0000000..185f8f1
--- /dev/null
+++ b/styles/yoshi.css
@@ -0,0 +1,207 @@
+/************************************
+ originally from distribusi START >>>
+ ************************************/
+
+/* .image {
+  max-width: 100%%;
+} */
+
+.pdf object {
+  width: 640px;
+  height: 640px;
+}
+
+/* .dir::before {
+  content: "📁 ";
+  font-size: 18px;
+} */
+
+.filename {
+  display: block;
+  font-family: mono;
+}
+
+/* .unkown-file::before {
+  content: "📄 ";
+  font-size: 18px;
+} */
+
+div {
+  /* max-width: 640px; */
+  display: inline-block;
+  vertical-align: top;
+  /* margin: 1em;
+  padding: 1em; */
+}
+
+video {
+  width: 640px;
+  max-height: 640px;
+}
+/*************************************
+ <<< END of originally from distribusi
+ *************************************/
+
+/* layout */
+
+div {
+  margin-bottom: 1em;
+}
+
+.plain {
+  display: flex;
+  flex-direction: column;
+}
+
+.plain.unkown-file {
+  display: unset;
+}
+
+.plain div {
+  white-space: pre-line;
+  overflow-wrap: anywhere;
+}
+
+figure {
+  margin: 0;
+  padding: 0;
+}
+
+.audio {
+  display: block;
+  width: 100%;
+}
+
+.image {
+  max-width: 700px;
+  width: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding-left: 1em;
+  padding-right: 1em;
+  padding-top: 1em;
+  scrollbar-width: none;
+}
+
+body::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+#header {
+  padding-bottom: 3em;
+  display: none;
+}
+
+.unfolded {
+  display: flex;
+  flex-direction: column;
+}
+
+.unfolded>div {
+  padding-left: 0.5em;
+}
+
+body>.unfolded {
+  margin-top: 2em;
+}
+
+time {
+  font-size: 0.65em;
+  text-align: right;
+}
+
+/* theme */
+
+body {
+  font: 1em/1.5 AppleGothic, NanumGothic, Sans-serif;
+  letter-spacing: +0.02em;
+  word-spacing: +0.2em;
+  color: rgba(37, 176, 118, 1.0);
+  background-color: rgba(16, 20, 20, 1.0);
+  word-break: keep-all;
+}
+
+#header::after {
+  content: "lost|traIn";
+  font-size: 3.6em;
+  font-weight: 700;
+  opacity: 0.3;
+  color: rgba(180, 64, 134, 1.0);
+}
+
+a,
+a:link,
+a:visited {
+  text-decoration: none;
+  color: rgba(180, 64, 134, 1.0);
+  border: 1px solid rgba(180, 64, 134, 0.5);
+}
+
+a:hover {
+    color: rgba(180, 64, 134, 0.5);
+}
+
+.unfolded>.title {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding-left: 0;
+}
+
+.unfolded>.title>a:nth-child(1) {
+  /* font-size: 1.1em; */
+  color: rgba(37, 176, 118, 0.25);
+  font-weight: 700;
+  border: unset;
+  padding-left: 0;
+}
+
+time {
+  color: rgba(37, 176, 118, .2);
+}
+
+audio::-webkit-media-controls-enclosure {
+  background-color: rgba(50, 135, 120, 1.0);
+}
+
+audio::-webkit-media-controls-current-time-display {
+  text-shadow: none;
+}
+
+audio::-webkit-media-controls-time-remaining-display {
+  text-shadow: none;
+}
+
+a[href^="../"] {
+  visibility: hidden;
+}
+
+a[href^="../"]::before {
+  visibility: visible;
+  content: "«";
+  padding-top: 1em;
+  padding-bottom: 2em;
+}
+
+@media (max-width: 600px) {
+  body {
+    padding-left: 0.75em;
+    padding-right: 0.75em;
+    padding-top: 0.5em;
+    font: 0.95em/1.5 AppleGothic, NanumGothic, Sans-serif;
+  }
+
+  #header {
+    text-align: right;
+  }
+
+  #header::after {
+    font-size: 2.3em;
+    opacity: 0.2;
+  }
+}