diff --git a/index.html b/index.html
index 4ee069b..611a978 100644
--- a/index.html
+++ b/index.html
@@ -43,12 +43,12 @@
         <link rel="stylesheet" href="styles/animation.css">
         <script src="scripts/timeline.js"></script>
         <script>
-            console.log('%cŠtěpán Jákl | Full-stack developer & interface designer', `border: 1px solid #4e7bff; border-radius: 2px; color: #4e7bff; font-size: 12.5px; padding: 22.5px 35px 20px 35px; margin: 20px 20px; /* padding: 29.75px 30px 29.75px 84px; background-image: url("data:image/svg+xml,%3Csvg width='100%' height='100%' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 40V10.033L10.033 0H40V30L30 40H0ZM10 30V25H22.5L25 22.5H10V17.5H30V25L25 30H10ZM15 10H30V15H10L15 10Z' fill='%234e7bff'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: 20px 50%; background-size: 40px 40px */`)
-            console.log('%cThis website was created with HTML, CSS and sprinkled with a bit of vanilla JavaScript.', 'color: #4e7bff; margin: 15px 0 15px 20px;')
-            console.log('%cThe ambition has been to create a performant, pixel-perfect and responsive site.', 'color: #4e7bff; margin: 15px 0 15px 20px;')
-            console.log('%cNo framework, no compiler, no site generator - only pure joy.', 'color: #4e7bff; margin: 15px 0 15px 20px;')
-            /* console.log('%cMade with tears, stress and anxiety. Just joking, of course it was crafted with love ;-)', 'color: #4e7bff; margin: 15px 0 15px 20px;') */
-            console.log('%cInterested in working together? Reach out to me via email at %cstepan.jakl@outlook.com', 'color: #4e7bff; margin: 15px 0 15px 20px;', 'color: #4e7bff; text-decoration: underline;')
+            console.log('%cŠtěpán Jákl | Full-stack developer & interface designer', `border: max(1px, 0.0625rem) solid #4e7bff; border-radius: 0.125rem; color: #4e7bff; font-size: 0.78125rem; padding: 1.40625rem 2.1875rem 1.25rem 2.1875rem; margin: 1.25rem 1.25rem; /* padding: 1.859375rem 1.875rem 1.859375rem 5.25rem; background-image: url("data:image/svg+xml,%3Csvg width='100%' height='100%' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 40V10.033L10.033 0H40V30L30 40H0ZM10 30V25H22.5L25 22.5H10V17.5H30V25L25 30H10ZM15 10H30V15H10L15 10Z' fill='%234e7bff'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: 1.25rem 50%; background-size: 2.5rem 2.5rem */`)
+            console.log('%cThis website was created with HTML, CSS and sprinkled with a bit of vanilla JavaScript.', 'color: #4e7bff; margin: 0.9375rem 0 0.9375rem 1.25rem;')
+            console.log('%cThe ambition has been to create a performant, pixel-perfect and responsive site.', 'color: #4e7bff; margin: 0.9375rem 0 0.9375rem 1.25rem;')
+            console.log('%cNo framework, no compiler, no site generator - only pure joy.', 'color: #4e7bff; margin: 0.9375rem 0 0.9375rem 1.25rem;')
+            /* console.log('%cMade with tears, stress and anxiety. Just joking, of course it was crafted with love ;-)', 'color: #4e7bff; margin: 0.9375rem 0 0.9375rem 1.25rem;') */
+            console.log('%cInterested in working together? Reach out to me via email at %cstepan.jakl@outlook.com', 'color: #4e7bff; margin: 0.9375rem 0 0.9375rem 1.25rem;', 'color: #4e7bff; text-decoration: underline;')
         </script>
         <script>
             const activateHighlight = (elementToSwapText, elementToHighlight, tempInnerText) => {
@@ -261,7 +261,7 @@
                     <div id="intro_left-column"
                          class="z-1 flex flex-col-reverse align-items-start">
                         <h2 class="inline-flex animate-fade-in-name select-none highlight tooltip_wrapper"
-                            onmousedown="if ((event.which && event.which == 3) || (event.button && event.button == 2)) { if ('speechSynthesis' in window) { let msg = new SpeechSynthesisUtterance(); msg.lang = 'cs-CZ'; msg.voice = speechSynthesis.getVoices().filter(voice => voice.name === 'Zuzana')[0]; msg.text = 'Štěpán Jákl'; speechSynthesis.speak(msg) } } else { navigator.clipboard.writeText('Štěpán Jákl'); activateHighlight(this.querySelector('.tooltip-bottom'), this, 'Copied to the clipboard') }"
+                            onmousedown="if ((event.which && event.which == 3) || (event.button && event.button == 2)) { if ('speechSynthesis' in window) { let msg = new SpeechSynthesisUtterance(); msg.volume= 0.25; msg.lang = 'cs-CZ'; msg.voice = speechSynthesis.getVoices().filter(voice => voice.name === 'Zuzana')[0]; msg.text = 'Štěpán Jákl'; speechSynthesis.speak(msg) } } else { navigator.clipboard.writeText('Štěpán Jákl'); activateHighlight(this.querySelector('.tooltip-bottom'), this, 'Copied to the clipboard') }"
                             tabindex="0"
                             role="button"
                             aria-label="Click to copy name to clipboard">
@@ -290,7 +290,7 @@
                         </h3>
                         <h3 id="intro_right-column_title--secondary"
                             class="inline-flex animate-fade-in-title select-none"
-                            style="letter-spacing: 1.5px">
+                            style="letter-spacing: 0.09375rem">
                             <span style="--i:22">&</span><span style="--i:23">&nbsp;</span><span style="--i:24">i</span><span style="--i:25">n</span><span style="--i:26">t</span><span style="--i:27">e</span><span style="--i:28">r</span><span style="--i:29">f</span><span style="--i:30">a</span><span style="--i:31">c</span><span style="--i:32">e</span><span style="--i:33">&nbsp;</span><span class="highlight-alt" style="--i:34">d</span><span class="highlight-alt" style="--i:35">e</span><span class="highlight-alt" style="--i:36">s</span><span class="highlight-alt" style="--i:37">i</span><span class="highlight-alt" style="--i:38">g</span><span class="highlight-alt" style="--i:39">n</span><span class="highlight-alt" style="--i:40">e</span><span class="highlight-alt" style="--i:41">r</span>
                         </h3>
                         <div id="availability_button"
@@ -301,11 +301,11 @@
                                    rel="noreferrer"
                                    aria-label="Open to new opportunities, book a virtual meeting"
                                    class="relative z-0 flex overflow-hidden"
-                                   style="padding: 11px 15px;
+                                   style="padding: 0.6875rem 0.9375rem;
                                           background-color: var(--highlight-primary);
-                                          border-radius: 8px">
+                                          border-radius: 0.5rem">
                                     <div class="inline-flex justify-content-center align-items-center tooltip_wrapper"
-                                         style="column-gap: 14px">
+                                         style="column-gap: 0.875rem">
                                         <span id="availability_button_dot"
                                               class="relative flex justify-content-center align-items-center rounded-full"></span>
                                         <span id="availability_button_text"
@@ -327,7 +327,7 @@
                                      tabindex="0"
                                      aria-label="Contact me via email">
                                     <span class="inline-flex rounded-full"
-                                          style="padding: 10px;
+                                          style="padding: 0.625rem;
                                                  background-color: var(--inner-bg-dark-1)">
                                         <!-- 'opsz' 20, 'wght' 700, 'FILL' 1, 'GRAD' 200 -->
                                         <svg width="18"
@@ -335,14 +335,14 @@
                                              fill="currentColor"
                                              viewBox="0 0 20 20"
                                              xmlns="http://www.w3.org/2000/svg"
-                                             style="width: 18px;
-                                                    height: 18px">
+                                             style="width: 1.125rem;
+                                                    height: 1.125rem">
                                             <path d="M2.188 16.813v-4.209l7.145-2.646-7.146-2.625V3.125l16.834 6.854-16.834 6.834Z">
                                         </svg>
                                     </span>
                                     <span class="text-sm cursor-text select-none button-label highlight-hover"
-                                          style="padding: 0px 24px 0px 16px;
-                                                 letter-spacing: 1.25px">stepan.jakl@outlook.com</span>
+                                          style="padding: 0rem 1.5rem 0rem 1rem;
+                                                 letter-spacing: 0.078125rem">stepan.jakl@outlook.com</span>
                                     <div class="tooltip-top tooltip">
                                         <span>Click to copy</span>
                                     </div>
@@ -355,11 +355,11 @@
                                    class="flex align-items-center tooltip_wrapper">
                                     <span id="menu_link_icon"
                                           class="inline-flex rounded-full"
-                                          style="padding: 9.5px;
+                                          style="padding: 0.59375rem;
                                                  background-color: var(--inner-bg-dark-1)">
                                         <svg class="animate-face-icon"
-                                             style="width: 19px;
-                                                    height: 19px"
+                                             style="width: 1.1875rem;
+                                                    height: 1.1875rem"
                                              height="100%"
                                              width="100%"
                                              viewBox="0 0 40 40"
@@ -370,12 +370,12 @@
                                     </span>
                                     <span id="menu_link_text_wrapper">
                                         <span class="text-xs uppercase select-none button-label"
-                                              style="border-bottom: solid 2px var(--highlight-primary)">
-                                            <u style="text-decoration-thickness: 2px;
+                                              style="border-bottom: solid 0.125rem var(--highlight-primary)">
+                                            <u style="text-decoration-thickness: 0.125rem;
                                                       text-decoration-style: dotted;
                                                       text-decoration-color: transparent;
                                                       text-underline-position: from-font;
-                                                      text-underline-offset: 2px;
+                                                      text-underline-offset: 0.125rem;
                                                       text-decoration-skip-ink: none">P</u><span>rofile</span>
                                         </span>
                                     </span>
@@ -392,10 +392,10 @@
                                    disabled>
                                     <span id="menu_link_icon"
                                           class="inline-flex rounded-full"
-                                          style="padding: 10.5px;
+                                          style="padding: 0.65625rem;
                                                  background-color: var(--inner-bg-dark-1)">
-                                        <svg style="width: 17px;
-                                                    height: 17px"
+                                        <svg style="width: 1.0625rem;
+                                                    height: 1.0625rem"
                                              width="100%"
                                              height="100%"
                                              fill="currentColor"
@@ -406,11 +406,11 @@
                                     </span>
                                     <span id="menu_link_text_wrapper"
                                           class="text-xs uppercase select-none button-label">
-                                        <u style="text-decoration-thickness: 2px;
+                                        <u style="text-decoration-thickness: 0.125rem;
                                                   text-decoration-style: dotted;
                                                   text-decoration-color: var(--text-3);
                                                   text-underline-position: from-font;
-                                                  text-underline-offset: 2px;
+                                                  text-underline-offset: 0.125rem;
                                                   text-decoration-skip-ink: none">A</u><span>rchive</span></span>
                                         <span class="tooltip-bottom tooltip">
                                             <span>WIP - Coming soon...</span>
@@ -458,21 +458,21 @@
                                                      width="24"
                                                      viewBox="0 0 24 24"
                                                      fill="currentColor"
-                                                     style="width: 24px;
-                                                            height: 24px">
+                                                     style="width: 1.5rem;
+                                                            height: 1.5rem">
                                                     <path d="M12 23v-2h7v-1h-4v-8h4v-1q0-2.9-2.05-4.95Q14.9 4 12 4 9.1 4 7.05 6.05 5 8.1 5 11v1h4v8H3v-9q0-1.85.712-3.488.713-1.637 1.938-2.862t2.862-1.938Q10.15 2 12 2t3.488.712q1.637.713 2.862 1.938t1.938 2.862Q21 9.15 21 11v12Z">
                                                 </svg>
                                                 <span class="text-sm whitespace-nowrap">Virtual meeting</span>
                                                 <!-- 'opsz' 20, 'wght' 200, 'FILL' 1, 'GRAD' 200 -->
                                                 <svg class="box-content ml-auto"
-                                                     style="padding-left: 12px"
+                                                     style="padding-left: 0.75rem"
                                                      xmlns="http://www.w3.org/2000/svg"
                                                      height="20"
                                                      width="20"
                                                      viewBox="0 0 20 20"
                                                      fill="currentColor"
-                                                     style="width: 20px;
-                                                            height: 20px">
+                                                     style="width: 1.25rem;
+                                                            height: 1.25rem">
                                                     <path d="M2.667 17.333V2.667h7.166v1.458H4.125v11.75h11.75v-5.708h1.458v7.166Zm5.416-4.375-1.041-1.041 7.812-7.792h-2.625V2.667h5.104v5.104h-1.458V5.146Z">
                                                 </svg>
                                             </a>
@@ -484,20 +484,20 @@
                                                      width="24"
                                                      viewBox="0 0 24 24"
                                                      fill="currentColor"
-                                                     style="width: 24px;
-                                                            height: 24px">
+                                                     style="width: 1.5rem;
+                                                            height: 1.5rem">
                                                     <path d="M14 13.5h4V12h-4Zm0 3h4V15h-4ZM15 7h7v15H2V7h7V2h6Zm-4 2h2V4h-2Zm-2 6q.625 0 1.062-.438.438-.437.438-1.062t-.438-1.062Q9.625 12 9 12t-1.062.438Q7.5 12.875 7.5 13.5t.438 1.062Q8.375 15 9 15Zm-3 3h6v-.45q0-.425-.238-.788-.237-.362-.662-.562-.5-.225-1.012-.337Q9.575 15.75 9 15.75q-.575 0-1.087.113-.513.112-1.013.337-.425.2-.662.562Q6 17.125 6 17.55Z">
                                                 </svg>
                                                 <span class="text-sm whitespace-nowrap">LinkedIn profile</span>
                                                 <svg class="box-content ml-auto"
-                                                     style="padding-left: 12px"
+                                                     style="padding-left: 0.75rem"
                                                      xmlns="http://www.w3.org/2000/svg"
                                                      height="20"
                                                      width="20"
                                                      viewBox="0 0 20 20"
                                                      fill="currentColor"
-                                                     style="width: 20px;
-                                                            height: 20px">
+                                                     style="width: 1.25rem;
+                                                            height: 1.25rem">
                                                     <path d="M2.667 17.333V2.667h7.166v1.458H4.125v11.75h11.75v-5.708h1.458v7.166Zm5.416-4.375-1.041-1.041 7.812-7.792h-2.625V2.667h5.104v5.104h-1.458V5.146Z">
                                                 </svg>
                                             </a>
@@ -510,33 +510,33 @@
                                                      width="24"
                                                      viewBox="0 0 24 24"
                                                      fill="currentColor"
-                                                     style="width: 24px;
-                                                            height: 24px">
+                                                     style="width: 1.5rem;
+                                                            height: 1.5rem">
                                                     <path d="M2 20V4h20v16Zm2-2h16V8H4Zm8-1v-2h6v2Zm-4.5 0-1.4-1.4L8.675 13l-2.6-2.6L7.5 9l4 4Z">
                                                 </svg>
                                                 <span class="text-sm whitespace-nowrap">GitHub profile</span>
                                                 <svg class="box-content ml-auto"
-                                                     style="padding-left: 12px"
+                                                     style="padding-left: 0.75rem"
                                                      xmlns="http://www.w3.org/2000/svg"
                                                      height="20"
                                                      width="20"
                                                      viewBox="0 0 20 20"
                                                      fill="currentColor"
-                                                     style="width: 20px;
-                                                            height: 20px">
+                                                     style="width: 1.25rem;
+                                                            height: 1.25rem">
                                                     <path d="M2.667 17.333V2.667h7.166v1.458H4.125v11.75h11.75v-5.708h1.458v7.166Zm5.416-4.375-1.041-1.041 7.812-7.792h-2.625V2.667h5.104v5.104h-1.458V5.146Z">
                                                 </svg>
                                             </a>
                                             <hr style="width: 100%;
-                                                       height: 8px;
-                                                       margin: 0px 1px 0px 1px;
+                                                       height: 0.5rem;
+                                                       margin: 0rem max(1px, 0.0625rem) 0rem max(1px, 0.0625rem);
                                                        border: 0;
                                                        background-color: rgba(0, 0, 0, 0.15);
-                                                       /* background-color: rgba(23, 28, 30, 0.375);
-                                                       */ box-shadow: 0 -1px 0 0 var(--context-border-inner);
-                                                       border-top: solid 1px var(--context-border-outer);
+                                                       /* background-color: rgba(23, 28, 30, 0.375); */
+                                                       box-shadow: 0 min(-1px, -0.0625rem) 0 0 var(--context-border-inner);
+                                                       border-top: solid max(1px, 0.0625rem) var(--context-border-outer);
                                                        box-sizing: content-box;
-                                                       transform: translateX(-1px);
+                                                       transform: translateX(min(-1px, -0.0625rem));
                                                        overflow: visible">
                                             <label id="menu_dropdown_light-mode" for="mode" tabindex="0">
                                                 <svg xmlns="http://www.w3.org/2000/svg"
@@ -544,8 +544,8 @@
                                                      width="24"
                                                      viewBox="0 0 24 24"
                                                      fill="currentColor"
-                                                     style="width: 24px;
-                                                            height: 24px">
+                                                     style="width: 1.5rem;
+                                                            height: 1.5rem">
                                                     <path d="M11 4V1h2v3Zm0 19v-3h2v3Zm9-10v-2h3v2ZM1 13v-2h3v2Zm17.7-6.3-1.4-1.4 1.75-1.8 1.45 1.45ZM4.95 20.5 3.5 19.05l1.8-1.75 1.4 1.4Zm14.1 0-1.75-1.8 1.4-1.4 1.8 1.75ZM5.3 6.7 3.5 4.95 4.95 3.5 6.7 5.3ZM12 18q-2.5 0-4.25-1.75T6 12q0-2.5 1.75-4.25T12 6q2.5 0 4.25 1.75T18 12q0 2.5-1.75 4.25T12 18Z">
                                                 </svg>
                                                 <span class="text-sm whitespace-nowrap">Light mode</span>
@@ -557,8 +557,8 @@
                                                      width="24"
                                                      viewBox="0 0 24 24"
                                                      fill="currentColor"
-                                                     style="width: 24px;
-                                                            height: 24px">
+                                                     style="width: 1.5rem;
+                                                            height: 1.5rem">
                                                     <path d="M13.1 23q-2.1 0-3.938-.8-1.837-.8-3.199-2.162Q4.6 18.675 3.8 16.837 3 15 3 12.9q0-3.65 2.325-6.438Q7.65 3.675 11.25 3q-.45 2.475.275 4.837.725 2.363 2.5 4.138t4.138 2.5q2.362.725 4.837.275-.65 3.6-3.45 5.925Q16.75 23 13.1 23Z">
                                                 </svg>
                                                 <span class="text-sm whitespace-nowrap">Dark mode</span>
@@ -571,8 +571,8 @@
                                                      width="24"
                                                      viewBox="0 0 24 24"
                                                      fill="currentColor"
-                                                     style="width: 24px;
-                                                            height: 24px">
+                                                     style="width: 1.5rem;
+                                                            height: 1.5rem">
                                                     <path d="M12 16q1.875 0 3.188-1.312Q16.5 13.375 16.5 11.5q0-1.875-1.312-3.188Q13.875 7 12 7q-1.875 0-3.188 1.312Q7.5 9.625 7.5 11.5q0 1.875 1.312 3.188Q10.125 16 12 16Zm0-1.8q-1.125 0-1.912-.788Q9.3 12.625 9.3 11.5t.788-1.913Q10.875 8.8 12 8.8t1.913.787q.787.788.787 1.913t-.787 1.912q-.788.788-1.913.788Zm0 4.8q-3.65 0-6.65-2.038-3-2.037-4.35-5.462 1.35-3.425 4.35-5.463Q8.35 4 12 4q3.65 0 6.65 2.037 3 2.038 4.35 5.463-1.35 3.425-4.35 5.462Q15.65 19 12 19Z">
                                                 </svg>
                                                 <svg class="debug-checked:flex hidden icon"
@@ -582,8 +582,8 @@
                                                      width="24"
                                                      viewBox="0 0 24 24"
                                                      fill="currentColor"
-                                                     style="width: 24px;
-                                                            height: 24px">
+                                                     style="width: 1.5rem;
+                                                            height: 1.5rem">
                                                     <path d="m19.8 22.6-4.2-4.15q-.875.275-1.762.413Q12.95 19 12 19q-3.775 0-6.725-2.087Q2.325 14.825 1 11.5q.525-1.325 1.325-2.463Q3.125 7.9 4.15 7L1.4 4.2l1.4-1.4 18.4 18.4ZM12 16q.275 0 .512-.025.238-.025.513-.1l-5.4-5.4q-.075.275-.1.513-.025.237-.025.512 0 1.875 1.312 3.188Q10.125 16 12 16Zm7.3.45-3.175-3.15q.175-.425.275-.862.1-.438.1-.938 0-1.875-1.312-3.188Q13.875 7 12 7q-.5 0-.938.1-.437.1-.862.3L7.65 4.85q1.025-.425 2.1-.638Q10.825 4 12 4q3.775 0 6.725 2.087Q21.675 8.175 23 11.5q-.575 1.475-1.512 2.738Q20.55 15.5 19.3 16.45Zm-4.625-4.6-3-3q.7-.125 1.288.112.587.238 1.012.688.425.45.613 1.038.187.587.087 1.162Z">
                                                 </svg>
                                                 <span class="text-sm whitespace-nowrap">Debug</span>
@@ -605,8 +605,8 @@
                                          width="20"
                                          viewBox="0 0 20 20"
                                          fill="currentColor"
-                                         style="width: 18px;
-                                                height: 18px">
+                                         style="width: 1.125rem;
+                                                height: 1.125rem">
                                         <path d="M6 15.708 4.333 14l3.979-4-3.979-4.021L6 4.271l4 4.021 4-4.021 1.667 1.708L11.688 10l3.979 4L14 15.708l-4-4.02Z">
                                     </svg>
                                 </a>
@@ -673,9 +673,9 @@
                                                          width="20"
                                                          height="15"
                                                          loading="lazy"
-                                                         style="border-radius: 2px;
-                                                                width: 20px;
-                                                                height: 15px">
+                                                         style="border-radius: 0.125rem;
+                                                                width: 1.25rem;
+                                                                height: 0.9375rem">
                                                 </a>
                                             </span>
                                         </dd>
@@ -694,9 +694,9 @@
                                                          width="20"
                                                          height="15"
                                                          loading="lazy"
-                                                         style="border-radius: 2px;
-                                                                width: 20px;
-                                                                height: 15px">
+                                                         style="border-radius: 0.125rem;
+                                                                width: 1.25rem;
+                                                                height: 0.9375rem">
                                                 </a>
                                             </span>
                                         </dd>
@@ -724,7 +724,7 @@
                                                 setInterval(liveTimezoneTime, 15000)
                                             </script>
                                         </dd>
-                                        <dt style="padding-top: 10px">
+                                        <dt style="padding-top: 0.625rem">
                                             Deliverables:
                                         </dt>
                                         <dd id="modal_profile_tags">
@@ -752,7 +752,7 @@
                                                 </li>
                                             </ul>
                                         </dd>
-                                        <dt style="padding-top: 10px">
+                                        <dt style="padding-top: 0.625rem">
                                             Tools & Languages:
                                         </dt>
                                         <dd id="modal_profile_tags">
@@ -764,8 +764,8 @@
                                                          viewBox="0 0 24 24"
                                                          fill="currentColor"
                                                          xmlns="http://www.w3.org/2000/svg"
-                                                         style="width: 14px;
-                                                                height: 14px">
+                                                         style="width: 0.875rem;
+                                                                height: 0.875rem">
                                                         <title>Apostrophe</title>
                                                         <path d="M15.674 0c-.795.001-1.794.095-3.167.313l-4.6.729c-3.138.497-4.224 1.003-5.274 1.798a6.485 6.485 0 00-2.24 3.082c-.43 1.245-.577 2.434-.08 5.571l.729 4.6c.497 3.138 1.003 4.22 1.798 5.273a6.485 6.485 0 003.082 2.24c1.245.431 2.434.578 5.571.081l4.6-.729c3.138-.497 4.22-1.003 5.273-1.799a6.477 6.477 0 002.24-3.081c.431-1.245.578-2.434.082-5.571l-.73-4.6c-.497-3.138-1.003-4.224-1.799-5.274a6.477 6.477 0 00-3.081-2.24C17.378.152 16.695 0 15.674 0zm-5.319 4.566a.52.52 0 01.003 0 .52.52 0 01.52.444l.77 4.865a.52.52 0 01-.435.6l-4.859.77a.52.52 0 01-.602-.436l-.77-4.866a.52.52 0 01.435-.6l4.86-.77a.52.52 0 01.078-.007zM9.92 5.692l-3.823.605.612 3.83 3.813-.605zm6.504 2.91a3.274 3.274 0 01.497 6.513 3.258 3.258 0 01-3.713-2.726 3.274 3.274 0 013.216-3.787zm-.054 1.058a2.226 2.226 0 10.388 4.42 2.208 2.208 0 001.818-2.541 2.226 2.226 0 00-2.206-1.879zm-6.45 3a.52.52 0 01.424.208l3.824 4.964a.52.52 0 01-.333.839l-5.932.937a.52.52 0 01-.576-.695l2.108-5.901a.52.52 0 01.486-.352zm.18 1.611L8.61 18.438l4.186-.664z">
                                                     </svg>
@@ -778,8 +778,8 @@
                                                          viewBox="0 0 24 24"
                                                          fill="currentColor"
                                                          xmlns="http://www.w3.org/2000/svg"
-                                                         style="width: 14px;
-                                                                height: 14px">
+                                                         style="width: 0.875rem;
+                                                                height: 0.875rem">
                                                         <title>Alpine.js</title>
                                                         <path d="m24 12-5.72 5.746-5.724-5.741 5.724-5.75L24 12zM5.72 6.254 0 12l5.72 5.746h11.44L5.72 6.254z">
                                                     </svg>
@@ -790,8 +790,8 @@
                                                          viewBox="0 0 24 24"
                                                          fill="currentColor"
                                                          xmlns="http://www.w3.org/2000/svg"
-                                                         style="width: 14px;
-                                                                height: 14px">
+                                                         style="width: 0.875rem;
+                                                                height: 0.875rem">
                                                         <title>Vue.js</title>
                                                         <path d="M24,1.61H14.06L12,5.16,9.94,1.61H0L12,22.39ZM12,14.08,5.16,2.23H9.59L12,6.41l2.41-4.18h4.43Z">
                                                     </svg>
@@ -802,8 +802,8 @@
                                                          viewBox="0 0 24 24"
                                                          fill="currentColor"
                                                          xmlns="http://www.w3.org/2000/svg"
-                                                         style="width: 14px;
-                                                                height: 14px">
+                                                         style="width: 0.875rem;
+                                                                height: 0.875rem">
                                                         <title>React</title>
                                                         <path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z">
                                                     </svg>
@@ -816,8 +816,8 @@
                                                          viewBox="0 0 24 24"
                                                          fill="currentColor"
                                                          xmlns="http://www.w3.org/2000/svg"
-                                                         style="width: 14px;
-                                                                height: 14px">
+                                                         style="width: 0.875rem;
+                                                                height: 0.875rem">
                                                         <title>Figma</title>
                                                         <path d="M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491zM12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0 1.471H8.148c-2.476 0-4.49-2.014-4.49-4.49S5.672 0 8.148 0h4.588v8.981zm-4.587-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.354 3.02 3.019 3.02h3.117V1.471H8.148zm4.587 15.019H8.148c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.98zM8.148 8.981c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.981H8.148zM8.172 24c-2.489 0-4.515-2.014-4.515-4.49s2.014-4.49 4.49-4.49h4.588v4.441c0 2.503-2.047 4.539-4.563 4.539zm-.024-7.51a3.023 3.023 0 0 0-3.019 3.019c0 1.665 1.365 3.019 3.044 3.019 1.705 0 3.093-1.376 3.093-3.068v-2.97H8.148zm7.704 0h-.098c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h.098c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.49-4.49 4.49zm-.097-7.509c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h.098c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-.098z">
                                                     </svg>
@@ -830,8 +830,8 @@
                                                          role="img"
                                                          fill="currentColor"
                                                          xmlns="http://www.w3.org/2000/svg"
-                                                         style="width: 14px;
-                                                                height: 14px">
+                                                         style="width: 0.875rem;
+                                                                height: 0.875rem">
                                                         <path d="M0 0h14v7H7zm0 7h7l7 7H7v7l-7-7z">
                                                         </path>
                                                     </svg>
@@ -844,8 +844,8 @@
                                                          viewBox="0 0 24 24"
                                                          fill="currentColor"
                                                          xmlns="http://www.w3.org/2000/svg"
-                                                         style="width: 14px;
-                                                                height: 14px">
+                                                         style="width: 0.875rem;
+                                                                height: 0.875rem">
                                                         <title>HTML5</title>
                                                         <path d="M1.5 0h21l-1.91 21.563L11.977 24l-8.564-2.438L1.5 0zm7.031 9.75l-.232-2.718 10.059.003.23-2.622L5.412 4.41l.698 8.01h9.126l-.326 3.426-2.91.804-2.955-.81-.188-2.11H6.248l.33 4.171L12 19.351l5.379-1.443.744-8.157H8.531z">
                                                     </svg>
@@ -856,8 +856,8 @@
                                                          viewBox="0 0 24 24"
                                                          fill="currentColor"
                                                          xmlns="http://www.w3.org/2000/svg"
-                                                         style="width: 14px;
-                                                                height: 14px">
+                                                         style="width: 0.875rem;
+                                                                height: 0.875rem">
                                                         <title>CSS3</title>
                                                         <path d="M1.5 0h21l-1.91 21.563L11.977 24l-8.565-2.438L1.5 0zm17.09 4.413L5.41 4.41l.213 2.622 10.125.002-.255 2.716h-6.64l.24 2.573h6.182l-.366 3.523-2.91.804-2.956-.81-.188-2.11h-2.61l.29 3.855L12 19.288l5.373-1.53L18.59 4.414z">
                                                     </svg>
@@ -868,8 +868,8 @@
                                                          viewBox="0 0 24 24"
                                                          fill="currentColor"
                                                          xmlns="http://www.w3.org/2000/svg"
-                                                         style="width: 14px;
-                                                                height: 14px">
+                                                         style="width: 0.875rem;
+                                                                height: 0.875rem">
                                                         <title>Tailwind CSS</title>
                                                         <path d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z">
                                                     </svg>
@@ -882,8 +882,8 @@
                                                          viewBox="0 0 24 24"
                                                          fill="currentColor"
                                                          xmlns="http://www.w3.org/2000/svg"
-                                                         style="width: 14px;
-                                                                height: 14px">
+                                                         style="width: 0.875rem;
+                                                                height: 0.875rem">
                                                         <title>Jamstack</title>
                                                         <path d="M12 0C5.365 0 0 5.364 0 12s5.365 12 12 12 12-5.364 12-12V0zm.496 3.318h8.17v8.17h-8.17zm-9.168 9.178h8.16v8.149c-4.382-.257-7.904-3.767-8.16-8.149zm9.168.016h8.152a8.684 8.684 0 01-8.152 8.148z">
                                                     </svg>
@@ -894,8 +894,8 @@
                                                          viewBox="0 0 24 24"
                                                          fill="currentColor"
                                                          xmlns="http://www.w3.org/2000/svg"
-                                                         style="width: 14px;
-                                                                height: 14px">
+                                                         style="width: 0.875rem;
+                                                                height: 0.875rem">
                                                         <title>Astro</title>
                                                         <path d="M8.358 20.162c-1.186-1.07-1.532-3.316-1.038-4.944.856 1.026 2.043 1.352 3.272 1.535 1.897.283 3.76.177 5.522-.678.202-.098.388-.229.608-.36.166.473.209.95.151 1.437-.14 1.185-.738 2.1-1.688 2.794-.38.277-.782.525-1.175.787-1.205.804-1.531 1.747-1.078 3.119l.044.148a3.158 3.158 0 0 1-1.407-1.188 3.31 3.31 0 0 1-.544-1.815c-.004-.32-.004-.642-.048-.958-.106-.769-.472-1.113-1.161-1.133-.707-.02-1.267.411-1.415 1.09-.012.053-.028.104-.045.165h.002zm-5.961-4.445s3.24-1.575 6.49-1.575l2.451-7.565c.092-.366.36-.614.662-.614.302 0 .57.248.662.614l2.45 7.565c3.85 0 6.491 1.575 6.491 1.575L16.088.727C15.93.285 15.663 0 15.303 0H8.697c-.36 0-.615.285-.784.727l-5.516 14.99z">
                                                     </svg>
@@ -908,8 +908,8 @@
                                                          viewBox="0 0 24 24"
                                                          fill="currentColor"
                                                          xmlns="http://www.w3.org/2000/svg"
-                                                         style="width: 14px;
-                                                                height: 14px">
+                                                         style="width: 0.875rem;
+                                                                height: 0.875rem">
                                                         <title>JavaScript</title>
                                                         <path d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z">
                                                     </svg>
@@ -922,8 +922,8 @@
                                                          viewBox="0 0 24 24"
                                                          fill="currentColor"
                                                          xmlns="http://www.w3.org/2000/svg"
-                                                         style="width: 14px;
-                                                                height: 14px">
+                                                         style="width: 0.875rem;
+                                                                height: 0.875rem">
                                                         <title>MongoDB</title>
                                                         <path d="M17.193 9.555c-1.264-5.58-4.252-7.414-4.573-8.115-.28-.394-.53-.954-.735-1.44-.036.495-.055.685-.523 1.184-.723.566-4.438 3.682-4.74 10.02-.282 5.912 4.27 9.435 4.888 9.884l.07.05A73.49 73.49 0 0111.91 24h.481c.114-1.032.284-2.056.51-3.07.417-.296.604-.463.85-.693a11.342 11.342 0 003.639-8.464c.01-.814-.103-1.662-.197-2.218zm-5.336 8.195s0-8.291.275-8.29c.213 0 .49 10.695.49 10.695-.381-.045-.765-1.76-.765-2.405z">
                                                     </svg>
@@ -957,114 +957,114 @@
                                          width="20"
                                          viewBox="0 0 20 20"
                                          fill="currentColor"
-                                         style="width: 20px;
-                                                height: 20px">
+                                         style="width: 1.25rem;
+                                                height: 1.25rem">
                                         <path d="M6 15.708 4.333 14l3.979-4-3.979-4.021L6 4.271l4 4.021 4-4.021 1.667 1.708L11.688 10l3.979 4L14 15.708l-4-4.02Z">
                                     </svg>
                                 </a>
                                 <div style="position: relative; height: 100%">
                                     <!-- overflow-y: scroll; -->
                                     <div style="height: 200vh;
-                                                padding-top: 48px;
-                                                padding-left: 48px;
-                                                padding-right: 96px">
-                                        <div class="flex flex-col" style="column-gap: 24px">
+                                                padding-top: 3rem;
+                                                padding-left: 3rem;
+                                                padding-right: 6rem">
+                                        <div class="flex flex-col" style="column-gap: 1.5rem">
                                             <div class="grid"
                                                  style="grid-auto-flow: row;
-                                                        grid-template-columns: minmax(240px, max-content) auto;
-                                                        gap: 48px">
+                                                        grid-template-columns: minmax(15rem, max-content) auto;
+                                                        gap: 3rem">
                                                 <div data-timeline-section="2023"
                                                      class="flex flex-col"
-                                                     style="outline: 1px solid red">
+                                                     style="outline: max(1px, 0.0625rem) solid red">
                                                     <div class="sticky flex flex-col align-items-end"
-                                                         style="row-gap: 20px;
+                                                         style="row-gap: 1.25rem;
                                                                 top: var(--modal-button-close-inset);
-                                                                padding-bottom: 20px">
+                                                                padding-bottom: 1.25rem">
                                                         <hr style="display: inline-flex;
                                                                    width: 100%;
                                                                    margin: 0;
                                                                    border: none;
-                                                                   height: 1px;
+                                                                   height: max(1px, 0.0625rem);
                                                                    background-color: white">
                                                         <span style="display: inline-flex;
                                                                      text-align: right;
                                                                      font-family: 'Chakra Petch', monospace;
-                                                                     font-size: 34.2857px;
-                                                                     line-height: 24px;
+                                                                     font-size: 2.14285625rem;
+                                                                     line-height: 1.5rem;
                                                                      font-weight: 400">2023</span>
                                                     </div>
                                                 </div>
-                                                <div style="height: 600px; outline: 1px solid red">
+                                                <div style="height: 37.5rem; outline: max(1px, 0.0625rem) solid red">
                                                     <div class="flex flex-col justify-content-between w-full"
-                                                         style="height: 20px">
+                                                         style="height: 1.25rem">
                                                         <hr style="display: inline-flex;
                                                                    width: 100%;
                                                                    margin: 0;
                                                                    border: none;
-                                                                   height: 1px;
+                                                                   height: max(1px, 0.0625rem);
                                                                    background-color: white">
                                                         <hr style="display: inline-flex;
                                                                    width: 100%;
                                                                    margin: 0;
                                                                    border: none;
-                                                                   height: 1px;
+                                                                   height: max(1px, 0.0625rem);
                                                                    background-color: white">
                                                         <hr style="display: inline-flex;
                                                                    width: 100%;
                                                                    margin: 0;
                                                                    border: none;
-                                                                   height: 1px;
+                                                                   height: max(1px, 0.0625rem);
                                                                    background-color: white">
                                                     </div>
-                                                    <div style="margin-top: 64px">
+                                                    <div style="margin-top: 4rem">
                                                         <span>AHOJ</span>
                                                     </div>
                                                 </div>
                                                 <div data-timeline-section="2018"
                                                      class="flex flex-col"
-                                                     style="outline: 1px solid red">
+                                                     style="outline: max(1px, 0.0625rem) solid red">
                                                     <div class="flex flex-col align-items-end"
-                                                         style="row-gap: 20px;
+                                                         style="row-gap: 1.25rem;
                                                                 position: sticky;
                                                                 top: var(--modal-button-close-inset);
-                                                                padding-bottom: 20px">
+                                                                padding-bottom: 1.25rem">
                                                         <hr style="display: inline-flex;
                                                                    width: 100%;
                                                                    margin: 0;
                                                                    border: none;
-                                                                   height: 1px;
+                                                                   height: max(1px, 0.0625rem);
                                                                    background-color: white">
                                                         <span style="display: inline-flex;
                                                                      text-align: right;
                                                                      font-family: 'Chakra Petch', monospace;
-                                                                     font-size: 34.2857px;
-                                                                     line-height: 24px;
+                                                                     font-size: 2.14285625rem;
+                                                                     line-height: 1.5rem;
                                                                      font-weight: 400">2018</span>
                                                     </div>
                                                 </div>
-                                                <div style="height: 400px; outline: 1px solid red">
+                                                <div style="height: 25rem; outline: max(1px, 0.0625rem) solid red">
                                                     <div class="flex flex-col justify-content-between w-full"
-                                                         style="height: 20px">
+                                                         style="height: 1.25rem">
                                                         <hr style="display: inline-flex;
                                                                    width: 100%;
                                                                    margin: 0;
                                                                    border: none;
-                                                                   height: 1px;
+                                                                   height: max(1px, 0.0625rem);
                                                                    background-color: white">
                                                         <hr style="display: inline-flex;
                                                                    width: 100%;
                                                                    margin: 0;
                                                                    border: none;
-                                                                   height: 1px;
+                                                                   height: max(1px, 0.0625rem);
                                                                    background-color: white">
                                                         <hr style="display: inline-flex;
                                                                    width: 100%;
                                                                    margin: 0;
                                                                    border: none;
-                                                                   height: 1px;
+                                                                   height: max(1px, 0.0625rem);
                                                                    background-color: white">
                                                     </div>
-                                                    <div style="margin-top: 64px">
+                                                    <div style="margin-top: 4rem">
                                                         <span>AHOJ</span>
                                                     </div>
                                                 </div>
@@ -1073,13 +1073,13 @@
                                     </div>
                                     <div class="sticky" style="bottom: calc(-1 * var(--segment))">
                                         <div class="absolute"
-                                             style="bottom: 0px;
-                                                    margin-left: calc(48px + 48px + 240px );
-                                                    width: 800px;
-                                                    /* outline: 1px solid red */">
+                                             style="bottom: 0rem;
+                                                    margin-left: calc(3rem + 3rem + 15rem );
+                                                    width: 50rem;
+                                                    /* outline: max(1px, 0.0625rem) solid red */">
                                             <horizontal-timeline labels="[2023, 2022, 2021, 2020, 2019, 2018, 2017, 2016, 2015, 2014]"></horizontal-timeline>
-                                            <!-- <div style="margin: 0 64px; border: white 1px solid; border-radius: 15984px">
-                                            <div style="display: grid; grid-auto-flow: column; grid-auto-columns: max-content; column-gap: 10px; padding: 10px 16px; font-size: 15px">
+                                            <!-- <div style="margin: 0 4rem; border: white max(1px, 0.0625rem) solid; border-radius: 999rem">
+                                            <div style="display: grid; grid-auto-flow: column; grid-auto-columns: max-content; column-gap: 0.625rem; padding: 0.625rem 1rem; font-size: 0.9375rem">
                                                 <button>
                                                     2022
                                                 </button>
@@ -1111,10 +1111,10 @@
                 </div>
                 <footer class="select-none">
                     <div class="flex px-1/2 pb-1/2 w-full">
-                        <div class="flex" style="column-gap: 8px">
+                        <div class="flex" style="column-gap: 0.5rem">
                             <span id="square-1"></span>
                         </div>
-                        <div class="flex" style="column-gap: 8px">
+                        <div class="flex" style="column-gap: 0.5rem">
                             <span id="square-2"></span>
                             <span id="square-3"></span>
                             <span id="square-4"></span>
diff --git a/scripts/timeline.js b/scripts/timeline.js
index de3a3e7..e464b54 100644
--- a/scripts/timeline.js
+++ b/scripts/timeline.js
@@ -25,19 +25,19 @@ class timeline extends HTMLElement {
                 #timeline_wrapper {
                     transition: border-radius var(--animate-out-segment) var(--ease-in-quad), margin var(--animate-out-segment) var(--ease-in-quad), transform var(--animate-out-segment) var(--ease-in-quad);
                     position: relative;
-                    margin: 0 128px;
-                    border-radius: 12px;
+                    margin: 0 8rem;
+                    border-radius: 0.75rem;
                     background-color: rgba(255, 255, 255, 0.15);
-                    backdrop-filter: blur(6px);
-                    -webkit-backdrop-filter: blur(6px);
+                    backdrop-filter: blur(0.375rem);
+                    -webkit-backdrop-filter: blur(0.375rem);
                     overflow: clip;
                 }
 
                 #timeline_wrapper:hover {
                     transition: border-radius var(--animate-in-segment) var(--ease-out-quad), margin var(--animate-in-segment) var(--ease-out-quad), transform var(--animate-in-segment) var(--ease-out-quad);
-                    border-radius: 18px;
-                    margin: 0 64px;
-                    transform: translateY(calc(18px / 4))
+                    border-radius: 1.125rem;
+                    margin: 0 4rem;
+                    transform: translateY(calc(1.125rem / 4))
                 }
 
                 #timeline_content {
