/*
 * Würstschengulasch Railway UI
 * Full Gitea railway skin
 * Homepage keeps the original photographic landing-page design.
 */

:root {
  --is-dark-theme: true;

  --wsg-bg: #111416;
  --wsg-bg-deep: #0b0d0f;
  --wsg-panel: #1a1e21;
  --wsg-panel-2: #202529;
  --wsg-panel-3: #282e32;
  --wsg-line: #3a4247;
  --wsg-line-soft: #2a3034;
  --wsg-cream: #e7dfcc;
  --wsg-cream-dim: #bbb3a2;
  --wsg-text: #e9edf0;
  --wsg-muted: #9aa4aa;
  --wsg-green: #48b66e;
  --wsg-green-strong: #36a95e;
  --wsg-red: #d6433b;
  --wsg-yellow: #d9aa45;
  --wsg-blue: #5889b8;
  --wsg-shadow: rgba(0, 0, 0, .28);

  --color-primary: var(--wsg-green);
  --color-primary-contrast: #09100c;
  --color-primary-hover: #5dc481;
  --color-primary-active: #35a75c;

  --color-primary-dark-1: #36a75d;
  --color-primary-dark-2: #2e9351;

  --color-primary-light-1: #5bc17c;
  --color-primary-light-2: #6fc98d;
  --color-primary-light-3: #88d39f;
  --color-primary-light-4: #a4ddb4;
  --color-primary-light-5: #c1e7ca;
  --color-primary-light-6: #dcf1e1;
  --color-primary-light-7: #eef9f1;

  --color-primary-alpha-10: #48b66e19;
  --color-primary-alpha-20: #48b66e33;
  --color-primary-alpha-30: #48b66e4d;
  --color-primary-alpha-40: #48b66e66;
  --color-primary-alpha-50: #48b66e80;
  --color-primary-alpha-60: #48b66e99;
  --color-primary-alpha-70: #48b66eb3;
  --color-primary-alpha-80: #48b66ecc;
  --color-primary-alpha-90: #48b66ee6;

  --color-body: var(--wsg-bg);

  --color-box-header: #202529;
  --color-box-body: #171b1e;
  --color-box-body-highlight: #20272a;

  --color-card: #171b1e;
  --color-menu: #171b1e;
  --color-button: #242a2e;

  --color-code-bg: #0e1113;
  --color-markup-code-block: #0f1315;
  --color-markup-code-inline: #252b2f;
  --color-markup-table-row: #ffffff07;

  --color-text-dark: #f3f5f6;
  --color-text: #d9dfe2;
  --color-text-light: #bcc5ca;
  --color-text-light-1: #aab4b9;
  --color-text-light-2: #8e999f;
  --color-text-light-3: #747f85;

  --color-input-text: #edf0f1;
  --color-input-background: #111517;
  --color-input-border: #465056;
  --color-input-border-hover: #66737a;
  --color-input-toggle-background: #30373b;

  --color-secondary: #3a4247;
  --color-secondary-button: #3f494e;
  --color-secondary-hover: #465158;
  --color-secondary-active: #343c41;
  --color-secondary-bg: #23292d;

  --color-nav-bg: #14181a;
  --color-nav-hover-bg: #22282c;
  --color-nav-text: #dce1e3;
  --color-secondary-nav-bg: #1b2023;

  --color-footer: #101315;
  --color-timeline: #343c40;

  --color-hover: #ffffff0b;
  --color-active: #ffffff12;
  --color-light: #ffffff08;
  --color-light-border: #ffffff18;
  --color-shadow: rgba(0, 0, 0, .34);

  --color-label-text: #dfe4e6;
  --color-label-bg: #3a43484f;
  --color-label-hover-bg: #4b565d8c;
  --color-label-active-bg: #59656cff;

  --color-accent: var(--wsg-green);
  --color-small-accent: #2f6947;

  --color-placeholder-text: #727d83;
  --color-caret: #e7dfcc;

  --color-tooltip-text: #f2f3f3;
  --color-tooltip-bg: #090b0cf2;

  --color-reaction-bg: #ffffff0c;
  --color-reaction-hover-bg: #ffffff17;
  --color-reaction-active-bg: #48b66e26;

  --color-project-column-bg: #161a1c;
  --color-expand-button: #252c30;
  --color-overlay-backdrop: #050607c9;

  --color-highlight-bg: #423720;
  --color-highlight-fg: #f0cb79;

  --color-success-border: #3f8158;
  --color-success-bg: #173021;
  --color-success-text: #83d49d;

  --color-warning-border: #8f733b;
  --color-warning-bg: #302817;
  --color-warning-text: #e5c470;

  --color-error-border: #884641;
  --color-error-bg: #351c1a;
  --color-error-text: #ef9e98;

  --color-info-border: #426985;
  --color-info-bg: #182734;
  --color-info-text: #8ebce0;

  --color-red-badge: var(--wsg-red);
  --color-green-badge: var(--wsg-green);
  --color-yellow-badge: var(--wsg-yellow);
  --color-orange-badge: #ca7d46;

  --color-diff-removed-row-bg: #351b1c;
  --color-diff-removed-row-border: #6c3435;
  --color-diff-removed-word-bg: #713337;

  --color-diff-added-row-bg: #14291c;
  --color-diff-added-row-border: #315f40;
  --color-diff-added-word-bg: #286440;

  --color-diff-moved-row-bg: #2f2a17;
  --color-diff-moved-row-border: #6e6130;

  color-scheme: dark;
  accent-color: var(--wsg-green);

  --fonts-proportional:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --fonts-monospace:
    "Cascadia Code",
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;
}

