Added Profile and fixed style

1 files changed, 82 insertions, 68 deletions

diff --git a/includes/main.css b/includes/main.css
index 0f94c46..5f33cfb 100644
--- a/includes/main.css
+++ b/includes/main.css
@@ -1,20 +1,21 @@
 html {
-    accent-color: darkred;
-    text-align: justify;
+	accent-color: darkred;
+	text-align: justify;
 }
 
 * :any-link {
-    color: inherit;
-    text-decoration: underline;
+	color: inherit;
+	text-decoration: underline;
 }
 
 aside {
-    max-width: max(40%, 12rem);
-    background: darkred;
-    color: white;
-    float: right;
-    margin: 1rem;
-    padding: 0.5rem;
+	max-width: max(40%, 12rem);
+	background: darkred;
+	color: white;
+	float: right;
+	margin: 0.5rem;
+	margin-left: 1rem;
+	padding: 0.5rem;
 }
 
 img,
@@ -25,88 +26,101 @@ audio,
 iframe,
 embed,
 object {
-    max-width: 100%;
-    width: fit-content;
-    padding: 1rem;
-    margin: auto;
+	max-width: 100%;
+	width: fit-content;
+	display: block;
 }
 
 img,
 svg,
 video,
 canvas {
-    height: auto;
+	height: auto;
 }
 
 picture {
-    display: contents;
+	display: contents;
+
 }
 
 @media screen {
 
-    * :any-link:hover,
-    * :any-link:active {
-        font-style: italic;
-    }
+	* :any-link:hover,
+	* :any-link:active {
+		font-style: italic;
+	}
+
+	body {
+		max-width: min(100dvw, 58rem);
+		min-height: 100dvh;
+		padding: 0.5rem;
+		margin-left: auto;
+		margin-right: auto;
+		grid-template-columns: 1fr;
+		grid-template-rows: auto 1fr auto;
+		grid-template-areas:
+			'header'
+			'main'
+			'footer';
+		display: grid;
+	}
+
+	header,
+	footer {
+		padding: 1rem;
+		font-weight: bolder;
+		background-color: darkred;
 
-    body {
-        max-width: min(100dvw, 58rem);
-        min-height: 100dvh;
-        padding: 0.5rem;
-        margin-left: auto;
-        margin-right: auto;
-        grid-template-columns: 1fr;
-        grid-template-rows: auto 1fr auto;
-        grid-template-areas:
-            'header'
-            'main'
-            'footer';
-        display: grid;
-    }
+		*:any-link {
+			text-decoration: none;
+		}
+	}
 
-    :is(header, footer) {
-        padding: 1rem;
-        font-weight: bolder;
-        background-color: darkred;
-    }
+	header {
+		grid-area: header;
+	}
 
-    :is(header, footer) *:any-link {
-        text-decoration: none;
-    }
+	main {
+		grid-area: main;
+	}
 
-    header {
-        grid-area: header;
-    }
+	footer {
+		align-self: end;
+		grid-area: footer;
+	}
+
+	nav>a {
+		margin-right: 0.5rem;
+	}
+}
 
-    main {
-        grid-area: main;
-    }
+@media (forced-colors: active) {
 
-    footer {
-        align-self: end;
-        grid-area: footer;
-    }
+	header,
+	footer {
+		border: 2px solid;
+	}
 
-    nav>a {
-        margin-right: 0.5rem;
-    }
+	aside {
+		border: 2px solid;
+	}
 }
 
 @media print {
 
-    header,
-    footer {
-        display: none;
-    }
+	header,
+	footer {
+		display: none;
+	}
 
-    section,
-    table {
-        orphans: 4;
-        break-inside: auto;
-    }
+	section,
+	table {
+		orphans: 4;
+		break-inside: auto;
+	}
 
-    tr {
-        break-inside: avoid;
-        break-before: auto;
-    }
+	tr {
+		break-inside: avoid;
+		break-before: auto;
+	}
 }