Tailwind studio fluid
1530 lines
/*
/*
! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
*/
*/
*, :after, :before {
*, :after, :before {
box-sizing: border-box;
box-sizing: border-box;
border: 0 solid #e5e7eb
border: 0 solid #e5e7eb
}
}
:after, :before {
:after, :before {
--tw-content: ""
--tw-content: ""
}
}
html {
html {
line-height: 1.5;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
-moz-tab-size: 4;
-o-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
tab-size: 4;
font-family: Mona Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-family: Mona Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-feature-settings: normal;
font-feature-settings: normal;
font-variation-settings: normal
font-variation-settings: normal
}
}
body {
body {
margin: 0;
margin: 0;
line-height: inherit
line-height: inherit
}
}
hr {
hr {
height: 0;
height: 0;
color: inherit;
color: inherit;
border-top-width: 1px
border-top-width: 1px
}
}
abbr:where([title]) {
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted
text-decoration: underline dotted
}
}
h1, h2, h3, h4, h5, h6 {
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-size: inherit;
font-weight: inherit
font-weight: inherit
}
}
a {
a {
color: inherit;
color: inherit;
text-decoration: inherit
text-decoration: inherit
}
}
b, strong {
b, strong {
font-weight: bolder
font-weight: bolder
}
}
code, kbd, pre, samp {
code, kbd, pre, samp {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
font-size: 1em
font-size: 1em
}
}
small {
small {
font-size: 80%
font-size: 80%
}
}
sub, sup {
sub, sup {
font-size: 75%;
font-size: 75%;
line-height: 0;
line-height: 0;
position: relative;
position: relative;
vertical-align: baseline
vertical-align: baseline
}
}
sub {
sub {
bottom: -.25em
bottom: -.25em
}
}
sup {
sup {
top: -.5em
top: -.5em
}
}
table {
table {
text-indent: 0;
text-indent: 0;
border-color: inherit;
border-color: inherit;
border-collapse: collapse
border-collapse: collapse
}
}
button, input, optgroup, select, textarea {
button, input, optgroup, select, textarea {
font-family: inherit;
font-family: inherit;
font-size: 100%;
font-size: 100%;
font-weight: inherit;
font-weight: inherit;
line-height: inherit;
line-height: inherit;
color: inherit;
color: inherit;
margin: 0;
margin: 0;
padding: 0
padding: 0
}
}
button, select {
button, select {
text-transform: none
text-transform: none
}
}
[type=button], [type=reset], [type=submit], button {
[type=button], [type=reset], [type=submit], button {
-webkit-appearance: button;
-webkit-appearance: button;
background-color: transparent;
background-color: transparent;
background-image: none
background-image: none
}
}
:-moz-focusring {
:-moz-focusring {
outline: auto
outline: auto
}
}
:-moz-ui-invalid {
:-moz-ui-invalid {
box-shadow: none
box-shadow: none
}
}
progress {
progress {
vertical-align: baseline
vertical-align: baseline
}
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height: auto
height: auto
}
}
[type=search] {
[type=search] {
-webkit-appearance: textfield;
-webkit-appearance: textfield;
outline-offset: -2px
outline-offset: -2px
}
}
::-webkit-search-decoration {
::-webkit-search-decoration {
-webkit-appearance: none
-webkit-appearance: none
}
}
::-webkit-file-upload-button {
::-webkit-file-upload-button {
-webkit-appearance: button;
-webkit-appearance: button;
font: inherit
font: inherit
}
}
summary {
summary {
display: list-item
display: list-item
}
}
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
margin: 0
margin: 0
}
}
fieldset {
fieldset {
margin: 0
margin: 0
}
}
fieldset, legend {
fieldset, legend {
padding: 0
padding: 0
}
}
menu, ol, ul {
menu, ol, ul {
list-style: none;
list-style: none;
margin: 0;
margin: 0;
padding: 0
padding: 0
}
}
textarea {
textarea {
resize: vertical
resize: vertical
}
}
input::-moz-placeholder, textarea::-moz-placeholder {
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1;
opacity: 1;
color: #9ca3af
color: #9ca3af
}
}
input::placeholder, textarea::placeholder {
input::placeholder, textarea::placeholder {
opacity: 1;
opacity: 1;
color: #9ca3af
color: #9ca3af
}
}
[role=button], button {
[role=button], button {
cursor: pointer
cursor: pointer
}
}
:disabled {
:disabled {
cursor: default
cursor: default
}
}
audio, canvas, embed, iframe, img, object, svg, video {
audio, canvas, embed, iframe, img, object, svg, video {
display: block;
display: block;
vertical-align: middle
vertical-align: middle
}
}
img, video {
img, video {
max-width: 100%;
max-width: 100%;
height: auto
height: auto
}
}
[hidden] {
[hidden] {
display: none
display: none
}
}
:root {
--tw-lh: min(1.5em, 1em + .5rem)
}
rt, small {
line-height: var(--tw-lh)
}
*, :after, :before {
*, :after, :before {
--tw-border-spacing-x: 0;
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgba(59, 130, 246, .5);
--tw-ring-color: rgba(59, 130, 246, .5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-blur: ;
--tw-brightness: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-invert: ;
--tw-saturate: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia:
--tw-backdrop-sepia:
}
}
::backdrop {
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgba(59, 130, 246, .5);
--tw-ring-color: rgba(59, 130, 246, .5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-blur: ;
--tw-brightness: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-invert: ;
--tw-saturate: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia:
--tw-backdrop-sepia:
}
}
@font-face {
@font-face {
font-family: Mona Sans;
font-family: Mona Sans;
font-weight: 200 900;
font-weight: 200 900;
font-display: block;
font-display: block;
font-style: normal;
font-style: normal;
font-stretch: 75% 125%;
font-stretch: 75% 125%;
src: url(/_next/static/media/Mona-Sans.var.37e1d48f.woff2) format("woff2")
src: url(/_next/static/media/Mona-Sans.var.37e1d48f.woff2) format("woff2")
}
}
.typography {
.typography {
color: #0a0a0a;
color: #0a0a0a;
font-size: 1.25rem;
font-size: 1.25rem;
line-height: 2rem;
line-height: min(1.75em, 1em + .75rem);
--shiki-color-text: #fff;
--shiki-color-text: #fff;
--shiki-color-background: #0a0a0a;
--shiki-color-background: #0a0a0a;
--shiki-token-constant: #d4d4d4;
--shiki-token-constant: #d4d4d4;
--shiki-token-string: #a3a3a3;
--shiki-token-string: #a3a3a3;
--shiki-token-comment: #737373;
--shiki-token-comment: #737373;
--shiki-token-keyword: #a3a3a3;
--shiki-token-keyword: #a3a3a3;
--shiki-token-parameter: #a3a3a3;
--shiki-token-parameter: #a3a3a3;
--shiki-token-function: #d4d4d4;
--shiki-token-function: #d4d4d4;
--shiki-token-string-expression: #d4d4d4;
--shiki-token-string-expression: #d4d4d4;
--shiki-token-punctuation: #a3a3a3
--shiki-token-punctuation: #a3a3a3
}
}
.typography :where(.typography>*) {
.typography :where(.typography>*) {
margin-top: 1.5rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem
margin-bottom: 1.5rem
}
}
.typography :where(h2) {
.typography :where(h2) {
font-weight: 600;
font-weight: 600;
font-family: Mona Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-family: Mona Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-variation-settings: "wdth" 125;
font-variation-settings: "wdth" 125;
font-size: 1.5rem;
font-size: 1.5rem;
line-height: 2.25rem;
line-height: min(1.5em, 1em + .5rem);
margin-top: 4rem
margin-top: 4rem
}
}
.typography :where(h3) {
.typography :where(h3) {
font-weight: 600;
font-weight: 600;
font-family: Mona Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-family: Mona Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-variation-settings: "wdth" 125;
font-variation-settings: "wdth" 125;
font-size: 1.25rem;
font-size: 1.25rem;
line-height: 2rem;
line-height: min(1.5em, 1em + .5rem);
margin-top: 2.5rem
margin-top: 2.5rem
}
}
.typography :where(h2+h3) {
.typography :where(h2+h3) {
margin-top: 0
margin-top: 0
}
}
.typography :where(ul,ol) {
.typography :where(ul,ol) {
padding-left: 1.5rem
padding-left: 1.5rem
}
}
.typography :where(ul) {
.typography :where(ul) {
list-style-type: disc
list-style-type: disc
}
}
.typography :where(ol) {
.typography :where(ol) {
list-style-type: decimal
list-style-type: decimal
}
}
.typography :where(li) {
.typography :where(li) {
padding-left: .75rem;
padding-left: .75rem;
margin-top: 1.5rem
margin-top: 1.5rem
}
}
.typography :where(li)::marker {
.typography :where(li)::marker {
color: #737373
color: #737373
}
}
.typography :where(li li), .typography :where(li>*) {
.typography :where(li li), .typography :where(li>*) {
margin-top: 1rem
margin-top: 1rem
}
}
.typography :where(ol>li)::marker {
.typography :where(ol>li)::marker {
font-size: 1rem;
font-size: 1rem;
font-weight: 600
font-weight: 600
}
}
.typography :where(table) {
.typography :where(table) {
width: 100%;
width: 100%;
text-align: left;
text-align: left;
font-size: 1rem;
font-size: 1rem;
line-height: 1.75rem
line-height: min(1.5em, 1em + .5rem)
}
}
.typography :where(th) {
.typography :where(th) {
font-weight: 600
font-weight: 600
}
}
.typography :where(thead th) {
.typography :where(thead th) {
padding-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid #0a0a0a
border-bottom: 1px solid #0a0a0a
}
}
.typography :where(td) {
.typography :where(td) {
vertical-align: top;
vertical-align: top;
padding-top: 1.5rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid hsla(0, 0%, 4%, .1)
border-bottom: 1px solid hsla(0, 0%, 4%, .1)
}
}
.typography :where(:is(th,td):not(:last-child)) {
.typography :where(:is(th,td):not(:last-child)) {
padding-right: 1.5rem
padding-right: 1.5rem
}
}
.typography :where(pre) {
.typography :where(pre) {
display: flex;
display: flex;
background-color: #0a0a0a;
background-color: #0a0a0a;
border-radius: 2.5rem;
border-radius: 2.5rem;
overflow-x: auto;
overflow-x: auto;
margin: 2.5rem calc(-1 * 1.5rem)
margin: 2.5rem calc(-1 * 1.5rem)
}
}
@media (min-width: 640px) {
@media (min-width: 640px) {
.typography :where(pre) {
.typography :where(pre) {
margin-left: auto;
margin-left: auto;
margin-right: auto
margin-right: auto
}
}
}
}
.typography :where(pre code) {
.typography :where(pre code) {
flex: none;
flex: none;
padding: 2rem 1.5rem;
padding: 2rem 1.5rem;
font-size: 1rem;
font-size: 1rem;
line-height: 2rem;
line-height: 2rem;
color: #fff
color: #fff
}
}
@media (min-width: 640px) {
@media (min-width: 640px) {
.typography :where(pre code) {
.typography :where(pre code) {
padding: 2.5rem
padding: 2.5rem
}
}
}
}
.typography :where(hr) {
.typography :where(hr) {
border-color: hsla(0, 0%, 4%, .1);
border-color: hsla(0, 0%, 4%, .1);
margin-top: 6rem;
margin-top: 6rem;
margin-bottom: 6rem
margin-bottom: 6rem
}
}
.typography :where(a) {
.typography :where(a) {
text-decoration: underline;
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-thickness: 1px;
text-underline-offset: .15em;
text-underline-offset: .15em;
-webkit-text-decoration-skip-ink: none;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
font-weight: 600
font-weight: 600
}
}
.typography :where(strong) {
.typography :where(strong) {
font-weight: 600
font-weight: 600
}
}
.typography :where(code:not(pre code)) {
.typography :where(code:not(pre code)) {
font-size: calc(18 / 20 * 1em);
font-size: calc(18 / 20 * 1em);
font-weight: 600
font-weight: 600
}
}
.typography :where(code:not(pre code)):after, .typography :where(code:not(pre code)):before {
.typography :where(code:not(pre code)):after, .typography :where(code:not(pre code)):before {
content: "`"
content: "`"
}
}
.typography :where(h2 code,h3 code) {
.typography :where(h2 code,h3 code) {
font-weight: 700
font-weight: 700
}
}
.typography :where(figure) {
.typography :where(figure) {
margin-top: 8rem;
margin-top: 8rem;
margin-bottom: 8rem
margin-bottom: 8rem
}
}
.typography :where(.typography:first-child>:first-child), .typography :where(li>:first-child) {
.typography :where(.typography:first-child>:first-child), .typography :where(li>:first-child) {
margin-top: 0 !important
margin-top: 0 !important
}
}
.typography :where(.typography:last-child>:last-child), .typography :where(li>:last-child) {
.typography :where(.typography:last-child>:last-child), .typography :where(li>:last-child) {
margin-bottom: 0 !important
margin-bottom: 0 !important
}
}
.sr-only {
.sr-only {
position: absolute;
position: absolute;
width: 1px;
width: 1px;
height: 1px;
height: 1px;
padding: 0;
padding: 0;
margin: -1px;
margin: -1px;
overflow: hidden;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip: rect(0, 0, 0, 0);
white-space: nowrap;
white-space: nowrap;
border-width: 0
border-width: 0
}
}
.pointer-events-none {
.pointer-events-none {
pointer-events: none
pointer-events: none
}
}
.visible {
.visible {
visibility: visible
visibility: visible
}
}
.absolute {
.absolute {
position: absolute
position: absolute
}
}
.relative {
.relative {
position: relative
position: relative
}
}
.inset-0 {
.inset-0 {
inset: 0
inset: 0
}
}
.inset-x-0 {
.inset-x-0 {
left: 0;
left: 0;
right: 0
right: 0
}
}
.inset-y-0 {
.inset-y-0 {
top: 0;
top: 0;
bottom: 0
bottom: 0
}
}
.inset-y-1 {
.inset-y-1 {
top: .25rem;
top: .25rem;
bottom: .25rem
bottom: .25rem
}
}
.-top-14 {
.-top-14 {
top: -3.5rem
top: -3.5rem
}
}
.left-0 {
.left-0 {
left: 0
left: 0
}
}
.left-6 {
.left-6 {
left: 1.5rem
left: 1.5rem
}
}
.right-0 {
.right-0 {
right: 0
right: 0
}
}
.right-1 {
.right-1 {
right: .25rem
right: .25rem
}
}
.top-0 {
.top-0 {
top: 0
top: 0
}
}
.top-1\/2 {
.top-1\/2 {
top: 50%
top: 50%
}
}
.top-2 {
.top-2 {
top: .5rem
top: .5rem
}
}
.top-px {
.top-px {
top: 1px
top: 1px
}
}
.isolate {
.isolate {
isolation: isolate
isolation: isolate
}
}
.-z-10 {
.-z-10 {
z-index: -10
z-index: -10
}
}
.z-0 {
.z-0 {
z-index: 0
z-index: 0
}
}
.z-40 {
.z-40 {
z-index: 40
z-index: 40
}
}
.z-50 {
.z-50 {
z-index: 50
z-index: 50
}
}
.order-first {
.order-first {
order: -9999
order: -9999
}
}
.col-span-2 {
.col-span-2 {
grid-column: span 2/span 2
grid-column: span 2/span 2
}
}
.col-span-full {
.col-span-full {
grid-column: 1/-1
grid-column: 1/-1
}
}
.col-start-1 {
.col-start-1 {
grid-column-start: 1
grid-column-start: 1
}
}
.row-start-2 {
.row-start-2 {
grid-row-start: 2
grid-row-start: 2
}
}
.-m-2 {
.-m-2 {
margin: -.5rem
margin: -.5rem
}
}
.-m-2\.5 {
.-m-2\.5 {
margin: -.625rem
margin: -.625rem
}
}
.-mx-6 {
.-mx-6 {
margin-left: -1.5rem;
margin-left: -1.5rem;
margin-right: -1.5rem
margin-right: -1.5rem
}
}
.-my-px {
.-my-px {
margin-top: -1px;
margin-top: -1px;
margin-bottom: -1px
margin-bottom: -1px
}
}
.mx-auto {
.mx-auto {
margin-left: auto;
margin-left: auto;
margin-right: auto
margin-right: auto
}
}
.my-10 {
margin-top: 2.5rem;
margin-bottom: 2.5rem
}
.my-32 {
margin-top: 8rem;
margin-bottom: 8rem
}
.my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem
}
.-mt-3 {
.-mt-3 {
margin-top: -.75rem
margin-top: -.75rem
}
}
.mb-20 {
margin-bottom: 5rem
}
.mb-6 {
margin-bottom: 1.5rem
}
.mt-1 {
.mt-1 {
margin-top: .25rem
margin-top: .25rem
}
}
.mt-10 {
margin-top: 2.5rem
}
.mt-12 {
margin-top: 3rem
}
.mt-16 {
margin-top: 4rem
}
.mt-2 {
.mt-2 {
margin-top: .5rem
margin-top: .5rem
}
}
.mt-2\.5 {
.mt-2\.5 {
margin-top: .625rem
margin-top: .625rem
}
.mt-24 {
margin-top: 6rem
}
}
.mt-4 {
.mt-4 {
margin-top: 1rem
margin-top: 1rem
}
.mt-40 {
margin-top: 10rem
}
.mt-6 {
margin-top: 1.5rem
}
.mt-8 {
margin-top: 2rem
}
}
.mt-px {
.mt-px {
margin-top: 1px
margin-top: 1px
}
}
.block {
.block {
display: block
display: block
}
}
.flex {
.flex {
display: flex
display: flex
}
}
.inline-flex {
.inline-flex {
display: inline-flex
display: inline-flex
}
}
.table {
.table {
display: table
display: table
}
}
.grid {
.grid {
display: grid
display: grid
}
}
.hidden {
.hidden {
display: none
display: none
}
}
.aspect-\[16\/10\] {
.aspect-\[16\/10\] {
aspect-ratio: 16/10
aspect-ratio: 16/10
}
}
.aspect-\[719\/680\] {
.aspect-\[719\/680\] {
aspect-ratio: 719/680
aspect-ratio: 719/680
}
}
.aspect-square {
.aspect-square {
aspect-ratio: 1/1
aspect-ratio: 1/1
}
}
.h-12 {
.h-12 {
height: 3rem
height: 3rem
}
}
.h-16 {
.h-16 {
height: 4rem
height: 4rem
}
}
.h-6 {
.h-6 {
height: 1.5rem
height: 1.5rem
}
}
.h-8 {
.h-8 {
height: 2rem
height: 2rem
}
}
.h-96 {
.h-96 {
height: 24rem
height: 24rem
}
}
.h-\[1000px\] {
.h-\[1000px\] {
height: 1000px
height: 1000px
}
}
.h-\[884px\] {
.h-\[884px\] {
height: 884px
height: 884px
}
}
.h-full {
.h-full {
height: 100%
height: 100%
}
}
.h-px {
.h-px {
height: 1px
height: 1px
}
}
.min-h-full {
.min-h-full {
min-height: 100%
min-height: 100%
}
}
.w-0 {
.w-0 {
width: 0
width: 0
}
}
.w-12 {
.w-12 {
width: 3rem
width: 3rem
}
}
.w-16 {
.w-16 {
width: 4rem
width: 4rem
}
}
.w-4 {
.w-4 {
width: 1rem
width: 1rem
}
}
.w-6 {
.w-6 {
width: 1.5rem
width: 1.5rem
}
}
.w-8 {
.w-8 {
width: 2rem
width: 2rem
}
}
.w-\[33\.75rem\] {
.w-\[33\.75rem\] {
width: 33.75rem
width: 33.75rem
}
}
.w-full {
.w-full {
width: 100%
width: 100%
}
}
.w-screen {
.w-screen {
width: 100vw
width: 100vw
}
}
.\!max-w-none {
.\!max-w-none {
max-width: none !important
max-width: none !important
}
}
.max-w-2xl {
.max-w-2xl {
max-width: 42rem
max-width: 42rem
}
}
.max-w-3xl {
.max-w-3xl {
max-width: 48rem
max-width: 48rem
}
}
.max-w-4xl {
.max-w-4xl {
max-width: 56rem
max-width: 56rem
}
}
.max-w-5xl {
.max-w-5xl {
max-width: 64rem
max-width: 64rem
}
}
.max-w-7xl {
.max-w-7xl {
max-width: 80rem
max-width: 80rem
}
}
.max-w-\[76rem\] {
.max-w-\[76rem\] {
max-width: 76rem
max-width: 76rem
}
}
.max-w-sm {
.max-w-sm {
max-width: 24rem
max-width: 24rem
}
}
.max-w-xl {
.max-w-xl {
max-width: 36rem
max-width: 36rem
}
}
.flex-auto {
.flex-auto {
flex: 1 1 auto
flex: 1 1 auto
}
}
.flex-none {
.flex-none {
flex: none
flex: none
}
}
.origin-center {
.origin-center {
transform-origin: center
transform-origin: center
}
}
.origin-left {
.origin-left {
transform-origin: left
transform-origin: left
}
}
.scale-100 {
.scale-100 {
--tw-scale-x: 1;
--tw-scale-x: 1;
--tw-scale-y: 1
--tw-scale-y: 1
}
}
.scale-100, .transform {
.scale-100, .transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
}
.appearance-none {
.appearance-none {
-webkit-appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-moz-appearance: none;
appearance: none
appearance: none
}
}
.grid-cols-1 {
.grid-cols-1 {
grid-template-columns:repeat(1, minmax(0, 1fr))
grid-template-columns:repeat(1, minmax(0, 1fr))
}
}
.grid-cols-2 {
.grid-cols-2 {
grid-template-columns:repeat(2, minmax(0, 1fr))
grid-template-columns:repeat(2, minmax(0, 1fr))
}
}
.grid-cols-3 {
.grid-cols-3 {
grid-template-columns:repeat(3, minmax(0, 1fr))
grid-template-columns:repeat(3, minmax(0, 1fr))
}
}
.grid-cols-\[auto\2c 1fr\] {
.grid-cols-\[auto\2c 1fr\] {
grid-template-columns:auto 1fr
grid-template-columns:auto 1fr
}
}
.flex-col {
.flex-col {
flex-direction: column
flex-direction: column
}
}
.flex-col-reverse {
.flex-col-reverse {
flex-direction: column-reverse
flex-direction: column-reverse
}
}
.flex-wrap {
.flex-wrap {
flex-wrap: wrap
flex-wrap: wrap
}
}
.items-start {
.items-start {
align-items: flex-start
align-items: flex-start
}
}
.items-end {
.items-end {
align-items: flex-end
align-items: flex-end
}
}
.items-center {
.items-center {
align-items: center
align-items: center
}
}
.justify-end {
.justify-end {
justify-content: flex-end
justify-content: flex-end
}
}
.justify-center {
.justify-center {
justify-content: center
justify-content: center
}
}
.justify-between {
.justify-between {
justify-content: space-between
justify-content: space-between
}
}
.gap-10 {
gap: 2.5rem
}
.gap-4 {
.gap-4 {
gap: 1rem
gap: 1rem
}
.gap-6 {
gap: 1.5rem
}
.gap-8 {
gap: 2rem
}
.gap-x-10 {
-moz-column-gap: 2.5rem;
column-gap: 2.5rem
}
}
.gap-x-2 {
.gap-x-2 {
-moz-column-gap: .5rem;
-moz-column-gap: .5rem;
column-gap: .5rem
column-gap: .5rem
}
}
.gap-x-3 {
.gap-x-3 {
-moz-column-gap: .75rem;
-moz-column-gap: .75rem;
column-gap: .75rem
column-gap: .75rem
}
}
.gap-x-4 {
.gap-x-4 {
-moz-column-gap: 1rem;
-moz-column-gap: 1rem;
column-gap: 1rem
column-gap: 1rem
}
}
.gap-x-6 {
-moz-column-gap: 1.5rem;
column-gap: 1.5rem
}
.gap-x-8 {
-moz-column-gap: 2rem;
column-gap: 2rem
}
.gap-y-10 {
row-gap: 2.5rem
}
.gap-y-12 {
row-gap: 3rem
}
.gap-y-16 {
row-gap: 4rem
}
.gap-y-24 {
row-gap: 6rem
}
.gap-y-4 {
.gap-y-4 {
row-gap: 1rem
row-gap: 1rem
}
}
.gap-y-8 {
row-gap: 2rem
}
.-space-y-px > :not([hidden]) ~ :not([hidden]) {
.-space-y-px > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
--tw-space-y-reverse: 0;
margin-top: calc(-1px * calc(1 - var(--tw-space-y-reverse)));
margin-top: calc(-1px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-1px * var(--tw-space-y-reverse))
margin-bottom: calc(-1px * var(--tw-space-y-reverse))
}
.space-y-20 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(5rem * var(--tw-space-y-reverse))
}
.space-y-24 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(6rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(6rem * var(--tw-space-y-reverse))
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse))
}
}
.overflow-hidden {
.overflow-hidden {
overflow: hidden
overflow: hidden
}
}
.overflow-visible {
.overflow-visible {
overflow: visible
overflow: visible
}
}
.rounded-2xl {
.rounded-2xl {
border-radius: 1rem
border-radius: 1rem
}
}
.rounded-3xl {
.rounded-3xl {
border-radius: 1.5rem
border-radius: 1.5rem
}
}
.rounded-4xl {
.rounded-4xl {
border-radius: 2.5rem
border-radius: 2.5rem
}
}
.rounded-full {
.rounded-full {
border-radius: 9999px
border-radius: 9999px
}
}
.rounded-xl {
.rounded-xl {
border-radius: .75rem
border-radius: .75rem
}
}
.rounded-t-4xl {
.rounded-t-4xl {
border-top-left-radius: 2.5rem;
border-top-left-radius: 2.5rem;
border-top-right-radius: 2.5rem
border-top-right-radius: 2.5rem
}
}
.border {
.border {
border-width: 1px
border-width: 1px
}
}
.border-y {
.border-y {
border-top-width: 1px;
border-top-width: 1px;
border-bottom-width: 1px
border-bottom-width: 1px
}
}
.border-t {
.border-t {
border-top-width: 1px
border-top-width: 1px
}
}
.border-neutral-200 {
.border-neutral-200 {
--tw-border-opacity: 1;
--tw-border-opacity: 1;
border-color: rgb(229 229 229/var(--tw-border-opacity))
border-color: rgb(229 229 229/var(--tw-border-opacity))
}
}
.border-neutral-300 {
.border-neutral-300 {
--tw-border-opacity: 1;
--tw-border-opacity: 1;
border-color: rgb(212 212 212/var(--tw-border-opacity))
border-color: rgb(212 212 212/var(--tw-border-opacity))
}
}
.border-neutral-950\/10 {
.border-neutral-950\/10 {
border-color: hsla(0, 0%, 4%, .1)
border-color: hsla(0, 0%, 4%, .1)
}
}
.border-neutral-950\/20 {
.border-neutral-950\/20 {
border-color: hsla(0, 0%, 4%, .2)
border-color: hsla(0, 0%, 4%, .2)
}
}
.border-white\/10 {
.border-white\/10 {
border-color: hsla(0, 0%, 100%, .1)
border-color: hsla(0, 0%, 100%, .1)
}
}
.bg-neutral-100 {
.bg-neutral-100 {
--tw-bg-opacity: 1;
--tw-bg-opacity: 1;
background-color: rgb(245 245 245/var(--tw-bg-opacity))
background-color: rgb(245 245 245/var(--tw-bg-opacity))
}
}
.bg-neutral-200 {
.bg-neutral-200 {
--tw-bg-opacity: 1;
--tw-bg-opacity: 1;
background-color: rgb(229 229 229/var(--tw-bg-opacity))
background-color: rgb(229 229 229/var(--tw-bg-opacity))
}
}
.bg-neutral-50 {
.bg-neutral-50 {
--tw-bg-opacity: 1;
--tw-bg-opacity: 1;
background-color: rgb(250 250 250/var(--tw-bg-opacity))
background-color: rgb(250 250 250/var(--tw-bg-opacity))
}
}
.bg-neutral-800 {
.bg-neutral-800 {
--tw-bg-opacity: 1;
--tw-bg-opacity: 1;