diff --git a/public/css/default.css b/public/css/default.css
index 8676ce3..dd550fe 100644
--- a/public/css/default.css
+++ b/public/css/default.css
@@ -80,8 +80,8 @@ input[type="file"] {
 
 button {
     padding: 10px 20px;
-    border: 1px solid var(--color-border);
-    border-radius: 6px;
+    border: var(--border-width-thin) solid var(--color-border);
+    border-radius: var(--border-radius);
     background-color: var(--color-primary);
     color: var(--color-text);
     font-size: 14px;
@@ -131,6 +131,7 @@ nav a {
     font-size: 16px;
     text-align: center;
     text-decoration: none;
+    border-radius: var(--border-radius);
 }
 
 nav > a:first-child {
@@ -156,6 +157,7 @@ summary {
     cursor: pointer;
     list-style: none;
     display: block;
+    border-radius: var(--border-radius);
 }
 
 /* Remove the default details arrow on different browsers*/
@@ -178,8 +180,8 @@ details[open] summary::after { content: " ▲"; }
 .dropdown-items{
     position: absolute;
     background-color: var(--color-bg);
-    border: 1px solid var(--color-border);
-    border-radius: 6px;
+    border: var(--border-width-thin) solid var(--color-border);
+    border-radius: var(--border-radius);
     min-width: 160px;
     z-index: 1;
     top: 100%;
@@ -285,13 +287,13 @@ summary:focus,
 .flash-messages {
     margin-top: 10px;
     padding: 10px;
-    border-radius: 8px;
+    border-radius: var(--border-radius);
 }
 
 .flash-message {
     padding: 12px 16px;
     margin: 5px 0;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     border-left: 4px solid;
     font-weight: 500;
 }
@@ -322,7 +324,7 @@ summary:focus,
 }
 
 .file-info {
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     padding: 8px;
     margin-top: 8px;
     font-size: 13px;
@@ -332,7 +334,7 @@ summary:focus,
 
 .delete-btn {
     background-color: var(--color-delete-btn-bg);
-    border: 1px solid var(--color-delete-btn-border);
+    border: var(--border-width-thin) solid var(--color-delete-btn-border);
     color: var(--color-delete-btn);
 }
 
@@ -367,14 +369,14 @@ time {
     font-size: 1.4em;
     display: inline-block;
     padding: 0.2em;
-    border-radius: 0.3em;
+    border-radius: var(--border-radius);
 }
 
 .mood-option:hover span { background-color: var(--color-mood-hover); }
 
 .mood-option input:checked + span {
     background-color: var(--color-mood-selected);
-    outline: 2px solid var(--color-mood-border);
+    outline: var(--border-width) solid var(--color-mood-border);
 }
 
 /* emoji management page */
@@ -384,7 +386,7 @@ time {
     gap: 12px;
     padding: 8px 12px;
     border: 1px solid var(--color-border);
-    border-radius: 6px;
+    border-radius: var(--border-radius);
     background-color: var(--color-bg);
     margin-bottom: 6px;
 }
diff --git a/public/css/tkr.css b/public/css/tkr.css
deleted file mode 100644
index d287b19..0000000
--- a/public/css/tkr.css
+++ /dev/null
@@ -1,671 +0,0 @@
-@charset "UTF-8";
-
-:root {
-    /* Primary colors */
-    --color-primary: #4299e1;
-    --color-primary-dark: #3182ce;
-    --color-primary-darker: #2563eb;
-    --color-primary-light: #bae6fd;
-    --color-primary-lighter: #ebf8ff;
-    --color-primary-lightest: #f0f9ff;
-
-    /* Text colors */
-    --color-text-primary: #374151;
-    --color-text-secondary: #1e40af;
-    --color-text-tertiary: #0369a1;
-    --color-text-muted: gray;
-    --color-text-black: black;
-    --color-text-dark: #333;
-
-    /* Background colors */
-    --color-bg-body: whitesmoke;
-    --color-bg-white: white;
-    --color-bg-light: #fefefe;
-    --color-bg-file: #f8fafc;
-
-    /* Border colors */
-    --color-border-light: #e5e7eb;
-    --color-border-medium: #d1d5db;
-    --color-border-file: #cbd5e0;
-
-    /* State colors */
-    --color-required: #dc2626;
-    --color-primary-light: #dbeafe;
-    --color-primary-medium: #bfdbfe;
-    --color-emoji-bg: #ddeeff;
-    --color-emoji-border: #339;
-
-    /* Shadow colors */
-    --shadow-primary: rgba(66, 153, 225, 0.1);
-    --shadow-primary-strong: rgba(66, 153, 225, 0.3);
-
-    /* Flash message colors */
-    --color-flash-success: #155724;
-    --color-flash-success-bg: #d4edda;
-    --color-flash-success-border-left: #28a745;
-
-    --color-flash-error: #721c24;
-    --color-flash-error-bg: #f8d7da;
-    --color-flash-error-border-left: #dc3545;
-
-    --color-flash-warning: #856404;
-    --color-flash-warning-bg: #fff3cd;
-    --color-flash-warning-border-left: #ffc107;
-
-    --color-flash-info: #0c5460;
-    --color-flash-info-bg: #d1ecf1;
-    --color-flash-info-border-left: #17a2b8;
-}
-
-/* default element styling */
-body {
-    max-width: 940px;
-    margin: 0 auto;
-    padding: 1em;
-    /* standard system fonts that shouldn't require downloading anything */
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-    background-color: var(--color-bg-body);
-    color: var(--color-text-black);
-}
-
-a {
-    font-weight: bold;
-}
-
-legend {
-    background-color: var(--color-bg-white);
-    padding: 6px 12px;
-    border-radius: 4px;
-    font-weight: 600;
-    color: var(--color-text-primary);
-    border: 1px solid var(--color-border-medium);
-}
-
-fieldset {
-    border: 2px solid var(--color-border-light);
-    border-radius: 6px;
-    padding: 16px;
-    margin-bottom: 16px;
-    background-color: var(--color-bg-light);
-}
-
-/*
-  Make the site description a little smaller,
-  but keep it an h1 for screen readers.
-*/
-h1.site-description {
-    font-size: 1.5em;
-}
-
-input[type="text"],
-input[type="number"],
-input[type="password"],
-textarea,
-select {
-    width: 100%;
-    padding: 10px 12px;
-    border: 1px solid var(--color-border-medium);
-    border-radius: 6px;
-    font-family: inherit;
-    font-size: 1em;
-    resize: none;
-    transition: border-color 0.2s ease;
-    box-sizing: border-box;
-}
-
-input[type="text"]:focus,
-input[type="number"]:focus,
-input[type="password"]:focus,
-textarea:focus,
-select:focus {
-    outline: none;
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 2px var(--shadow-primary);
-}
-
-input[type="file"] {
-    width: 100%;
-    padding: 10px;
-    border: 2px dashed var(--color-border-file);
-    border-radius: 6px;
-    background-color: var(--color-bg-file);
-    cursor: pointer;
-    font-size: 14px;
-    transition: all 0.3s ease;
-    box-sizing: border-box;
-}
-
-input[type="file"]:hover {
-    border-color: var(--color-primary);
-    background-color: var(--color-primary-lighter);
-}
-
-input[type="file"]:focus {
-    outline: none;
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px var(--shadow-primary);
-}
-
-button {
-    padding: 10px 20px;
-    border: 1px solid var(--color-primary);
-    border-radius: 6px;
-    background-color: var(--color-primary-lightest);
-    color: var(--color-text-secondary);
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s ease; /* give the color changes on hover, focus, and active a slight delay to feel a bit more natural */
-    box-sizing: border-box;
-}
-
-button:hover {
-    background-color: var(--color-primary-light);
-    border-color: var(--color-primary-dark);
-}
-
-button:focus {
-    outline: none;
-    border-color: var(--color-primary-darker);
-    box-shadow: 0 0 0 2px var(--shadow-primary);
-}
-
-button:active {
-    background-color: var(--color-primary-medium);
-}
-
-label {
-    font-weight: 600;
-    color: var(--color-text-primary);
-    text-align: left;
-    padding-top: 0;
-    margin-bottom: 3px;
-    line-height: 1.2;
-}
-
-label.description {
-    font-weight: 300;
-    color: var(--color-text-muted);
-    text-align: left;
-    padding-top: 0;
-    margin-bottom: 3px;
-    line-height: 1.2;
-}
-
-/* Grid layout for emoji fieldsets */
-fieldset.emoji-group {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(2em, 1fr));
-    gap: 0.3em;
-}
-
-.delete-emoji-fieldset .fieldset-items {
-    display: block;
-    grid-template-columns: none;
-}
-
-.delete-emoji-fieldset button {
-    margin-top: 16px;
-    width: auto;
-}
-
-.navbar {
-  overflow: visible;
-  background: var(--color-bg-white);
-  display: flex;
-  align-items: center;
-}
-
-.navbar a {
-  font-size: 16px;
-  color: var(--color-text-secondary);
-  text-align: center;
-  padding: 14px 16px;
-  text-decoration: none;
-}
-
-.navbar a:hover {
-    background: var(--color-primary-light);
-    color: var(--color-primary-dark);
-}
-
-.navbar a:focus {
-    outline: none;
-    background: var(--color-primary-light);
-    box-shadow: 0 0 0 2px var(--shadow-primary);
-}
-
-/*
-   Using details/summary tags to build dropdowm menus.
-   They have to be clicked open and closed, but they allow
-   me to have semantically appropriate pure HTML dropdowms
-   that work on mobile devices.
-*/
-.dropdown {
-  overflow: visible;
-  position: relative;
-}
-
-.dropdown summary {
-  font-size: 16px;
-  border: none;
-  border-radius: 0px;
-  outline: none;
-  color: var(--color-text-secondary);
-  padding: 14px 16px;
-  background-color: inherit;
-  font-family: inherit;
-  font-weight: bold;
-  margin: 0;
-  cursor: pointer;
-  list-style: none; /* Remove default arrow */
-  display: block;
-}
-
-/* Remove the default details arrow */
-.dropdown summary::-webkit-details-marker {
-    display: none;
-}
-
-.dropdown summary::-moz-list-bullet {
-    list-style-type: none;
-}
-
-/* Add a downward-facing caret after the button label */
-.dropdown summary::after {
-    content: " ▼";
-    font-size: 0.8em;
-    margin-left: 4px;
-}
-
-/* Rotate the caret when opened */
-.dropdown[open] summary::after {
-    content: " ▲";
-}
-
-.dropdown summary:hover {
-  background: var(--color-primary-light);
-  color: var(--color-primary-dark);
-}
-
-.dropdown summary:focus {
-  background: var(--color-primary-light);
-  color: var(--color-primary-dark);
-  outline: none;
-  box-shadow: 0 0 0 2px var(--shadow-primary);
-}
-
-.dropdown-content {
-  position: absolute;
-  background-color: var(--color-bg-white);
-  border: 1px solid var(--color-border-light);
-  border-radius: 6px;
-  min-width: 160px;
-  box-shadow: 0px 8px 16px 0px var(--shadow-primary);
-  z-index: 1;
-  top: 100%;
-  left: 0;
-}
-
-.dropdown-content a {
-  float: none;
-  color: var(--color-text-primary);
-  padding: 12px 16px;
-  text-decoration: none;
-  display: block;
-  text-align: left;
-}
-
-.dropdown-content a:hover {
-    background: var(--color-primary-light);
-    color: var(--color-primary-dark);
-}
-
-.dropdown-content a:focus {
-    outline: none;
-    background: var(--color-primary-light);
-    box-shadow: 0 0 0 2px var(--shadow-primary);
-}
-
-/*
-    The two common display options for responsive layouts are flex and grid.
-        flex (aka Flexbox) aligns items either horizontally or vertically.
-        grid can align items in two dimensions.
-        grid also allows more precise positioning of elements, so I'm using that
-        even though I only have one dimension.
-*/
-
-.home-container {
-    display: grid;
-}
-
-.home-sidebar{
-    padding-top: 1em;
-    padding-bottom: 1em;
-}
-
-.site-description {
-    font-size: 1.2rem;
-    color: var(--color-text-dark);
-    margin-bottom: 1.2rem;
-}
-
-.profile-data {
-  display: grid;
-  gap: 1rem;
-  margin: 0;
-  margin-bottom: 1rem;
-}
-
-/* Description list: description */
-.profile-data dd {
-  margin: 0;
-}
-
-/* Description list: term */
-/* Hidden from visual display - screen reader only class */
-.profile-data dt {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/*
-    Left-justify the greeting text,
-    right-justify the Change Mood link
-*/
-
-/* greeting text */
-.profile-greeting {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-/* add a small gap between the greeting and the mood emoji */
-.profile-greeting-content {
-    display: flex;
-    align-items: baseline;
-    gap: 0.4em;
-}
-
-/* define the profile "greeting" style */
-.profile-greeting-content-text {
-    font-weight: 600;
-    font-size: 1.1em;
-    color: var(--color-text-primary);
-}
-
-/* Adjust emoji positioning */
-.greeting-emoji {
-    vertical-align: middle;
-}
-
-/* Style the Change Mood link */
-.change-mood {
-    font-size: 0.9em;
-    white-space: nowrap;
-}
-
-/* define the profile "about" style */
-.profile-about {
-    font-style: italic;
-    font-size: 0.95em;
-    color: var(--color-text-muted);
-}
-
-.profile-tick-form {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 0.5em;
-}
-
-/* Styling for flash messages */
-.flash-messages {
-    background: var(--color-bg-white);
-    margin-top: 10px;
-    padding: 15px;
-    border-radius: 8px;
-    box-shadow: 0 2px 10px var(--shadow-primary);
-}
-
-.flash-message {
-    padding: 12px 16px;
-    margin: 5px 0;
-    border-radius: 4px;
-    border-left: 4px solid;
-    font-weight: 500;
-}
-
-.flash-success {
-    background-color: var(--color-flash-success-bg);
-    border-left-color: var(--color-flash-success-border-left);
-    color: var(--color-flash-success);
-}
-
-.flash-error {
-    background-color: var(--color-flash-error-bg);
-    border-left-color: var(--color-flash-error-border-left);
-    color: var(--color-flash-error);
-}
-
-.flash-warning {
-    background-color: var(--color-flash-warning-bg);
-    border-left-color: var(--color-flash-warning-border-left);
-    color: var(--color-flash-warning);
-}
-
-.flash-info {
-    background-color: var(--color-flash-info-bg);
-    border-left-color: var(--color-flash-info-border-left);
-    color: var(--color-flash-info);
-}
-
-.fieldset-items {
-    margin-bottom: 14px;
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 6px;
-    align-items: start;
-}
-
-.file-input-wrapper {
-    position: relative;
-    width: 100%;
-}
-
-.file-info {
-    background-color: var(--color-primary-lightest);
-    border: 1px solid var(--color-primary-light);
-    border-radius: 4px;
-    padding: 8px;
-    margin-top: 8px;
-    font-size: 13px;
-    color: var(--color-text-tertiary);
-    grid-column: 1;
-}
-
-.delete-btn {
-    background-color: #fef2f2;
-    color: #dc2626;
-    border: 1px solid #fca5a5;
-    padding: 10px 20px;
-    border-radius: 6px;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    box-sizing: border-box;
-}
-
-.delete-btn:hover {
-    background-color: #fee2e2;
-    border-color: #f87171;
-}
-
-.delete-btn:focus {
-    outline: none;
-    border-color: #dc2626;
-    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
-}
-
-.delete-btn:active {
-    background-color: #fecaca;
-}
-
-.required {
-    color: var(--color-required);
-}
-
-.tick-feed {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    margin-top: 0.5em;
-}
-
-.tick {
-    margin-bottom: 1em;
-    padding-left: 0.5em;
-}
-
-.tick-time {
-    color: var(--color-text-muted);
-    font-size: 0.8em;
-    margin-bottom: 0.4em;
-}
-
-.tick-text {
-    color: var(--color-text-black);
-    font-size: 1.0em;
-    display: block;
-}
-
-.tick-pagination a {
-    margin: 0 5px;
-    text-decoration: none;
-}
-
-.mood-option input {
-    display: none;
-}
-
-.mood-option span {
-    font-size: 1.4em;
-    display: inline-block;
-    padding: 0.2em;
-    border-radius: 0.3em;
-}
-
-.mood-option input:checked + span {
-    background-color: var(--color-emoji-bg);
-    outline: 2px solid var(--color-emoji-border);
-}
-
-.delete-emoji-item {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 8px 12px;
-    border: 1px solid var(--color-border-light);
-    border-radius: 6px;
-    background-color: var(--color-bg-white);
-    transition: all 0.2s ease;
-    margin-bottom: 6px;
-}
-
-.delete-emoji-item:hover {
-    background-color: var(--color-primary-light);
-    border-color: var(--color-primary);
-}
-
-.delete-emoji-item input[type="checkbox"] {
-    width: auto;
-    margin: 0;
-    cursor: pointer;
-}
-
-.delete-emoji-item label {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin: 0;
-    padding: 0;
-    font-weight: 400;
-    cursor: pointer;
-    flex-grow: 1;
-    text-align: left;
-}
-
-.delete-emoji-display {
-    font-size: 1.8em;
-    min-width: 2em;
-    text-align: center;
-}
-
-.emoji-description {
-    flex-grow: 1;
-    color: var(--color-text-primary);
-    font-size: 1em;
-}
-
-.delete-emoji-item input[type="checkbox"]:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--shadow-primary);
-}
-
-/*
-    Responsive layout - adjusts from 1 to 2 columns based on screen width
-        - min-width makes the mobile (stacked) view the default
-        - 600px covers most mobile devices in portrait mode
-        - Once the width exceeds that (e.g. desktops), it will convert to horizontal alignment
-*/
-@media (min-width: 600px) {
-    label {
-        text-align: right;
-        padding-top: 10px;
-        margin-bottom: 0;
-    }
-
-    label.description {
-        padding-top: 10px;
-        margin-bottom: 0;
-    }
-
-    .home-container {
-        grid-template-columns: 1fr 2fr;
-        grid-gap: 2em;
-    }
-
-    .fieldset-items {
-        margin-bottom: 16px;
-        display: grid;
-        grid-template-columns: 200px 1fr;
-        gap: 16px;
-        align-items: start;
-    }
-
-    .file-info {
-        grid-column: 2;
-    }
-
-    .navbar {
-        flex-wrap: wrap;
-    }
-
-    .dropdown-menu {
-        position: fixed;
-        left: 1em;
-        right: 1em;
-        width: auto;
-        min-width: auto;
-    }
-}