🎉 First commit

static/style.css

@@ -0,0 +1,190 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+/*
+	Layout
+*/
+
+@media screen and (min-width:112rem)
+{
+	body
+	{
+		display: grid;
+		grid-template-columns: 30ch 80ch;
+		gap: 2ch;
+	}
+	aside
+	{
+		grid-column: 1;
+		position: sticky;
+		height: fit-content;
+		top:0;
+	}
+}
+
+@media print
+{
+	aside
+	{
+		display: none;
+	}
+}
+
+
+/*
+	Font, Font Color, Font Weight
+*/
+body
+{
+	font-family: "Poppins", sans-serif;
+}
+
+h1, h2
+{
+	color: #035;
+}
+
+a
+{
+	color: #279;
+	text-decoration: none;
+}
+
+dt
+{
+	font-weight: bold;
+}
+
+@media not print
+{
+	body
+	{
+		color: #777;
+	}
+
+	h3, h4
+	{
+		color: #777;
+		font-weight: normal;
+	}
+
+	b, dt
+	{
+		color: #000;
+		font-weight: normal;
+	}
+}
+
+
+/*
+	CV
+*/
+main#cv #page2
+{
+	display: grid;
+	gap: 1ch 2rem;
+	grid-template-rows: max-content;
+}
+
+main#cv #page1
+{
+	display: grid;
+	gap: 1ch 2rem;
+	grid-template-rows: max-content;
+}
+
+main#cv 
+{
+	display: grid;
+	gap: 2ch 4rem;
+	grid-template-rows: max-content;
+}
+
+@media  print , screen and (min-width:80rem)
+{
+	main#cv #page1
+	{
+		grid-template-columns: 50ch 30ch;
+		align-items: start;
+	}
+
+	main#cv #page2
+	{
+		grid-template-columns: 50ch 30ch;
+		align-items: start;
+	}
+
+	#title { grid-column: 1/span 2; }
+	#expirence { grid-column: 1; grid-row:3/span 3;}
+
+	#description { grid-column: 1; grid-row:2;}
+	#contact { grid-column: 2; grid-row:2;}
+	#education { grid-column: 1; }
+	#projects { grid-column: 1; }
+	#languages { grid-column: 2; grid-row:3;}
+	#habilities { grid-column: 2;grid-row:4;}
+
+	#recognitions { grid-column: 2; grid-row:1;}
+	#education { grid-column: 1;}
+	#projects { grid-column: 1/span 2; }
+}
+
+#projects div
+{
+	display: grid:
+	grid-template-columns: 1fr 1fr;
+	gap: 2ch;
+}
+
+@media  screen and (min-width:160rem)
+{
+	main#cv
+	{
+		grid-template-columns: 1fr 1fr;
+	}
+}
+
+main#cv h4
+{
+	font-weight: normal;
+	text-transform: uppercase;
+}
+
+main#cv p
+{
+	text-align: justify;
+	word-break: break-word;
+	hyphens: auto;
+}
+
+main#cv h1
+{
+	font-size: 3.5rem;
+}
+
+main#cv h1, main#cv h4,main#cv h3, main#cv h2,  main#cv ul, main#cv dl
+{
+	margin: 0;
+}
+
+main#cv h2
+{
+	margin-bottom:1rem;
+}
+main#cv h3
+{
+	margin-top: 1rem;
+}
+
+main#cv p
+{
+	margin-top: 0.5rem;
+	margin-bottom: 0.5rem;
+}
+
+
+main#cv section div
+{
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+}
+