@@ -49,7 +49,7 @@ class timeline extends HTMLElement {
                     scrollbar-width: none;
                     -webkit-overflow-scrolling: touch;
                     -ms-overflow-style: none;
-                    padding: 8px 24px 4px 24px;
+                    padding: 0.5rem 1.5rem 0.25rem 1.5rem;
                     mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) var(--segment), rgba(0, 0, 0, 1) calc(100% - var(--segment)), rgba(0, 0, 0, 0) 100%);
                 }
 
@@ -59,30 +59,30 @@ class timeline extends HTMLElement {
 
                 #timeline_wrapper:hover #timeline_content {
                     transition: padding var(--animate-in-segment) var(--ease-out-quad);
-                    padding: calc(8px + 6px) calc(24px + 64px) calc(4px + 6px) calc(24px + 64px);
+                    padding: calc(0.5rem + 0.375rem) calc(1.5rem + 4rem) calc(0.25rem + 0.375rem) calc(1.5rem + 4rem);
                 }
 
                 #timeline_content > div {
                     transition: row-gap var(--animate-out-segment) var(--ease-in-quad);
-                    row-gap: 8px;
+                    row-gap: 0.5rem;
                 }
 
                 #timeline_wrapper:hover #timeline_content > div {
                     transition: row-gap var(--animate-in-segment) var(--ease-out-quad);
