fix: aligning icons on sidebar/topbar

2 files changed, 1094 insertions, 0 deletions

diff --git a/static/input.css b/static/input.css
new file mode 100644
index 0000000..3b90f50
--- /dev/null
+++ b/static/input.css
@@ -0,0 +1,387 @@
+@import "tailwindcss";
+
+@theme {
+    --color-olive-dark: #4b513a;
+    --color-olive-medium: #8a9d8a;
+    --color-olive-light: #a5b8a5;
+    --color-cream-dark: #ffffdd;
+    --color-cream-light: #fffff0;
+    --color-lettuce-dark: #384a0c;
+    --color-lettuce-medium: #9bb665;
+    --color-lettuce-light: #bbd095;
+    --color-sunny-dark: #f5eee2;
+    --color-sunny-light: #fff93f;
+
+    --font-spectral: Spectral, serif;
+    --font-patua: "Patua One", cursive;
+}
+
+[data-theme="olive"] {
+    --main-dark-color: #4b513a;
+    --main-medium-color: #8a9d8a;
+    --main-light-color: #a5b8a5;
+    --background-dark-color: #ffffdd;
+    --background-light-color: #fffff0;
+    --sidebar-text-color: var(--background-dark-color);
+    --sidebar-stroke-color: var(--main-dark-color);
+    --secondary-color: var(--main-light-color);
+    --interlocked-hexagons-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/olive/interlocked-hexagons.svg');
+    --squares-and-triangles-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/olive/squares-and-triangles.svg');
+    --invert-colors-in-sidebar: false;
+}
+
+[data-theme="lettuce"] {
+    --main-dark-color: #384a0c;
+    --main-medium-color: #9bb665;
+    --main-light-color: #bbd095;
+    --background-dark-color: #f5eee2;
+    --background-light-color: #fff9ef;
+    --sidebar-text-color: var(--main-dark-color);
+    --sidebar-stroke-color: var(--background-dark-color);
+    --secondary-color: var(--main-medium-color);
+    --interlocked-hexagons-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/lettuce/interlocked-hexagons.svg');
+    --squares-and-triangles-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/lettuce/squares-and-triangles.svg');
+    --invert-colors-in-sidebar: true;
+}
+
+.bg-interlocked-hexagons {
+    background-image: var(--interlocked-hexagons-background);
+}
+
+.bg-squares-and-triangles {
+    background-image: var(--squares-and-triangles-background);
+}
+
+.text-sidebar {
+    color: var(--sidebar-text-color);
+}
+
+.stroke-sidebar {
+    border-color: var(--sidebar-stroke-color);
+}
+
+.text-main-dark {
+    color: var(--main-dark-color);
+}
+
+.text-background-dark {
+    color: var(--background-dark-color);
+}
+
+.text-secondary {
+    color: var(--secondary-color);
+}
+
+.bg-main-dark {
+    background-color: var(--main-dark-color);
+}
+
+.bg-background-dark {
+    background-color: var(--background-dark-color);
+}
+
+.bg-background-light {
+    background-color: var(--background-light-color);
+}
+
+.border-main-dark {
+    border-color: var(--main-dark-color);
+}
+
+.desktop-sidebar-custom {
+    width: 5vw;
+    background-size: 10vw;
+}
+
+.mobile-topbar-custom {
+    width: 90vw;
+    height: 10vh;
+    background-size: 20vh;
+    margin-left: 5vw;
+}
+
+.logo-custom {
+    width: 3.5vw;
+    height: 25vw;
+    font-size: 2.5vw;
+    -webkit-text-stroke: 0.1vw var(--sidebar-stroke-color);
+    writing-mode: sideways-lr;
+    text-orientation: mixed;
+    display: block;
+}
+
+.nav-icon-custom {
+    font-size: 3vw !important;
+    -webkit-text-stroke: 0.1vw var(--sidebar-stroke-color);
+    width: 5vw;
+    height: 5vw;
+    align-content: center;
+    text-align: center;
+}
+
+.nav-icon-custom:hover {
+    font-size: 4vw;
+}
+
+.content-square {
+    width: 100vh;
+}
+
+.border-left-custom {
+    width: 0.5vw;
+    border-right: 0.3vh dashed var(--main-dark-color);
+}
+
+.border-right-custom {
+    width: 0.5vw;
+    border-left: 0.5vh dotted var(--main-dark-color);
+}
+
+.bg-pattern-body {
+    background-size: 10vw;
+}
+
+.inset-shadow {
+    box-shadow: inset 0vh 1vh 1vh -1vh rgba(75, 81, 58, 0.5),
+        inset 1vh 0vh 1vh -1vh rgba(75, 81, 58, 0.5),
+        inset -1vh 0vh 1vh -1vh rgba(75, 81, 58, 0.5),
+        inset 0vh -0.5vh rgba(75, 81, 58, 0.5);
+}
+
+.desktop {
+    display: flex;
+}
+
+.mobile {
+    display: none;
+}
+
+.lh-0-9 {
+    line-height: 0.9;
+}
+
+.lh-2 {
+    line-height: 2;
+}
+
+.ls-vmin0-04 {
+    letter-spacing: 0.04vmin;
+}
+
+.timl-vmax2 {
+    text-indent: 2vmax hanging;
+}
+
+.text-vmax0-8 {
+    font-size: 0.8vmax;
+}
+
+.text-vmax1 {
+    font-size: 1vmax !important;
+}
+
+.text-vmax1-5 {
+    font-size: 1.5vmax !important;
+}
+
+.text-vmax2 {
+    font-size: 2vmax;
+}
+
+.w-vw90 {
+    width: 90vw;
+}
+
+.h-vh90 {
+    height: 90vh;
+}
+
+.w-p80 {
+    width: 80%;
+}
+
+.mt-vmin0-8 {
+    margin-top: 0.8vmin;
+}
+
+.mt-vmin1-6 {
+    margin-top: 1.6vmin;
+}
+
+.mx-vmin1-6 {
+    margin-left: 1.6vmin;
+    margin-right: 1.6vmin;
+}
+
+.mb-vmin0-4 {
+    margin-bottom: 0.4vmin;
+}
+
+.mb-vmin0-8 {
+    margin-bottom: 0.8vmin;
+}
+
+.pl-vmin0-8 {
+    padding-left: 0.8vmin;
+}
+
+.pr-vmin1-2 {
+    padding-right: 1.2vmin;
+}
+
+.p-vmin2-4 {
+    padding: 2.4vmin;
+}
+
+.lg-backdrop {
+    background-color: var(--background-light-color);
+}
+
+.lg-thumb-outer {
+    background-color: var(--background-light-color) !important;
+}
+
+.lg-prev {
+    background-color: var(--background-light-color);
+    color: var(--main-dark-color);
+}
+
+.lg-next {
+    background-color: var(--background-light-color);
+    color: var(--main-dark-color);
+}
+
+.lg-counter {
+    color: var(--main-dark-color);
+    font-family: 'Spectral';
+    font-size: 1vmax;
+    padding-top: 0;
+    height: 1vmax;
+}
+
+.lg-toolbar .lg-icon {
+    padding: 0 0.7vmax;
+    font-size: 1.5vmax !important;
+    height: 1.5vmax;
+    width: auto;
+    color: var(--main-dark-color);
+}
+
+.lg-toolbar .lg-icon:hover {
+    color: var(--main-medium-color);
+}
+
+.lg-toolbar .lg-icon {
+    font-size: 1.5vmax !important;
+    color: var(--main-dark-color);
+}
+
+.lg-content .lg-icon:hover {
+    color: var(--main-medium-color);
+}
+
+.lg-sub-html {
+    padding: 0.7vmin 1.25vmin !important;
+}
+
+.inline-gallery-container {
+    width: 80%;
+    height: 60vmin;
+}
+
+.light-gallery-captions {
+    p {
+        transform: translate3d(0, 0, 0px);
+        transition-delay: 500ms;
+        opacity: 1;
+    }
+}
+
+.lg-slide-progress {
+    .light-gallery-captions {
+        h4 {
+            transform: translate3d(-60px, 0, 0px);
+        }
+
+        p {
+            transform: translate3d(60px, 0, 0px);
+        }
+
+        h4,
+        p {
+            opacity: 0;
+        }
+    }
+}
+
+.lg-current {
+    &.lg-slide-progress {
+        .light-gallery-captions {
+
+            h4,
+            p {
+                transition-delay: 0ms;
+            }
+        }
+    }
+}
+
+/* Mobile responsive styles */
+@media (max-aspect-ratio: 1.1/1) {
+    .desktop {
+        display: none;
+    }
+
+    .mobile {
+        display: flex;
+    }
+
+    .inline-gallery-container {
+        width: 100%;
+    }
+
+    .desktop-sidebar-custom {
+        width: 90%;
+        margin-left: 5vw;
+        height: 10vh;
+        background-size: 20vh;
+    }
+
+    .logo-custom {
+        display: none;
+    }
+
+    .nav-icon-custom {
+        font-size: 6vh !important;
+        -webkit-text-stroke: 0.1vh var(--sidebar-stroke-color);
+        width: 10vh;
+        height: 10vh;
+        align-content: center;
+        text-align: center;
+    }
+
+    .nav-icon-custom:hover {
+        font-size: 8vh;
+    }
+
+    .bg-pattern-body {
+        background-size: 10vh;
+    }
+
+    .border-left-custom {
+        width: 1%;
+        border-right: 0.3vw dashed var(--main-dark-color);
+    }
+
+    .border-right-custom {
+        width: 1.5%;
+        border-left: 0.5vw dotted var(--main-dark-color);
+    }
+}
+
+@media (max-aspect-ratio: 0.4/1) {
+    .desktop-sidebar-custom {
+        width: 100%;
+        margin-left: 0;
+    }
+}
\ No newline at end of file
diff --git a/static/output.css b/static/output.css
new file mode 100644
index 0000000..3b4e05f
--- /dev/null
+++ b/static/output.css
@@ -0,0 +1,707 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+    --spacing: 0.25rem;
+    --font-weight-extrabold: 800;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+    --font-spectral: Spectral, serif;
+    --font-patua: "Patua One", cursive;
+  }
+}
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden='until-found'])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .fixed {
+    position: fixed;
+  }
+  .relative {
+    position: relative;
+  }
+  .z-10 {
+    z-index: 10;
+  }
+  .z-20 {
+    z-index: 20;
+  }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
+  .m-2 {
+    margin: calc(var(--spacing) * 2);
+  }
+  .mt-auto {
+    margin-top: auto;
+  }
+  .mr-2 {
+    margin-right: calc(var(--spacing) * 2);
+  }
+  .mr-auto {
+    margin-right: auto;
+  }
+  .mb-auto {
+    margin-bottom: auto;
+  }
+  .ml-auto {
+    margin-left: auto;
+  }
+  .flex {
+    display: flex;
+  }
+  .h-screen {
+    height: 100vh;
+  }
+  .flex-1 {
+    flex: 1;
+  }
+  .grow {
+    flex-grow: 1;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .resize {
+    resize: both;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .flex-row {
+    flex-direction: row;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .border-t-4 {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 4px;
+  }
+  .border-dotted {
+    --tw-border-style: dotted;
+    border-style: dotted;
+  }
+  .bg-repeat {
+    background-repeat: repeat;
+  }
+  .pr-2 {
+    padding-right: calc(var(--spacing) * 2);
+  }
+  .text-center {
+    text-align: center;
+  }
+  .text-left {
+    text-align: left;
+  }
+  .text-right {
+    text-align: right;
+  }
+  .font-patua {
+    font-family: var(--font-patua);
+  }
+  .font-spectral {
+    font-family: var(--font-spectral);
+  }
+  .font-extrabold {
+    --tw-font-weight: var(--font-weight-extrabold);
+    font-weight: var(--font-weight-extrabold);
+  }
+  .italic {
+    font-style: italic;
+  }
+  .shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
+  .select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+}
+[data-theme="olive"] {
+  --main-dark-color: #4b513a;
+  --main-medium-color: #8a9d8a;
+  --main-light-color: #a5b8a5;
+  --background-dark-color: #ffffdd;
+  --background-light-color: #fffff0;
+  --sidebar-text-color: var(--background-dark-color);
+  --sidebar-stroke-color: var(--main-dark-color);
+  --secondary-color: var(--main-light-color);
+  --interlocked-hexagons-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/olive/interlocked-hexagons.svg');
+  --squares-and-triangles-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/olive/squares-and-triangles.svg');
+  --invert-colors-in-sidebar: false;
+}
+[data-theme="lettuce"] {
+  --main-dark-color: #384a0c;
+  --main-medium-color: #9bb665;
+  --main-light-color: #bbd095;
+  --background-dark-color: #f5eee2;
+  --background-light-color: #fff9ef;
+  --sidebar-text-color: var(--main-dark-color);
+  --sidebar-stroke-color: var(--background-dark-color);
+  --secondary-color: var(--main-medium-color);
+  --interlocked-hexagons-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/lettuce/interlocked-hexagons.svg');
+  --squares-and-triangles-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/lettuce/squares-and-triangles.svg');
+  --invert-colors-in-sidebar: true;
+}
+.bg-interlocked-hexagons {
+  background-image: var(--interlocked-hexagons-background);
+}
+.bg-squares-and-triangles {
+  background-image: var(--squares-and-triangles-background);
+}
+.text-sidebar {
+  color: var(--sidebar-text-color);
+}
+.stroke-sidebar {
+  border-color: var(--sidebar-stroke-color);
+}
+.text-main-dark {
+  color: var(--main-dark-color);
+}
+.text-background-dark {
+  color: var(--background-dark-color);
+}
+.text-secondary {
+  color: var(--secondary-color);
+}
+.bg-main-dark {
+  background-color: var(--main-dark-color);
+}
+.bg-background-dark {
+  background-color: var(--background-dark-color);
+}
+.bg-background-light {
+  background-color: var(--background-light-color);
+}
+.border-main-dark {
+  border-color: var(--main-dark-color);
+}
+.desktop-sidebar-custom {
+  width: 5vw;
+  background-size: 10vw;
+}
+.mobile-topbar-custom {
+  width: 90vw;
+  height: 10vh;
+  background-size: 20vh;
+  margin-left: 5vw;
+}
+.logo-custom {
+  width: 3.5vw;
+  height: 25vw;
+  font-size: 2.5vw;
+  -webkit-text-stroke: 0.1vw var(--sidebar-stroke-color);
+  writing-mode: sideways-lr;
+  text-orientation: mixed;
+  display: block;
+}
+.nav-icon-custom {
+  font-size: 3vw !important;
+  -webkit-text-stroke: 0.1vw var(--sidebar-stroke-color);
+  width: 5vw;
+  height: 5vw;
+  align-content: center;
+  text-align: center;
+}
+.nav-icon-custom:hover {
+  font-size: 4vw;
+}
+.content-square {
+  width: 100vh;
+}
+.border-left-custom {
+  width: 0.5vw;
+  border-right: 0.3vh dashed var(--main-dark-color);
+}
+.border-right-custom {
+  width: 0.5vw;
+  border-left: 0.5vh dotted var(--main-dark-color);
+}
+.bg-pattern-body {
+  background-size: 10vw;
+}
+.inset-shadow {
+  box-shadow: inset 0vh 1vh 1vh -1vh rgba(75, 81, 58, 0.5), inset 1vh 0vh 1vh -1vh rgba(75, 81, 58, 0.5), inset -1vh 0vh 1vh -1vh rgba(75, 81, 58, 0.5), inset 0vh -0.5vh rgba(75, 81, 58, 0.5);
+}
+.desktop {
+  display: flex;
+}
+.mobile {
+  display: none;
+}
+.lh-0-9 {
+  line-height: 0.9;
+}
+.lh-2 {
+  line-height: 2;
+}
+.ls-vmin0-04 {
+  letter-spacing: 0.04vmin;
+}
+.timl-vmax2 {
+  text-indent: 2vmax hanging;
+}
+.text-vmax0-8 {
+  font-size: 0.8vmax;
+}
+.text-vmax1 {
+  font-size: 1vmax !important;
+}
+.text-vmax1-5 {
+  font-size: 1.5vmax !important;
+}
+.text-vmax2 {
+  font-size: 2vmax;
+}
+.w-vw90 {
+  width: 90vw;
+}
+.h-vh90 {
+  height: 90vh;
+}
+.w-p80 {
+  width: 80%;
+}
+.mt-vmin0-8 {
+  margin-top: 0.8vmin;
+}
+.mt-vmin1-6 {
+  margin-top: 1.6vmin;
+}
+.mx-vmin1-6 {
+  margin-left: 1.6vmin;
+  margin-right: 1.6vmin;
+}
+.mb-vmin0-4 {
+  margin-bottom: 0.4vmin;
+}
+.mb-vmin0-8 {
+  margin-bottom: 0.8vmin;
+}
+.pl-vmin0-8 {
+  padding-left: 0.8vmin;
+}
+.pr-vmin1-2 {
+  padding-right: 1.2vmin;
+}
+.p-vmin2-4 {
+  padding: 2.4vmin;
+}
+.lg-backdrop {
+  background-color: var(--background-light-color);
+}
+.lg-thumb-outer {
+  background-color: var(--background-light-color) !important;
+}
+.lg-prev {
+  background-color: var(--background-light-color);
+  color: var(--main-dark-color);
+}
+.lg-next {
+  background-color: var(--background-light-color);
+  color: var(--main-dark-color);
+}
+.lg-counter {
+  color: var(--main-dark-color);
+  font-family: 'Spectral';
+  font-size: 1vmax;
+  padding-top: 0;
+  height: 1vmax;
+}
+.lg-toolbar .lg-icon {
+  padding: 0 0.7vmax;
+  font-size: 1.5vmax !important;
+  height: 1.5vmax;
+  width: auto;
+  color: var(--main-dark-color);
+}
+.lg-toolbar .lg-icon:hover {
+  color: var(--main-medium-color);
+}
+.lg-toolbar .lg-icon {
+  font-size: 1.5vmax !important;
+  color: var(--main-dark-color);
+}
+.lg-content .lg-icon:hover {
+  color: var(--main-medium-color);
+}
+.lg-sub-html {
+  padding: 0.7vmin 1.25vmin !important;
+}
+.inline-gallery-container {
+  width: 80%;
+  height: 60vmin;
+}
+.light-gallery-captions {
+  p {
+    transform: translate3d(0, 0, 0px);
+    transition-delay: 500ms;
+    opacity: 1;
+  }
+}
+.lg-slide-progress {
+  .light-gallery-captions {
+    h4 {
+      transform: translate3d(-60px, 0, 0px);
+    }
+    p {
+      transform: translate3d(60px, 0, 0px);
+    }
+    h4, p {
+      opacity: 0;
+    }
+  }
+}
+.lg-current {
+  &.lg-slide-progress {
+    .light-gallery-captions {
+      h4, p {
+        transition-delay: 0ms;
+      }
+    }
+  }
+}
+@media (max-aspect-ratio: 1.1/1) {
+  .desktop {
+    display: none;
+  }
+  .mobile {
+    display: flex;
+  }
+  .inline-gallery-container {
+    width: 100%;
+  }
+  .desktop-sidebar-custom {
+    width: 90%;
+    margin-left: 5vw;
+    height: 10vh;
+    background-size: 20vh;
+  }
+  .logo-custom {
+    display: none;
+  }
+  .nav-icon-custom {
+    font-size: 6vh !important;
+    -webkit-text-stroke: 0.1vh var(--sidebar-stroke-color);
+    width: 10vh;
+    height: 10vh;
+    align-content: center;
+    text-align: center;
+  }
+  .nav-icon-custom:hover {
+    font-size: 8vh;
+  }
+  .bg-pattern-body {
+    background-size: 10vh;
+  }
+  .border-left-custom {
+    width: 1%;
+    border-right: 0.3vw dashed var(--main-dark-color);
+  }
+  .border-right-custom {
+    width: 1.5%;
+    border-left: 0.5vw dotted var(--main-dark-color);
+  }
+}
+@media (max-aspect-ratio: 0.4/1) {
+  .desktop-sidebar-custom {
+    width: 100%;
+    margin-left: 0;
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-font-weight: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-duration: initial;
+    }
+  }
+}