@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;

    --color-gray-600: oklch(0.446 0.03 256.802);

    --color-white: #fff;

    --spacing: 0.25rem;

    --container-md: 28rem;

    --container-3xl: 48rem;

    --container-4xl: 56rem;

    --container-6xl: 72rem;

    --text-xs: 0.75rem;

    --text-xs--line-height: calc(1 / 0.75);

    --text-sm: 0.875rem;

    --text-sm--line-height: calc(1.25 / 0.875);

    --text-base: 1rem;

    --text-base--line-height: calc(1.5 / 1);

    --text-lg: 1.125rem;

    --text-lg--line-height: calc(1.75 / 1.125);

    --text-xl: 1.25rem;

    --text-xl--line-height: calc(1.75 / 1.25);

    --text-2xl: 1.5rem;

    --text-2xl--line-height: calc(2 / 1.5);

    --text-3xl: 1.875rem;

    --text-3xl--line-height: calc(2.25 / 1.875);

    --text-4xl: 2.25rem;

    --text-4xl--line-height: calc(2.5 / 2.25);

    --text-5xl: 3rem;

    --text-5xl--line-height: 1;

    --text-6xl: 3.75rem;

    --text-6xl--line-height: 1;

    --font-weight-semibold: 600;

    --font-weight-bold: 700;

    --font-weight-extrabold: 800;

    --tracking-wider: 0.05em;

    --leading-tight: 1.25;

    --leading-relaxed: 1.625;

    --radius-lg: 0.5rem;

    --radius-xl: 0.75rem;

    --radius-2xl: 1rem;

    --blur-sm: 8px;

    --default-transition-duration: 150ms;

    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    --default-font-family: var(--font-sans);

    --default-font-feature-settings: var(--font-sans--font-feature-settings);

    --default-font-variation-settings: var(

      --font-sans--font-variation-settings

    );

    --default-mono-font-family: var(--font-mono);

    --default-mono-font-feature-settings: var(

      --font-mono--font-feature-settings

    );

    --default-mono-font-variation-settings: var(

      --font-mono--font-variation-settings

    );

    --color-background: #0B0F0E;

    --color-surface: #101815;

    --color-text: #E8EFE9;

    --color-muted: #B7C4BC;

    --color-accent: #DC2626;

    --color-blue: #2563EB;

    --color-warning: #FFD166;

    --color-divider: rgba(232, 239, 233, 0.12);

    --font-heading: 'Oswald', sans-serif;

    --font-subheading: 'PT Sans Narrow', sans-serif;

    --font-body: 'Open Sans', sans-serif;

  }

}