-                    row-gap: calc(8px + 6px);
+                    row-gap: calc(0.5rem + 0.375rem);
                 }
 
                 #timeline {
-                    height: 18px;
-                    column-gap: 16px;
+                    height: 1.125rem;
+                    column-gap: 1rem;
                 }
 
                 #timeline span {
                     transition: background var(--animate-out-segment-2\\/3) linear, height var(--animate-out-segment-2\\/3) var(--ease-in-quad);
                     background-color: rgba(255, 255, 255, 0.45);
-                    width: 1.5px;
+                    width: 0.09375rem;
                     height: calc((6/18)*100%);
-                    border-radius: 0.5px;
+                    border-radius: 0.03125rem;
                 }
 
                 #timeline span:nth-child(6n + 4) {
@@ -159,12 +159,12 @@ class timeline extends HTMLElement {
                     transition: color var(--animate-out-segment-2\\/3) linear;
                     text-align: center;
                     color: var(--text-2);
-                    padding: 4px 5px 4px 7px;
+                    padding: 0.25rem 0.3125rem 0.25rem 0.4375rem;
                     font-family: 'Chakra Petch', monospace;
                     font-weight: 600;
-                    font-size: 12.8571px;
-                    line-height: 14px;
-                    letter-spacing: 2px;
+                    font-size: 0.80356875rem;
+                    line-height: 0.875rem;
+                    letter-spacing: 0.125rem;
                 }
 
                 #timeline_labels button span::before {
