diff --git a/src/layouts/default.js b/src/layouts/default.js
index f096eaa..4e91101 100644
--- a/src/layouts/default.js
+++ b/src/layouts/default.js
@@ -1,45 +1,45 @@
-import React from "react"
-import PropTypes from "prop-types"
-import Navigation from "../components/navigation"
-import SEO from "../components/seo";
-
-import "./default.scss";
-import { Link, Trans } from 'gatsby-plugin-react-i18next';
-import LanguageSwitcher from "../components/languageSwitcher";
-
-class Layout extends React.Component {
-    render() {
-        return (
-            <>
-                <SEO description={this.props.description} lang={this.props.lang} meta={this.props.meta} title={this.props.title} />
-                <Navigation isHome={this.props.transparentTopbar} module={this.props.module} />
-                <div id="content" role="main">
-                    {this.props.children}
-                </div>
-                <footer role="contentinfo">CC-BY 4.0 Kevin Kandlbinder, <Link to="/legal/about" class="spf-link"><Trans i18nKey="imprint">Imprint</Trans></Link> | <Link to="/legal/datasec" class="spf-link"><Trans i18nKey="datasec">Data Protection</Trans></Link> | <Link to="/legal/disclaimer" class="spf-link"><Trans i18nKey="disclaimer">Disclaimer</Trans></Link> | <a href="#languageChooser">Language</a></footer>
-                <div className="languageModal" id="languageChooser">
-                    <LanguageSwitcher />
-                </div>
-            </>
-        );
-    }
-}
-
-Layout.defaultProps = {
-    module: `none`,
-    meta: [],
-    description: ``,
-    transparentTopbar: false
-}
-
-Layout.propTypes = {
-    description: PropTypes.string,
-    lang: PropTypes.string,
-    meta: PropTypes.arrayOf(PropTypes.object),
-    title: PropTypes.string.isRequired,
-    module: PropTypes.string.isRequired,
-    transparentTopbar: PropTypes.bool,
-    children: PropTypes.any.isRequired
-}
-
+import React from "react"
+import PropTypes from "prop-types"
+import Navigation from "../components/navigation"
+import SEO from "../components/seo";
+
+import "./default.scss";
+import { Link, Trans } from 'gatsby-plugin-react-i18next';
+import LanguageSwitcher from "../components/languageSwitcher";
+
+class Layout extends React.Component {
+    render() {
+        return (
+            <>
+                <SEO description={this.props.description} lang={this.props.lang} meta={this.props.meta} title={this.props.title} />
+                <Navigation isHome={this.props.transparentTopbar} module={this.props.module} />
+                <div id="content" role="main">
+                    {this.props.children}
+                </div>
+                <footer role="contentinfo">CC-BY 4.0 Kevin Kandlbinder, <Link to="/legal/about" className="spf-link"><Trans i18nKey="imprint">Imprint</Trans></Link> | <Link to="/legal/datasec" className="spf-link"><Trans i18nKey="datasec">Data Protection</Trans></Link> | <Link to="/legal/disclaimer" className="spf-link"><Trans i18nKey="disclaimer">Disclaimer</Trans></Link> | <a href="#languageChooser">Language</a></footer>
+                <div className="languageModal" id="languageChooser">
+                    <LanguageSwitcher />
+                </div>
+            </>
+        );
+    }
+}
+
+Layout.defaultProps = {
+    module: `none`,
+    meta: [],
+    description: ``,
+    transparentTopbar: false
+}
+
+Layout.propTypes = {
+    description: PropTypes.string,
+    lang: PropTypes.string,
+    meta: PropTypes.arrayOf(PropTypes.object),
+    title: PropTypes.string.isRequired,
+    module: PropTypes.string.isRequired,
+    transparentTopbar: PropTypes.bool,
+    children: PropTypes.any.isRequired
+}
+
 export default Layout;
