/* Background from Uiverse.io by csemszepp */

[data-theme="cathedral"] {
  --c1: #a67c00;
  --c2: #084c7f;
  --font-family: "Outfit", sans-serif;
  --text-color: #084c7f;
  --page-bg: #084c7f;
  --container-bg: transparent;
  --card-border: #084c7f;
  --card-shadow: 0 12px 28px rgba(8, 76, 127, 0.35);
  --card-front-bg: radial-gradient(#fef5e9 0%, #fef5e9 25%, var(--c1) 400%);
  --card-back-bg: radial-gradient(#fef5e9 0%, #fef5e9 25%, var(--c1) 400%);
  --theme-cycle-bg: #fef5e9;
}

[data-theme="cathedral"] .title {
  font-family: "Goblin One", serif;
}

[data-theme="cathedral"] .container {
  --s: 45px; /* control the size */
  --t: 5px; /* control the thickness */

  --_c: #0000 calc(98% - var(--t)), var(--c1) calc(100% - var(--t)) 98%, #0000;
  --_s: calc(2 * var(--s)) calc(5 * var(--s) / 2);
  --_r0: /var(--_s) radial-gradient(calc(var(--s) / 2) at 0 20%, var(--_c));
  --_r1: /var(--_s) radial-gradient(calc(var(--s) / 2) at 100% 20%, var(--_c));
  background:
    0 0 var(--_r0),
    calc(-1 * var(--s)) calc(5 * var(--s) / 4) var(--_r0),
    var(--s) 0 var(--_r1),
    0 calc(5 * var(--s) / 4) var(--_r1),
    conic-gradient(at var(--t) calc(20% + 2 * var(--t)), #0000 75%, var(--c1) 0)
      calc(var(--t) / -2) calc(var(--s) - var(--t)) / var(--s)
      calc(5 * var(--s) / 4),
    repeating-conic-gradient(var(--c2) 0 25%, #0000 0 50%) var(--s)
      calc(var(--s) / -8) / var(--_s),
    conic-gradient(from 90deg at var(--t) var(--t), var(--c2) 25%, var(--c1) 0)
      calc((var(--s) - var(--t)) / 2) calc((var(--s) - var(--t)) / 2) / var(--s)
      calc(5 * var(--s) / 4);
}