@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200);
			
			/*! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com*/
			*,
			:after,
			:before {
			  border: 0 solid #e5e7eb;
			  box-sizing: border-box;
			}
			:after,
			:before {
			  --tw-content: "";
			}
			:host,
			html {
			  line-height: 1.5;
			  -webkit-text-size-adjust: 100%;
			  font-family:
			    Open Sans,
			    ui-sans-serif,
			    system-ui,
			    sans-serif,
			    Apple Color Emoji,
			    Segoe UI Emoji,
			    Segoe UI Symbol,
			    Noto Color Emoji;
			  font-feature-settings: normal;
			  font-variation-settings: normal;
			  -moz-tab-size: 4;
			  tab-size: 4;
			  -webkit-tap-highlight-color: transparent;
			}
			body {
			  line-height: inherit;
			  margin: 0;
			}
			hr {
			  border-top-width: 1px;
			  color: inherit;
			  height: 0;
			}
			abbr:where([title]) {
			  text-decoration: underline dotted;
			}
			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
			  font-size: inherit;
			  font-weight: inherit;
			}
			a {
			  color: inherit;
			  text-decoration: inherit;
			}
			b,
			strong {
			  font-weight: bolder;
			}
			code,
			kbd,
			pre,
			samp {
			  font-family:
			    ui-monospace,
			    SFMono-Regular,
			    Menlo,
			    Monaco,
			    Consolas,
			    Liberation Mono,
			    Courier New,
			    monospace;
			  font-feature-settings: normal;
			  font-size: 1em;
			  font-variation-settings: normal;
			}
			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 {
			  border-collapse: collapse;
			  border-color: inherit;
			  text-indent: 0;
			}
			button,
			input,
			optgroup,
			select,
			textarea {
			  color: inherit;
			  font-family: inherit;
			  font-feature-settings: inherit;
			  font-size: 100%;
			  font-variation-settings: inherit;
			  font-weight: inherit;
			  letter-spacing: inherit;
			  line-height: inherit;
			  margin: 0;
			  padding: 0;
			}
			button,
			select {
			  text-transform: none;
			}
			button,
			input:where([type="button"]),
			input:where([type="reset"]),
			input:where([type="submit"]) {
			  -webkit-appearance: button;
			  background-color: transparent;
			  background-image: none;
			}
			:-moz-focusring {
			  outline: auto;
			}
			:-moz-ui-invalid {
			  box-shadow: none;
			}
			progress {
			  vertical-align: baseline;
			}
			::-webkit-inner-spin-button,
			::-webkit-outer-spin-button {
			  height: auto;
			}
			[type="search"] {
			  -webkit-appearance: textfield;
			  outline-offset: -2px;
			}
			::-webkit-search-decoration {
			  -webkit-appearance: none;
			}
			::-webkit-file-upload-button {
			  -webkit-appearance: button;
			  font: inherit;
			}
			summary {
			  display: list-item;
			}
			blockquote,
			dd,
			dl,
			figure,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			hr,
			p,
			pre {
			  margin: 0;
			}
			fieldset {
			  margin: 0;
			}
			fieldset,
			legend {
			  padding: 0;
			}
			menu,
			ol,
			ul {
			  list-style: none;
			  margin: 0;
			  padding: 0;
			}
			dialog {
			  padding: 0;
			}
			textarea {
			  resize: vertical;
			}
			input::placeholder,
			textarea::placeholder {
			  color: #9ca3af;
			  opacity: 1;
			}
			[role="button"],
			button {
			  cursor: pointer;
			}
			:disabled {
			  cursor: default;
			}
			audio,
			canvas,
			embed,
			iframe,
			img,
			object,
			svg,
			video {
			  display: block;
			  vertical-align: middle;
			}
			img,
			video {
			  height: auto;
			  max-width: 100%;
			}
			[hidden] {
			  display: none;
			}
			*,
			:after,
			:before {
			  --tw-border-spacing-x: 0;
			  --tw-border-spacing-y: 0;
			  --tw-translate-x: 0;
			  --tw-translate-y: 0;
			  --tw-rotate: 0;
			  --tw-skew-x: 0;
			  --tw-skew-y: 0;
			  --tw-scale-x: 1;
			  --tw-scale-y: 1;
			  --tw-pan-x: ;
			  --tw-pan-y: ;
			  --tw-pinch-zoom: ;
			  --tw-scroll-snap-strictness: proximity;
			  --tw-gradient-from-position: ;
			  --tw-gradient-via-position: ;
			  --tw-gradient-to-position: ;
			  --tw-ordinal: ;
			  --tw-slashed-zero: ;
			  --tw-numeric-figure: ;
			  --tw-numeric-spacing: ;
			  --tw-numeric-fraction: ;
			  --tw-ring-inset: ;
			  --tw-ring-offset-width: 0px;
			  --tw-ring-offset-color: #fff;
			  --tw-ring-color: rgba(59, 130, 246, 0.5);
			  --tw-ring-offset-shadow: 0 0 #0000;
			  --tw-ring-shadow: 0 0 #0000;
			  --tw-shadow: 0 0 #0000;
			  --tw-shadow-colored: 0 0 #0000;
			  --tw-blur: ;
			  --tw-brightness: ;
			  --tw-contrast: ;
			  --tw-grayscale: ;
			  --tw-hue-rotate: ;
			  --tw-invert: ;
			  --tw-saturate: ;
			  --tw-sepia: ;
			  --tw-drop-shadow: ;
			  --tw-backdrop-blur: ;
			  --tw-backdrop-brightness: ;
			  --tw-backdrop-contrast: ;
			  --tw-backdrop-grayscale: ;
			  --tw-backdrop-hue-rotate: ;
			  --tw-backdrop-invert: ;
			  --tw-backdrop-opacity: ;
			  --tw-backdrop-saturate: ;
			  --tw-backdrop-sepia: ;
			  --tw-contain-size: ;
			  --tw-contain-layout: ;
			  --tw-contain-paint: ;
			  --tw-contain-style: ;
			}
			::backdrop {
			  --tw-border-spacing-x: 0;
			  --tw-border-spacing-y: 0;
			  --tw-translate-x: 0;
			  --tw-translate-y: 0;
			  --tw-rotate: 0;
			  --tw-skew-x: 0;
			  --tw-skew-y: 0;
			  --tw-scale-x: 1;
			  --tw-scale-y: 1;
			  --tw-pan-x: ;
			  --tw-pan-y: ;
			  --tw-pinch-zoom: ;
			  --tw-scroll-snap-strictness: proximity;
			  --tw-gradient-from-position: ;
			  --tw-gradient-via-position: ;
			  --tw-gradient-to-position: ;
			  --tw-ordinal: ;
			  --tw-slashed-zero: ;
			  --tw-numeric-figure: ;
			  --tw-numeric-spacing: ;
			  --tw-numeric-fraction: ;
			  --tw-ring-inset: ;
			  --tw-ring-offset-width: 0px;
			  --tw-ring-offset-color: #fff;
			  --tw-ring-color: rgba(59, 130, 246, 0.5);
			  --tw-ring-offset-shadow: 0 0 #0000;
			  --tw-ring-shadow: 0 0 #0000;
			  --tw-shadow: 0 0 #0000;
			  --tw-shadow-colored: 0 0 #0000;
			  --tw-blur: ;
			  --tw-brightness: ;
			  --tw-contrast: ;
			  --tw-grayscale: ;
			  --tw-hue-rotate: ;
			  --tw-invert: ;
			  --tw-saturate: ;
			  --tw-sepia: ;
			  --tw-drop-shadow: ;
			  --tw-backdrop-blur: ;
			  --tw-backdrop-brightness: ;
			  --tw-backdrop-contrast: ;
			  --tw-backdrop-grayscale: ;
			  --tw-backdrop-hue-rotate: ;
			  --tw-backdrop-invert: ;
			  --tw-backdrop-opacity: ;
			  --tw-backdrop-saturate: ;
			  --tw-backdrop-sepia: ;
			  --tw-contain-size: ;
			  --tw-contain-layout: ;
			  --tw-contain-paint: ;
			  --tw-contain-style: ;
			}
			#codepen :is(.mt-2) {
			  margin-top: 8px;
			}
			#codepen :is(.mt-4) {
			  margin-top: 16px;
			}
			#codepen :is(.flex) {
			  display: flex;
			}
			#codepen :is(.h-\[200px\]) {
			  height: 200px;
			}
			#codepen :is(.h-\[40px\]) {
			  height: 40px;
			}
			#codepen :is(.w-\[300px\]) {
			  width: 300px;
			}
			#codepen :is(.w-\[40px\]) {
			  width: 40px;
			}
			#codepen :is(.w-full) {
			  width: 100%;
			}
			#codepen :is(.items-center) {
			  align-items: center;
			}
			#codepen :is(.justify-center) {
			  justify-content: center;
			}
			#codepen :is(.justify-between) {
			  justify-content: space-between;
			}
			#codepen :is(.rounded-full) {
			  border-radius: 9999px;
			}
			#codepen :is(.rounded-lg) {
			  border-radius: 24px;
			}
			#codepen :is(.rounded-md) {
			  border-radius: 18px;
			}
			#codepen :is(.bg-neutral-50) {
			  --tw-bg-opacity: 1;
			  background-color: black;
			}
			#codepen :is(.bg-primary) {
			  --tw-bg-opacity: 1;
			  background-color: black;
			}
			#codepen :is(.object-cover) {
			  object-fit: cover;
			}
			#codepen :is(.p-4) {
			  padding: 16px;
			}
			#codepen :is(.px-4) {
			  padding-left: 16px;
			  padding-right: 16px;
			}
			#codepen :is(.py-2) {
			  padding-bottom: 8px;
			  padding-top: 8px;
			}
			#codepen :is(.font-title) {
			  font-family:
			    Lato,
			    ui-sans-serif,
			    system-ui,
			    sans-serif,
			    Apple Color Emoji,
			    Segoe UI Emoji,
			    Segoe UI Symbol,
			    Noto Color Emoji;
			}
			#codepen :is(.text-lg) {
			  font-size: 18px;
			  line-height: 28px;
			}
			#codepen :is(.text-sm) {
			  font-size: 14px;
			  line-height: 20px;
			}
			#codepen :is(.font-semibold) {
			  font-weight: 600;
			}
			#codepen :is(.text-neutral-700) {
			  --tw-text-opacity: 1;
			  color: rgb(201 201 201 / var(--tw-text-opacity));
			}
			#codepen :is(.text-white) {
			  --tw-text-opacity: 1;
			  color: rgb(255 255 255 / var(--tw-text-opacity));
			}
			#codepen :is(.shadow-lg) {
			  box-shadow: rgb(174 174 174 / 25%) 0px 14px 28px, rgb(144 144 144 / 22%) 0px 10px 10px;
			}
			#codepen {
			  font-family: Open Sans !important;
			  font-size: 16px !important;
			  line-height: 24px !important;
			  
			}
			#codepen :is(.bg-neutral-50) {
			  color: rgba(0, 0, 0, 0.9) !important;
			}
			
			.fadein{
			     animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
			}
			@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}