@import "https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,600;0,6..72,700;0,6..72,800;1,6..72,400;1,6..72,600&family=Poppins:wght@300;400;500;600&display=swap";
@layer components;

@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-rotate-x: initial;
         --tw-rotate-y: initial;
         --tw-rotate-z: initial;
         --tw-skew-x: initial;
         --tw-skew-y: initial;
         --tw-divide-x-reverse: 0;
         --tw-border-style: solid;
         --tw-leading: initial;
         --tw-font-weight: initial;
         --tw-tracking: initial;
         --tw-outline-style: solid;
         --tw-blur: initial;
         --tw-brightness: initial;
         --tw-contrast: initial;
         --tw-grayscale: initial;
         --tw-hue-rotate: initial;
         --tw-invert: initial;
         --tw-opacity: initial;
         --tw-saturate: initial;
         --tw-sepia: initial;
         --tw-drop-shadow: initial;
         --tw-drop-shadow-color: initial;
         --tw-drop-shadow-alpha: 100%;
         --tw-drop-shadow-size: initial;
         --tw-duration: initial
      }
   }
}

@layer theme {

   :root,
   :host {
      --font-sans: "Poppins", system-ui, sans-serif;
      --font-serif: "Newsreader", Georgia, serif;
      --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --color-white: #fff;
      --spacing: .25rem;
      --container-md: 28rem;
      --container-lg: 32rem;
      --container-xl: 36rem;
      --container-2xl: 42rem;
      --container-3xl: 48rem;
      --container-7xl: 80rem;
      --text-xs: .75rem;
      --text-xs--line-height: calc(1 / .75);
      --text-sm: .875rem;
      --text-sm--line-height: calc(1.25 / .875);
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --leading-relaxed: 1.625;
      --default-transition-duration: .15s;
      --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
      --default-font-family: var(--font-sans);
      --default-mono-font-family: var(--font-mono)
   }
}

