Update portfolio

I accidentally save this post in the wrong location

.github/workflows/hugo_cd.yml

@@ -0,0 +1,62 @@
+name: Hugo CD
+
+on:
+  push:
+    branches:
+      - "master"
+
+defaults:
+  run:
+    working-directory: ./
+
+jobs:
+  build:
+    timeout-minutes: 6
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup hugo
+        uses: peaceiris/actions-hugo@v3
+        with:
+          hugo-version: "latest"
+          extended: true
+
+      - name: Build
+        run: hugo --minify
+
+      - name: Upload deployment
+        uses: actions/upload-artifact@v4
+        with:
+          name: public-html
+          path: ./public
+
+  deploy:
+    timeout-minutes: 6
+    name: Deploy
+    runs-on: ubuntu-latest
+    needs: build
+    environment:
+      name: production
+      url: https://maik.dev/
+    steps:
+      - name: Download deployment
+        uses: actions/download-artifact@v4
+        with:
+          name: public-html
+          path: ./public-html
+
+      - name: Setup SSH config for remote server
+        run: |
+          mkdir -p ~/.ssh
+          echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
+          echo "${{ secrets.SSH_HOST }} ssh-ed25519 ${{ secrets.SSH_HOST_KEY }}" > ~/.ssh/known_hosts
+          chmod 600 ~/.ssh/id_ed25519
+          eval "$(ssh-agent -s)"
+          ssh-add ~/.ssh/id_ed25519
+
+      - name: Transfer deployment to remote server
+        run: |
+          rsync -avh --delete-after ./public-html/ ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }}:~/maik.dev

.github/workflows/hugo_ci.yml

@@ -0,0 +1,34 @@
+name: Hugo CI
+
+on:
+  push:
+    branches:
+      - "*"
+      - "*/*"
+      - "**"
+      - "!master"
+  pull_request:
+    branches:
+      - "master"
+
+defaults:
+  run:
+    working-directory: ./
+
+jobs:
+  ci:
+    timeout-minutes: 5
+    name: CI
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup hugo
+        uses: peaceiris/actions-hugo@v3
+        with:
+          hugo-version: "latest"
+          extended: true
+
+      - name: Build
+        run: hugo -D -F

.gitignore

@@ -1,2 +1,9 @@
-# All old/unused files
+# Hugo default output directory
+public/
+resources/_gen/
+.hugo_build.lock
+
+.vscode/
+
+*.bak
 *.old

README.md

