@layer theme {
:root, :host {
--color-black: #000;
--color-white: #fff;
--spacing: 0.25rem;
--color-red-500: oklch(63.7% 0.237 25.331);
--color-yellow-500: oklch(79.5% 0.184 86.047);
--color-blue-500: oklch(62.3% 0.214 259.815);
--color-orange-900: oklch(40.8% 0.123 38.172);
--text-xl: 1.25rem;
--color-pink-300: oklch(82.3% 0.12 346.018);
--color-indigo-500: oklch(58.5% 0.233 277.117);
--color-orange-500: oklch(70.5% 0.213 47.604);
--color-orange-800: oklch(47% 0.157 37.304);
--text-5xl: 3rem;
--color-green-700: oklch(52.7% 0.154 150.069);
--color-green-500: oklch(72.3% 0.219 149.579);
--leading-snug: 1.375;
--leading-tight: 1.25;
--text-lg: 1.125rem;
--text-xs: 0.75rem;
--color-neutral-400: oklch(70.8% 0 0);
--color-neutral-900: oklch(20.5% 0 0);
--color-neutral-800: oklch(26.9% 0 0);
--color-yellow-400: oklch(85.2% 0.199 91.936);
--animate-spin: spin 1s linear infinite;
--text-base: 1rem;
--font-weight-bold: 700;
--text-2xl: 1.5rem;
--text-sm: 0.875rem;
--text-4xl: 2.25rem;
--text-3xl: 1.875rem;
--color-blue-400: oklch(70.7% 0.165 254.624);
}
}