@layer base {

   *,
   :after,
   :before,
   ::backdrop {
      box-sizing: border-box;
      border: 0 solid;
      margin: 0;
      padding: 0
   }

   ::file-selector-button {
      box-sizing: border-box;
      border: 0 solid;
      margin: 0;
      padding: 0
   }

   html,
   :host {
      -webkit-text-size-adjust: 100%;
      tab-size: 4;
      line-height: 1.5;
      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;
      -webkit-text-decoration: inherit;
      -webkit-text-decoration: 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 {
      vertical-align: baseline;
      font-size: 75%;
      line-height: 0;
      position: relative
   }

   sub {
      bottom: -.25em
   }

   sup {
      top: -.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 {
      vertical-align: middle;
      display: block
   }

   img,
   video {
      max-width: 100%;
      height: auto
   }

   button,
   input,
   select,
   optgroup,
   textarea {
      font: inherit;
      font-feature-settings: inherit;
      font-variation-settings: inherit;
      letter-spacing: inherit;
      color: inherit;
      opacity: 1;
      background-color: #0000;
      border-radius: 0
   }

   ::file-selector-button {
      font: inherit;
      font-feature-settings: inherit;
      font-variation-settings: inherit;
      letter-spacing: inherit;
      color: inherit;
      opacity: 1;
      background-color: #0000;
      border-radius: 0
   }

   :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)) {
         ::placeholder {
            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 {
      padding-block: 0
   }

   ::-webkit-datetime-edit-year-field {
      padding-block: 0
   }

   ::-webkit-datetime-edit-month-field {
      padding-block: 0
   }

   ::-webkit-datetime-edit-day-field {
      padding-block: 0
   }

   ::-webkit-datetime-edit-hour-field {
      padding-block: 0
   }

   ::-webkit-datetime-edit-minute-field {
      padding-block: 0
   }

   ::-webkit-datetime-edit-second-field {
      padding-block: 0
   }

   ::-webkit-datetime-edit-millisecond-field {
      padding-block: 0
   }

   ::-webkit-datetime-edit-meridiem-field {
      padding-block: 0
   }

   ::-webkit-calendar-picker-indicator {
      line-height: 1
   }

   :-moz-ui-invalid {
      box-shadow: none
   }

   button,
   input:where([type=button], [type=reset], [type=submit]) {
      appearance: button
   }

   ::file-selector-button {
      appearance: button
   }

   ::-webkit-inner-spin-button {
      height: auto
   }

   ::-webkit-outer-spin-button {
      height: auto
   }

   [hidden]:where(:not([hidden=until-found])) {
      display: none !important
   }
}

@layer utilities {
   .pointer-events-none {
      pointer-events: none
   }

   .absolute {
      position: absolute
   }

   .fixed {
      position: fixed
   }

   .relative {
      position: relative
   }

   .inset-0 {
      inset: calc(var(--spacing) * 0)
   }

   .start {
      inset-inline-start: var(--spacing)
   }

   .-top-px {
      top: -1px
   }

   .top-0 {
      top: calc(var(--spacing) * 0)
   }

   .right-0 {
      right: calc(var(--spacing) * 0)
   }

   .right-1\/4 {
      right: 25%
   }

   .left-0 {
      left: calc(var(--spacing) * 0)
   }

   .left-1\/4 {
      left: 25%
   }

   .z-10 {
      z-index: 10
   }

   .z-50 {
      z-index: 50
   }

   .mx-auto {
      margin-inline: auto
   }

   .my-4 {
      margin-block: calc(var(--spacing) * 4)
   }

   .mt-1 {
      margin-top: calc(var(--spacing) * 1)
   }

   .mt-2 {
      margin-top: calc(var(--spacing) * 2)
   }

   .mt-4 {
      margin-top: calc(var(--spacing) * 4)
   }

   .mt-8 {
      margin-top: calc(var(--spacing) * 8)
   }

   .mt-10 {
      margin-top: calc(var(--spacing) * 10)
   }

   .mt-auto {
      margin-top: auto
   }

   .mb-1 {
      margin-bottom: calc(var(--spacing) * 1)
   }

   .mb-2 {
      margin-bottom: calc(var(--spacing) * 2)
   }

   .mb-3 {
      margin-bottom: calc(var(--spacing) * 3)
   }

   .mb-4 {
      margin-bottom: calc(var(--spacing) * 4)
   }

   .mb-5 {
      margin-bottom: calc(var(--spacing) * 5)
   }

   .mb-6 {
      margin-bottom: calc(var(--spacing) * 6)
   }

   .mb-8 {
      margin-bottom: calc(var(--spacing) * 8)
   }

   .mb-10 {
      margin-bottom: calc(var(--spacing) * 10)
   }

   .mb-12 {
      margin-bottom: calc(var(--spacing) * 12)
   }

   .mb-16 {
      margin-bottom: calc(var(--spacing) * 16)
   }

   .block {
      display: block
   }

   .flex {
      display: flex
   }

   .grid {
      display: grid
   }

   .hidden {
      display: none
   }

   .inline {
      display: inline
   }

   .h-10 {
      height: calc(var(--spacing) * 10)
   }

   .h-16 {
      height: calc(var(--spacing) * 16)
   }

   .h-44 {
      height: calc(var(--spacing) * 44)
   }

   .h-64 {
      height: calc(var(--spacing) * 64)
   }

   .h-full {
      height: 100%
   }

   .h-px {
      height: 1px
   }

   .min-h-screen {
      min-height: 100vh
   }

   .w-1 {
      width: calc(var(--spacing) * 1)
   }

   .w-8 {
      width: calc(var(--spacing) * 8)
   }

   .w-10 {
      width: calc(var(--spacing) * 10)
   }

   .w-12 {
      width: calc(var(--spacing) * 12)
   }

   .w-16 {
      width: calc(var(--spacing) * 16)
   }

   .w-24 {
      width: calc(var(--spacing) * 24)
   }

   .w-full {
      width: 100%
   }

   .max-w-2xl {
      max-width: var(--container-2xl)
   }

   .max-w-3xl {
      max-width: var(--container-3xl)
   }

   .max-w-7xl {
      max-width: var(--container-7xl)
   }

   .max-w-lg {
      max-width: var(--container-lg)
   }

   .max-w-md {
      max-width: var(--container-md)
   }

   .max-w-xl {
      max-width: var(--container-xl)
   }

   .flex-1 {
      flex: 1
   }

   .flex-shrink-0 {
      flex-shrink: 0
   }

   .transform {
      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, )
   }

   .resize {
      resize: both
   }

   .grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr))
   }

   .grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr))
   }

   .flex-col {
      flex-direction: column
   }

   .flex-wrap {
      flex-wrap: wrap
   }

   .items-center {
      align-items: center
   }

   .items-start {
      align-items: flex-start
   }

   .justify-between {
      justify-content: space-between
   }

   .justify-center {
      justify-content: center
   }

   .gap-0 {
      gap: calc(var(--spacing) * 0)
   }

   .gap-1\.5 {
      gap: calc(var(--spacing) * 1.5)
   }

   .gap-2 {
      gap: calc(var(--spacing) * 2)
   }

   .gap-3 {
      gap: calc(var(--spacing) * 3)
   }

   .gap-4 {
      gap: calc(var(--spacing) * 4)
   }

   .gap-6 {
      gap: calc(var(--spacing) * 6)
   }

   .gap-8 {
      gap: calc(var(--spacing) * 8)
   }

   .gap-10 {
      gap: calc(var(--spacing) * 10)
   }

   .gap-16 {
      gap: calc(var(--spacing) * 16)
   }

   :where(.divide-x>:not(:last-child)) {
      --tw-divide-x-reverse: 0;
      border-inline-style: var(--tw-border-style);
      border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
      border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)))
   }

   .overflow-hidden {
      overflow: hidden
   }

   .border {
      border-style: var(--tw-border-style);
      border-width: 1px
   }

   .object-cover {
      object-fit: cover
   }

   .p-1 {
      padding: calc(var(--spacing) * 1)
   }

   .p-6 {
      padding: calc(var(--spacing) * 6)
   }

   .p-8 {
      padding: calc(var(--spacing) * 8)
   }

   .p-10 {
      padding: calc(var(--spacing) * 10)
   }

   .px-4 {
      padding-inline: calc(var(--spacing) * 4)
   }

   .px-5 {
      padding-inline: calc(var(--spacing) * 5)
   }

   .px-6 {
      padding-inline: calc(var(--spacing) * 6)
   }

   .px-8 {
      padding-inline: calc(var(--spacing) * 8)
   }

   .px-10 {
      padding-inline: calc(var(--spacing) * 10)
   }

   .py-2 {
      padding-block: calc(var(--spacing) * 2)
   }

   .py-3 {
      padding-block: calc(var(--spacing) * 3)
   }

   .py-4 {
      padding-block: calc(var(--spacing) * 4)
   }

   .py-5 {
      padding-block: calc(var(--spacing) * 5)
   }

   .py-12 {
      padding-block: calc(var(--spacing) * 12)
   }

   .py-20 {
      padding-block: calc(var(--spacing) * 20)
   }

   .py-24 {
      padding-block: calc(var(--spacing) * 24)
   }

   .pt-16 {
      padding-top: calc(var(--spacing) * 16)
   }

   .pt-28 {
      padding-top: calc(var(--spacing) * 28)
   }

   .pb-4 {
      padding-bottom: calc(var(--spacing) * 4)
   }

   .pb-6 {
      padding-bottom: calc(var(--spacing) * 6)
   }

   .pb-8 {
      padding-bottom: calc(var(--spacing) * 8)
   }

   .pb-24 {
      padding-bottom: calc(var(--spacing) * 24)
   }

   .text-center {
      text-align: center
   }

   .text-left {
      text-align: left
   }

   .font-serif {
      font-family: var(--font-serif)
   }

   .text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height))
   }

   .text-xs {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height))
   }

   .leading-relaxed {
      --tw-leading: var(--leading-relaxed);
      line-height: var(--leading-relaxed)
   }

   .font-bold {
      --tw-font-weight: var(--font-weight-bold);
      font-weight: var(--font-weight-bold)
   }

   .font-semibold {
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold)
   }

   .tracking-\[0\.1em\] {
      --tw-tracking: .1em;
      letter-spacing: .1em
   }

   .tracking-\[0\.2em\] {
      --tw-tracking: .2em;
      letter-spacing: .2em
   }

   .tracking-\[0\.3em\] {
      --tw-tracking: .3em;
      letter-spacing: .3em
   }

   .tracking-\[0\.15em\] {
      --tw-tracking: .15em;
      letter-spacing: .15em
   }

   .tracking-\[0\.25em\] {
      --tw-tracking: .25em;
      letter-spacing: .25em
   }

   .tracking-\[0\.35em\] {
      --tw-tracking: .35em;
      letter-spacing: .35em
   }

   .text-white {
      color: var(--color-white)
   }

   .uppercase {
      text-transform: uppercase
   }

   .line-through {
      text-decoration-line: line-through
   }

   .opacity-60 {
      opacity: .6
   }

   .opacity-70 {
      opacity: .7
   }

   .outline {
      outline-style: var(--tw-outline-style);
      outline-width: 1px
   }

   .filter {
      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
   }

   .transition {
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration))
   }

   .transition-all {
      transition-property: all;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration))
   }

   .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-200 {
      --tw-duration: .2s;
      transition-duration: .2s
   }

   .duration-300 {
      --tw-duration: .3s;
      transition-duration: .3s
   }

   @media (width>=40rem) {
      .sm\:grid-cols-2 {
         grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .sm\:grid-cols-3 {
         grid-template-columns: repeat(3, minmax(0, 1fr))
      }

      .sm\:flex-row {
         flex-direction: row
      }
   }

   @media (width>=48rem) {
      .md\:flex {
         display: flex
      }

      .md\:hidden {
         display: none
      }

      .md\:grid-cols-2 {
         grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .md\:grid-cols-3 {
         grid-template-columns: repeat(3, minmax(0, 1fr))
      }
   }

   @media (width>=64rem) {
      .lg\:h-auto {
         height: auto
      }

      .lg\:grid-cols-1 {
         grid-template-columns: repeat(1, minmax(0, 1fr))
      }

      .lg\:grid-cols-2 {
         grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .lg\:grid-cols-3 {
         grid-template-columns: repeat(3, minmax(0, 1fr))
      }
   }
}

* {
   scrollbar-width: thin;
   scrollbar-color: #c9a066 transparent
}

body {
   color: #e8e2d9;
   background-color: #080c10;
   font-family: Poppins, system-ui, sans-serif
}

.font-serif {
   font-family: Playfair Display, Georgia, serif
}

.gold-line {
   background: linear-gradient(90deg, #c9a066, #0000);
   height: 2px
}

.gold-line-center {
   background: linear-gradient(90deg, #0000, #c9a066, #0000);
   height: 1px
}

.card-border {
   border: 1px solid #c9a06640
}

.card-border:hover {
   border-color: #c9a06680
}

@property --tw-rotate-x {
   syntax: "*";
   inherits: false
}

@property --tw-rotate-y {
   syntax: "*";
   inherits: false
}

@property --tw-rotate-z {
   syntax: "*";
   inherits: false
}

@property --tw-skew-x {
   syntax: "*";
   inherits: false
}

@property --tw-skew-y {
   syntax: "*";
   inherits: false
}

@property --tw-divide-x-reverse {
   syntax: "*";
   inherits: false;
   initial-value: 0
}

@property --tw-border-style {
   syntax: "*";
   inherits: false;
   initial-value: solid
}

@property --tw-leading {
   syntax: "*";
   inherits: false
}

@property --tw-font-weight {
   syntax: "*";
   inherits: false
}

@property --tw-tracking {
   syntax: "*";
   inherits: false
}

@property --tw-outline-style {
   syntax: "*";
   inherits: false;
   initial-value: solid
}

@property --tw-blur {
   syntax: "*";
   inherits: false
}

@property --tw-brightness {
   syntax: "*";
   inherits: false
}

@property --tw-contrast {
   syntax: "*";
   inherits: false
}

@property --tw-grayscale {
   syntax: "*";
   inherits: false
}

@property --tw-hue-rotate {
   syntax: "*";
   inherits: false
}

@property --tw-invert {
   syntax: "*";
   inherits: false
}

@property --tw-opacity {
   syntax: "*";
   inherits: false
}

@property --tw-saturate {
   syntax: "*";
   inherits: false
}

@property --tw-sepia {
   syntax: "*";
   inherits: false
}

@property --tw-drop-shadow {
   syntax: "*";
   inherits: false
}

@property --tw-drop-shadow-color {
   syntax: "*";
   inherits: false
}

@property --tw-drop-shadow-alpha {
   syntax: "<percentage>";
   inherits: false;
   initial-value: 100%
}

@property --tw-drop-shadow-size {
   syntax: "*";
   inherits: false
}

@property --tw-duration {
   syntax: "*";
   inherits: false
}