\ No newline at end of file
diff --git a/src/layouts/default.scss b/src/layouts/default.scss
index fd024ce..1c16af0 100644
--- a/src/layouts/default.scss
+++ b/src/layouts/default.scss
@@ -1,163 +1,167 @@
-@import "../variables";
-
-* {
-    box-sizing: border-box;
-}
-
-body,
-html,
-#___gatsby,
-#gatsby-focus-wrapper {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    min-height: 100vh;
-    font-family: $mainFont;
-}
-
-#gatsby-focus-wrapper {
-    background: $background;
-    color: $textColor;
-    display: flex;
-    flex-direction: column;
-}
-
-footer {
-    background: darken($background, 1);
-    width: 100%;
-    color: white;
-    padding: 5px;
-    text-align: center;
-
-    a {
-        color: white;
-        text-decoration: underline dotted currentColor;
-    }
-}
-
-#content {
-    /*min-height: calc(100vh - 26px);*/
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-}
-
-.topBar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    display: flex;
-    width: 100%;
-    background: rgba($background, .95);
-    backdrop-filter: blur(5px);
-    z-index: 999;
-    transition: background .25s;
-
-    .topBarInner {
-        display: flex;
-        width: 100%;
-        max-width: $layoutWidth;
-        margin: auto;
-
-        > :first-child {
-            padding-left: $layoutPadding;
-        }
-
-        > :last-child {
-            padding-right: $layoutPadding;
-        }
-
-        a {
-            display: block;
-            padding: 10px $layoutPadding;
-            color: white;
-            /*text-decoration: underline dotted white;*/
-            text-decoration: none;
-            border-top: 2px solid transparent;
-
-            &:hover {
-                border-color: rgba(255, 255, 255, .25);
-            }
-
-            &.active {
-                border-color: white;
-            }
-        }
-    }
-}
-
-.homeBar.homeBarTransparent {
-    background: transparent;
-    backdrop-filter: blur(0);
-}
-
-.flexSpacer {
-    flex-grow: 1;
-    text-align: center;
-}
-
-section>div:not(.profile),
-section>article,
-.section>div:not(.profile),
-.section>article {
-    max-width: $layoutWidth;
-    width: 100%;
-    padding: 39px 20px;
-    margin: 0 auto;
-}
-
-article {
-    p {
-        text-align: justify;
-    }
-
-    a {
-        color: $accentColor;
-        text-decoration: underline dotted currentColor;
-        text-decoration-skip: none;
-    }
-}
-
-h1 {
-    font-size: 2em;
-}
-
-.languageModal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, .7);
-    z-index: 1000;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity .25s;
-
-    &:target {
-        opacity: 1;
-        pointer-events: auto;
-    }
-
-    .languageModalInner {
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        color: white;
-        background: black;
-        font-family: $mainFont;
-        padding: 20px;
-        border-radius: 5px;
-
-        a {
-            color: white;
-            text-decoration-style: dotted;
-        }
-
-    }
-
-    .modalCloseLink {
-        text-decoration: none;
-    }
+@import "../variables";
+
+* {
+    box-sizing: border-box;
+}
+
+body,
+html,
+#___gatsby,
+#gatsby-focus-wrapper {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    min-height: 100vh;
+    font-family: $mainFont;
+}
+
+#gatsby-focus-wrapper {
+    background: $background;
+    color: $textColor;
+    display: flex;
+    flex-direction: column;
+}
+
+footer {
+    background: darken($background, 1);
+    width: 100%;
+    color: white;
+    padding: 5px;
+    text-align: center;
+
+    a {
+        color: white;
+        text-decoration: underline dotted currentColor;
+    }
+}
+
+#content {
+    /*min-height: calc(100vh - 26px);*/
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.topBar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    background: rgba($background, .95);
+    backdrop-filter: blur(5px);
+    z-index: 999;
+    transition: background .25s;
+
+    @supports(backdrop-filter: blur(5px)) {
+        background: rgba($background, .9);
+    }
+
+    .topBarInner {
+        display: flex;
+        width: 100%;
+        max-width: $layoutWidth;
+        margin: auto;
+
+        > :first-child {
+            padding-left: $layoutPadding;
+        }
+
+        > :last-child {
+            padding-right: $layoutPadding;
+        }
+
+        a {
+            display: block;
+            padding: 10px $layoutPadding;
+            color: white;
+            /*text-decoration: underline dotted white;*/
+            text-decoration: none;
+            border-top: 2px solid transparent;
+
+            &:hover {
+                border-color: rgba(255, 255, 255, .25);
+            }
+
+            &.active {
+                border-color: white;
+            }
+        }
+    }
+}
+
+.homeBar.homeBarTransparent {
+    background: transparent;
+    backdrop-filter: blur(0);
+}
+
+.flexSpacer {
+    flex-grow: 1;
+    text-align: center;
+}
+
+section>div:not(.profile),
+section>article,
+.section>div:not(.profile),
+.section>article {
+    max-width: $layoutWidth;
+    width: 100%;
+    padding: 39px 20px;
+    margin: 0 auto;
+}
+
+article {
+    p {
+        text-align: justify;
+    }
+
+    a {
+        color: $accentColor;
+        text-decoration: underline dotted currentColor;
+        text-decoration-skip: none;
+    }
+}
+
+h1 {
+    font-size: 2em;
+}
+
+.languageModal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .7);
+    z-index: 1000;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity .25s;
+
+    &:target {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    .languageModalInner {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: white;
+        background: black;
+        font-family: $mainFont;
+        padding: 20px;
+        border-radius: 5px;
+
+        a {
+            color: white;
+            text-decoration-style: dotted;
+        }
+
+    }
+
+    .modalCloseLink {
+        text-decoration: none;
+    }
 }
\ No newline at end of file