diff --git a/.gitignore b/.gitignore
index b1b2783..8fd257d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
!.gitignore
+!*.css
!*.gif
!*.html
!*.js
diff --git a/cube.css b/cube.css
new file mode 100644
index 0000000..ac7eb17
--- /dev/null
+++ b/cube.css
@@ -0,0 +1,97 @@
+@font-face {
+ font-family: "Bai Jamjuree";
+ font-weight: 700;
+ src: url(BaiJamjuree700.woff2) format(woff2);
+}
+
+body,
+html {
+ height: 100%;
+ margin: 0;
+}
+
+html {
+ background-color: #000000;
+ font-family: "Bai Jamjuree", sans;
+ font-size: 450%;
+}
+
+a {
+ color: #000000;
+ text-decoration-line: none;
+}
+
+.frame {
+ background-color: #FFFFFF;
+
+ width: min-content;
+
+ padding: 0 .3em;
+ border-radius: 1em;
+
+ user-select: none;
+}
+
+.frame:hover {
+ background-color: #FFFF00;
+}
+
+.scene {
+ height: 100%;
+ width: 100%;
+ perspective: 15em;
+
+ display: flex;
+
+ align-items: center;
+ justify-content: center;
+}
+
+.cube {
+ height: 5em;
+ width: 5em;
+
+ position: relative;
+
+ transform: translateZ(-2.5em);
+ transform-style: preserve-3d;
+}
+
+.face {
+ background-size: cover;
+ background-position: center;
+
+ width: 5em;
+ height: 5em;
+
+ display: flex;
+
+ align-items: center;
+ justify-content: center;
+
+ position: absolute;
+}
+
+.front {
+ transform: rotateY(0deg) translateZ(2.5em);
+}
+
+.top {
+ transform: rotateX(90deg) translateZ(2.5em);
+}
+
+.back {
+ transform: rotateY(180deg) translateZ(2.5em);
+}
+
+.bottom {
+ transform: rotateX(-90deg) translateZ(2.5em);
+}
+
+.right {
+ transform: rotateY(90deg) translateZ(2.5em);
+}
+
+.left {
+ transform: rotateY(-90deg) translateZ(2.5em);
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 4822efd..91cf956 100644
--- a/index.html
+++ b/index.html
@@ -24,84 +24,12 @@
+
+