diff --git a/main.css b/main.css
new file mode 100644
index 0000000000000000000000000000000000000000..1c91478163cfe4c0935df595db21689c15c37286
--- /dev/null
+++ b/main.css
@@ -0,0 +1,134 @@
+body {
+	background: #f7f7f7;
+}
+
+.content {
+	margin-left: 2rem;
+	margin-right: 2rem;
+	font-family: Tahoma, Arial, sans-serif;
+}
+
+.grid-container-elementsandrgraph {
+	display: grid;
+	grid-template-columns: 50% 50%;
+}
+
+.grid-container-elementsandrgraph > div {
+	padding: 10px;
+}
+
+.graph {
+	background-color: rgba(255, 255, 255, 0.8);
+	border-radius: 3%;
+	box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
+}
+
+.grid-container1 {
+	display: grid;
+	grid-template-columns: 25% 25% 25% 25%;
+	gap: 10px;
+	padding: 10px;
+}
+
+.grid-container1 > div {
+	background-color: rgba(255, 255, 255, 0.8);
+	text-align: left;
+	padding: 10px;
+	font-size: 15px;
+	border-radius: 3%;
+	box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
+}
+
+.grid-container2 {
+	display: grid;
+	grid-template-columns: auto auto auto auto;
+	grid-template-rows: auto auto;
+	gap: 10px;
+	padding: 10px;
+	width: 50%;
+}
+
+.grid-container2 > div {
+	background-color: rgba(255, 255, 255, 0.8);
+	text-align: center;
+	padding: 10px;
+	font-size: 15px;
+	border-radius: 3%;
+	box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
+}
+
+.grid-container2 .progressbar {
+	width: 170px;
+	height: 190px;
+	position: relative;
+	align-items: center;
+	justify-content: center;
+}
+
+.progressbar:hover {
+	transform: scale(1.03);
+	transition: transform 0.2s;
+}
+
+.active {
+	background-color: aliceblue !important;
+	transform: scale(1.02);
+	transition: transform 0.2s;
+}
+
+.grid-container2 .outer {
+	width: 120px;
+	height: 120px;
+	border-radius: 50%;
+	padding: 20px;
+	box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15),
+		-6px -6px 10px -1px rgba(255, 255, 255, 0.7);
+}
+
+.grid-container2 .inner {
+	width: 120px;
+	height: 120px;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2),
+		inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7),
+		-0.5px -0.5px 0px rgba(255, 255, 255, 1), 0.5px 0.5px 0px rgba(0, 0, 0, 0.15),
+		0px 12px 10px -10px rgba(0, 0, 0, 0.05);
+}
+
+.grid-container2 #number {
+	font-size: 30px;
+	font-weight: 600;
+}
+
+.grid-container2 circle {
+	--fill: 440;
+	fill: none;
+	animation: anim 2s linear forwards;
+	stroke-dashoffset: var(--fill);
+	transition: stroke-dashoffset 2s;
+}
+
+.grid-container2 svg {
+	transform: rotate(270deg);
+	position: absolute;
+	top: 10px;
+	left: 10px;
+}
+
+.examples {
+	width: auto;
+	height: 160px;
+	background-color: rgba(255, 255, 255, 0.8);
+	border-radius: 3%;
+	box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
+	padding: 10px;
+}
+
+.svgContainer {
+	display: none;
+	width: 50%;
+	height: 50%;
+}