diff --git a/learn/terrarium/style.css b/learn/terrarium/style.css
new file mode 100644
index 00000000..85ff635c
--- /dev/null
+++ b/learn/terrarium/style.css
@@ -0,0 +1,110 @@
+body {
+ font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+ color: #3a241d;
+ text-align: center;
+}
+
+#left-container {
+ background-color: #eee;
+ width: 15%;
+ left: 0px;
+ top: 0px;
+ position: absolute;
+ height: 100%;
+ padding: 10px;
+}
+
+#right-container {
+ background-color: #eee;
+ width: 15%;
+ right: 0px;
+ top: 0px;
+ position: absolute;
+ height: 100%;
+ padding: 10px;
+}
+
+.plant-holder {
+ position: relative;
+ height: 13%;
+ left: -10px;
+}
+
+.plant {
+ position: absolute;
+ max-width: 150%;
+ max-height: 150%;
+ z-index: 2;
+}
+
+.jar-walls {
+ height: 80%;
+ width: 60%;
+ background: #d1e1df;
+ border-radius: 1rem;
+ position: absolute;
+ bottom: 0.5%;
+ left: 20%;
+ opacity: 0.5;
+ z-index: 1;
+}
+
+.jar-top {
+ width: 50%;
+ height: 5%;
+ background: #d1e1df;
+ position: absolute;
+ bottom: 80.5%;
+ left: 25%;
+ opacity: 0.7;
+ z-index: 1;
+}
+
+.jar-bottom {
+ width: 50%;
+ height: 1%;
+ background: #d1e1df;
+ position: absolute;
+ bottom: 0%;
+ left: 25%;
+ opacity: 0.7;
+}
+
+.jar-glossy-short {
+ height: 6%;
+ width: 3%;
+ background: #f0ffff;
+ border-radius: 1rem;
+ position: absolute;
+ bottom: 40%;
+ left: 10%;
+ opacity: 0.5;
+ z-index: 1;
+}
+
+.jar-glossy-long {
+ height: 20%;
+ width: 3%;
+ background: #f0ffff;
+ border-radius: 1rem;
+ position: absolute;
+ bottom: 15%;
+ left: 10%;
+ opacity: 0.5;
+ z-index: 1;
+}
+
+.dirt {
+ width: 60%;
+ height: 5%;
+ background: #3a241d;
+ position: absolute;
+ border-radius: 0 0 1rem 1rem;
+ bottom: 1%;
+ left: 20%;
+ opacity: 0.7;
+ z-index: -1;
+}
\ No newline at end of file