From 541a08887be139421c2be0a4edb1c207b5498895 Mon Sep 17 00:00:00 2001
From: nadiavanleur <nadiavl@hotmail.com>
Date: Thu, 28 Mar 2024 14:51:05 +0100
Subject: [PATCH] update style

---
 2023/index.html |  95 +++++++++++++++++---
 index.html      | 227 +++++++++++++++++-------------------------------
 style.css       | 193 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 356 insertions(+), 159 deletions(-)
 create mode 100644 style.css

diff --git a/2023/index.html b/2023/index.html
index 0a26059..3197c89 100644
--- a/2023/index.html
+++ b/2023/index.html
@@ -56,25 +56,37 @@
       --hovercolor: #db2e47;
       --cyboxcolor: #333;
       --yellow: #d29d30;
+
+      --color-background: var(--backcolor);
+      --color-text: var(--maincolor);
+      --color-footer-text: var(--cyboxcolor);
+      --color-menu-background: var(--headerfooterbgcolor);
+      --color-hover: var(--yellow);
+      --color-support: var(--supportcolor);
     }
 
     *::selection {
-      background-color: var(--yellow);
+      background-color: var(--color-hover);
     }
 
     html {
       font-family: "block";
       font-size: 1rem;
-      background-color: var(--backcolor);
-      color: var(--maincolor);
+      background-color: var(--color-background);
+      color: var(--color-text);
       height: 100%;
       line-height: 1.2;
+      text-rendering: optimizeLegibility !important;
+      font-smooth: always !important;
+      -webkit-font-smoothing: antialiased !important;
+      -moz-osx-font-smoothing: grayscale;
     }
 
     body {
       height: 100%;
       position: relative;
       margin: 0;
+      font-size: 2rem;
     }
 
     a {
@@ -83,7 +95,7 @@
     }
 
     a:hover {
-      color: var(--maincolor);
+      color: var(--color-text);
     }
 
     .c-layout {
@@ -98,7 +110,8 @@
       position: fixed;
       bottom: 0;
       right: 0;
-      color: var(--cyboxcolor);
+      font-size: 1rem;
+      color: var(--color-footer-text);
     }
 
     .c-footer__content {
@@ -106,18 +119,17 @@
     }
 
     .c-title {
-      font-size: 3.1rem;
+      font-size: 3.4rem;
       transform: skewY(-3deg);
-      color: var(--yellow);
+      color: var(--color-hover);
     }
 
     .c-title::selection,
     .c-title *::selection {
-      background-color: var(--maincolor);
+      background-color: var(--color-text);
     }
 
     .c-text {
-      font-size: 2rem;
       transform: skewY(-3deg);
     }
 
@@ -126,7 +138,7 @@
       text-transform: uppercase;
       font-size: 6rem;
       text-decoration: none;
-      color: var(--maincolor);
+      color: var(--color-text);
       transform: skewY(-3deg);
       opacity: 0.5;
       margin-left: 24px;
@@ -140,9 +152,70 @@
       border-radius: 12px;
     }
 
