improve responsiveness

css/styles.css

@@ -46,8 +46,6 @@
 		--hl-low: #f4ede8;
 		--hl-med: #dfdad9;
 		--hl-high: #cecacd;
-
-
 	}
 
 	--shadow-color: rgba(0, 0, 0, 0.6);
@@ -56,6 +54,7 @@
 
 body {
 	background-image: linear-gradient(to bottom right, var(--overlay), var(--base));
+
 }
 
 h1,
@@ -68,40 +67,69 @@ h4 {
 }
 
 h1 {
-	font-size: 8rem;
+	font-size: 3em;
 	text-shadow: var(--text-shadow);
 }
 
 h2 {
-	font-size: 6rem;
+	font-size: 2em;
 	text-shadow: var(--text-shadow);
 }
 
 h3 {
-	font-size: 4rem;
+	font-size: 2em;
 	color: var(--iris);
 }
 
 main {
 	font-family: Jura, serif;
-	font-size: 2rem;
-	width: 60%;
+	font-size: 1.6rem;
+	width: 100%;
+	max-width: 1200px;
 	margin: auto;
 	font-weight: 600;
 	color: var(--text);
+	display: flex;
+
+	flex-direction: column;
+
+	@media screen and (min-width:601px) {
+		font-size: 1.2rem;
+	}
+
+	@media screen and (max-width:600px) {
+		font-size: 1rem;
+	}
+}
+
+header {
+	text-align: center;
+	font-size: 1rem;
+
 }
 
 section {
-	margin-bottom: 8rem;
+	margin-bottom: 3em;
+	display: inline-flex;
+	justify-content: center;
+
+	@media screen and (min-width:601px) {
+		flex-direction: row;
+	}
+
+	@media screen and (max-width:600px) {
+		flex-direction: column;
+	}
 }
 
 
 .container {
-
+	margin: 1em;
 	background-color: var(--surface);
-	border-radius: 10rem;
-	padding: 5rem;
-	box-shadow: 1rem 1rem var(--shadow-color);
+	background-image: radial-gradient(circle at top left, var(--overlay), var(--surface));
+	border-radius: 6em;
+	padding: 3em;
+	box-shadow: 1em 1em var(--shadow-color);
 }
 
 figcaption {
@@ -144,8 +172,7 @@ ul {
 
 li {
 	list-style-type: '✓ ';
-	margin-bottom: 2rem;
-	padding: 1rem;
+	padding: 0.6em;
 }
 
 li::marker {
@@ -159,3 +186,7 @@ li::marker {
 .link-list>li:hover::marker {
 	color: var(--foam);
 }
+
+#project-list>li {
+	list-style-type: none;
+}