@@ -188,10 +188,10 @@ class timeline extends HTMLElement {
                     transition: opacity var(--animate-out-segment-2\\/3) linear, inset var(--animate-out-segment-2\\/3) var(--ease-in-quad);
                     content: '';
                     position: absolute;
-                    inset: 1.5px 3px;
+                    inset: 0.09375rem 0.1875rem;
                     opacity: 0;
                     background-color: rgba(255, 255, 255, 0.15);
-                    border-radius: 15984px;
+                    border-radius: 999rem;
                 }
 
                 #timeline_labels button.active::before {
@@ -209,7 +209,7 @@ class timeline extends HTMLElement {
                 #timeline_labels button::after {
                     content: '';
                     position: absolute;
-                    inset: -30px -5px -5px -5px;
+                    inset: -1.875rem -0.3125rem -0.3125rem -0.3125rem;
                 }
             </style>
 
@@ -268,11 +268,11 @@ class timeline extends HTMLElement {
                     targetLabelEl.focus()
                     scrollParentToChildCenterHorizontal(timelineContentEl, targetLabelEl)
 
-                    labelEls.forEach((labelEl) => labelEl.classListNaNpxove('active'))
+                    labelEls.forEach((labelEl) => labelEl.classList.remove('active'))
                     targetLabelEl.classList.add('active')
 
                     const index = labelEls.findIndex((labelEl) => labelEl.getAttribute('data-label-for') === targetSection)
-                    timelineEls.forEach((timelineEl) => timelineEl.classListNaNpxove('active'))
+                    timelineEls.forEach((timelineEl) => timelineEl.classList.remove('active'))
                     timelineEls[3 + (index === 0 ? 0 : index * 6)].classList.add('active')
                 }
             })
diff --git a/styles/animation.css b/styles/animation.css
index 6a41dfd..996c7f5 100644
--- a/styles/animation.css
+++ b/styles/animation.css
@@ -45,9 +45,17 @@ body {
     transform-origin: left;
 }
 
+.animate-fade-in-name>div>span,
+.animate-fade-in-title>span,
+.animate-fade-in-cta-1,
+.animate-fade-in-logo {
+    transform: translate3d(0,0,0);
+}
+
 .animate-fade-in-name>div>span,
 .animate-fade-in-title>span {
     animation-name: fade-in-opacity, fade-in-blur;
+    transform: translate3d(0,0,0);
     animation-duration: 2.5s, 0.75s;
 }
 
@@ -90,7 +98,7 @@ body {
 @keyframes fade-in-blur {
     0% {
         transform: scale(0.95);
-        filter: blur(8px);
+        filter: blur(0.5rem);
     }
 
     100% {
@@ -102,7 +110,7 @@ body {
 @keyframes fade-in-blur-2 {
     0% {
         transform: scale(0.9875);
-        filter: blur(4px);
+        filter: blur(0.25rem);
     }
 
     100% {
@@ -124,10 +132,12 @@ body {
 
 .animate-flicker-triangle-light::after {
     animation-name: flicker-light;
+    transform: translate3d(0,0,0);
 }
 
 .animate-flicker-triangle-shadow::after {
     animation-name: flicker-shadow;
+    transform: translate3d(0,0,0);
 }
 
 #profile:target~main .animate-flicker-triangle-light::after,
@@ -165,19 +175,23 @@ body {
 
 .highlight:focus {
     transition: color calc(2 * var(--animate-out-segment)) var(--ease-in-quad) var(--delay-segment);
+    transform: translate3d(0,0,0);
 }
 
 .highlight:focus.active, .highlight-hover.active {
     color: var(--highlight-primary) !important;
     transition: color calc(2 * var(--animate-in-segment)) var(--ease-out-quad) !important;
+    transform: translate3d(0,0,0);
 }
 
 .highlight-hover:hover {
     transition: color calc(2 * var(--animate-in-segment)) var(--ease-in-quad) var(--delay-segment) !important;
+    transform: translate3d(0,0,0);
 }
 
 .highlight-hover.active:hover {
     transition: color calc(2 * var(--animate-in-segment)) var(--ease-out-quad) !important;
+    transform: translate3d(0,0,0);
 }
 
 
@@ -194,6 +208,7 @@ body {
 
 .animate-fade-in-title span.highlight {
     animation-name: fade-in-opacity, fade-in-blur, de-highlight;
+    transform: translate3d(0,0,0);
 }
 
 @keyframes de-highlight {
@@ -208,6 +223,7 @@ body {
 
 .animate-fade-in-title span.highlight-alt {
     animation-name: fade-in-opacity, fade-in-blur, de-highlight-alt;
+    transform: translate3d(0,0,0);
 }
 
 @keyframes de-highlight-alt {
@@ -232,6 +248,7 @@ body {
 svg.animate-face-icon path {
     will-change: d;
     animation-name: face-icon-animation;
+    transform: translate3d(0,0,0);
     animation-fill-mode: both;
     animation-duration: calc(var(--delay-segment) * 24);
     animation-timing-function: linear;
@@ -303,6 +320,7 @@ svg.animate-face-icon path {
 #availability_button_dot {
     will-change: opacity;
     animation-name: availability-dot-fade-animation;
+    transform: translate3d(0,0,0);
     animation-fill-mode: both;
     animation-timing-function: linear;
     animation-duration: calc(var(--animate-in-segment) * 32);
@@ -316,30 +334,36 @@ svg.animate-face-icon path {
 
 #availability_button_dot::before {
     transition: opacity calc(2 * var(--animate-out-segment)) var(--ease-out-quad), transform calc(2 * var(--animate-out-segment)) var(--ease-out-quad);
+    transform: translate3d(0,0,0);
     transform-origin: center;
     z-index: -1;
 }
 
 #availability_button a:hover #availability_button_dot::before {
     transition: opacity calc(2 * var(--animate-in-segment)) var(--ease-in-quad), transform calc(2 * var(--animate-in-segment)) var(--ease-in-quad);
+    transform: translate3d(0,0,0);
     transform: scale(135);
 }
 
 #availability_button_dot {
     transition: color var(--animate-out-segment) linear;
+    transform: translate3d(0,0,0);
 }
 
 #availability_button a:hover #availability_button_dot::after {
     transition: background-color var(--animate-in-segment) linear var(--animate-in-segment);
+    transform: translate3d(0,0,0);
     background-color: var(--cyan-full-5);
 }
 
 #availability_button_text {
     transition: color var(--animate-out-segment) linear;
+    transform: translate3d(0,0,0);
 }
 
 #availability_button a:hover #availability_button_text {
     transition: color var(--animate-in-segment) linear var(--animate-in-segment);
+    transform: translate3d(0,0,0);
     color: var(--cyan-full-5);
 }
 
@@ -348,10 +372,12 @@ svg.animate-face-icon path {
 
 #menu_links>a {
     transition: background-color var(--animate-out-segment-2\/3) linear;
+    transform: translate3d(0,0,0);
 }
 
 #menu_links>a:hover {
     transition: background-color var(--animate-in-segment-2\/3) linear;
+    transform: translate3d(0,0,0);
     background-color: var(--highlight-secondary);
 }
 
@@ -361,30 +387,36 @@ svg.animate-face-icon path {
 
 #menu_links>a svg, #menu_email_button svg {
     transition: color var(--animate-out-segment-2\/3) linear;
+    transform: translate3d(0,0,0);
     color: var(--icon);
 }
 
 #menu_links>a:hover svg, #menu_email_button:hover svg {
     transition: color var(--animate-in-segment-2\/3) linear;
+    transform: translate3d(0,0,0);
     color: var(--icon-hover);
 }
 
 #menu_links>a span.button-label, #menu_email_button span.button-label {
     transition: color var(--animate-out-segment-2\/3) linear;
+    transform: translate3d(0,0,0);
     color: var(--text-2);
 }
 
 #menu_links>a:hover span.button-label, #menu_email_button:hover span.button-label {
     transition: color var(--animate-in-segment-2\/3) linear;
+    transform: translate3d(0,0,0);
     color: var(--text-1);
 }
 
 #menu_links>a span.button-label u {
     transition: text-decoration var(--animate-out-segment-2\/3) linear;
+    transform: translate3d(0,0,0);
 }
 
 #menu_links>a:hover span.button-label u {
     transition: text-decoration var(--animate-in-segment-2\/3) linear;
+    transform: translate3d(0,0,0);
     text-decoration-color: var(--text-2) !important;
 }
 
@@ -393,11 +425,13 @@ svg.animate-face-icon path {
 
 #menu_button {
     transition: color var(--animate-out-segment-2\/3) linear, background-color var(--animate-out-segment-2\/3) linear;
+    transform: translate3d(0,0,0);
     color: var(--icon);
 }
 
 #menu_button_wrapper:hover #menu_button, #menu:target #menu_button {
     transition: color var(--animate-in-segment-2\/3) linear,  background-color var(--animate-in-segment-2\/3) linear;
+    transform: translate3d(0,0,0);
     color: var(--icon-hover);
     background-color: var(--highlight-secondary);
 }
@@ -407,53 +441,62 @@ svg.animate-face-icon path {
     will-change: transform;
     animation-fill-mode: both;
     animation-name: initial;
+    transform: translate3d(0,0,0);
 }
 
 #menu_button span:nth-child(1) {
     animation-duration: calc((var(--animate-in-segment) * 3));
-    animation-name: menu-top-left-reverse
+    animation-name: menu-top-left-reverse;
+    transform: translate3d(0,0,0);
 }
 
 #menu:target #menu_button span:nth-child(1) {
     animation-duration: calc((var(--animate-out-segment) * 3));
     animation-name: menu-top-left;
+    transform: translate3d(0,0,0);
 }
 
 #menu_button span:nth-child(2) {
     animation-duration: calc((var(--animate-in-segment) * 3));
     animation-name: menu-top-right-reverse;
+    transform: translate3d(0,0,0);
 }
 
 #menu:target #menu_button span:nth-child(2) {
     animation-duration: calc((var(--animate-out-segment) * 3));
     animation-name: menu-top-right;