@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;

  }

  body {

    line-height: inherit;

  }

  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;

    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 {

  .invisible {

    visibility: hidden;

  }

  .visible {

    visibility: visible;

  }

  .fixed {

    position: fixed;

  }

  .relative {

    position: relative;

  }

  .sticky {

    position: sticky;

  }

  .top-0 {

    top: calc(var(--spacing) * 0);

  }

  .z-10 {

    z-index: 10;

  }

  .z-50 {

    z-index: 50;

  }

  .mx-auto {

    margin-inline: auto;

  }

  .my-6 {

    margin-block: calc(var(--spacing) * 6);

  }

  .my-8 {

    margin-block: calc(var(--spacing) * 8);

  }

  .my-12 {

    margin-block: calc(var(--spacing) * 12);

  }

  .mt-0\.5 {

    margin-top: calc(var(--spacing) * 0.5);

  }

  .mt-3 {

    margin-top: calc(var(--spacing) * 3);

  }

  .mt-4 {

    margin-top: calc(var(--spacing) * 4);

  }

  .mt-12 {

    margin-top: calc(var(--spacing) * 12);

  }

  .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-6 {

    margin-bottom: calc(var(--spacing) * 6);

  }

  .mb-8 {

    margin-bottom: calc(var(--spacing) * 8);

  }

  .mb-12 {

    margin-bottom: calc(var(--spacing) * 12);

  }

  .ml-6 {

    margin-left: calc(var(--spacing) * 6);

  }

  .block {

    display: block;

  }

  .flex {

    display: flex;

  }

  .grid {

    display: grid;

  }

  .hidden {

    display: none;

  }

  .inline-block {

    display: inline-block;

  }

  .h-4 {

    height: calc(var(--spacing) * 4);

  }

  .h-5 {

    height: calc(var(--spacing) * 5);

  }

  .h-6 {

    height: calc(var(--spacing) * 6);

  }

  .h-8 {

    height: calc(var(--spacing) * 8);

  }

  .h-10 {

    height: calc(var(--spacing) * 10);

  }

  .h-16 {

    height: calc(var(--spacing) * 16);

  }

  .h-auto {

    height: auto;

  }

  .min-h-screen {

    min-height: 100vh;

  }

  .w-4 {

    width: calc(var(--spacing) * 4);

  }

  .w-5 {

    width: calc(var(--spacing) * 5);

  }

  .w-6 {

    width: calc(var(--spacing) * 6);

  }

  .w-8 {

    width: calc(var(--spacing) * 8);

  }

  .w-10 {

    width: calc(var(--spacing) * 10);

  }

  .w-16 {

    width: calc(var(--spacing) * 16);

  }

  .w-32 {

    width: calc(var(--spacing) * 32);

  }

  .w-full {

    width: 100%;

  }

  .max-w-3xl {

    max-width: var(--container-3xl);

  }

  .max-w-4xl {

    max-width: var(--container-4xl);

  }

  .max-w-6xl {

    max-width: var(--container-6xl);

  }

  .max-w-md {

    max-width: var(--container-md);

  }

  .shrink-0 {

    flex-shrink: 0;

  }

  .cursor-pointer {

    cursor: pointer;

  }

  .list-disc {

    list-style-type: disc;

  }

  .flex-col {

    flex-direction: column;

  }

  .items-center {

    align-items: center;

  }

  .items-start {

    align-items: flex-start;

  }

  .justify-between {

    justify-content: space-between;

  }

  .justify-center {

    justify-content: center;

  }

  .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);

  }

  .space-y-2 {

    :where(& > :not(:last-child)) {

      --tw-space-y-reverse: 0;

      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));

      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));

    }

  }

  .space-y-3 {

    :where(& > :not(:last-child)) {

      --tw-space-y-reverse: 0;

      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));

      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));

    }

  }

  .space-y-4 {

    :where(& > :not(:last-child)) {

      --tw-space-y-reverse: 0;

      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));

      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));

    }

  }

  .space-y-6 {

    :where(& > :not(:last-child)) {

      --tw-space-y-reverse: 0;

      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));

      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));

    }

  }

  .space-y-8 {

    :where(& > :not(:last-child)) {

      --tw-space-y-reverse: 0;

      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));

      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));

    }

  }

  .overflow-hidden {

    overflow: hidden;

  }

  .rounded-2xl {

    border-radius: var(--radius-2xl);

  }

  .rounded-full {

    border-radius: calc(infinity * 1px);

  }

  .rounded-lg {

    border-radius: var(--radius-lg);

  }

  .rounded-xl {

    border-radius: var(--radius-xl);

  }

  .border {

    border-style: var(--tw-border-style);

    border-width: 1px;

  }

  .border-t {

    border-top-style: var(--tw-border-style);

    border-top-width: 1px;

  }

  .border-b {

    border-bottom-style: var(--tw-border-style);

    border-bottom-width: 1px;

  }

  .border-l-4 {

    border-left-style: var(--tw-border-style);

    border-left-width: 4px;

  }

  .border-accent {

    border-color: var(--color-accent);

  }

  .border-blue {

    border-color: var(--color-blue);

  }

  .border-divider {

    border-color: var(--color-divider);

  }

  .border-warning {

    border-color: var(--color-warning);

  }

  .bg-accent {

    background-color: var(--color-accent);

  }

  .bg-accent\/10 {

    background-color: color-mix(in oklab, var(--color-accent) 10%, transparent);

  }

  .bg-background {

    background-color: var(--color-background);

  }

  .bg-background\/80 {

    background-color: color-mix(in oklab, var(--color-background) 80%, transparent);

  }

  .bg-blue {

    background-color: var(--color-blue);

  }

  .bg-surface {

    background-color: var(--color-surface);

  }

  .bg-surface\/50 {

    background-color: color-mix(in oklab, var(--color-surface) 50%, transparent);

  }

  .bg-warning {

    background-color: var(--color-warning);

  }

  .bg-warning\/10 {

    background-color: color-mix(in oklab, var(--color-warning) 10%, transparent);

  }

  .bg-white {

    background-color: var(--color-white);

  }

  .p-4 {

    padding: calc(var(--spacing) * 4);

  }

  .p-6 {

    padding: calc(var(--spacing) * 6);

  }

  .p-8 {

    padding: calc(var(--spacing) * 8);

  }

  .px-4 {

    padding-inline: calc(var(--spacing) * 4);

  }

  .px-6 {

    padding-inline: calc(var(--spacing) * 6);

  }

  .px-8 {

    padding-inline: calc(var(--spacing) * 8);

  }

  .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-8 {

    padding-block: calc(var(--spacing) * 8);

  }

  .py-12 {

    padding-block: calc(var(--spacing) * 12);

  }

  .py-20 {

    padding-block: calc(var(--spacing) * 20);

  }

  .pl-4 {

    padding-left: calc(var(--spacing) * 4);

  }

  .pl-6 {

    padding-left: calc(var(--spacing) * 6);

  }

  .text-center {

    text-align: center;

  }

  .text-left {

    text-align: left;

  }

  .text-2xl {

    font-size: var(--text-2xl);

    line-height: var(--tw-leading, var(--text-2xl--line-height));

  }

  .text-3xl {

    font-size: var(--text-3xl);

    line-height: var(--tw-leading, var(--text-3xl--line-height));

  }

  .text-4xl {

    font-size: var(--text-4xl);

    line-height: var(--tw-leading, var(--text-4xl--line-height));

  }

  .text-5xl {

    font-size: var(--text-5xl);

    line-height: var(--tw-leading, var(--text-5xl--line-height));

  }

  .text-6xl {

    font-size: var(--text-6xl);

    line-height: var(--tw-leading, var(--text-6xl--line-height));

  }

  .text-base {

    font-size: var(--text-base);

    line-height: var(--tw-leading, var(--text-base--line-height));

  }

  .text-lg {

    font-size: var(--text-lg);

    line-height: var(--tw-leading, var(--text-lg--line-height));

  }

  .text-sm {

    font-size: var(--text-sm);

    line-height: var(--tw-leading, var(--text-sm--line-height));

  }

  .text-xl {

    font-size: var(--text-xl);

    line-height: var(--tw-leading, var(--text-xl--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);

  }

  .leading-tight {

    --tw-leading: var(--leading-tight);

    line-height: var(--leading-tight);

  }

  .font-bold {

    --tw-font-weight: var(--font-weight-bold);

    font-weight: var(--font-weight-bold);

  }

  .font-extrabold {

    --tw-font-weight: var(--font-weight-extrabold);

    font-weight: var(--font-weight-extrabold);

  }

  .font-semibold {

    --tw-font-weight: var(--font-weight-semibold);

    font-weight: var(--font-weight-semibold);

  }

  .tracking-wider {

    --tw-tracking: var(--tracking-wider);

    letter-spacing: var(--tracking-wider);

  }

  .text-accent {

    color: var(--color-accent);

  }

  .text-background {

    color: var(--color-background);

  }

  .text-background\/90 {

    color: color-mix(in oklab, var(--color-background) 90%, transparent);

  }

  .text-blue {

    color: var(--color-blue);

  }

  .text-gray-600 {

    color: var(--color-gray-600);

  }

  .text-muted {

    color: var(--color-muted);

  }

  .text-text {

    color: var(--color-text);

  }

  .text-warning {

    color: var(--color-warning);

  }

  .text-white {

    color: var(--color-white);

  }

  .uppercase {

    text-transform: uppercase;

  }

  .italic {

    font-style: italic;

  }

  .line-through {

    text-decoration-line: line-through;

  }

  .shadow {

    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));

    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

  }

  .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);

  }

  .shadow-lg {

    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));

    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

  }

  .backdrop-blur-sm {

    --tw-backdrop-blur: blur(var(--blur-sm));

    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);

    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);

  }

  .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));

  }

  .transition-opacity {

    transition-property: opacity;

    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));

    transition-duration: var(--tw-duration, var(--default-transition-duration));

  }

  .transition-transform {

    transition-property: transform, translate, scale, rotate;

    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));

    transition-duration: var(--tw-duration, var(--default-transition-duration));

  }

  .group-open\:rotate-180 {

    &:is(:where(.group):is([open], :popover-open, :open) *) {

      rotate: 180deg;

    }

  }

  .hover\:text-text {

    &:hover {

      @media (hover: hover) {

        color: var(--color-text);

      }

    }

  }

  .hover\:opacity-90 {

    &:hover {

      @media (hover: hover) {

        opacity: 90%;

      }

    }

  }

  .md\:flex {

    @media (width >= 48rem) {

      display: flex;

    }

  }

  .md\:grid-cols-2 {

    @media (width >= 48rem) {

      grid-template-columns: repeat(2, minmax(0, 1fr));

    }

  }

  .md\:grid-cols-3 {

    @media (width >= 48rem) {

      grid-template-columns: repeat(3, minmax(0, 1fr));

    }

  }

  .md\:flex-row {

    @media (width >= 48rem) {

      flex-direction: row;

    }

  }

  .md\:p-12 {

    @media (width >= 48rem) {

      padding: calc(var(--spacing) * 12);

    }

  }

  .md\:py-20 {

    @media (width >= 48rem) {

      padding-block: calc(var(--spacing) * 20);

    }

  }

  .md\:py-32 {

    @media (width >= 48rem) {

      padding-block: calc(var(--spacing) * 32);

    }

  }

  .md\:text-4xl {

    @media (width >= 48rem) {

      font-size: var(--text-4xl);

      line-height: var(--tw-leading, var(--text-4xl--line-height));

    }

  }

  .md\:text-5xl {

    @media (width >= 48rem) {

      font-size: var(--text-5xl);

      line-height: var(--tw-leading, var(--text-5xl--line-height));

    }

  }

  .lg\:text-6xl {

    @media (width >= 64rem) {

      font-size: var(--text-6xl);

      line-height: var(--tw-leading, var(--text-6xl--line-height));

    }

  }

}