gitea-theme-meta-info {
  --theme-display-name: "Würstschengulasch Railway";
}

/* =========================================================
   BASE
   ========================================================= */

html,
body {
  background: var(--wsg-bg);
}

body {
  min-height: 100vh;
  color: var(--wsg-text);
  background:
    linear-gradient(
      rgba(255,255,255,.012) 1px,
      transparent 1px
    ) 0 0 / 100% 32px,

    linear-gradient(
      90deg,
      rgba(255,255,255,.009) 1px,
      transparent 1px
    ) 0 0 / 32px 100%,

    var(--wsg-bg);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  box-shadow: inset 0 0 120px rgba(0,0,0,.18);
}

::selection {
  background: rgba(72,182,110,.34);
  color: #fff;
}

/* =========================================================
   MAIN NAVBAR
   ========================================================= */

#navbar {
  position: relative;
  min-height: 54px;
  padding: 0 12px;

  border-bottom: 1px solid #464d50;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      transparent 55%
    ),
    #14181a;

  box-shadow: 0 4px 18px rgba(0,0,0,.24);
}

/*
 * Small railway-track strip below the navbar.
 */
#navbar::after {
  content: "";
  position: absolute;

  left: 0;
  right: 0;
  bottom: -5px;

  height: 4px;
  opacity: .75;

  background:
    linear-gradient(
      var(--wsg-cream),
      var(--wsg-cream)
    ) top / 100% 1px no-repeat,

    linear-gradient(
      var(--wsg-cream),
      var(--wsg-cream)
    ) bottom / 100% 1px no-repeat,

    repeating-linear-gradient(
      90deg,
      transparent 0 13px,
      rgba(231,223,204,.55) 13px 15px,
      transparent 15px 26px
    );
}

#navbar .item {
  position: relative;

  min-height: 54px;

  color: #cbd2d5 !important;

  border-radius: 0 !important;

  font-weight: 600;
  letter-spacing: .01em;
}

#navbar .item:hover {
  background: #202629 !important;
  color: #fff !important;
}

#navbar .item.active {
  background: #202629 !important;
  color: #fff !important;
}

/*
 * Active navigation item gets a small green signal lamp.
 */
#navbar .item.active::before {
  content: "";

  position: absolute;
  left: 50%;
  bottom: 7px;

  width: 7px;
  height: 7px;

  transform: translateX(-50%);

  border-radius: 50%;

  background: var(--wsg-green);

  box-shadow:
    0 0 0 3px rgba(72,182,110,.11),
    0 0 10px rgba(72,182,110,.68);
}

#navbar-logo {
  margin-right: 8px !important;
  padding: 8px 10px !important;
}

#navbar-logo img {
  width: 34px !important;
  height: 34px !important;

  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

.navbar-avatar img,
.ui.avatar.image {
  box-shadow: 0 0 0 2px #4a5459;
}

/* =========================================================
   SECONDARY NAVIGATION
   ========================================================= */

.secondary-nav {
  border-bottom: 1px solid #3d464b !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.02),
      transparent
    ),
    #1b2023 !important;

  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,.3);
}

.secondary-nav .ui.menu .item {
  border-radius: 0 !important;
}

