From e26e15d4875900fea3b46a80d5b878ff638cc869 Mon Sep 17 00:00:00 2001
From: Shashwat Singh <68944093+shashwat128@users.noreply.github.com>
Date: Fri, 16 Jun 2023 08:22:51 +0530
Subject: [PATCH] Update style.css

Setting maximum width to 420 pixels and rest jar components accordingly. For better presentation.
---
 3-terrarium/solution/style.css | 142 +++++++++++++++++----------------
 1 file changed, 75 insertions(+), 67 deletions(-)

diff --git a/3-terrarium/solution/style.css b/3-terrarium/solution/style.css
index 9c627e83..3034961e 100644
--- a/3-terrarium/solution/style.css
+++ b/3-terrarium/solution/style.css
@@ -1,105 +1,113 @@
 body {
-	font-family: helvetica, arial, sans-serif;
+  font-family: helvetica, arial, sans-serif;
 }
 
 h1 {
-	color: #3a241d;
-	text-align: center;
+  color: #3a241d;
+  text-align: center;
 }
 
 #left-container {
-	left: 0px;
+  left: 0px;
 }
 
 #right-container {
-	right: 0px;
+  right: 0px;
 }
 
 .container {
-	background-color: #eee;
-	width: 15%;
-	top: 0px;
-	position: absolute;
-	height: 100%;
-	padding: 10px;
+  background-color: #eee;
+  width: 15%;
+  top: 0px;
+  position: absolute;
+  height: 100%;
+  padding: 10px;
 }
 
 .plant-holder {
-	position: relative;
-	height: 13%;
-	left: -10px;
+  position: relative;
+  height: 13%;
+  left: -10px;
 }
 
 .plant {
-	position: absolute;
-	max-width: 150%;
-	max-height: 150%;
-	z-index: 2;
+  position: absolute;
+  max-width: 150%;
+  max-height: 150%;
+  z-index: 2;
 }
 
-/*https://codepen.io/Rotarepmi/pen/rjpNZY*/
-
 .jar-walls {
-	height: 80%;
-	width: 60%;
-	background: #d1e1df;
-	border-radius: 1rem;
-	position: absolute;
-	bottom: 0.5%;
-	left: 20%;
-	opacity: 0.5;
-	z-index: 1;
+  height: 80%;
+  width: 60%;
+  max-width: 420px;
+  background: #d1e1df;
+  border-radius: 1rem;
+  position: absolute;
+  bottom: 0.5%;
+  left: 50%;
+  transform: translateX(-50%);
+  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;
+  width: 50%;
+  max-width: 350px;
+  height: 5%;
+  background: #d1e1df;
+  position: absolute;
+  bottom: 80.5%;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0.7;
+  z-index: 1;
 }
 
 .jar-bottom {
-	width: 50%;
-	height: 1%;
-	background: #d1e1df;
-	position: absolute;
-	bottom: 0%;
-	left: 25%;
-	opacity: 0.7;
+  width: 50%;
+  max-width: 350px;
+  height: 1%;
+  background: #d1e1df;
+  position: absolute;
+  bottom: 0%;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0.7;
 }
 
 .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;
+  width: 60%;
+  max-width: 420px;
+  height: 5%;
+  background: #3a241d;
+  position: absolute;
+  border-radius: 0 0 1rem 1rem;
+  bottom: 1%;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0.7;
+  z-index: -1;
 }
 
 .jar-glossy-long {
-	width: 3%;
-	height: 20%;
-	border-radius: 2rem;
-	background: #ddfbff;
-	position: absolute;
-	bottom: 20%;
-	left: 5%;
+  width: 3%;
+  height: 20%;
+  border-radius: 2rem;
+  background: #ddfbff;
+  position: absolute;
+  bottom: 20%;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .jar-glossy-short {
-	width: 3%;
-	height: 5%;
-	border-radius: 2rem;
-	background: #ddfbff;
-	position: absolute;
-	bottom: 45%;
-	left: 5%;
+  width: 3%;
+  height: 5%;
+  border-radius: 2rem;
+  background: #ddfbff;
+  position: absolute;
+  bottom: 45%;
+  left: 50%;
+  transform: translateX(-50%);
 }