@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ubuntu/ubuntu-400.ttf") format("truetype");
}

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ubuntu/ubuntu-500.ttf") format("truetype");
}

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ubuntu/ubuntu-700.ttf") format("truetype");
}

:root,
[data-theme],
[data-color-mode] {
  color-scheme: dark;
  --color-body: #000000;
  --color-box-body: #0e131b;
  --color-box-header: #111824;
  --color-text: #f6f8fb;
  --color-text-light: #b7c2d1;
  --color-border: rgba(0, 229, 255, 0.22);
  --color-primary: #00bfff;
  --color-primary-contrast: #ffffff;
  --color-primary-hover: #00e5ff;
  --color-primary-active: #00aee8;
  --color-secondary: #101722;
  --color-secondary-bg: #0b1018;
  --color-secondary-nav-bg: #020407;
  --color-nav-bg: #020407;
  --color-nav-hover-bg: rgba(0, 229, 255, 0.1);
  --color-header-wrapper: #020407;
  --color-header-wrapper-transparent: rgba(2, 4, 7, 0);
  --color-menu: #0b1018;
  --color-card: #0e131b;
  --color-button: #121a26;
  --color-hover: rgba(0, 229, 255, 0.08);
  --color-active: rgba(0, 191, 255, 0.16);
  --color-footer: #020407;
  --color-input-background: #0b1018;
  --color-input-border: rgba(0, 229, 255, 0.22);
  --color-input-border-hover: rgba(0, 229, 255, 0.42);
  --color-input-text: #f6f8fb;
  --dgit-bg: #000000;
  --dgit-panel: #0e131b;
  --dgit-panel-2: #111824;
  --dgit-border: rgba(0, 229, 255, 0.24);
  --dgit-border-soft: rgba(0, 229, 255, 0.18);
  --dgit-text: #f6f8fb;
  --dgit-muted: #aab7c8;
  --dgit-cyan: #00e5ff;
  --dgit-blue: #00bfff;
}

body,
.page-content {
  background: var(--dgit-bg);
  color: var(--dgit-text);
  font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body,
.full.height,
.page-content,
.page-content.home {
  background: var(--dgit-bg) !important;
}

a {
  color: var(--dgit-cyan);
}

#navbar {
  background: #020407 !important;
  border-bottom: 1px solid var(--dgit-border);
  box-shadow: 0 1px 0 rgba(0, 229, 255, 0.08);
}

#navbar .ui.menu,
#navbar .ui.secondary.menu,
#navbar .navbar-left,
#navbar .navbar-right {
  background: transparent !important;
  border-color: transparent !important;
}

#navbar .item,
#navbar .item > span,
#navbar button.item,
#navbar .svg {
  color: var(--dgit-text) !important;
}

#navbar .item:hover,
#navbar .item:focus,
#navbar .item.active,
#navbar button.item:hover,
#navbar button.item:focus {
  background: rgba(0, 229, 255, 0.1) !important;
  color: #ffffff !important;
}

#navbar-logo {
  margin-right: 10px;
}

#navbar a[href$="/user/sign_up"] {
  display: none !important;
}

#navbar-expand-toggle {
  min-width: 44px !important;
  min-height: 44px !important;
  justify-content: center;
}

.ui.menu,
.ui.secondary.menu,
.following.bar.light,
.page-footer {
  background: #020407;
  border-color: var(--dgit-border);
}

.ui.segment,
.ui.attached.segment,
.repository .segment,
.ui.table {
  background: var(--dgit-panel);
  border-color: var(--dgit-border);
  border-radius: 8px;
}

.dread-git-home {
  min-height: calc(100vh - 96px);
  padding: 0;
}

.dgit-hero {
  border-bottom: 1px solid var(--dgit-border-soft);
  background:
    linear-gradient(90deg, rgba(0, 191, 255, 0.18), transparent 48%),
    linear-gradient(180deg, rgba(0, 229, 255, 0.08), transparent 64%);
}

.dgit-hero-inner {
  position: relative;
  width: min(1120px, calc(100vw - 32px));
  min-height: 52vh;
  margin: 0 auto;
  display: grid;
  align-content: center;
  gap: 20px;
  padding: 64px 0 48px;
}

.dgit-hero-inner::before,
.dgit-hero-inner::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  border-color: var(--dgit-cyan);
  opacity: 0.7;
  pointer-events: none;
}

.dgit-hero-inner::before {
  top: 44px;
  left: -12px;
  border-top: 1px solid;
  border-left: 1px solid;
  box-shadow: -10px -10px 24px rgba(0, 229, 255, 0.12);
}

.dgit-hero-inner::after {
  right: -12px;
  bottom: 34px;
  border-right: 1px solid;
  border-bottom: 1px solid;
  box-shadow: 10px 10px 24px rgba(0, 229, 255, 0.12);
}

.dgit-kicker,
.dgit-panel-label {
  color: var(--dgit-cyan);
  font: 700 12px "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.45);
}

.dgit-logo {
  width: 128px;
  height: 72px;
  display: block;
  filter: drop-shadow(0 0 18px rgba(0, 229, 255, 0.24));
}

.dgit-copy h1 {
  margin: 0;
  font: 700 68px "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  color: var(--dgit-text);
  line-height: 0.95;
  text-shadow: 0 0 22px rgba(0, 229, 255, 0.2);
}

.dgit-copy p {
  max-width: 720px;
  margin: 12px 0 0;
  color: var(--dgit-muted);
  font-size: 18px;
  line-height: 1.55;
}

.dgit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.dgit-actions .ui.primary.button {
  background: var(--dgit-blue);
  color: #ffffff;
  border: 1px solid rgba(0, 229, 255, 0.45);
  box-shadow: 0 0 18px rgba(0, 191, 255, 0.18);
}

.dgit-actions .ui.primary.button:hover {
  background: #00e5ff;
}

.dgit-actions .ui.button {
  border-radius: 6px;
  background: #121a26;
  border: 1px solid var(--dgit-border);
  color: var(--dgit-text);
}

.dgit-panels {
  width: min(1120px, calc(100vw - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 24px 0 56px;
}

.dgit-panel {
  background: linear-gradient(180deg, var(--dgit-panel-2), var(--dgit-panel));
  border: 1px solid var(--dgit-border-soft);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 0 0 1px rgba(0, 191, 255, 0.04);
}

.dgit-panel h2 {
  margin: 10px 0 8px;
  color: var(--dgit-text);
  font-size: 18px;
  letter-spacing: 0;
}

.dgit-panel p {
  margin: 0;
  color: var(--dgit-muted);
  line-height: 1.5;
}

.dgit-footer-sep {
  color: var(--dgit-cyan);
  margin: 0 6px;
}

@media (max-width: 760px) {
  .dgit-hero-inner {
    min-height: auto;
    padding: 44px 0 32px;
  }

  .dgit-copy h1 {
    font-size: 38px;
  }

  .dgit-panels {
    grid-template-columns: 1fr;
    padding-bottom: 36px;
  }
}