+    .c-menu {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 1000;
+    }
+
+    .c-menu__hamburger-button {
+      height: 70px;
+      width: 70px;
+      text-align: center;
+      box-sizing: border-box;
+      cursor: pointer !important;
+      position: relative;
+      transition: margin 300ms ease-out;
+      background: transparent;
+      border: none;
+      color: var(--color-text);
+    }
+
+    .c-menu__hamburger-button:hover,
+    .c-menu__hamburger-button:focus {
+      color: var(--color-hover);
+    }
+
+    .c-menu__hamburger-button-bg {
+      margin: 0;
+      padding: 0;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 2;
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    .c-menu__hamburger-button-icon {
+      color: var(--color-menu-background);
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      display: block;
+      -webkit-transform: translateX(-50%) translateY(-50%);
+      transform: translateX(-50%) translateY(-50%);
+      width: 30px;
+      height: 30px;
+      z-index: 2;
+    }
+
     .u-highlight-text {
       font-weight: bold;
-      color: var(--supportcolor);
+      color: var(--color-support);
+    }
+
+    .u-monospace {
+      display: inline-flex;
+      justify-content: center;
+    }
+
+    .u-monospace span {
+      display: inline-block;
+      width: 1ch;
+      text-align: center;
     }
 
     .u-visually-hidden {
diff --git a/index.html b/index.html
index d5ddfdf..dbae60e 100644
--- a/index.html
+++ b/index.html
@@ -37,163 +37,94 @@
   <meta property="twitter:description"
     content="Hoeveel vrouwen, gender non-conforming artiesten en mannen spelen er dit jaar op Jera on Air..." />
 
+  <link rel="stylesheet" href="/style.css" />
   <style>
-    @font-face {
-      font-family: "block";
-      src: url(https://hoeveelvrouwenopjera.nl/blocktregcon-webfont.woff2);
-    }
-
-    @font-face {
-      font-family: "Jera on Air";
-      src: url(https://hoeveelvrouwenopjera.nl/jera-font-air-webfont.woff2);
-    }
-
     :root {
-      --maincolor: #e6dec8;
-      --supportcolor: #db2e47;
-      --headerfooterbgcolor: #161514;
-      --backcolor: #1d1e1c;
-      --hovercolor: #db2e47;
+      --maincolor: #e5dfc8;
+      --supportcolor: #ffc652;
+      --headerfooterbgcolor: #302d28;
+      --backcolor: #302d28;
+      --hovercolor: #ffc652;
+      --backdrop1: #b13a3c;
+      --backdrop2: #372f84;
       --cyboxcolor: #333;
-      --yellow: #d29d30;
-    }
-
-    *::selection {
-      background-color: var(--yellow);
-    }
-
-    html {
-      font-family: "block";
-      font-size: 1rem;
-      background-color: var(--backcolor);
-      color: var(--maincolor);
-      height: 100%;
-      line-height: 1.2;
-      text-rendering: optimizeLegibility !important;
-      font-smooth: always !important;
-      -webkit-font-smoothing: antialiased !important;
-      -moz-osx-font-smoothing: grayscale;
-    }
-
-    body {
-      height: 100%;
-      position: relative;
-      margin: 0;
-    }
-
-    a {
-      color: inherit;
-      text-decoration: none;
-    }
-
-    a:hover {
-      color: var(--maincolor);
-    }
-
-    .c-layout {
-      max-width: 51rem;
-      margin: 0 auto;
-      padding: 24px;
-    }
-
-    .c-footer {
-      width: 100%;
-      text-align: right;
-      position: fixed;
-      bottom: 0;
-      right: 0;
-      color: var(--cyboxcolor);
-    }
-
-    .c-footer__content {
-      padding: 8px 12px;
-    }
-
-    .c-title {
-      font-size: 3.4rem;
-      transform: skewY(-3deg);
-      color: var(--yellow);
-    }
 
-    .c-title::selection,
-    .c-title *::selection {
-      background-color: var(--maincolor);
-    }
-
-    .c-text {
-      font-size: 2rem;
-      transform: skewY(-3deg);
-    }
-
-    .c-link {
-      font-family: "Jera on Air";
-      text-transform: uppercase;
-      font-size: 6rem;
-      text-decoration: none;
-      color: var(--maincolor);
-      transform: skewY(-3deg);
-      opacity: 0.5;
-      margin-left: 24px;
-    }
-
-    .c-link:hover {
-      opacity: 1;
-    }
-
-    .c-spotify-embed {
-      border-radius: 12px;
-    }
-
-    .u-highlight-text {
-      font-weight: bold;
-      color: var(--supportcolor);
-    }
-
-    .u-monospace {
-      display: inline-flex;
-      justify-content: center;
-    }
-
-    .u-monospace span {
-      display: inline-block;
-      width: 1ch;
-      text-align: center;
-    }
-
-    .u-visually-hidden {
-      clip: rect(0 0 0 0);
-      clip-path: inset(50%);
-      height: 1px;
-      overflow: hidden;
-      position: absolute;
-      white-space: nowrap;
-      width: 1px;
-    }
-
-    .u-prevent-break {
-      display: inline-block;
-    }
-
-    @media only screen and (min-width: 656px) {
-      .c-layout {
-        padding: 48px;
-      }
-
-      .c-title {
-        font-size: 5rem;
-      }
-
-      .c-link {
-        position: absolute;
-        bottom: 20%;
-        right: 20%;
-        margin: 0;
-      }
+      --color-background: var(--backcolor);
+      --color-text: var(--maincolor);
+      --color-footer-text: #1d1e1c;
+      --color-menu-background: var(--headerfooterbgcolor);
+      --color-hover: var(--hovercolor);
+      --color-support: var(--backdrop1);
     }
   </style>
 </head>
 
 <body>
+  <nav class="c-menu">
+    <button id="menu-toggle" aria-label="Menu" aria-expanded="false" class="c-menu__hamburger-button">
+      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve"
+        class="c-menu__hamburger-button-bg">
+        <path fill="currentColor" class="st0" d="M49.1,24c0,0.5,0,1,0,1.5s0,0.9-0.1,1.4c-0.1,0.9-0.2,1.7-0.3,2.4c-0.1,0.7-0.3,1.4-0.5,2.1
+          c-0.2,0.7-0.4,1.3-0.6,2c-0.7,2-1.7,3.8-2.9,5.5c-0.4,0.6-0.8,1.1-1.3,1.6c-0.4,0.5-0.9,1-1.4,1.5c-0.5,0.5-1,0.9-1.5,1.3
+          c-0.5,0.4-1.1,0.8-1.7,1.2s-1.2,0.7-1.7,1.1c-0.6,0.3-1.2,0.7-1.8,1c-0.6,0.3-1.3,0.6-1.9,0.9c-0.6,0.3-1.3,0.5-2,0.7
+          c-0.7,0.2-1.4,0.4-2.1,0.5c-0.7,0.1-1.4,0.2-2.1,0.3c-0.7,0.1-1.5,0.1-2.2,0.1c-2.2,0-4.4-0.3-6.4-0.9c-0.7-0.2-1.3-0.4-2-0.6
+          c-0.7-0.2-1.3-0.5-2-0.7c-0.7-0.2-1.3-0.5-2-0.7c-0.6-0.2-1.2-0.5-1.7-0.8c-0.5-0.3-1-0.6-1.4-1s-0.8-0.8-1.2-1.2
+          c-0.4-0.4-0.8-0.9-1.1-1.5s-0.7-1.2-1.1-1.8c-0.2-0.3-0.4-0.7-0.5-1C5.3,38.4,5.2,38,5,37.7c-0.2-0.4-0.4-0.7-0.5-1.1
+          c-0.2-0.4-0.4-0.7-0.5-1.1c-0.2-0.4-0.4-0.7-0.6-1.1c-0.2-0.4-0.4-0.7-0.6-1c-0.4-0.7-0.7-1.3-1-2c-0.2-0.5-0.3-1-0.4-1.5
+          c-0.1-0.5-0.2-1.1-0.3-1.6S1,27.2,0.9,26.7c0-0.5-0.1-1.1-0.1-1.7c0-0.7,0-1.5,0.1-2.2c0.1-0.7,0.2-1.5,0.3-2.3
+          c0.1-0.4,0.2-0.8,0.3-1.2c0.1-0.4,0.2-0.8,0.4-1.2c0.1-0.4,0.3-0.8,0.5-1.3c0.2-0.4,0.3-0.8,0.5-1.3c0.2-0.4,0.4-0.8,0.6-1.2
+          c0.2-0.4,0.4-0.8,0.6-1.1c0.4-0.7,0.8-1.4,1.1-2c0.4-0.6,0.7-1.1,1.1-1.6C6.6,9.2,7,8.7,7.4,8.3c0.4-0.4,0.8-0.8,1.2-1.1
+          s0.8-0.7,1.3-1s0.9-0.7,1.4-1c0.5-0.4,1-0.7,1.6-1c0.6-0.3,1.2-0.7,1.8-1c0.6-0.3,1.3-0.6,1.9-0.8c1.3-0.5,2.7-0.9,4.1-1.1
+          c0.5-0.1,0.9-0.2,1.4-0.2c0.5-0.1,1-0.1,1.5-0.1c0.5,0,1,0,1.6,0c0.8,0,1.6,0,2.5,0.1C28,1,28.4,1,28.8,1.1s0.8,0.1,1.2,0.1
+          c0.8,0.1,1.6,0.2,2.3,0.4s1.4,0.4,2,0.6c0.6,0.2,1.2,0.5,1.8,0.8c0.6,0.3,1.1,0.7,1.6,1.1s0.9,0.9,1.4,1.4c0.4,0.5,0.9,1,1.3,1.6
+          s0.9,1.1,1.3,1.7c0.5,0.6,0.9,1.1,1.3,1.6c0.4,0.4,0.9,0.8,1.3,1.2c0.4,0.3,0.7,0.6,1,0.9s0.6,0.6,0.9,0.9c0.3,0.3,0.6,0.6,0.8,1
+          c0.3,0.3,0.5,0.7,0.7,1.2c0.2,0.5,0.4,1,0.5,1.5c0.1,0.6,0.3,1.2,0.4,2c0.1,0.7,0.2,1.5,0.2,2.4c0,0.4,0.1,0.9,0.1,1.3
+          S49.1,23.5,49.1,24z"></path>
+      </svg>
+      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"
+        class="c-menu__hamburger-button-icon">
+        <path fill="currentColor" d="M22,7.3c0,0-0.5,0-1.2,0c-0.4,0-0.9,0-1.4-0.1c-0.5,0-1.1-0.1-1.8-0.1c-0.5,0-1.1,0-1.6,0c-0.3,0-0.7,0.1-1,0.1
+          s-0.7,0.1-1.1,0.1c-0.4,0-0.7,0.1-1.1,0.2c-0.4,0.1-0.7,0.1-1.1,0.1c-0.4,0-0.7,0.1-1.1,0.1c-0.4,0-0.7,0.1-1.1,0.1
+          C9.2,7.9,8.8,8,8.5,8C8.1,8,7.8,8,7.4,8.1c-0.3,0-0.7,0-1,0c-0.3,0-0.7,0-1,0c-0.3,0-0.6,0-0.9,0c-0.3,0-0.6,0-0.8,0
+          c-0.5,0-0.9,0-1.3,0.1c-0.7,0-1.1,0.1-1.1,0.1C1,8.3,0.7,8,0.6,7.7L0.5,5.2c0-0.3,0.2-0.6,0.6-0.7c0,0,0.4,0,1.1-0.1
+          c0.4,0,0.8-0.1,1.3-0.1c0.3,0,0.5,0,0.8,0c0.3,0,0.6,0,0.9,0s0.6,0,1,0c0.3,0,0.7,0,1,0c0.3,0,0.7,0,1-0.1c0.4,0,0.7,0,1.1-0.1
+          c0.4,0,0.7-0.1,1.1-0.1C10.7,4,11.1,4,11.4,4c0.4,0,0.7-0.1,1.1-0.1c0.4-0.1,0.7-0.1,1.1-0.1s0.7-0.1,1.1-0.1c0.3,0,0.6,0,1,0
+          c0.3,0,0.6,0,0.9,0c0.6,0.1,1.2,0.1,1.7,0.2c0.5,0.1,1,0.1,1.4,0.2C20.2,4,20.5,4,20.8,4c0.6,0,1,0,1,0c0.3,0,0.6,0.2,0.6,0.5
+          c0,0,0,0.6,0.1,1.1c0,0.5,0.1,1.1,0.1,1.1C22.6,7,22.4,7.3,22,7.3z M22.3,10c0,0-0.4,0-1,0c-0.3,0-0.7,0-1.2,0c-0.5,0-1,0-1.5,0.1
+          c-0.5,0-0.9,0.1-1.4,0.1c-0.3,0-0.6,0-0.9,0.1c-0.3,0-0.6,0-0.9,0.1c-0.3,0-0.7,0-1,0c-0.3,0-0.7,0-1,0c-0.3,0-0.7,0-1,0
+          c-0.4,0-0.7,0-1.1,0c-0.4,0-0.7,0-1.1,0.1s-0.7,0.1-1.1,0.1c-0.4,0-0.7,0.1-1.1,0.2c-0.4,0.1-0.7,0.1-1.1,0.2C6.3,11,6,11,5.7,11.1
+          c-0.3,0.1-0.6,0.1-0.9,0.1c-0.3,0-0.6,0.1-0.8,0.1c-0.5,0-0.9,0.1-1.3,0.1c-0.7,0-1.1,0.1-1.1,0.1c-0.3,0-0.6,0.3-0.6,0.7
+          c0,0,0,0.6,0,1.3c0,0.6,0.1,1.3,0.1,1.3c0,0.4,0.3,0.6,0.6,0.6c0,0,0.4,0,1.1,0c0.4,0,0.8,0,1.3-0.1c0.3,0,0.5-0.1,0.8-0.1
+          c0.3-0.1,0.6-0.1,0.9-0.2c0.3-0.1,0.7-0.2,1-0.2c0.4-0.1,0.7-0.2,1.1-0.2s0.8-0.2,1.1-0.2c0.4-0.1,0.8-0.1,1.1-0.1
+          c0.4,0,0.7,0,1.1,0c0.4,0,0.7,0,1.1,0c0.3,0,0.7,0,1,0c0.3,0,0.7,0,1,0c0.3,0,0.7,0,1,0s0.7,0,1-0.1c0.3,0,0.7-0.1,1-0.1
+          c0.5-0.1,1-0.1,1.4-0.2c0.5-0.1,1.1-0.1,1.5-0.1c0.4,0,0.8-0.1,1.2-0.1c0.6,0,1,0,1,0c0.3,0,0.6-0.3,0.6-0.6c0,0,0-0.6-0.1-1.1
+          c0-0.6-0.1-1.1-0.1-1.1C22.9,10.3,22.6,10,22.3,10z M22.7,15.7c0,0-0.4,0-1.2,0.1c-0.4,0-0.8,0.1-1.4,0.1c-0.3,0-0.5,0.1-0.8,0.1
+          c-0.3,0-0.6,0.1-0.9,0.2c-0.3,0-0.6,0.1-0.9,0.1c-0.3,0-0.6,0.1-0.9,0.1c-0.3,0-0.6,0.1-0.9,0.1c-0.3,0-0.7,0.1-1.1,0.1
+          c-0.4,0-0.7,0.1-1.1,0.1c-0.4,0-0.7,0.1-1.1,0.1c-0.4,0-0.7,0-1.1,0c-0.4,0-0.7,0-1.1,0c-0.4,0-0.7,0.1-1.1,0.1
+          c-0.4,0-0.7,0.1-1.1,0.1c-0.4,0.1-0.7,0.1-1,0.2c-0.3,0.1-0.7,0.1-1,0.1c-0.3,0-0.6,0.1-0.9,0.1c-0.5,0.1-0.9,0.1-1.3,0.1
+          c-0.6,0-1.1,0.1-1.4,0.1s-0.5,0-0.5,0c-0.3,0-0.6,0.3-0.5,0.6c0,0,0.1,0.6,0.1,1.2c0.1,0.6,0.1,1.2,0.1,1.2c0,0.3,0.3,0.6,0.7,0.6
+          c0,0,0.5,0,1.4-0.1c0.4,0,1-0.1,1.6-0.2c0.3,0,0.6-0.1,1-0.1c0.3,0,0.7-0.1,1.1-0.1c0.3,0,0.7-0.1,1-0.1c0.3,0,0.7-0.1,1-0.1
+          c0.4,0,0.7,0,1.1-0.1c0.4,0,0.7,0,1.1,0c0.4,0,0.7,0,1.1-0.1c0.4,0,0.7-0.1,1.1-0.1c0.4,0,0.7-0.1,1.1-0.1c0.4,0,0.7-0.1,1.1-0.1
+          c0.3,0,0.6-0.1,1-0.1c0.3,0,0.6-0.1,0.9-0.2c0.3-0.1,0.6-0.1,0.9-0.2c0.3-0.1,0.5-0.1,0.8-0.2c0.5-0.1,1-0.2,1.4-0.2
+          s0.8-0.1,1.1-0.1c0.6-0.1,1-0.1,1-0.1c0.3,0,0.6-0.3,0.6-0.6c0,0,0-0.6-0.1-1.2c0-0.6-0.1-1.1-0.1-1.1C23.4,16,23.1,15.7,22.7,15.7z
+          "></path>
+      </svg>
+    </button>
+    <ul id="menu" aria-hidden="true" class="c-menu__list">
+      <li>
+        <a href="/2023">2023</a>
+      </li>
+      <li>
+        <a href="/">2024</a>
+      </li>
+      <li>
+        <a href="https://www.jeraonair.nl/nl/line-up/" target="_blank">Line up</a>
+      </li>
+    </ul>
+  </nav>
+
   <h1 class="u-visually-hidden">
     Hoeveel vrouwen spelen er komende editie op
     <span class="u-prevent-break">Jera on Air</span>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..7093650
--- /dev/null
+++ b/style.css
@@ -0,0 +1,193 @@
+@font-face {
+  font-family: "block";
+  src: url(https://hoeveelvrouwenopjera.nl/blocktregcon-webfont.woff2);
+}
+
+@font-face {
+  font-family: "Jera on Air";
+  src: url(https://hoeveelvrouwenopjera.nl/jera-font-air-webfont.woff2);
+}
+
+*::selection {
+  background-color: var(--color-hover);
+}
+
+html {
+  font-family: "block";
+  font-size: 1rem;
+  background-color: var(--color-background);
+  color: var(--color-text);
+  height: 100%;
+  line-height: 1.2;
+  text-rendering: optimizeLegibility !important;
+  font-smooth: always !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  height: 100%;
+  position: relative;
+  margin: 0;
+  font-size: 2rem;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--color-text);
+}
+
+.c-layout {
+  max-width: 51rem;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.c-footer {
+  width: 100%;
+  text-align: right;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  font-size: 1rem;
+  color: var(--color-footer-text);
+}
+
+.c-footer__content {
+  padding: 8px 12px;
+}
+
+.c-title {
+  font-size: 3.4rem;
+  transform: skewY(-3deg);
+  color: var(--color-hover);
+}
+
+.c-title::selection,
+.c-title *::selection {
+  background-color: var(--color-text);
+}
+
+.c-text {
+  transform: skewY(-3deg);
+}
+
+.c-link {
+  font-family: "Jera on Air";
+  text-transform: uppercase;
+  font-size: 6rem;
+  text-decoration: none;
+  color: var(--color-text);
+  transform: skewY(-3deg);
+  opacity: 0.5;
+  margin-left: 24px;
+}
+
+.c-link:hover {
+  opacity: 1;
+}
+
+.c-spotify-embed {
+  border-radius: 12px;
+}
+
+.c-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+}
+
+.c-menu__hamburger-button {
+  height: 70px;
+  width: 70px;
+  text-align: center;
+  box-sizing: border-box;
+  cursor: pointer !important;
+  position: relative;
+  transition: margin 300ms ease-out;
+  background: transparent;
+  border: none;
+  color: var(--color-text);
+}
+
+.c-menu__hamburger-button:hover,
+.c-menu__hamburger-button:focus {
+  color: var(--color-hover);
+}
+
+.c-menu__hamburger-button-bg {
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.c-menu__hamburger-button-icon {
+  color: var(--color-menu-background);
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  display: block;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
+  width: 30px;
+  height: 30px;
+  z-index: 2;
+}
+
+.u-highlight-text {
+  font-weight: bold;
+  color: var(--color-support);
+}
+
+.u-monospace {
+  display: inline-flex;
+  justify-content: center;
+}
+
+.u-monospace span {
+  display: inline-block;
+  width: 1ch;
+  text-align: center;
+}
+
+.u-visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.u-prevent-break {
+  display: inline-block;
+}
+
+@media only screen and (min-width: 656px) {
+  .c-layout {
+    padding: 48px;
+  }
+
+  .c-title {
+    font-size: 5rem;
+  }
+
+  .c-link {
+    position: absolute;
+    bottom: 20%;
+    right: 20%;
+    margin: 0;
+  }
+}
\ No newline at end of file