+    transform: translate3d(0,0,0);
 }
 
 #menu_button span:nth-child(3) {
     animation-duration: calc((var(--animate-in-segment) * 3));
     animation-name: menu-bottom-left-reverse;
+    transform: translate3d(0,0,0);
 }
 
 #menu:target #menu_button span:nth-child(3) {
     animation-duration: calc((var(--animate-out-segment) * 3));
     animation-name: menu-bottom-left;
+    transform: translate3d(0,0,0);
 }
 
 #menu_button span:nth-child(4) {
     animation-duration: calc((var(--animate-in-segment) * 3));
     animation-name: menu-bottom-right-reverse;
+    transform: translate3d(0,0,0);
 }
 
 #menu:target #menu_button span:nth-child(4) {
     animation-duration: calc((var(--animate-out-segment) * 3));
     animation-name: menu-bottom-right;
+    transform: translate3d(0,0,0);
 }
 
 @keyframes initial {}
 
 @keyframes menu-top-left {
     0% {
-        transform: translate(0px, 0px);
+        transform: translate(0rem, 0rem);
         animation-timing-function: var(--ease-in-quad);
     }
     45%, 55% {
@@ -474,17 +517,17 @@ svg.animate-face-icon path {
         transform: translate(var(--menu-icon-radius), calc(-1 * ((1.5 * var(--menu-icon-gap-between)) - (0.5 * var(--menu-icon-gap)) + var(--menu-icon-bit-size)))) scale(0);
     }
     55% {
-        transform: translate(0px, 0px) scale(0);
+        transform: translate(0rem, 0rem) scale(0);
     }
     100% {
-        transform: translate(0px, 0px) scale(1);
+        transform: translate(0rem, 0rem) scale(1);
         animation-timing-function: var(--ease-out-quad);
     }
 }
 
 @keyframes menu-top-right {
     0% {
-        transform: translate(0px, 0px);
+        transform: translate(0rem, 0rem);
         animation-timing-function: var(--ease-in-quad);
     }
     45%, 55% {
@@ -505,17 +548,17 @@ svg.animate-face-icon path {
         transform: translate(calc(-1 * var(--menu-icon-radius)), calc(-1 * ((0.5 * var(--menu-icon-gap-between)) - (0.5 * (var(--menu-icon-gap)))))) scale(0);
     }
     55% {
-        transform: translate(0px, 0px) scale(0);
+        transform: translate(0rem, 0rem) scale(0);
     }
     100% {
-        transform: translate(0px, 0px) scale(1);
+        transform: translate(0rem, 0rem) scale(1);
         animation-timing-function: var(--ease-out-quad);
     }
 }
 
 @keyframes menu-bottom-left {
     0% {
-        transform: translate(0px, 0px);
+        transform: translate(0rem, 0rem);
         animation-timing-function: var(--ease-in-quad);
     }
     45%, 55% {
@@ -536,17 +579,17 @@ svg.animate-face-icon path {
         transform: translate(var(--menu-icon-radius), calc((0.5 * (var(--menu-icon-gap-between))) - (0.5 * (var(--menu-icon-gap))))) scale(0);
     }
     55% {
-        transform: translate(0px, 0px) scale(0);
+        transform: translate(0rem, 0rem) scale(0);
     }
     100% {
-        transform: translate(0px, 0px) scale(1);
+        transform: translate(0rem, 0rem) scale(1);
         animation-timing-function: var(--ease-out-quad);
     }
 }
 
 @keyframes menu-bottom-right {
     0% {
-        transform: translate(0px, 0px);
+        transform: translate(0rem, 0rem);
         animation-timing-function: var(--ease-in-quad);
     }
     45%, 55% {
@@ -567,10 +610,10 @@ svg.animate-face-icon path {
         transform: translate(calc(-1 * var(--menu-icon-radius)), calc((1.5 * var(--menu-icon-gap-between)) - (0.5 * (var(--menu-icon-gap))) + var(--menu-icon-bit-size))) scale(0);
     }
     55% {
-        transform: translate(0px, 0px) scale(0);
+        transform: translate(0rem, 0rem) scale(0);
     }
     100% {
-        transform: translate(0px, 0px) scale(1);
+        transform: translate(0rem, 0rem) scale(1);
         animation-timing-function: var(--ease-in-quad);
     }
 }
@@ -580,13 +623,14 @@ svg.animate-face-icon path {
 #menu_dropdown {
     visibility: hidden;
     opacity: 0;
-    transform: translateY(-4px);
+    transform: translateY(-0.25rem);
     transition: opacity calc(1.25 * var(--animate-out-segment)) var(--ease-in-quad), transform calc(1.25 * var(--animate-out-segment)) var(--ease-in-quad), visibility 0s calc(1.25 * var(--animate-out-segment));
+    transform: translate3d(0,0,0);
 }
 
-@media (min-width: 720px) and (min-aspect-ratio: 3/4) {
+@media (min-width: 45rem) and (min-aspect-ratio: 3/4) {
     #menu_dropdown {
-        transform: translateX(-4px);
+        transform: translateX(-0.25rem);
     }
 }
 
@@ -596,51 +640,55 @@ svg.animate-face-icon path {
     opacity: 1;
     transform: translate(0);
     transition: opacity calc(1.25 * var(--animate-in-segment)) var(--ease-out-quad), transform calc(1.25 * var(--animate-in-segment)) var(--ease-out-quad);
+    transform: translate3d(0,0,0);
 }
 
 #menu_dropdown a:first-child:before,
 #menu_dropdown a:first-child:after {
-    inset: -1px 0 0 0;
-    border-radius: 5px 5px 0 0;
-    /* border-radius: 3px 3px 1.5px 1.5px; */
+    inset: min(-1px, -0.0625rem) 0 0 0;
+    border-radius: 0.3125rem 0.3125rem 0 0;
+    /* border-radius: 0.1875rem 0.1875rem 0.09375rem 0.09375rem; */
 }
 
 #menu_dropdown label:last-child:before,
 #menu_dropdown label:last-child:after {
-    border-radius: 0 0 5px 5px;
-    /* border-radius: 1.5px 1.5px 3px 3px; */
+    border-radius: 0 0 0.3125rem 0.3125rem;
+    /* border-radius: 0.09375rem 0.09375rem 0.1875rem 0.1875rem; */
 }
 
 #menu_dropdown a::before,
 #menu_dropdown label::before {
     transition: opacity var(--animate-out-segment) linear, inset var(--animate-out-segment) var(--ease-in-quad);
+    transform: translate3d(0,0,0);
     content: '';
     opacity: 0;
     position: absolute;
-    inset: 0; /* 0 0 -1px 0; */
+    inset: 0; /* 0 0 -0.0625rem 0; */
     z-index: 1;
     background-image: linear-gradient(to right, rgba(0, 118, 132, 0.75), rgba(0, 118, 132, 0.15)); /* 210, 100, 45 */
 
     /* transition: opacity var(--animate-out-segment-2\/3) linear, inset var(--animate-out-segment-2\/3) var(--ease-in-quad);
+    transform: translate3d(0,0,0);
     content: '';
     opacity: 0;
     position: absolute;
-    inset: 9px 10px 10px 10px;
+    inset: 0.5625rem 0.625rem 0.625rem 0.625rem;
     z-index: 0;
     background-color: var(--highlight-secondary);
-    border-radius: 1.5px; */
+    border-radius: 0.09375rem; */
 }
 
 #menu_dropdown a::after,
 #menu_dropdown label::after {
     transition: opacity var(--animate-out-segment) linear, inset var(--animate-out-segment) var(--ease-in-quad);
+    transform: translate3d(0,0,0);
     content: '';
     opacity: 0;
     position: absolute;
-    inset: 0; /*  -1px; */
+    inset: 0; /*  -0.0625rem; */
     z-index: 1;
 
-    border: 1px solid transparent;
+    border: max(1px, 0.0625rem) solid transparent;
     background-image: linear-gradient(to right, rgba(0, 118, 132, 1), rgba(0, 118, 132, 0)); /* 210, 100, 45 */
     background-origin: border-box;
     background-clip: border-box;
@@ -663,26 +711,31 @@ svg.animate-face-icon path {
 #menu_dropdown a:focus-within::after,
 #menu_dropdown label:focus-within::after  {
     transition: opacity var(--animate-in-segment) linear, inset var(--animate-in-segment) var(--ease-out-quad);
+    transform: translate3d(0,0,0);
     opacity: 1;
     /* transition: opacity var(--animate-in-segment-2\/3) linear, inset var(--animate-in-segment-2\/3) var(--ease-out-quad);
+    transform: translate3d(0,0,0);
     opacity: 1;
-    inset: 3px 4px 4px 4px; */
+    inset: 0.1875rem 0.25rem 0.25rem 0.25rem; */
 }
 
 #menu_dropdown a span,
 #menu_dropdown label span {
     transition: color var(--animate-out-segment) linear;
+    transform: translate3d(0,0,0);
     z-index: 1;
 }
 
 #menu_dropdown a:hover span,
 #menu_dropdown label:hover span {
     transition: color var(--animate-in-segment) linear;
+    transform: translate3d(0,0,0);
 }
 
 #menu_dropdown a svg,
 #menu_dropdown label svg {
     transition: color var(--animate-out-segment) linear;
+    transform: translate3d(0,0,0);
     color: var(--icon);
     z-index: 1;
 }
@@ -690,6 +743,7 @@ svg.animate-face-icon path {
 #menu_dropdown a:hover svg,
 #menu_dropdown label:hover svg {
     transition: color var(--animate-out-segment) linear, background-color var(--animate-out-segment) linear;
+    transform: translate3d(0,0,0);
     color: var(--icon-hover);
 }
 
@@ -731,6 +785,7 @@ svg.animate-face-icon path {
 #modal_profile .modal_content,
 #modal_archive .modal_content {
     transition: opacity var(--animate-out-segment) linear, transform var(--animate-out-segment) var(--ease-in-quad), visibility 0s var(--animate-out-segment);
+    transform: translate3d(0,0,0);
     transform: scale(1.05);
     transform-origin: top;
 }
@@ -739,6 +794,7 @@ svg.animate-face-icon path {
 #archive:target~main #modal_archive .modal_content {
     visibility: visible;
     transition: opacity var(--animate-in-segment) linear, transform var(--animate-in-segment) var(--ease-out-quad);
+    transform: translate3d(0,0,0);
     opacity: 1;
     transform: scale(1);
 }
@@ -748,7 +804,7 @@ svg.animate-face-icon path {
     transform-origin: center;
 }
 
-@media (min-width: 720px) and (min-aspect-ratio: 3/4) {
+@media (min-width: 45rem) and (min-aspect-ratio: 3/4) {
     #intro_left-column, #intro_right-column {
         transform-origin: top;
     }
@@ -759,6 +815,7 @@ svg.animate-face-icon path {
 #archive:target~main #intro_left-column,
 #archive:target~main #intro_right-column {
     transition: transform var(--animate-in-segment) var(--ease-out-quad);
+    transform: translate3d(0,0,0);
     transform: scale(0.95);
 }
 
@@ -767,10 +824,12 @@ svg.animate-face-icon path {
 
 #modal_button-close, #modal_button-close svg {
     transition: color var(--animate-out-segment-2\/3) linear, background-color var(--animate-out-segment-2\/3) linear, border var(--animate-out-segment-2\/3) linear;
+    transform: translate3d(0,0,0);
 }
 
 #modal_button-close:hover {
     transition: color var(--animate-in-segment-2\/3) linear, background-color var(--animate-in-segment-2\/3) linear, border var(--animate-in-segment-2\/3) linear;
+    transform: translate3d(0,0,0);
     color: var(--modal-icon-hover);
     background-color: var(--highlight-secondary);
 }