.secondary-nav .ui.menu .item.active,
.repository .repo-header .ui.menu .item.active {
  color: var(--wsg-cream) !important;
}

.secondary-nav .ui.menu .item.active::after {
  background: var(--wsg-green) !important;
  height: 3px !important;
}

/* =========================================================
   PAGE CONTAINERS
   ========================================================= */

.page-content {
  padding-top: 22px;
}

.ui.container {
  max-width: 1280px;
}

.ui.segment,
.ui.segments,
.ui.card,
.ui.cards > .card,
.ui.menu,
.ui.modal,
.ui.attached.segment,
.ui.attached.header,
.ui.message {
  border-color: #394247 !important;
}

.ui.segment,
.ui.card,
.ui.cards > .card,
.ui.modal,
.ui.menu:not(#navbar) {
  box-shadow:
    0 7px 22px rgba(0,0,0,.12) !important;
}

.ui.segment,
.ui.card,
.ui.cards > .card,
.ui.modal,
.ui.message {
  border-radius: 5px !important;
}

.ui.top.attached.header {
  position: relative;

  border-radius: 5px 5px 0 0 !important;

  background: #202529 !important;
}

.ui.top.attached.header::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 3px;

  background: var(--wsg-cream-dim);
}

.ui.bottom.attached.segment {
  border-radius: 0 0 5px 5px !important;
}

.ui.header,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #eef1f2;
  letter-spacing: -.01em;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.ui.button {
  min-height: 36px;

  border-radius: 4px !important;
  border: 1px solid #465056 !important;

  background: #252b2f !important;
  color: #e3e7e9 !important;

  font-weight: 650 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 2px 5px rgba(0,0,0,.15) !important;

  transition:
    border-color .12s ease,
    background .12s ease,
    transform .12s ease,
    box-shadow .12s ease;
}

.ui.button:hover {
  border-color: #68757c !important;
  background: #30383d !important;
}

.ui.button:active {
  transform: translateY(1px);

  box-shadow:
    inset 0 1px 4px rgba(0,0,0,.3) !important;
}

.ui.primary.button,
.ui.green.button {
  border-color: #4cbd74 !important;
  background: #225f3b !important;
  color: #f1fff6 !important;
}

.ui.primary.button:hover,
.ui.green.button:hover {
  background: #2a7047 !important;
}

.ui.red.button,
.ui.negative.button {
  border-color: #b94b45 !important;
  background: #682a27 !important;
  color: #fff0ef !important;
}

.ui.orange.button,
.ui.yellow.button {
  border-color: #a9853f !important;
  background: #5b4824 !important;
  color: #ffeac1 !important;
}

.ui.basic.button {
  background: transparent !important;
}

/* =========================================================
   INPUTS
   ========================================================= */

.ui.form input:not([type="checkbox"]):not([type="radio"]),
.ui.form textarea,
.ui.form select,
.ui.input > input,
select,
textarea {
  border-radius: 4px !important;

  border: 1px solid #465056 !important;

  background: #101416 !important;
  color: #edf0f1 !important;

  box-shadow:
    inset 0 1px 4px rgba(0,0,0,.2) !important;
}

.ui.form input:focus,
.ui.form textarea:focus,
.ui.form select:focus,
.ui.input > input:focus,
select:focus,
textarea:focus {
  border-color: var(--wsg-green) !important;

  box-shadow:
    0 0 0 2px rgba(72,182,110,.14),
    inset 0 1px 4px rgba(0,0,0,.2) !important;
}

.ui.checkbox label::before {
  background: #111517 !important;
  border-color: #4a555b !important;
}

/* =========================================================
   DROPDOWNS
   ========================================================= */

.ui.dropdown .menu,
.ui.popup,
.tippy-box {
  border: 1px solid #40494e !important;

  border-radius: 5px !important;

  background: #171b1e !important;

  box-shadow:
    0 16px 38px rgba(0,0,0,.38) !important;
}

.ui.dropdown .menu > .item:hover,
.ui.menu .dropdown.item .menu .item:hover {
  background: #242a2e !important;
}

.ui.dropdown .menu > .active.item {
  background: #263129 !important;
  color: #dff4e6 !important;
}

/* =========================================================
   REPOSITORY HEADER
   ========================================================= */

.repository .repo-header {
  margin-top: 8px;
  margin-bottom: 12px;

  padding: 11px 14px;

  border: 1px solid #454f54;
  border-left: 4px solid var(--wsg-cream-dim);

  border-radius: 4px;

  background: #181d20;

  box-shadow:
    0 7px 20px rgba(0,0,0,.13);
}