html {

  scroll-behavior: smooth;

}

body {

  font-family: var(--font-body);

  background-color: var(--color-background);

  color: var(--color-text);

}

h1, h2 {

  font-family: var(--font-heading);

  font-weight: 700;

  letter-spacing: 0.02em;

  text-transform: uppercase;

}

h3, h4, h5, h6 {

  font-family: var(--font-subheading);

  font-weight: 700;

  letter-spacing: 0.01em;

}

::-webkit-scrollbar {

  width: 10px;

}

::-webkit-scrollbar-track {

  background: var(--color-background);

}

::-webkit-scrollbar-thumb {

  background: var(--color-surface);

  border-radius: 5px;

}

::-webkit-scrollbar-thumb:hover {

  background: var(--color-muted);

}

details summary {

  list-style: none;

  font-family: var(--font-subheading);

}

details summary::-webkit-details-marker {

  display: none;

}

img {

  max-width: 100%;

  height: auto;

}

@property --tw-space-y-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-shadow {

  syntax: "*";

  inherits: false;

  initial-value: 0 0 #0000;

}

@property --tw-shadow-color {

  syntax: "*";

  inherits: false;

}

@property --tw-inset-shadow {

  syntax: "*";

  inherits: false;

  initial-value: 0 0 #0000;

}