@@ -1,2 +1,50 @@
-# Personal-Website
-Repo for my website
+# Personal Website
+
+Link: <https://maik.dev>
+
+## Goals
+
+The goal of this website is mainly to post [CTF](https://ctftime.org/ctf-wtf/) writeups.
+
+Besides that, its also made for the enjoyment of creating this website. To wit, I also set some technical goals for this website.
+
+### Development goals
+
+The website must comply with at least the following:
+
+- The website is fully usable with JavaScript disabled.
+  - JavaScript may only be used for graphical enhancements.
+  - Where possible, JavaScript should be avoided.
+- The website must have a usable Dark Theme.
+  - This means all text and images are still readable, and the look and feel is the same are the regular theme (but dark ofcourse).
+- The website must have a working RSS feed,
+- The website must be static.
+  - Self-hosted, dynamic components (like a comment system) can be used, but the main content is static. (see the first goal)
+- All assets, libraries, whatever, must be hosted locally.
+  - With the exception of Google Analytics. I am planning to replace this in the future.
+
+## Installation
+
+### Install Hugo
+
+This website is made using the [Hugo static site generator](https://gohugo.io/).
+
+On Arch Linux this is as easy as running the following:
+
+```sh
+pacman -S hugo
+```
+
+### Running locally
+
+To see a preview of new posts, you can run the hugo development server.
+
+```sh
+hugo -DF server
+```
+
+The `-D` and `-F` flags are for building draft and future posts respectively.
+
+## Publish
+
+When a commit is pushed to the `master` branch, the new version of the website will automatically be deployed using GitHub Actions.

assets/images/logo.svg

@@ -1,68 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
-	<style type="text/css">
-		.st0 {
-			clip-path: url(#SVGID_2_);
-		}
-
-		.st1 {
-			fill: #02A8F4;
-		}
-
-		.st2 {
-			fill: #FFFFFF;
-		}
-
-		.st3 {
-			fill: #F2504D;
-		}
-
-		.st4 {
-			fill: #E5E4E9;
-		}
-
-		.st5 {
-			fill: #FF0000;
-		}
-
-		.st6 {
-			fill: #FFFF00;
-		}
-
-		.st7 {
-			fill: #00FF00;
-		}
-
-		.st8 {
-			fill-opacity: 0;
-		}
-
-	</style>
-	<g>
-		<defs>
-			<rect id="SVGID_1_" width="512" height="512" />
-		</defs>
-		<clipPath id="SVGID_2_">
-			<use xlink:href="#SVGID_1_" style="overflow:visible;" />
-		</clipPath>
-		<g class="st0">
-			<path class="st1" d="M58.7,256L58.7,256C58.7,147,147,58.7,256,58.7l0,0c52.3,0,102.5,20.8,139.5,57.8s57.8,87.2,57.8,139.5l0,0
-			c0,109-88.3,197.3-197.3,197.3l0,0C147,453.3,58.7,365,58.7,256z" />
-			<path class="st2" d="M149.2,161.9L149.2,161.9c0-7,5.7-12.7,12.7-12.7h188.2c3.4,0,6.6,1.3,8.9,3.7c2.4,2.4,3.7,5.6,3.7,8.9v188.2
-			c0,7-5.7,12.7-12.7,12.7H161.9c-7,0-12.7-5.7-12.7-12.7V161.9z" />
-			<path class="st3" d="M166,202.4H346v133.6H166V202.4z" />
-			<path class="st4" d="M154.2,149.2h203.6c1.3,0,2.6,0.5,3.5,1.5c0.9,0.9,1.5,2.2,1.5,3.5v24.9c0,0,0,0,0,0l-213.5,0l0,0
-			c0,0,0,0,0,0l0-24.9l0,0C149.2,151.5,151.5,149.2,154.2,149.2z" />
-			<path class="st5" d="M158.7,164.2L158.7,164.2c0-4,3.2-7.2,7.2-7.2l0,0c1.9,0,3.7,0.8,5.1,2.1c1.4,1.4,2.1,3.2,2.1,5.1l0,0
-			c0,4-3.2,7.2-7.2,7.2l0,0C162,171.4,158.7,168.2,158.7,164.2z" />
-			<path class="st6" d="M179.2,164.2L179.2,164.2c0-4,3.2-7.2,7.2-7.2l0,0c1.9,0,3.7,0.8,5.1,2.1c1.4,1.4,2.1,3.2,2.1,5.1l0,0
-			c0,4-3.2,7.2-7.2,7.2l0,0C182.4,171.4,179.2,168.2,179.2,164.2z" />
-			<path class="st7" d="M199.6,164.2L199.6,164.2c0-4,3.2-7.2,7.2-7.2l0,0c1.9,0,3.7,0.8,5.1,2.1c1.4,1.4,2.1,3.2,2.1,5.1l0,0
-			c0,4-3.2,7.2-7.2,7.2l0,0C202.8,171.4,199.6,168.2,199.6,164.2z" />
-			<path class="st8" d="M166,202.4H346v133.6H166V202.4z" />
-			<path class="st2" d="M241.1,291.4l-39.3-17.1v-9.5l39.3-17v11.1l-27.4,10.5l27.4,10.9V291.4z M244.8,298.9l14.2-59.2h8.3
-			l-14.3,59.2H244.8z M270.8,291.5v-11.1l27.4-10.8L270.8,259v-11l39.3,17v9.4L270.8,291.5z" />
-		</g>
-	</g>
-</svg>

assets/images/nav_toggle.svg

@@ -1,40 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="124px" height="124px" viewBox="0 0 124 124" style="enable-background:new 0 0 124 124;" xml:space="preserve">
-	<g>
-		<path d="M112,6H12C5.4,6,0,11.4,0,18s5.4,12,12,12h100c6.6,0,12-5.4,12-12S118.6,6,112,6z" />
-		<path d="M112,50H12C5.4,50,0,55.4,0,62c0,6.6,5.4,12,12,12h100c6.6,0,12-5.4,12-12C124,55.4,118.6,50,112,50z" />
-		<path d="M112,94H12c-6.6,0-12,5.4-12,12s5.4,12,12,12h100c6.6,0,12-5.4,12-12S118.6,94,112,94z" />
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-</svg>

assets/images/project_placeholder.svg

@@ -1,2 +0,0 @@
-<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
-	<rect x="2" y="2" width="296" height="296" style="fill:#DEDEDE;stroke:#555555;stroke-width:2" /><text x="50%" y="50%" font-size="18" text-anchor="middle" alignment-baseline="middle" font-family="monospace, sans-serif" fill="#555555">300&#215;300</text></svg>

assets/styles/styles.css

@@ -1,732 +0,0 @@
-html,
-body {
-	margin: 0;
-	padding: 0;
-}
-
-body {
-	font-family: 'Roboto', sans-serif;
-	background: #060612;
-
-	overflow-x: hidden;
-}
-
-@font-face {
-	font-family: 'Roboto';
-	font-style: normal;
-	font-display: fallback;
-	font-weight: 400;
-	src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
-}
-
-@media screen and (max-width: 480px) {
-
-	body,
-	input,
-	select,
-	textarea {
-		font-size: 12pt;
-	}
-}
-
-@media screen and (max-width: 480px) {
-
-	html,
-	body {
-		min-width: 320px;
-	}
-}
-
-@media screen and (max-width: 736px) {
-
-	body,
-	input,
-	select,
-	textarea {
-		font-size: 12pt;
-	}
-}
-
-/*
-@media screen and (max-width: 736px) {
-
-	html,
-	body {
-		overflow-x: hidden;
-	}
-}
-*/
-
-@media screen and (max-width: 980px) {
-
-	body,
-	input,
-	select,
-	textarea {
-		font-size: 12pt;
-	}
-}
-
-@media screen and (max-width: 1280px) {
-
-	body,
-	input,
-	select,
-	textarea {
-		font-size: 11.5pt;
-	}
-}
-
-@media screen and (max-width: 1680px) {
-
-	body,
-	input,
-	select,
-	textarea {
-		font-size: 13pt;
-	}
-}
-
-.parallax::after {
-	/* Display and position the pseudo-element */
-	content: " ";
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-
-	/* Move the pseudo-element back away from the camera,
-   * then scale it back up to fill the viewport.
-   * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
-	transform: translateZ(-1px) scale(1.5);
-}
-
-.hidden {
-	display: none !important;
-}
-
-.nocroll {
-	overflow: hidden !important;
-}
-
-.content {
-	display: grid;
-	grid-template-rows: auto;
-	grid-column-gap: 0;
-	grid-row-gap: 0;
-
-	grid-template-columns: 1fr 1fr 1fr;
-	grid-template-areas:
-		"nav nav nav"
-		"header header header"
-		"projects projects projects"
-		"contact contact contact"
-		"footer footer footer";
-
-	overflow-x: hidden;
-	overflow-y: auto;
-	perspective: 2px;
-	height: 100vh;
-	scroll-behavior: smooth;
-}
-
-@media only screen and (max-width: 980px) {
-	.content {
-		grid-template-columns: 1fr 1fr;
-		grid-template-areas:
-			"nav nav"
-			"header header"
-			"projects projects"
-			"contact contact"
-			"footer footer";
-	}
-}
-
-@media only screen and (max-width: 736px) {
-	.content {
-		grid-template-columns: 1fr;
-		grid-template-areas:
-			"nav"
-			"header"
-			"projects"
-			"contact"
-			"footer";
-	}
-}
-
-.content > * {
-	background: white;
-}
-
-.content > nav {
-	grid-area: nav;
-	position: absolute;
-	background: transparent;
-	color: #ffffff;
-	width: 100%;
-	height: 3.5em;
-	line-height: 3.5em;
-	z-index: 10;
-	user-select: none;
-}
-
-.content > nav > .mobile_menu {
-	position: absolute;
-	width: 100vw;
-	height: calc(100vh - 3.5em);
-	z-index: 100;
-	top: 3.5em;
-	left: 0;
-	background-color: #060612;
-}
-
-.content > nav > .mobile_menu > .container {
-	position: relative;
-}
-
-.content > nav > .mobile_menu > .container > .list {}
-
-.content > nav > .mobile_menu > .container > .list > .item {
-	display: block;
-	background-color: #1a1233;
-	width: 100%;
-	text-decoration: none;
-	font-weight: 900;
-	color: #ffffff;
-	line-height: 4em;
-	font-size: 1.25em;
-	padding-left: 1em;
-	position: relative;
-	cursor: pointer;
-}
-
-.content > nav > .mobile_menu > .container > .list > .active {
-	background: #480070;
-}
-
-.content > nav > .mobile_menu > .container > .list > .language > .subitem {
-	display: block;
-	width: 100%;
-	text-decoration: none;
-	color: #ffffff;
-	background-color: #9535fc;
-	position: absolute;
-	left: 0;
-	padding-left: 3em;
-}
-
-.content > nav > .mobile_menu > .container > .list > .item > .subitem:nth-child(2n) {
-	margin-top: 4em;
-}
-
-.content > nav > .nav_toggle {
-	position: absolute;
-	top: 0;
-	left: 0;
-	background-color: #9535fc;
-	width: 3.5em;
-	height: 3.5em;
-	cursor: pointer;
-	display: none;
-}
-
-.content > nav > .nav_toggle > .button_container {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-53%, -46%);
-	margin: 0;
-	text-decoration: none;
-	color: #aa5bff;
-	font-weight: 900;
-	font-size: 2em;
-}
-
-.content > nav > .logo {
-	text-decoration: none;
-	color: #ffffff;
-	margin-left: 1.5em;
-}
-
-.content > nav > .list {
-	cursor: default;
-	user-select: none;
-	float: right;
-	margin-right: 1em;
-}
-
-.content > nav > .list > .item {
-	display: inline-block;
-	padding: 0 1em;
-	text-decoration: none;
-	color: #ffffff;
-	position: relative;
-	cursor: pointer;
-}
-
-.content > nav > .list > .item > .subitem {
-	display: block;
-	padding: 0 1em;
-	right: 0;
-	text-decoration: none;
-	color: #ffffff;
-	background: #1a1233;
-	position: absolute;
-}
-
-.content > nav > .list > .item > .subitem:nth-child(2n) {
-	margin-top: 4em;
-}
-
-.content > nav > .list > .active {
-	color: #9535fc;
-}
-
-@media only screen and (max-width: 736px) {
-	.content > nav {
-		background: rgba(6, 6, 18, 0.95);
-		user-select: none;
-	}
-
-	.content > nav > .logo {
-		margin: 0;
-		text-align: center;
-		position: absolute;
-		left: 50%;
-		transform: translateX(-50%)
-	}
-
-	.content > nav > .list {
-		display: none;
-	}
-
-	.content > nav > .nav_toggle {
-		display: block;
-	}
-}
-
-.content > header {
-	grid-area: header;
-	min-height: 100vh;
-	box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
-	background: rgba(6, 6, 18, 0.95);
-}
-
-.content > header {
-	min-height: 35em;
-	height: 100vh;
-	position: relative;
-
-
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.content > header::after {
-	background-size: cover;
-	background-image: url("../images/banner.webp");
-	z-index: -1;
-}
-
-.content > header > .container {
-	user-select: none;
-}
-
-.content > header > .container > .text {
-	display: inline-block;
-	user-select: text;
-}
-
-.content > header > .container > .text > .container {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-}
-
-.content > header > .container > .text > .container > h1 {
-	font-size: 2.5em;
-	line-height: 1.5em;
-	color: #ffffff;
-	margin: 0;
-	padding: 0;
-}
-
-.content > header > .container > .text > .container > span {
-	font-size: 1.25em;
-	line-height: 1.75em;
-	text-align: right;
-	color: #ffffff;
-}
-
-.content > header > .container > .logo {
-	user-select: none;
-}
-
-.content > header > .container > .logo > img {
-	width: 18em;
-	height: 18em;
-	margin-left: 3em;
-	display: inline-block;
-	vertical-align: middle;
-	position: relative;
-}
-
-.content > header > .container > .filler {
-	display: block;
-	height: 2em;
-}
-
-.content > header > .scroll_arrow {
-	position: absolute;
-	bottom: 1.25em;
-	z-index: 8;
-	user-select: none;
-}
-
-.content > header > .scroll_arrow > a {
-	text-decoration: none;
-	color: #ffffff;
-	font-size: 4em;
-	padding: 1em 1em 0.25em 1em;
-}
-
-@media only screen and (max-width: 980px) {
-	.content > header > .container > .logo > img {
-		margin: 0;
-		display: block;
-		margin: 0 auto;
-	}
-
-	.content > header > .container > .text {
-		display: block;
-	}
-
-	.content > header > .container > .text > .container > span,
-	.content > header > .container > .text > .container > h1 {
-		text-align: center;
-	}
-}
-
-@media only screen and (max-width: 736px) {
-	.content > header > .container > .text > .container > h1 {
-		font-size: 1.5em;
-	}
-
-	.content > header > .container > .text > .container > span {
-		font-size: 1em;
-	}
-
-	.content > header > .container > .logo > img {
-		width: 9em;
-		height: 9em;
-	}
-}
-
-.content > .projects {
-	grid-area: projects;
-	background-color: #060612;
-	text-align: center;
-	color: #ffffff;
-	width: 100%;
-	margin-bottom: 1.25em;
-}
-
-.content > .projects > .container {
-	margin: 1em 2em;
-	display: grid;
-	grid-template-rows: auto;
-	grid-column-gap: 0;
-	grid-row-gap: 0;
-
-	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-	grid-template-areas:
-		"description description description description description description"
-		"watchtogether watchtogether superbot superbot toyneuralnet toyneuralnet"
-		". invoicegenerator invoicegenerator ctf ctf ."
-}
-
-.content > .projects > .container > .description {
-	grid-area: description;
-	margin: 1em auto;
-	width: 85%;
-	max-width: 78em;
-}
-
-.content > .projects > .container > .description > h1 {
-	font-size: 2em;
-}
-
-.content > .projects > .container > .description > hr {
-	width: 60%;
-	margin: 1em auto 1em;
-	border-color: #9535fc;
-	border-width: .1em;
-}
-
-.content > .projects > .container > .project {
-	display: block;
-	margin: .75em auto;
-	width: 80%;
-	/*	background-color: white;*/
-}
-
-.content > .projects > .container > .project > .icon {
-	background-color: #1a1233;
-	height: 6em;
-	width: 6em;
-	position: relative;
-	border-radius: 100%;
-	margin: auto;
-	user-select: none;
-}
-
-.content > .projects > .container > .project > .icon > img {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	height: 2.25em;
-	width: 2.25em;
-}
-
-.content > .projects > .container > .project > h1 {
-	font-size: 1.35em;
-	line-height: 1.5em;
-}
-
-.content > .projects > .container > .project > p {}
-
-.content > .projects p {
-	font-size: 1.25em;
-	line-height: 1.75em;
-}
-
-.content > .projects p > a {
-	text-decoration: underline;
-	color: #9535fc;
-}
-
-.content > .projects > .container > .watchtogether {
-	grid-area: watchtogether;
-}
-
-.content > .projects > .container > .superbot {
-	grid-area: superbot;
-}
-
-.content > .projects > .container > .toyneuralnet {
-	grid-area: toyneuralnet;
-}
-
-.content > .projects > .container > .invoicegenerator {
-	grid-area: invoicegenerator;
-}
-
-.content > .projects > .container > .ctf {
-	grid-area: ctf;
-}
-
-@media only screen and (max-width: 980px) {
-	.content > .projects > .container {
-		grid-template-columns: 1fr 1fr 1fr 1fr;
-		grid-template-areas:
-			"description description description description"
-			"watchtogether watchtogether superbot superbot"
-			"toyneuralnet toyneuralnet invoicegenerator invoicegenerator"
-			". ctf ctf ."
-	}
-}
-
-@media only screen and (max-width: 736px) {
-	.content > .projects > .container {
-		grid-template-columns: 1fr;
-		grid-template-areas:
-			"description"
-			"watchtogether"
-			"superbot"
-			"toyneuralnet"
-			"invoicegenerator"
-			"ctf"
-	}
-
-	.content > .projects > .container > .description > h1 {
-		font-size: 1.5em;
-	}
-
-	.content > .projects p {
-		font-size: 1em;
-	}
-
-	.content > .projects > .container > .project > h1 {
-		font-size: 1.2em;
-	}
-}
-
-.content > .contact {
-	grid-area: contact;
-	background-color: #9535fc;
-	text-align: center;
-	color: #ffffff;
-}
-
-.content > .contact > .container {
-	margin: 9em auto;
-	width: 70%;
-}
-
-.content > .contact > .container > h1 {
-	font-size: 2em;
-	line-height: 1.5em;
-	/*	letter-spacing: -0.025em;*/
-}
-
-.content > .contact > .container > p {
-	font-size: 1.25em;
-	line-height: 1.75em;
-	margin-top: -0.75em;
-}
-
-.content > .contact > .container > p > a {
-	color: #ffffff;
-	/*	text-decoration: none;*/
-}
-
-@media only screen and (max-width: 980px) {
-	.content > .contact > .container {
-		margin: 7em auto;
-	}
-}
-
-@media only screen and (max-width: 736px) {
-	.content > .contact > .container {
-		margin: 6.75em auto;
-	}
-
-	.content > .contact > .container > h1 {
-		font-size: 1.5em;
-	}
-
-	.content > .contact > .container > p {
-		font-size: 1em;
-	}
-}
-
-.content > footer {
-	grid-area: footer;
-	background-color: #060612;
-	color: #ffffff;
-}
-
-.content > footer > .container {
-	margin: 8em auto 0;
-	padding-bottom: 7em;
-	width: 80%;
-	position: relative;
-}
-
-.content > footer > .container > .social {
-	user-select: none;
-	margin: 1.75em auto;
-	width: 80%;
-	text-align: center
-}
-
-.content > footer > .container > .social > a {
-	color: #9535fc;
-	margin: .25em;
-}
-
-.content > footer > .container > .social > a > svg {
-	fill: #9535fc;
-	width: 2.5em;
-	height: 2.5em;
-	margin: 0 0.25em;
-}
-
-.content > footer > .container > .social > a > svg:hover {
-	-moz-transform: scale(1.1);
-	-webkit-transform: scale(1.1);
-	tansform: scale(1.1);
-}
-
-.content > footer > .container > .copyright {
-	user-select: none;
-	margin: 1em auto;
-	text-align: center
-}
-
-.content > footer > .container > .copyright > p {
-	display: inline-block;
-	user-select: text;
-	margin: 0;
-	line-height: 1.75em;
-	font-size: 1.1em;
-}
-
-.content > footer > .container > .copyright > span {
-	user-select: none;
-	margin: 0 1.25em;
-}
-
-.content > footer > .container > .scroll_up {
-	position: absolute;
-	left: 50%;
-	transform: translateX(-50%);
-	bottom: 0;
-	z-index: 8;
-	user-select: none;
-}
-
-.content > footer > .container > .scroll_up > a {
-	text-decoration: none;
-	color: #ffffff;
-	font-size: 4em;
-	padding: .25em 1.25em 0.25em 1.25em;
-}
-
-@media only screen and (max-width: 1680px) {
-	.content > footer > .container > .copyright > .second_span {
-		display: none;
-	}
-
-	.content > footer > .container > .copyright > .trademarks {
-		display: block;
-	}
-}
-
-@media only screen and (max-width: 980px) {
-	.content > footer > .container {
-		margin: 7em auto 0;
-		padding-bottom: 6em;
-	}
-
-	.content > footer > .container > .social > a > svg {
-		width: 2.25em;
-		height: 2.25em;
-	}
-
-	.content > footer > .container > .copyright > span {
-		display: none;
-	}
-
-	.content > footer > .container > .copyright > p {
-		display: block;
-	}
-}
-
-@media only screen and (max-width: 736px) {
-	.content > footer > .container > .social > a > svg {
-		width: 1.75em;
-		height: 1.75em;
-	}
-
-	.content > footer > .container > .social > a > svg:hover {
-		transform: none;
-	}
-
-	.content > footer > .container > .copyright > p {
-		font-size: 0.9em;
-	}
-}