@@ -788,16 +847,17 @@ svg.animate-face-icon path {
     pointer-events: none;
     opacity: 0;
     transition: opacity var(--animate-out-segment) linear;
+    transform: translate3d(0,0,0);
 }
 
 #underlay_menu {
-    backdrop-filter: blur(2px);
-    -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(0.125rem);
+    -webkit-backdrop-filter: blur(0.125rem);
 }
 
 #underlay_modal {
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(0.5rem);
+    -webkit-backdrop-filter: blur(0.5rem);
 }
 
 #debug:not(:checked)~main #menu:target #underlay_menu {
@@ -805,6 +865,7 @@ svg.animate-face-icon path {
     pointer-events: auto;
     opacity: 1;
     transition: opacity var(--animate-in-segment) linear;
+    transform: translate3d(0,0,0);
 }
 
 #debug:not(:checked)~#profile:target~main #underlay_modal,
@@ -813,4 +874,5 @@ svg.animate-face-icon path {
     pointer-events: auto;
     opacity: 1;
     transition: opacity var(--animate-in-segment) linear;
+    transform: translate3d(0,0,0);
 }
diff --git a/styles/style.css b/styles/style.css
index bb61832..764c920 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -10,13 +10,13 @@
 :root {
     /* Breakpoints */
 
-    --breakpoint-xs: 480px;
-    --breakpoint-sm: 720px;
-    --breakpoint-md: 960px;
-    --breakpoint-lg: 1200px;
-    --breakpoint-xl: 1440px;
-    --breakpoint-2xl: 1680px;
-    --breakpoint-3xl: 2560px;
+    --breakpoint-xs: 30rem;
+    --breakpoint-sm: 45rem;
+    --breakpoint-md: 60rem;
+    --breakpoint-lg: 75rem;
+    --breakpoint-xl: 90rem;
+    --breakpoint-2xl: 105rem;
+    --breakpoint-3xl: 160rem;
 
     /* Colours */
 
@@ -158,7 +158,7 @@
 
 main {
     /* Segment */
-    --segment: 64px;
+    --segment: 4rem;
     --segment-double: calc(var(--segment) * 2);
     --segment-half: calc(var(--segment) / 2);
     --segment-third: calc(var(--segment) / 3);
@@ -170,16 +170,16 @@ main {
 /* Light mode debug */
 
 #mode:checked~#debug:checked~main * {
-    outline: 1px solid var(--blue-full-45) !important;
-    outline-offset: -1px;
+    outline: max(1px, 0.0625rem) solid var(--blue-full-45) !important;
+    outline-offset: min(-1px, -0.0625rem);
 }
 
 
 /* Dark mode debug */
 
 #mode:not(:checked)~#debug:checked~main * {
-    outline: 1px solid var(--blue-full-55);
-    outline-offset: -1px;
+    outline: max(1px, 0.0625rem) solid var(--blue-full-55);
+    outline-offset: min(-1px, -0.0625rem);
 }
 
 
@@ -350,10 +350,10 @@ body {
 
 .sr-only {
     position: absolute;
-    width: 1px;
-    height: 1px;
+    width: max(1px, 0.0625rem);
+    height: max(1px, 0.0625rem);
     padding: 0;
-    margin: -1px;
+    margin: min(-1px, -0.0625rem);
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
@@ -365,8 +365,8 @@ button,
 [tabindex="0"] {
     outline-color: transparent;
     outline-style: solid;
-    outline-width: 2px;
-    outline-offset: 4px;
+    outline-width: 0.125rem;
+    outline-offset: 0.25rem;
 }
 
 
@@ -406,23 +406,45 @@ button,
 
 /* Root */
 
+:root {
+    font-size: 0.75rem;
+}
+
+@media (min-width: 45rem) {
+    :root {
+        font-size: 0.875rem;
+    }
+}
+
+@media (min-width: 75rem) {
+    :root {
+        font-size: 1rem;
+    }
+}
+
+@media (min-width: 160rem) {
+    :root {
+        font-size: 1.125rem;
+    }
+}
+
 /* :root {
     font-size: 12px;
 }
 
-@media (min-width: 720px) {
+@media (min-width: 45rem) {
     :root {
         font-size: 14px;
     }
 }
 
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
     :root {
         font-size: 16px;
     }
 }
 
-@media (min-width: 2560px) {
+@media (min-width: 160rem) {
     :root {
         font-size: 18px;
     }
@@ -446,7 +468,7 @@ main {
     min-height: 100dvh;
 }
 
-@media (min-width: 720px) {
+@media (min-width: 45rem) {
 
     main {
         --background-pattern: url("data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='27' y='27' width='2' height='2' fill='%232A3F43'/%3E%3C/svg%3E%0A");
@@ -457,7 +479,7 @@ main {
     }
 }
 
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
 
     main {
         --background-pattern: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='31' y='31' width='2' height='2' fill='%232A3F43'/%3E%3C/svg%3E%0A");
@@ -478,55 +500,55 @@ main {
     padding-bottom: var(--segment);
     display: grid;
     grid-template-columns: auto;
-    row-gap: calc(76px + 3px);
+    row-gap: calc(4.75rem + 0.1875rem);
     max-width: var(--breakpoint-xl);
     margin: auto;
 }
 
-@media (min-width: 720px) and (min-aspect-ratio: 3/4) {
+@media (min-width: 45rem) and (min-aspect-ratio: 3/4) {
     #intro {
-        padding-top: calc((var(--segment) * 1.5) - var(--segment-quarter) - 1px);
+        padding-top: calc((var(--segment) * 1.5) - var(--segment-quarter) - max(1px, 0.0625rem));
         padding-bottom: var(--segment-half);
         grid-template-columns: calc(var(--segment) * 5) min-content;
-        grid-column-gap: 64px;
+        grid-column-gap: 4rem;
         row-gap: 0;
     }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
     #intro {
-        padding-top: calc((var(--segment) * 1.5) - var(--segment-quarter) - 1px);
+        padding-top: calc((var(--segment) * 1.5) - var(--segment-quarter) - max(1px, 0.0625rem));
         grid-template-columns: calc(var(--segment) * 7) min-content;
     }
 }
 
-@media (min-width: 1080px) {
+@media (min-width: 67.5rem) {
     #intro {
-        padding-top: calc((var(--segment) * 2.5) - var(--segment-quarter) - 1px);
+        padding-top: calc((var(--segment) * 2.5) - var(--segment-quarter) - max(1px, 0.0625rem));
         grid-template-columns: calc(var(--segment) * 8) min-content;
     }
 }
 
 /* TODO - test higher widths */
-/* @media (min-width: 1080px) {
+/* @media (min-width: 67.5rem) {
     #intro {
         padding-top: calc((var(--segment) * 2.5) - var(--segment-quarter));
         grid-template-columns: calc(var(--segment) * 8) min-content;
     }
 } */
 
-/* @media (min-width: 1200px) {
+/* @media (min-width: 75rem) {
     #intro {
-        grid-template-columns: 544px 1fr;
-        grid-column-gap: 32px;
+        grid-template-columns: 34rem 1fr;
+        grid-column-gap: 2rem;
         grid-row-gap: 0;
     }
 } */
 
-/* @media (min-width: 1680px) {
+/* @media (min-width: 105rem) {
     #intro {
-        padding-top: 240px;
-        grid-template-columns: 671px 1fr;
+        padding-top: 15rem;
+        grid-template-columns: 41.9375rem 1fr;
     }
 } */
 
@@ -538,7 +560,7 @@ main {
     justify-content: space-between;
 }
 
-@media (min-width: 720px) and (min-aspect-ratio: 3/4) {
+@media (min-width: 45rem) and (min-aspect-ratio: 3/4) {
     #intro_left-column {
         row-gap: 0;
         flex-direction: column;
@@ -546,6 +568,7 @@ main {
 }
 
 #intro_left-column h2 {
+    /* font-size: 0.75rem; */
     color: var(--text-1);
     padding-top: var(--segment-third);
     margin-top: calc(-1 * var(--segment-third));
@@ -553,8 +576,26 @@ main {
     margin-bottom: calc(-1 * (var(--segment) / 5));
 }
 
+/* @media (min-width: 45rem) {
+    #intro_left-column h2 {
+        font-size: 0.875rem;
+    }
+}
+
+@media (min-width: 75rem) {
+    #intro_left-column h2 {
+        font-size: 1rem;
+    }
+}
+
+@media (min-width: 160rem) {
+    #intro_left-column h2 {
+        font-size: 1.125rem;
+    }
+} */
+
 #intro_left-column h2>div {
-    padding-top: 0.999px;
+    padding-top: 0.0624375rem;
 }
 
 #intro_left-column h2>div>span {
@@ -576,7 +617,7 @@ main {
     display: table;
 }
 
-@media (min-width: 720px) and (min-aspect-ratio: 3/4) {
+@media (min-width: 45rem) and (min-aspect-ratio: 3/4) {
     #intro_left-column h2>div>span[style*="--i:7"] {
         flex-basis: 100%;
         height: 0;
@@ -588,21 +629,21 @@ main {
 
     #intro_left-column h2>div>span[style*="--i:9"] {
         padding-top: var(--segment-quarter);
-        transform: translateX(-2.4px);
+        transform: translateX(-0.15rem);
     }
 
     #intro_left-column h2>div>span[style*="--i:10"] {
         padding-top: var(--segment-quarter);
-        transform: translateX(-3.6px);
+        transform: translateX(-0.225rem);
     }
 
     #intro_left-column h2>div>span[style*="--i:11"] {
         padding-top: var(--segment-quarter);
-        transform: translateX(-4.8px);
+        transform: translateX(-0.3rem);
     }
 }
 
-@media (min-width: 1080px) {
+@media (min-width: 67.5rem) {
     #intro_left-column h2>div>span[style*="--i:7"] {
         flex-basis: unset;
         height: unset;
@@ -631,13 +672,32 @@ main {
 
 /* Intro - Right Column */
 
-#intro_right-column>h3 {
+#intro_right-column h3 {
+    /* font-size: 0.75rem; */
     color: var(--text-1);
 }
 
+/* @media (min-width: 45rem) {
+    #intro_right-column h3 {
+        font-size: 0.875rem;
+    }
+}
+
+@media (min-width: 75rem) {
+    #intro_right-column h3 {
+        font-size: 1rem;
+    }
+}
+
+@media (min-width: 160rem) {
+    #intro_right-column h3 {
+        font-size: 1.125rem;
+    }
+} */
+
 #intro_right-column_title--primary span {
     display: inline-block;
-    padding-top: calc(var(--segment-quarter) + 0.999px);
+    padding-top: calc(var(--segment-quarter) + 0.0624375rem);
     color: var(--text-1);
     font-weight: var(--text-lg-font-weight);
     font-size: var(--text-lg-font-size);
@@ -657,7 +717,7 @@ main {
 }
 
 #intro_right-column_title--secondary {
-    margin-top: calc(var(--segment-half) - 1px);
+    margin-top: calc(var(--segment-half) - max(1px, 0.0625rem));
 }
 
 #intro_right-column_title--secondary span {
@@ -665,10 +725,10 @@ main {
     font-family: "Newsreader";
     font-weight: 300;
     font-style: italic;
-    font-size: 47.7612px;
-    line-height: 64px;
-    padding: 0.999px 10px 0 10px;
-    margin: 0 -10px;
+    font-size: 2.985075rem;
+    line-height: 4rem;
+    padding: 0.0624375rem 0.625rem 0 0.625rem;
+    margin: 0 -0.625rem;
     /* font-variation-settings: "opsz" 24; */
 }
 
@@ -688,10 +748,10 @@ main {
 /* Intro - Right Column - Availability */
 
 #availability_button {
-    padding-top: calc(var(--segment) + 1px);
+    padding-top: calc(var(--segment) + max(1px, 0.0625rem));
 }
 
-@media (min-width: 720px) and (min-aspect-ratio: 3/4) {
+@media (min-width: 45rem) and (min-aspect-ratio: 3/4) {
     #availability_button {
         padding-top: var(--segment);
     }
@@ -699,26 +759,26 @@ main {
 
 #availability_button_dot {
     z-index: -1;
-    width: 18px;
-    height: 18px;
+    width: 1.125rem;
+    height: 1.125rem;
     background-color: var(--green-opacity);
 }
 
 #availability_button_dot::before {
     content: "";
     position: absolute;
-    width: 7px;
-    height: 7px;
-    border-radius: 15984px;
+    width: 0.4375rem;
+    height: 0.4375rem;
+    border-radius: 999rem;
     background-color: var(--green);
 }
 
 #availability_button_dot::after {
     content: "";
     position: absolute;
-    width: 7px;
-    height: 7px;
-    border-radius: 15984px;
+    width: 0.4375rem;
+    height: 0.4375rem;
+    border-radius: 999rem;
     background-color: transparent;
 }
 
@@ -726,9 +786,9 @@ main {
     font-family: 'Chakra Petch', monospace;
     font-weight: 600;
     color: var(--blue-full-95);
-    letter-spacing: 6px;
-    font-size: 14.2857px;
-    line-height: 10px;
+    letter-spacing: 0.375rem;
+    font-size: 0.89285625rem;
+    line-height: 0.625rem;
 }
 
 #availability_button_text::before {
@@ -749,10 +809,10 @@ main {
 #menu {
     grid-auto-flow: row;
     grid-template-rows: auto;
-    row-gap: 6px;
-    column-gap: 16px;
-    margin-top: calc(88px - 0.5px);
-    padding: 6px;
+    row-gap: 0.375rem;
+    column-gap: 1rem;
+    margin-top: calc(5.5rem - 0.03125rem);
+    padding: 0.375rem;
 }
 
 #menu::before {
@@ -761,55 +821,55 @@ main {
     inset: 0;
     z-index: -1;
     background-color: var(--context-bg);
-    border-radius: 28px 28px 16px 16px;
-    backdrop-filter: blur(1.5px);
-    -webkit-backdrop-filter: blur(1.5px);
+    border-radius: 1.75rem 1.75rem 1rem 1rem;
+    backdrop-filter: blur(0.09375rem);
+    -webkit-backdrop-filter: blur(0.09375rem);
 }
 
 #menu_email_button, #menu_links>a {
     background-color: var(--inner-bg-light-1);
-    padding: 3px;
-    border-radius: 22px 6px 6px 22px;
+    padding: 0.1875rem;
+    border-radius: 1.375rem 0.375rem 0.375rem 1.375rem;
 }
 
 #menu_email_button {
-    border-radius: 22px 22px 6px 22px;
+    border-radius: 1.375rem 1.375rem 0.375rem 1.375rem;
 }
 
 #menu_links {
-    row-gap: 6px;
+    row-gap: 0.375rem;
 }
 
 #menu_link_text_wrapper {