.repository .repo-header a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.repository .repo-header .repo-icon {
  color: var(--wsg-cream) !important;
}

.repository .repo-header .ui.label {
  border-radius: 3px !important;
}

/* =========================================================
   TABS
   ========================================================= */

.ui.tabular.menu {
  border-bottom-color: #3a4348 !important;
}

.ui.tabular.menu .item {
  border-radius: 4px 4px 0 0 !important;
  color: #aeb8bd !important;
}

.ui.tabular.menu .active.item {
  border-color:
    #465158
    #465158
    var(--color-body) !important;

  background: var(--color-body) !important;
  color: var(--wsg-cream) !important;
}

.ui.secondary.pointing.menu .active.item {
  border-color: var(--wsg-green) !important;
  color: #eef2f0 !important;
}

/* =========================================================
   TABLES
   Timetable-sheet style.
   ========================================================= */

.ui.table {
  border-color: #3a4247 !important;

  border-radius: 4px !important;

  background: #15191b !important;
}

.ui.table thead th {
  border-color: #3d474c !important;

  background: #202529 !important;
  color: var(--wsg-cream) !important;

  font-size: .9em;
  letter-spacing: .025em;
}

.ui.table tr td {
  border-color: #2c3337 !important;
}

.ui.striped.table tbody tr:nth-child(2n),
.markup table tr:nth-child(2n) {
  background: rgba(255,255,255,.018) !important;
}

.ui.selectable.table tbody tr:hover,
.ui.table tbody tr:hover {
  background: rgba(72,182,110,.045) !important;
}

/* =========================================================
   FILE LIST
   ========================================================= */

.repository.file.list .repo-file-table,
.repository.file.list .repo-file-table tr,
.repository.file.list .repo-file-table td {
  border-color: #30383c !important;
}

.repository.file.list .repo-file-table tbody tr:hover {
  background: #1c2320 !important;
}

.repository.file.list .repo-file-table .name a {
  color: #dce2e4 !important;
}

.repository.file.list .repo-file-table .name a:hover {
  color: #7ed59a !important;
}

/* =========================================================
   CODE / DIFFS
   ========================================================= */

.file-view,
.code-view,
.code-diff,
.chroma,
pre,
.markup pre {
  background: #0e1113 !important;
}

.file-view,
.code-view,
.code-diff {
  border-color: #384146 !important;
  border-radius: 4px !important;
}

.code-view .lines-num,
.code-diff .lines-num {
  color: #626e74 !important;

  background: #111517 !important;

  border-right-color: #252d31 !important;
}

.chroma .ln,
.chroma .lnt {
  color: #5f696f !important;
}

/* =========================================================
   MARKDOWN / README
   ========================================================= */

.markup {
  color: #d7dde0;
}

.markup h1,
.markup h2 {
  position: relative;

  padding-left: 13px;

  border-bottom-color: #343d41 !important;
}

.markup h1::before,
.markup h2::before {
  content: "";

  position: absolute;

  left: 0;
  top: .2em;
  bottom: .2em;

  width: 3px;

  border-radius: 2px;

  background: var(--wsg-cream-dim);
}

.markup blockquote {
  border-left-color: var(--wsg-yellow) !important;

  background: rgba(217,170,69,.045);

  border-radius: 0 4px 4px 0;
}

.markup code:not(pre code) {
  border: 1px solid #384146;
  border-radius: 3px;
}

