html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

img {
    border-style: none
}

button {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button {
    overflow: visible
}

button {
    text-transform: none
}

[type=button],
button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

button {
    background-color: transparent;
    background-image: none
}

button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color
}

html {
    font-family: 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;
    line-height: 1.5
}

* {
    box-sizing: border-box;
    border: 0 solid #e2e8f0
}

img {
    border-style: solid
}

button {
    cursor: pointer
}

button {
    padding: 0;
    line-height: inherit;
    color: inherit
}

canvas,
img {
    display: block;
    vertical-align: middle
}

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

.container {
    width: 100%
}

@media (min-width:640px) {
    .container {
        max-width: 640px
    }
}

@media (min-width:768px) {
    .container {
        max-width: 768px
    }
}

@media (min-width:1024px) {
    .container {
        max-width: 1024px
    }
}

@media (min-width:1280px) {
    .container {
        max-width: 1280px
    }
}

.bg-white {
    --bg-opacity: 1;
    background-color: #fff;
    background-color: rgba(255, 255, 255, var(--bg-opacity))
}

.bg-gray-800 {
    --bg-opacity: 1;
    background-color: #2d3748;
    background-color: rgba(45, 55, 72, var(--bg-opacity))
}

.rounded-md {
    border-radius: .375rem
}

.rounded-full {
    border-radius: 9999px
}

.flex {
    display: flex
}

.grid {
    display: grid
}

.items-center {
    align-items: center
}

.justify-center {
    justify-content: center
}

.font-sans {
    font-family: 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-mono {
    font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace
}

.font-semibold {
    font-weight: 600
}

.font-bold {
    font-weight: 700
}

.h-48 {
    height: 12rem
}

.h-screen {
    height: 100vh
}

.text-xl {
    font-size: 1.25rem
}

.text-2xl {
    font-size: 1.5rem
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

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

.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}

.py-3 {
    padding-top: .75rem;
    padding-bottom: .75rem
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.pt-2 {
    padding-top: .5rem
}

.pt-4 {
    padding-top: 1rem
}

.pt-5 {
    padding-top: 1.25rem
}

.absolute {
    position: absolute
}

.text-center {
    text-align: center
}

.text-gray-300 {
    --text-opacity: 1;
    color: #e2e8f0;
    color: rgba(226, 232, 240, var(--text-opacity))
}

.text-gray-900 {
    --text-opacity: 1;
    color: #1a202c;
    color: rgba(26, 32, 44, var(--text-opacity))
}

.text-red-500 {
    --text-opacity: 1;
    color: #ff0000;
    color: rgba(255, 0, 0, var(--text-opacity));
}


.hover\:text-gray-700:hover {
    --text-opacity: 1;
    color: #4a5568;
    color: rgba(74, 85, 104, var(--text-opacity))
}

.hover\:text-yellow-300:hover {
    --text-opacity: 1;
    color: #faf089;
    color: rgba(250, 240, 137, var(--text-opacity))
}

.hover\:text-green-400:hover {
    --text-opacity: 1;
    color: #68d391;
    color: rgba(104, 211, 145, var(--text-opacity))
}

.hover\:text-indigo-500:hover {
    --text-opacity: 1;
    color: #667eea;
    color: rgba(102, 126, 234, var(--text-opacity))
}

.select-none {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.w-32 {
    width: 8rem
}

.w-48 {
    width: 12rem
}

.gap-3 {
    grid-gap: .75rem;
    gap: .75rem
}

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

.col-span-1 {
    grid-column: span 1/span 1
}

@media (min-width:640px) {
    .sm\:container {
        width: 100%;
        max-width: 640px
    }
    @media (min-width:768px) {
        .sm\:container {
            max-width: 768px
        }
    }
    @media (min-width:1024px) {
        .sm\:container {
            max-width: 1024px
        }
    }
    @media (min-width:1280px) {
        .sm\:container {
            max-width: 1280px
        }
    }
}

@media (min-width:768px) {
    .md\:text-xl {
        font-size: 1.25rem
    }
    .md\:text-3xl {
        font-size: 1.875rem
    }
    .md\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr))
    }
    .md\:col-span-6 {
        grid-column: span 6/span 6
    }
}