@layer utilities {
.h-1\/2 {
  height: calc(1/2 * 100%);
}
.rounded-full {
  border-radius: calc(infinity * 1px);
}
.bg-black {
  background-color: var(--color-black);
}
.p-10 {
  padding: calc(var(--spacing) * 10);
}
.bg-red-500 {
  background-color: var(--color-red-500);
}
.bg-yellow-500 {
  background-color: var(--color-yellow-500);
}
.flex-1 {
  flex: 1;
}
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.text-white {
  color: var(--color-white);
}
.h-full {
  height: 100%;
}
.relative {
  position: relative;
}
.h-screen {
  height: 100vh;
}
.border-4 {
  border-style: var(--tw-border-style);
  border-width: 4px;
}
.border-white {
  border-color: var(--color-white);
}
.w-full {
  width: 100%;
}
.gap-5 {
  gap: calc(var(--spacing) * 5);
}
.h-10 {
  height: calc(var(--spacing) * 10);
}
.w-10 {
  width: calc(var(--spacing) * 10);
}
.bg-blue-500 {
  background-color: var(--color-blue-500);
}
.min-h-0 {
  min-height: calc(var(--spacing) * 0);
}
.min-w-0 {
  min-width: calc(var(--spacing) * 0);
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.gap-10 {
  gap: calc(var(--spacing) * 10);
}
.cursor-pointer {
  cursor: pointer;
}
.text-center {
  text-align: center;
}
.flex-row {
  flex-direction: row;
}
.p-5 {
  padding: calc(var(--spacing) * 5);
}
.justify-between {
  justify-content: space-between;
}
.gap-3 {
  gap: calc(var(--spacing) * 3);
}
.hidden {
  display: none;
}
.bg-orange-900 {
  background-color: var(--color-orange-900);
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.text-xl {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
}
.contents {
  display: contents;
}
.overflow-y-auto {
  overflow-y: auto;
}
.min-h-screen {
  min-height: 100vh;
}
.snap-y {
  scroll-snap-type: y var(--tw-scroll-snap-strictness);
}
.snap-center {
  scroll-snap-align: center;
}
.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}
.sticky {
  position: sticky;
}
.top-0 {
  top: calc(var(--spacing) * 0);
}
.fixed {
  position: fixed;
}
.overflow-clip {
  overflow: clip;
}
.inset-0 {
  inset: calc(var(--spacing) * 0);
}
.absolute {
  position: absolute;
}
.text-pink-300 {
  color: var(--color-pink-300);
}
.text-black {
  color: var(--color-black);
}
.w-screen {
  width: 100vw;
}
.overflow-hidden {
  overflow: hidden;
}
.bg-white {
  background-color: var(--color-white);
}
.left-0 {
  left: calc(var(--spacing) * 0);
}
.object-cover {
  object-fit: cover;
}
.bg-indigo-500 {
  background-color: var(--color-indigo-500);
}
.z-50 {
  z-index: 50;
}
.bottom-10 {
  bottom: calc(var(--spacing) * 10);
}
.right-10 {
  right: calc(var(--spacing) * 10);
}
.right-5 {
  right: calc(var(--spacing) * 5);
}
.bottom-5 {
  bottom: calc(var(--spacing) * 5);
}
.text-red-500 {
  color: var(--color-red-500);
}
.bg-\[currentColor\] {
  background-color: currentColor;
}
.h-auto {
  height: auto;
}
.bg-orange-500 {
  background-color: var(--color-orange-500);
}
.bg-orange-800 {
  background-color: var(--color-orange-800);
}
.container {
  width: 100%;
}
.mx-auto {
  margin-inline: auto;
}
.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}
.px-5 {
  padding-inline: calc(var(--spacing) * 5);
}
.text-5xl {
  font-size: var(--text-5xl);
  line-height: var(--tw-leading, var(--text-5xl--line-height));
}
.bg-green-700 {
  background-color: var(--color-green-700);
}
.bg-green-500 {
  background-color: var(--color-green-500);
}
.max-w-\[340px\] {
  max-width: 340px;
}
.top-1\/2 {
  top: calc(1/2 * 100%);
}
.-translate-y-1\/2 {
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-1\/2 {
  --tw-translate-y: calc(1/2 * 100%);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-1\/2 {
  --tw-translate-x: calc(1/2 * 100%);
  --tw-translate-y: calc(1/2 * 100%);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-1\/2 {
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.ml-10 {
  margin-left: calc(var(--spacing) * 10);
}
.w-auto {
  width: auto;
}
.ml-20 {
  margin-left: calc(var(--spacing) * 20);
}
.bg-\[indigo\] {
  background-color: indigo;
}
.pl-5 {
  padding-left: calc(var(--spacing) * 5);
}
.max-w-\[20rem\] {
  max-width: 20rem;
}
.max-w-\[30rem\] {
  max-width: 30rem;
}
.text-balance {
  text-wrap: balance;
}
.leading-snug {
  --tw-leading: var(--leading-snug);
  line-height: var(--leading-snug);
}
.leading-tight {
  --tw-leading: var(--leading-tight);
  line-height: var(--leading-tight);
}
.pl-0 {
  padding-left: calc(var(--spacing) * 0);
}
.px-10 {
  padding-inline: calc(var(--spacing) * 10);
}
.py-5 {
  padding-block: calc(var(--spacing) * 5);
}
.text-lg {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
}
.leading-none {
  --tw-leading: 1;
  line-height: 1;
}
.items-end {
  align-items: flex-end;
}
.grid {
  display: grid;
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.uppercase {
  text-transform: uppercase;
}
.text-xs {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}
.bg-neutral-400 {
  background-color: var(--color-neutral-400);
}
.bg-neutral-900 {
  background-color: var(--color-neutral-900);
}
.bg-\[rgba\(255\,255\,255\,0\.1\)\] {
  background-color: rgba(255,255,255,0.1);
}
.text-\[10px\] {
  font-size: 10px;
}
.bg-neutral-800 {
  background-color: var(--color-neutral-800);
}
.p-1 {
  padding: calc(var(--spacing) * 1);
}
.rounded {
  border-radius: 0.25rem;
}
.gap-2 {
  gap: calc(var(--spacing) * 2);
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pb-10 {
  padding-bottom: calc(var(--spacing) * 10);
}
.mix-blend-difference {
  mix-blend-mode: difference;
}
.bg-yellow-400 {
  background-color: var(--color-yellow-400);
}
.animate-spin {
  animation: var(--animate-spin);
}
.block {
  display: block;
}
.p-2 {
  padding: calc(var(--spacing) * 2);
}
.text-base {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}
.mb-\[1lh\] {
  margin-bottom: 1lh;
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.font-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
.text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.text-sm {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.my-\[1lh\] {
  margin-block: 1lh;
}
.my-2 {
  margin-block: calc(var(--spacing) * 2);
}
.my-\[0\.5lh\] {
  margin-block: 0.5lh;
}
.mb-2 {
  margin-bottom: calc(var(--spacing) * 2);
}
.inline {
  display: inline;
}
.after\:content-\[\'\,\'\]::after {
  --tw-content: ',';
  content: var(--tw-content);
}
.after\:inline::after {
  content: var(--tw-content);
  display: inline;
}
.after\:content-\[\,\]::after {
  --tw-content: ,;
  content: var(--tw-content);
}
.after\:block::after {
  content: var(--tw-content);
  display: block;
}
.after\:content-\[\"\,\"\]::after {
  --tw-content: ",";
  content: var(--tw-content);
}
.after\:block::after {
  content: var(--tw-content);
  display: block;
}
.after\:content-\[\'\,\'\]::after {
  --tw-content: ',';
  content: var(--tw-content);
}
.after\:content-\[\,\]::after {
  --tw-content: ,;
  content: var(--tw-content);
}
.justify-start {
  justify-content: flex-start;
}
.text-4xl {
  font-size: var(--text-4xl);
  line-height: var(--tw-leading, var(--text-4xl--line-height));
}
.justify-end {
  justify-content: flex-end;
}
.translate-x-10 {
  --tw-translate-x: calc(var(--spacing) * 10);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.mx-20 {
  margin-inline: calc(var(--spacing) * 20);
}
.left-20 {
  left: calc(var(--spacing) * 20);
}
.transition-\[transform_0\.5s\] {
  transition-property: transform 0.5s;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.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));
}
.w-20 {
  width: calc(var(--spacing) * 20);
}
.-left-20 {
  left: calc(var(--spacing) * -20);
}
.inline-block {
  display: inline-block;
}
.text-3xl {
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
}
.w-1\/3 {
  width: calc(1/3 * 100%);
}
.h-20 {
  height: calc(var(--spacing) * 20);
}
.-mt-20 {
  margin-top: calc(var(--spacing) * -20);
}
.bg-blue-400 {
  background-color: var(--color-blue-400);
}
.flex-none {
  flex: none;
}
.mt-2 {
  margin-top: calc(var(--spacing) * 2);
}
.py-10 {
  padding-block: calc(var(--spacing) * 10);
}
.py-4 {
  padding-block: calc(var(--spacing) * 4);
}
.py-3 {
  padding-block: calc(var(--spacing) * 3);
}
@media (width >= 40rem) {
.container {
  max-width: 40rem
}
}
@media (width >= 48rem) {
.md\:hidden {
  display: none
}
.md\:flex {
  display: flex
}
.md\:aspect-\[16\/9\] {
  aspect-ratio: 16/9
}
.container {
  max-width: 48rem
}
.md\:grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}
}
@media (width >= 64rem) {
.container {
  max-width: 64rem
}
.lg\:grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}
.lg\:text-\[2\.75rem\] {
  font-size: 2.75rem;
}
.lg\:leading-\[1\.1em\] {
  --tw-leading: 1.1em;
  line-height: 1.1em;
}
}
@media (width >= 80rem) {
.container {
  max-width: 80rem
}
.xl\:grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}
}
@media (width >= 96rem) {
.container {
  max-width: 96rem
}
}
@media (hover: hover) {
.hover\:bg-white:hover {
      background-color: var(--color-white)
  }
.\[\&_a\]\:hover\:text-blue-500 a:hover {
  color: var(--color-blue-500);
}
.\[\&_a\]\:hover\:text-blue-500 a:hover {
  color: var(--color-blue-500);
}
}
}

[x-cloak] { 
  display: none !important; 
}

.clip-wrapper {
    clip: rect(auto, auto, auto, auto);
}

.sarasa {
  transform: translateY(-50%);
  &::before{
    content:'';
    display: block;
    width: 100vw;
    background-color: red;
    height: 100%;
    position: absolute;
    right: 100%;
    top: 0px;
    background: indigo;
  }
}

/* Card */
.card {}
.card__featured-image { 
  aspect-ratio: 800/600; 
  display: block; 
  width: 100%; 
  height: auto; 
  object-fit: cover; 
  position: relative;
  outline: none;
  &:hover{
    filter: blur(3px);
    transition: filter 0.5s;
  }
}
.card__caption {}
.card__title {}
.card__tag { 
  background: rgba(255,255,255,0.2);
}
.background-chela {
  background: white;
  background-image:
    linear-gradient(to right,
      transparent 33.333%,
      #ccc 33.333%,
      #ccc calc(33.333% + 1px),
      transparent calc(33.333% + 1px),
      transparent 66.666%,
      #ccc 66.666%,
      #ccc calc(66.666% + 1px),
      transparent calc(66.666% + 1px));
  margin: 0;
  padding: 0;
  min-width: 100vw;
  min-height: 100vh;
}

.--menu-open{
  transform: translateX(calc(var(--spacing) * 20));
}