@property --tw-inset-shadow-color {

  syntax: "*";

  inherits: false;

}

@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-backdrop-blur {

  syntax: "*";

  inherits: false;

}

@property --tw-backdrop-brightness {

  syntax: "*";

  inherits: false;

}

@property --tw-backdrop-contrast {

  syntax: "*";

  inherits: false;

}

@property --tw-backdrop-grayscale {

  syntax: "*";

  inherits: false;

}

@property --tw-backdrop-hue-rotate {

  syntax: "*";

  inherits: false;

}

@property --tw-backdrop-invert {

  syntax: "*";

  inherits: false;

}

@property --tw-backdrop-opacity {

  syntax: "*";

  inherits: false;

}

@property --tw-backdrop-saturate {

  syntax: "*";

  inherits: false;

}

@property --tw-backdrop-sepia {

  syntax: "*";

  inherits: false;

}



img.blackb {

    float:left; 

    width:320px; 

    height:auto; 

    margin:0 32px 32px 0; 

    border-style: solid;

    border-width:3px;

}





img.blackd {

    float:right; 

    width:180px; 

    height:auto; 

    margin:0 32px 32px 0; 

    border-style: solid;

    border-width:3px;

}



img.blackc {

    float:right; 

    width:320px; 

    height:auto; 

    margin:0 32px 32px 0; 

    border-style: solid;

    border-width:3px;

}





.bg-drone {

    background-color: color-mix(in oklab, var(--color-accent) 10%, transparent);

    background-image: url("/assets/images/dt.png");

    background-repeat: no-repeat;

    background-position: center;

    background-color: #cccccc;

}