.markup a,
a:not(.ui.button):not(.item) {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* =========================================================
   LABELS
   ========================================================= */

.ui.label {
  border-radius: 3px !important;
  font-weight: 650 !important;
}

.ui.green.label {
  background: #214f33 !important;
  color: #a8e5bb !important;
}

.ui.red.label {
  background: #5a2926 !important;
  color: #f2b1ac !important;
}

.ui.yellow.label,
.ui.orange.label {
  background: #514222 !important;
  color: #eacb84 !important;
}

/* =========================================================
   ISSUES / PULL REQUEST TIMELINE
   ========================================================= */

.timeline-item .badge,
.timeline-item .timeline-avatar {
  box-shadow:
    0 0 0 3px var(--wsg-bg) !important;
}

.timeline-item .badge {
  border: 1px solid #475158 !important;

  background: #20262a !important;
}

.timeline-item .badge.badge-green,
.timeline-item .badge.green {
  border-color: #4bb970 !important;

  box-shadow:
    0 0 0 3px var(--wsg-bg),
    0 0 12px rgba(72,182,110,.16) !important;
}

.timeline-item .badge.badge-red,
.timeline-item .badge.red {
  border-color: #c34d47 !important;

  box-shadow:
    0 0 0 3px var(--wsg-bg),
    0 0 12px rgba(214,67,59,.14) !important;
}

/* =========================================================
   DASHBOARD
   ========================================================= */

.dashboard .dashboard-navbar,
.dashboard .secondary-nav {
  background: #1b2023 !important;
}

.dashboard-repos .repo-list > li,
.dashboard .feeds .news {
  border-color: #30383d !important;
}

.dashboard-repos .repo-list > li:hover {
  background: #1c2320 !important;
}

/* =========================================================
   LOGIN / SETTINGS / ADMIN
   ========================================================= */

.user.signin .ui.segment,
.user.signup .ui.segment,
.user.activate .ui.segment,
.user.forgot.password .ui.segment,
.admin .ui.segment,
.settings .ui.segment {
  border-left: 3px solid #5b666c !important;
}

.user.signin .ui.top.attached.header,
.user.signup .ui.top.attached.header,
.user.activate .ui.top.attached.header {
  letter-spacing: .025em;
}

/* =========================================================
   ALERTS
   ========================================================= */

.ui.success.message {
  border-left: 4px solid var(--wsg-green) !important;
}

.ui.warning.message {
  border-left: 4px solid var(--wsg-yellow) !important;
}

.ui.error.message,
.ui.negative.message {
  border-left: 4px solid var(--wsg-red) !important;
}

.ui.info.message {
  border-left: 4px solid var(--wsg-blue) !important;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer {
  position: relative;

  border-top: 1px solid #353d41 !important;

  background: #101315 !important;
}

footer::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  top: -5px;

  height: 4px;

  opacity: .45;

  background:
    linear-gradient(
      var(--wsg-cream),
      var(--wsg-cream)
    ) top / 100% 1px no-repeat,

    linear-gradient(
      var(--wsg-cream),
      var(--wsg-cream)
    ) bottom / 100% 1px no-repeat,

    repeating-linear-gradient(
      90deg,
      transparent 0 13px,
      rgba(231,223,204,.55) 13px 15px,
      transparent 15px 26px
    );
}

/* =========================================================
   HOMEPAGE
   Original Würstschengulasch photographic landing page.
   ========================================================= */

body:has(.wsg-home) {
  overflow: hidden;
  background: #090b0d;
}

body:has(.wsg-home) #navbar,
body:has(.wsg-home) footer {
  display: none !important;
}

/*
 * Disable the global vignette because the homepage already
 * has its own image shading.
 */
body:has(.wsg-home)::after {
  display: none;
}

body:has(.wsg-home) .full.height,
body:has(.wsg-home) .page-content {
  min-height: 100vh !important;
}

body:has(.wsg-home) .page-content {
  padding: 0 !important;
  margin: 0 !important;
}

.wsg-home {
  position: relative;

  min-height: 100vh;

  overflow: hidden;

  display: grid;
  place-items: center;

  isolation: isolate;

  color: #f4f0e6;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.wsg-bg,
.wsg-shade,
.wsg-grain {
  position: absolute;
  inset: 0;

  pointer-events: none;
}

.wsg-bg {
  z-index: -4;

  background-image:
    url('../img/leipzig-thueringer-bhf-1907.jpg');

  background-position: center 58%;
  background-size: cover;

  transform: scale(1.035);

  filter:
    grayscale(1)
    sepia(.16)
    contrast(1.14)
    brightness(.58);
}

.wsg-shade {
  z-index: -3;

  background:
    radial-gradient(
      circle at 50% 46%,
      rgba(23, 29, 34, .12) 0,
      rgba(7, 10, 12, .48) 43%,
      rgba(4, 6, 8, .88) 100%
    ),

    linear-gradient(
      180deg,
      rgba(3, 5, 6, .32),
      rgba(3, 5, 6, .55)
    );
}

.wsg-grain {
  z-index: -2;

  opacity: .10;

  background-image:
    repeating-radial-gradient(
      circle at 17% 23%,
      rgba(255,255,255,.3) 0 1px,
      transparent 1px 4px
    ),

    repeating-radial-gradient(
      circle at 73% 61%,
      rgba(0,0,0,.38) 0 1px,
      transparent 1px 5px
    );

  background-size:
    7px 7px,
    9px 9px;

  mix-blend-mode: soft-light;
}

.wsg-login-panel {
  width: min(620px, calc(100vw - 40px));

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  transform: translateY(-1.5vh);
}

.wsg-status {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  margin-bottom: 18px;

  padding: 7px 11px;

  border:
    1px solid rgba(255,255,255,.18);

  border-radius: 999px;

  background:
    rgba(10,13,15,.44);

  box-shadow:
    0 10px 30px rgba(0,0,0,.18);

  backdrop-filter:
    blur(7px);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: .16em;

  color:
    rgba(244,240,230,.78);
}

.wsg-signal {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #d43a32;

  box-shadow:
    0 0 0 3px rgba(212,58,50,.12),
    0 0 13px rgba(212,58,50,.85);
}

.wsg-station-sign {
  position: relative;

  display: inline-block;

  padding:
    15px 29px 14px;

  background: #eee9dc;
  color: #111315;

  border:
    4px solid #111315;

  outline:
    2px solid rgba(238,233,220,.88);

  outline-offset: 4px;

  box-shadow:
    0 18px 55px rgba(0,0,0,.36);

  transform:
    rotate(-.25deg);
}

.wsg-station-sign span {
  display: block;

  font-family:
    "Arial Narrow",
    "Roboto Condensed",
    "DIN Condensed",
    Arial,
    sans-serif;

  font-size:
    clamp(34px, 6.2vw, 66px);

  font-weight: 800;

  line-height: .95;

  letter-spacing: -.035em;

  white-space: nowrap;
}

.wsg-track {
  width:
    min(360px, 72vw);

  height: 25px;

  margin:
    30px 0 9px;

  position: relative;
}

.wsg-track::before,
.wsg-track::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  height: 2px;

  background:
    rgba(244,240,230,.7);
}

.wsg-track::before {
  top: 7px;
}

.wsg-track::after {
  bottom: 7px;
}

.wsg-track span {
  position: absolute;

  inset: 2px 0;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 11px,
      rgba(244,240,230,.48) 11px 14px
    );

  transform:
    skewX(-10deg);
}

