First commit.

assets/main.css

@@ -0,0 +1,157 @@
+body {
+    background-color: black;
+    color: white;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 20px;
+    margin-top: 50px;   
+}
+
+a {
+    color: lightgray;
+    text-decoration: none;
+}
+
+a:hover {
+    color: darkgray;
+}
+
+footer {
+    text-align: center;
+}
+
+aside {
+    display: flex;
+    flex-direction: column;
+    width: 400px;
+    border: 2px solid white;
+    background-color: #111;
+}
+
+nav.profile img {
+    width: 100px;
+    margin-top: -50px;
+    border: 4px solid white;
+}
+
+nav.profile {
+    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://i.postimg.cc/jdSrJ8GD/purplesky.png');
+    background-size: cover;
+    background-position: center;
+    border-bottom: 2px solid white;
+    padding: 20px;
+}
+
+#links {
+    border-bottom: 2px solid white;
+}
+
+
+main {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    width: 100%;
+    padding: 20px;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+.centerText {
+    text-align: center;
+}
+
+.box {
+    padding: 10px;
+    gap: 20px;
+}
+
+.noMargin {
+    margin: 0px;
+}
+
+.lightBackground {
+    background-color: #111;
+}
+
+.border {
+    border: 2px solid white;
+}
+
+.dottedBorder {
+    border: 2px dotted white;
+}
+
+.dashedBorder {
+    border: 2px dashed white;
+}
+
+.thumbnail {
+    border: 2px solid white;
+}
+
+.flex {
+    display: flex;
+}
+
+.flex-row {
+    flex-direction: row;
+}
+
+.flex-column {
+    flex-direction: column;
+}
+
+
+.lightColor {
+    color: lightgray;
+}
+
+.flyOnHover:hover {
+    animation: alternate .4s fly;
+    animation-fill-mode: forwards;
+}
+
+.bnwOnHover:hover {
+    transition-duration: .4s;
+    filter: grayscale(100%);
+}
+
+.menuEntry {
+    margin-bottom: 10px;
+    margin-top: 10px;
+}
+
+.menuEntry:hover {
+    transition-duration: 0.4s;
+    background-color: #070707;
+}
+
+.menuEntryColor {
+    color: white;
+}
+
+.menuEntryColor:hover {
+    color: white;
+}
+
+.menuEntry:hover > img {
+    animation: alternate .4s fly;
+    animation-fill-mode: forwards;
+}
+
+
+/* Keyframes */
+@keyframes fly {
+    0% {
+        transform: translate(0, 0);
+    }
+
+    100% {
+        transform: translate(0%, -2%);
+    }
+}