/*.cheatsheet {

    background-image: url("/assets/images/cs.png");

    height: 280px;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}



.emp {

    background-image: url("/assets/images/empo.png");

    background-color: #cccccc00;

    height: 280px;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}



.homeprotect {

    background-image: url("/assets/images/hi.png");

    background-color: #cccccc00;

    height: 280px;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}



.decoy {

    background-image: url("/assets/images/dc.png");

    background-color: #cccccc00;

    height: 280px;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}



.warrior {

    background-image: url("/assets/images/mw.png");

    background-color: #cccccc00;

    height: 280px;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}





.drone {

    background-image: url("/assets/images/dt.png");

    background-color: #cccccc00;

    height: 280px;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}*/





.cheatsheet {

    background-image: url("/assets/images/cs.png");

    background-color: #ffffff2b;

    height: 241px;

    background-position: center;

    background-repeat: no-repeat;

    background-size: 81%;

    width: 100%;

}



.emp {

    background-image: url("/assets/images/empo.png");

    background-color: #ffffff2b;

    height: 241px;

    background-position: center;

    background-repeat: no-repeat;

    background-size: 81%;

    width: 100%;

}



.homeprotect {

    background-image: url("/assets/images/hi.png");

    background-color: #ffffff2b;

    height: 241px;

    background-position: center;

    background-repeat: no-repeat;

    background-size: 81%;

    width: 100%;

}



.decoy {

    background-image: url("/assets/images/dc.png");

    background-color: #ffffff2b;

    height: 241px;

    background-position: center;

    background-repeat: no-repeat;

    background-size: 81%;

    width: 100%;

}



.warrior {

    background-image: url("/assets/images/mw.png");

    background-color: #cccccc00;

    background-color: #ffffff2b;

    height: 241px;

    background-position: center;

    background-repeat: no-repeat;

    background-size: 81%;

    width: 100%;

}





.drone {

    background-image: url("/assets/images/dt.png");

    background-color: #ffffff2b;

    height: 241px;

    background-position: center;

    background-repeat: no-repeat;

    background-size: 81%;

    width: 100%;

}





.fze {

    margin-top: 0px;

    color: #848484;

    font-size: 11px;

    line-height: 17px;

    background-color: #00000000;

    padding: 2%;

    border-radius: 10px 10px 10px 10px;

    border-block-style: initial;

    border-block-start-style: ;

    border-block-end-style: ;

    border-block-color: #000000;

    border-block-width: 1px;

}









.sec_1 {

    background-image: linear-gradient(rgba(11, 15, 14, 98%), rgba(11, 15, 14, 70%)), url("/assets/images/sec_1.png");

    background-color: #cccccc00;

    height: 280px;

    background-position: right;

    background-repeat: no-repeat;

    background-size: cover;

}

.sec_2 {

    background-image: linear-gradient(rgba(11, 15, 14, 98%), rgba(11, 15, 14, 70%)), url("/assets/images/sec_2.png");

    background-color: #cccccc00;

    height: 280px;

    background-position: right;

    background-repeat: no-repeat;

    background-size: cover;

}



.sec_3 {

    background-image: linear-gradient(rgba(11, 15, 14, 98%), rgba(11, 15, 14, 70%)), url("/assets/images/sec_3.png");

    background-color: #cccccc00;

    height: 280px;

    background-position: right;

    background-repeat: no-repeat;

    background-size: cover;

}



.sec_4 {

    background-image: linear-gradient(rgba(11, 15, 14, 98%), rgba(11, 15, 14, 70%)), url("/assets/images/sec_4.png");

    background-color: #cccccc00;

    height: 280px;

    background-position: right;

    background-repeat: no-repeat;

    background-size: cover;

}



.sec_5 {

    background-image: linear-gradient(rgba(11, 15, 14, 98%), rgba(11, 15, 14, 70%)), url("/assets/images/sec_5.png");

    background-color: #cccccc00;

    height: 280px;

    background-position: right;

    background-repeat: no-repeat;

    background-size: cover;

}



.sec_6 {

    background-image: linear-gradient(rgba(11, 15, 14, 98%), rgba(11, 15, 14, 70%)), url("/assets/images/sec_6.png");

    background-color: #cccccc00;

    height: 280px;

    background-position: right;

    background-repeat: no-repeat;

    background-size: cover;

}



.sec_7 {

    background-image: linear-gradient(rgba(11, 15, 14, 98%), rgba(11, 15, 14, 70%)), url("/assets/images/sec_7.png");

    background-color: #cccccc00;

    height: 280px;

    background-position: right;

    background-repeat: no-repeat;

    background-size: cover;

}





.bigtee1{



}



.bigtee2{



}



.bigtee3{



}



.bigtee4{



}