-    padding: 0px 12px 0px 16px;
-    margin-top: -1.25px;
-    letter-spacing: 2px;
+    padding: 0rem 0.75rem 0rem 1rem;
+    margin-top: -0.078125rem;
+    letter-spacing: 0.125rem;
 }
 
-@media (min-width: 720px) and (min-aspect-ratio: 3/4) {
+@media (min-width: 45rem) and (min-aspect-ratio: 3/4) {
     #menu {
         grid-auto-flow: column;
-        row-gap: 12px;
-        margin-top: calc((1.5 * var(--segment)) + 8px);
+        row-gap: 0.75rem;
+        margin-top: calc((1.5 * var(--segment)) + 0.5rem);
     }
 
     #menu::before {
-        border-radius: 28px 16px 16px 28px;
+        border-radius: 1.75rem 1rem 1rem 1.75rem;
     }
 
     #menu_email_button {
-        border-radius: 22px 6px 6px 22px;
+        border-radius: 1.375rem 0.375rem 0.375rem 1.375rem;
     }
 
     #menu_links {
         flex-direction: row;
         align-items: start;
-        column-gap: 12px;
+        column-gap: 0.75rem;
         row-gap: 0;
     }
 
     #menu_link_text_wrapper {
-        padding: 0px 12px 0px 8px;
+        padding: 0rem 0.75rem 0rem 0.5rem;
     }
 
     #menu_button_wrapper {
@@ -833,22 +893,46 @@ main {
 /* Intro - Right Column - Menu Dropdown */
 
 body {
-    --menu-icon-bit-size: 3px;
-    --menu-icon-gap: 4px;
-    --menu-icon-gap-between: 10px;
+    --menu-icon-bit-size: 2px;
+    --menu-icon-gap: 2px;
+    --menu-icon-gap-between: 8px;
     --menu-icon-radius: calc((var(--menu-icon-bit-size) + var(--menu-icon-gap)) / 2)
 }
 
+@media (min-width: 45rem) {
+    body {
+        --menu-icon-bit-size: 2.5px;
+        --menu-icon-gap: 3px;
+        --menu-icon-gap-between: 9px;
+    }
+}
+
+@media (min-width: 75rem) {
+    body {
+        --menu-icon-bit-size: 3px;
+        --menu-icon-gap: 4px;
+        --menu-icon-gap-between: 10px;
+    }
+}
+
+@media (min-width: 160rem) {
+    body {
+        --menu-icon-bit-size: 3.5px;
+        --menu-icon-gap: 5px;
+        --menu-icon-gap-between: 11px;
+    }
+}
+
 #menu_button {
     background-color: var(--inner-bg-light-1);
-    padding: 10px 10px;
-    border-radius: 6px 6px 10px 10px;
+    padding: 0.625rem 0.625rem;
+    border-radius: 0.375rem 0.375rem 0.625rem 0.625rem;
 }
 
-@media (min-width: 720px) and (min-aspect-ratio: 3/4) {
+@media (min-width: 45rem) and (min-aspect-ratio: 3/4) {
     #menu_button {
-        padding: 6px 10px;
-        border-radius: 6px 10px 10px 6px;
+        padding: 0.375rem 0.625rem;
+        border-radius: 0.375rem 0.625rem 0.625rem 0.375rem;
     }
 }
 
@@ -862,7 +946,7 @@ body {
     transform: rotate(90deg);
 }
 
-@media (min-width: 720px) and (min-aspect-ratio: 3/4) {
+@media (min-width: 45rem) and (min-aspect-ratio: 3/4) {
     #menu_button>div {
         transform: rotate(0deg);
     }
@@ -873,18 +957,18 @@ body {
     display: inline-flex;
     width: var(--menu-icon-bit-size);
     height: var(--menu-icon-bit-size);
-    border-radius: 0.75px;
+    border-radius: 0.046875rem;
     transform: rotate(180deg);
 }
 
 #menu_dropdown {
     bottom: 100%;
-    margin-bottom: 6px;
-    margin-right: 8px;
+    margin-bottom: 0.375rem;
+    margin-right: 0.5rem;
     pointer-events: none;
 }
 
-@media (min-width: 720px) and (min-aspect-ratio: 3/4) {
+@media (min-width: 45rem) and (min-aspect-ratio: 3/4) {
     #menu_dropdown {
         right: 100%;
         bottom: 0;
@@ -896,11 +980,11 @@ body {
     display: flex;
     flex-direction: column;
     background-color: var(--context-bg);
-    box-shadow: inset 0 0 0 1px var(--context-border-inner);
-    border: solid 1px var(--context-border-outer);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border-radius: 6px;
+    box-shadow: inset 0 0 0 max(1px, 0.0625rem) var(--context-border-inner);
+    border: solid max(1px, 0.0625rem) var(--context-border-outer);
+    backdrop-filter: blur(1.25rem);
+    -webkit-backdrop-filter: blur(1.25rem);
+    border-radius: 0.375rem;
 }
 
 #menu_dropdown a,
@@ -911,16 +995,16 @@ body {
     flex-direction: row;
     align-items: center;
     width: 100%;
-    padding: 12px 18px 10px 16px;
-    box-shadow: 0 -1px 0 0 var(--context-border-inner);
-    border-top: solid 1px var(--context-border-outer);
+    padding: 0.75rem 1.125rem 0.625rem 1rem;
+    box-shadow: 0 min(-1px, -0.0625rem) 0 0 var(--context-border-inner);
+    border-top: solid max(1px, 0.0625rem) var(--context-border-outer);
     user-select: none;
 }
 
 #menu_dropdown a span,
 #menu_dropdown label span {
     color: var(--text-1);
-    margin-left: 14px;
+    margin-left: 0.875rem;
 }
 
 #menu_dropdown>div>*:first-child {
@@ -946,19 +1030,19 @@ body {
     overscroll-behavior: none;
 }
 
-@media (min-width: 720px) and (min-aspect-ratio: 3/4) {
+@media (min-width: 45rem) and (min-aspect-ratio: 3/4) {
     .modal {
         padding: var(--segment-quarter);
     }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
     .modal {
         padding: var(--segment-half) var(--segment-third) var(--segment-third) var(--segment-third);
     }
 }
 
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
     .modal {
         padding: var(--segment) var(--segment-half) var(--segment-half) var(--segment-half);
     }
@@ -971,9 +1055,9 @@ body {
     position: relative;
     height: auto;
     min-height: 100%;
-    border: solid 1px var(--modal-border-outer);
-    border-radius: var(--segment-eighth) calc((var(--modal-button-close-border-radius) + var(--modal-button-close-inset)) + 1px) var(--segment-eighth) var(--segment-eighth);
-    box-shadow: inset 0 0 0 1px var(--modal-border-inner);
+    border: solid max(1px, 0.0625rem) var(--modal-border-outer);
+    border-radius: var(--segment-eighth) calc((var(--modal-button-close-border-radius) + var(--modal-button-close-inset)) + max(1px, 0.0625rem)) var(--segment-eighth) var(--segment-eighth);
+    box-shadow: inset 0 0 0 max(1px, 0.0625rem) var(--modal-border-inner);
     opacity: 0;
     padding-top: calc(var(--segment) / 5);
 }
@@ -985,14 +1069,14 @@ body {
 .modal .modal_content::before {
     content: '';
     position: absolute;
-    inset: 1px;
+    inset: max(1px, 0.0625rem);
     background: linear-gradient(to top right, var(--modal-bg-blur));
-    backdrop-filter: blur(48px);
-    -webkit-backdrop-filter: blur(48px);
-    border-radius: calc(var(--segment-eighth) - 2px) calc((var(--modal-button-close-border-radius) + var(--modal-button-close-inset)) - 1px) calc(var(--segment-eighth) - 2px) calc(var(--segment-eighth) - 2px);
+    backdrop-filter: blur(3rem);
+    -webkit-backdrop-filter: blur(3rem);
+    border-radius: calc(var(--segment-eighth) - 0.125rem) calc((var(--modal-button-close-border-radius) + var(--modal-button-close-inset)) - max(1px, 0.0625rem)) calc(var(--segment-eighth) - 0.125rem) calc(var(--segment-eighth) - 0.125rem);
 }
 
-@media (min-width: 720px) and (min-aspect-ratio: 3/4) {
+@media (min-width: 45rem) and (min-aspect-ratio: 3/4) {
     .modal .modal_content {
         padding-top: var(--segment-quarter);
     }
@@ -1002,7 +1086,7 @@ body {
     }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
     .modal .modal_content {
         padding-top: var(--segment-half);
     }
@@ -1012,7 +1096,7 @@ body {
     }
 }
 
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
     .modal .modal_content {
         padding-top: var(--segment);
     }
@@ -1026,9 +1110,9 @@ body {
 /* Modal - Close button */
 
 body {
-    --modal-button-close-size: 40px;
-    --modal-button-close-border-radius: 14px; /* 35% */
-    --modal-button-close-inset: 14px;
+    --modal-button-close-size: 2.5rem;
+    --modal-button-close-border-radius: 0.875rem; /* 35% */
+    --modal-button-close-inset: 0.875rem;
 }
 
 #modal_button-close {
@@ -1063,13 +1147,13 @@ body {
     color: var(--text-1);
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
     #modal_profile .information dl {
         padding: calc(var(--segment) * (3/4)) calc(var(--segment) * (3/4)) var(--segment-half) calc(var(--segment) * (3/4));
     }
 }
 
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
     #modal_profile .information dl {
         padding: var(--segment) var(--segment) var(--segment-quarter) var(--segment);
     }
@@ -1080,7 +1164,7 @@ body {
     margin-bottom: var(--segment-half);
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
     #modal_profile .information dl {
         grid-template-columns: auto 1fr;
         grid-row-gap: calc(var(--segment) * (3/4));
@@ -1098,26 +1182,26 @@ body {
 }
 
 #modal_profile .information dl a {
-    height: 12px;
+    height: 0.75rem;
     display: inline-flex;
     align-items: center;
 }
 
 #modal_profile .information dl img {
-    height: 15px;
-    margin-left: 8px;
+    height: 0.9375rem;
+    margin-left: 0.5rem;
     box-sizing: content-box;
-    /* border: 1px solid var(--modal-icon-outer-outline); */
+    /* border: max(1px, 0.0625rem) solid var(--modal-icon-outer-outline); */
 }
 
 #modal_profile .information dl dt {
     font-family: 'Chakra Petch', monospace;
     text-transform: uppercase;
     font-weight: 600;
-    letter-spacing: 4px;
-    font-size: 12.8571px;
-    line-height: 9px;
-    padding-top: 1.75px;
+    letter-spacing: 0.25rem;
+    font-size: 0.80356875rem;
+    line-height: 0.5625rem;
+    padding-top: 0.109375rem;
 }
 
 #modal_profile .information dl dt::before {
@@ -1135,16 +1219,16 @@ body {
 #modal_profile .information dd#modal_profile_timezone {
     display: inline-flex;
     align-items: center;
-    column-gap: 16px;
+    column-gap: 1rem;
 }
 
 #modal_profile .information dl dd #live-timezone-time {
     font-family: 'Chakra Petch', monospace;
     text-transform: uppercase;
     font-weight: 600;
-    letter-spacing: 2px;
-    font-size: 12.8571px;
-    line-height: 9px;
+    letter-spacing: 0.125rem;
+    font-size: 0.80356875rem;
+    line-height: 0.5625rem;
 }
 
 #modal_profile .information dl dd #live-timezone-time::before {
@@ -1163,13 +1247,13 @@ body {
 #modal_profile .information dl dd#modal_profile_text {
     display: inline-flex;
     flex-direction: column;
-    row-gap: 32px;
+    row-gap: 2rem;
 }
 
 #modal_profile .information dl dd>span,
 #modal_profile .information dl dd>p {
-    font-size: 17.1429px;
-    line-height: 26px;
+    font-size: 1.07143125rem;
+    line-height: 1.625rem;
     display: inline;
 }
 
@@ -1194,26 +1278,26 @@ body {
     list-style-type: unset;
     margin: 0;
     padding: 0;
-    column-gap: 8px;
-    row-gap: 10px;
+    column-gap: 0.5rem;
+    row-gap: 0.625rem;
 }
 
 #modal_profile .information dl dd#modal_profile_tags ul li {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    column-gap: 4px;
-    border-radius: 15984px;
+    column-gap: 0.25rem;
+    border-radius: 999rem;
     background-color: var(--modal-tag-bg);