.wsg-prompt {
  margin:
    7px 0 22px;

  color:
    rgba(244,240,230,.88);

  font-size: 16px;
  font-weight: 500;

  text-shadow:
    0 2px 14px rgba(0,0,0,.75);
}

.wsg-login-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 12px;

  min-width: 270px;
  min-height: 52px;

  padding:
    0 24px;

  border:
    1px solid rgba(255,255,255,.16);

  border-radius: 9px;

  background:
    rgba(41, 48, 63, .90);

  color: #fff !important;

  font-size: 15px;
  font-weight: 700;

  text-decoration: none !important;

  box-shadow:
    0 16px 42px rgba(0,0,0,.32);

  backdrop-filter:
    blur(10px);

  transition:
    transform .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.wsg-login-button:hover {
  transform:
    translateY(-2px);

  background:
    rgba(74, 83, 112, .96);

  box-shadow:
    0 20px 50px rgba(0,0,0,.42);
}

.wsg-login-button:active {
  transform:
    translateY(0);
}

.wsg-button-icon {
  display: inline-grid;

  place-items: center;

  width: 24px;
  height: 24px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.10);

  font-size: 15px;
}

.wsg-photo-credit {
  position: absolute;

  left: 18px;
  bottom: 14px;

  font-size: 10px;

  letter-spacing: .04em;

  color:
    rgba(244,240,230,.42);

  text-shadow:
    0 1px 7px rgba(0,0,0,.8);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 767px) {
  #navbar {
    padding: 0 5px;
  }

  .page-content {
    padding-top: 14px;
  }

  .repository .repo-header {
    margin-left: 5px;
    margin-right: 5px;
  }
}

@media (max-width: 620px) {
  .wsg-bg {
    background-position:
      61% center;
  }

  .wsg-station-sign {
    padding:
      13px 18px 12px;
  }

  .wsg-station-sign span {
    font-size:
      clamp(31px, 9.5vw, 48px);
  }

  .wsg-login-button {
    width:
      min(310px, 86vw);
  }

  .wsg-photo-credit {
    left: 50%;

    transform:
      translateX(-50%);

    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui.button,
  .wsg-login-button {
    transition: none !important;
  }
}