-    padding: 9.75px 12px 8px;
-    /* margin-right: 8px;
-    margin-bottom: 10px; */
+    padding: 0.609375rem 0.75rem 0.5rem;
+    /* margin-right: 0.5rem;
+    margin-bottom: 0.625rem; */
 }
 
 #modal_profile .information dl dd#modal_profile_tags ul li span {
     font-family: 'Chakra Petch', monospace;
-    font-size: 15.7143px;
-    line-height: 26px;
+    font-size: 0.98214375rem;
+    line-height: 1.625rem;
     font-weight: 400;
 }
 
@@ -1230,21 +1314,21 @@ body {
 }
 
 #modal_profile .information dl dd#modal_profile_tags ul li svg:not(:first-child) {
-    margin-left: 6px;
+    margin-left: 0.375rem;
 }
 
 
 /* Logo animation */
 
 #logo {
-    padding: 20px;
-    margin-left: -20px;
-    margin-top: -20px;
-    margin-bottom: -20px;
+    padding: 1.25rem;
+    margin-left: -1.25rem;
+    margin-top: -1.25rem;
+    margin-bottom: -1.25rem;
     align-self: flex-start;
 }
 
-@media (min-width: 720px) and (min-aspect-ratio: 3/4) {
+@media (min-width: 45rem) and (min-aspect-ratio: 3/4) {
     #logo {
         margin-top: 0;
     }
@@ -1256,8 +1340,8 @@ body {
     animation-timing-function: steps(30);
     animation-fill-mode: forwards;
     animation-play-state: paused;
-    width: 40px;
-    height: 40px;
+    width: 2.5rem;
+    height: 2.5rem;
     background-size: cover;
     background-repeat: no-repeat;
     display: block;
@@ -1273,14 +1357,14 @@ body {
     }
 
     100% {
-        background-position: -1200px 0;
+        background-position: -75rem 0;
     }
 }
 
 
 /* Side background shapes */
 
-@media (min-width: 1080px) {
+@media (min-width: 67.5rem) {
     #triangle-left,
     #triangle-right,
     #triangle-right-alt {
@@ -1362,21 +1446,21 @@ body {
     z-index: 100;
     left: 50%;
     transform: translateX(-50%);
-    padding: 10px 12px;
-    border-radius: 3px;
+    padding: 0.625rem 0.75rem;
+    border-radius: 0.1875rem;
     background: var(--context-bg);
     color: var(--text-2);
     text-align: center;
-    box-shadow: inset 0 0 0 1px var(--context-border-inner);
-    border: solid 1px var(--context-border-outer);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
+    box-shadow: inset 0 0 0 max(1px, 0.0625rem) var(--context-border-inner);
+    border: solid max(1px, 0.0625rem) var(--context-border-outer);
+    backdrop-filter: blur(0.75rem);
+    -webkit-backdrop-filter: blur(0.75rem);
     pointer-events: none;
     white-space: nowrap;
     font-weight: 500;
-    letter-spacing: 0.375px;
-    font-size: 15.7143px;
-    line-height: 11px;
+    letter-spacing: 0.0234375rem;
+    font-size: 0.98214375rem;
+    line-height: 0.6875rem;
     opacity: 0;
     transition-property: opacity;
     transition-duration: 0.075s;
@@ -1397,26 +1481,26 @@ body {
 
 .tooltip.tooltip-top {
     bottom: 100%;
-    margin-bottom: 10px;
+    margin-bottom: 0.625rem;
 }
 
 .tooltip.tooltip-bottom {
     top: 100%;
-    margin-top: 10px;
+    margin-top: 0.625rem;
 }
 
 .tooltip.tooltip-top-left {
     left: 0;
     transform: translateX(0);
     bottom: 100%;
-    margin-bottom: 10px;
+    margin-bottom: 0.625rem;
 }
 
 .tooltip.tooltip-bottom-left {
     left: 0;
     transform: translateX(0);
     top: 100%;
-    margin-top: 10px;
+    margin-top: 0.625rem;
 }
 
 .tooltip::before {
@@ -1435,15 +1519,15 @@ body {
 /* Footer */
 
 footer>div {
-    column-gap: 18px;
+    column-gap: 1.125rem;
     max-width: var(--breakpoint-xl);
     padding: 0 var(--segment-half) var(--segment-half) var(--segment-half);
     margin: auto;
 }
 
 [id^="square"] {
-    width: 12px;
-    height: 12px;
+    width: 0.75rem;
+    height: 0.75rem;
 }
 
 #square-1 {
@@ -1468,61 +1552,61 @@ footer>div {
 
 #rectangle {
     width: 100%;
-    height: 12px;
-    background: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--footer-rectangle) 6px, var(--footer-rectangle) 12px), linear-gradient(to bottom, transparent, transparent);
+    height: 0.75rem;
+    background: repeating-linear-gradient(135deg, transparent, transparent 0.375rem, var(--footer-rectangle) 0.375rem, var(--footer-rectangle) 0.75rem), linear-gradient(to bottom, transparent, transparent);
 }
 
 
 /* Media queries */
 
-@media (min-width: 1680px) {
-    /* rules here apply to devices from 1680px and higher */
+@media (min-width: 105rem) {
+    /* rules here apply to devices from 105rem and higher */
 
     .intro_wrapper {
         max-width: var(--breakpoint-2xl);
-        /*padding: 48px 80px 48px 48px;*/
-        padding: 48px;
+        /*padding: 3rem 5rem 3rem 3rem;*/
+        padding: 3rem;
     }
 
     footer>div {
         max-width: var(--breakpoint-2xl);
-        padding: 56px 80px;
+        padding: 3.5rem 5rem;
     }
 }
 
-@media (min-width: 2560px) {
-    /* rules here apply to devices from 2560px and higher */
+@media (min-width: 160rem) {
+    /* rules here apply to devices from 160rem and higher */
 
     .intro_wrapper {
-        padding-top: 96px;
-        padding-bottom: 96px;
+        padding-top: 6rem;
+        padding-bottom: 6rem;
     }
 
     footer>div {
-        padding: 80px 80px;
+        padding: 5rem 5rem;
     }
 }
 
 /* Desktop-first media queries */
 
-/* @media (max-height: 880px) {
-    rules here apply to devices with height from 720px and lower
+/* @media (max-height: 55rem) {
+    rules here apply to devices with height from 45rem and lower
 
     footer {
         display: none;
     }
 } */
 
-@media (max-width: 1680px) {
-    /* rules here apply to devices from 1680px (2xl) and lower */
+@media (max-width: 105rem) {
+    /* rules here apply to devices from 105rem (2xl) and lower */
 
     .modal .information dl div.profile p {
         text-align: justify;
     }
 }
 
-@media (max-width: 1440px) {
-    /* rules here apply to devices from 1440px (xl) and lower */
+@media (max-width: 90rem) {
+    /* rules here apply to devices from 90rem (xl) and lower */
 
     .intro_wrapper {
         max-width: var(--breakpoint-xl);
@@ -1533,8 +1617,8 @@ footer>div {
     } */
 }
 
-@media (max-width: 1200px) {
-    /* rules here apply to devices from 1200px (lg) and lower */
+@media (max-width: 75rem) {
+    /* rules here apply to devices from 75rem (lg) and lower */
 
     /* .intro_wrapper,
     footer>div {
@@ -1546,13 +1630,13 @@ footer>div {
     }
 
     /* footer>div {
-        padding: 40px 32px;
+        padding: 2.5rem 2rem;
     } */
 
 }
 
-@media (max-width: 960px) {
-    /* rules here apply to devices from 960px (md) and lower */
+@media (max-width: 60rem) {
+    /* rules here apply to devices from 60rem (md) and lower */
 
     /* main {
 
@@ -1563,44 +1647,44 @@ footer>div {
     } */
 
     /* #logo {
-        margin: 4px 0 84px -20px;
+        margin: 0.25rem 0 5.25rem -1.25rem;
     } */
 
     /*     #intro_right-column>h3 {
-        padding-top: 48px;
+        padding-top: 3rem;
     }
 
     #intro_right-column {
-        padding-left: 24px;
+        padding-left: 1.5rem;
     } */
 
     /* #intro .availability {
-        padding-top: 46px;
+        padding-top: 2.875rem;
     } */
 
     /* #menu_email_button {
-        padding-top: 106px;
+        padding-top: 6.625rem;
     } */
 
     .modal .modal_content .information dl div {
-        padding-top: 20px;
-        padding-left: 20px;
-        padding-right: 28px;
-        margin-bottom: 14px;
+        padding-top: 1.25rem;
+        padding-left: 1.25rem;
+        padding-right: 1.75rem;
+        margin-bottom: 0.875rem;
         grid-template-columns: 1fr;
-        row-gap: 14px;
+        row-gap: 0.875rem;
     }
 
     .modal .modal_content .information dl div:first-child {
-        padding-top: 28px;
+        padding-top: 1.75rem;
     }
 
     .modal .modal_content .information dl div dt {
-        padding-bottom: 2.75px;
+        padding-bottom: 0.171875rem;
     }
 
     /* footer>div {
-        padding: 32px 24px;
+        padding: 2rem 1.5rem;
     } */
 
     .tooltip:hover .tooltip {
@@ -1608,11 +1692,11 @@ footer>div {
     }
 }
 
-@media (max-width: 720px) {
-    /* rules here apply to devices from 720px (sm) and lower */
+@media (max-width: 45rem) {
+    /* rules here apply to devices from 45rem (sm) and lower */
 
     /* #menu_links {
-        padding-top: 28px;
+        padding-top: 1.75rem;
         display: flex;
         flex-direction: column;
         align-items: flex-start;
@@ -1620,16 +1704,16 @@ footer>div {
 
     #menu_links>a,
     #menu_links>div {
-        margin-top: 20px;
+        margin-top: 1.25rem;
     }
 
     #menu_email_button {
-        padding-top: 58px;
+        padding-top: 3.625rem;
     } */
 }
 
-@media (max-width: 480px) {
-    /* rules here apply to devices from 480px (xs) and lower */
+@media (max-width: 30rem) {
+    /* rules here apply to devices from 30rem (xs) and lower */
 
     .intro_wrapper {
         max-width: var(--breakpoint-xs);
diff --git a/styles/utility.css b/styles/utility.css
index 5fc983b..06f766b 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -14,35 +14,35 @@
 
 body {
     --text-xs-font-weight: 500;
-    --text-xs-font-size: 14.2857px;
-    --text-xs-line-height: 16px;
-    --text-xs-letter-spacing: 2.5px;
+    --text-xs-font-size: 0.89285625rem;
+    --text-xs-line-height: 1rem;
+    --text-xs-letter-spacing: 0.15625rem;
     --text-xs_before-margin-bottom: -0.235em;
     --text-xs_after-margin-top: -0.185em;
 
     --text-sm-font-weight: 400;
-    --text-sm-font-size: 17.1429px;
-    --text-sm-line-height: 20px;
-    --text-sm-letter-spacing: 0.5px;
+    --text-sm-font-size: 1.07143125rem;
+    --text-sm-line-height: 1.25rem;
+    --text-sm-letter-spacing: 0.03125rem;
     --text-sm_before-margin-bottom: -0.2583em;
     --text-sm_after-margin-top: -0.2083em;
 
     --text-md-font-weight: 300;
-    --text-md-font-size: 22.8571px;
-    --text-md-line-height: 28px;
-    --text-md-letter-spacing: 1.25px;
+    --text-md-font-size: 1.42856875rem;
+    --text-md-line-height: 1.75rem;
+    --text-md-letter-spacing: 0.078125rem;
     --text-md_before-margin-bottom: -0.2875em;
     --text-md_after-margin-top: -0.2375em;;
 
     --text-lg-font-weight: 200;
-    --text-lg-font-size: 45.7143px;
-    --text-lg-line-height: 64px;
+    --text-lg-font-size: 2.85714375rem;
+    --text-lg-line-height: 4rem;
     --text-lg_before-margin-bottom: -0.375em;
     --text-lg_after-margin-top: -0.325em;
 
     --text-xl-font-weight: 200;
-    --text-xl-font-size: 68.5714px;
-    --text-xl-line-height: 96px;
+    --text-xl-font-size: 4.2857125rem;
+    --text-xl-line-height: 6rem;
     --text-xl_before-margin-bottom: -0.375em;
     --text-xl_after-margin-top: -0.325em;
 }
@@ -140,6 +140,30 @@ body {
     display: table;
 }
 
+/*
+.text-xs, .text-sm, .text-md, .text-lg, .text-xl {
+    font-size: 0.75rem;
+}
+
+@media (min-width: 45rem) {
+    .text-xs, .text-sm, .text-md, .text-lg, .text-xl {
+        font-size: 0.875rem;
+    }
+}
+
+@media (min-width: 75rem) {
+    .text-xs, .text-sm, .text-md, .text-lg, .text-xl {
+        font-size: 1rem;
+    }
+}
+
+@media (min-width: 160rem) {
+    .text-xs, .text-sm, .text-md, .text-lg, .text-xl {
+        font-size: 1.125rem;
+    }
+}
+*/
+
 
 /* Display */
 
@@ -305,18 +329,18 @@ body {
     padding-bottom: calc(var(--segment) / 2);
 }
 
-.px-1\/2 {
+NaNrem-1\/2 {
     padding-left: calc(var(--segment) / 2);
     padding-right: calc(var(--segment) / 2);
 }
 
 /* @media (var(--breakpoint-sm)) {
     .pt-24-sm {
-        padding-top: 24px;
+        padding-top: 1.5rem;
     }
 
     .pb-24-sm {
-        padding-bottom: 24px;
+        padding-bottom: 1.5rem;
     }
 
 } */
@@ -424,5 +448,5 @@ body {
 /* Border Radius */
 
 .rounded-full {
-    border-radius: 15984px;
+    border-radius: 999rem;
 }