/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

a {
    background-color: transparent
}

img {
    border-style: none
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
    height: auto
}

[hidden], template {
    display: none
}

h1, h2, h3, h4, p, ul {
    margin: 0
}

ul {
    list-style: none;
    padding: 0
}

html {
    font-family: Gothic A1, -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, sans-serif;
    line-height: 1.5
}

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

img {
    border-style: solid
}

h1, h2, h3, h4 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

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

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

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}

.bg-night {
    --bg-opacity: 1;
    background-color: #151515;
    background-color: rgba(21, 21, 21, var(--bg-opacity))
}
.bg-dusk {
    --bg-opacity: 1;
    background-color: #181818;
    background-color: rgba(24, 24, 24, var(--bg-opacity))
}
.video-container{
    position:fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    bottom: 0;
    left:0;
    overflow: hidden;
}
#metaball{
    height: 100vh;
    width: 100vw;
    min-height: 100%;
    object-fit: cover;
}

.bg-dawn {
    --bg-opacity: 1;
    background-color: #949495;
    background-color: rgba(148, 148, 149, var(--bg-opacity))
}

.bg-zenith, .group:hover .group-hover\:bg-zenith {
    --bg-opacity: 1;
    background-color: #fff;
    background-color: rgba(255, 255, 255, var(--bg-opacity))
}

.rounded-full {
    border-radius: 9999px
}
.rounded-min{
    border-radius: 8px;
    border-color: #ececec3b;
    border-width: 0.5px;
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.flex {
    display: flex
}

.inline-flex {
    display: inline-flex
}

.hidden {
    display: none
}

.flex-row {
    flex-direction: row
}

.flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}
.flex-no-wrap {
    flex-wrap: nowrap;
}

.items-center {
    align-items: center
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.flex-none {
    flex: none
}

.font-sans {
    font-family: Gothic A1, -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, sans-serif
}

.font-semibold {
    font-weight: 600
}

.font-bold {
    font-weight: 700
}

.h-16 {
    height: 16px
}

.h-24 {
    height: 24px
}

.h-32 {
    height: 32px
}

.h-48 {
    height: 48px
}

.h-64 {
    height: 64px
}

.h-80 {
    height: 80px
}

.h-px {
    height: 1px
}

.h-full {
    height: 100%
}

.text-xs {
    font-size: 10px
}

.text-sm {
    font-size: 12px
}

.text-base {
    font-size: 14px
}

.text-lg {
    font-size: 24px
}

.text-2xl {
    font-size: 48px
}

.leading-none {
    line-height: 1
}

.leading-tight {
    line-height: 1.25
}

.leading-snug {
    line-height: 1.375
}

.leading-loose {
    line-height: 2
}

.my-4 {
    margin-top: 4px;
    margin-bottom: 4px
}

.my-8 {
    margin-top: 8px;
    margin-bottom: 8px
}

.mx-8 {
    margin-left: 8px;
    margin-right: 8px
}

.mx-16 {
    margin-left: 16px;
    margin-right: 16px
}

.my-48 {
    margin-top: 48px;
    margin-bottom: 48px
}

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

.-my-4 {
    margin-top: -4px;
    margin-bottom: -4px
}

.-my-8 {
    margin-top: -8px;
    margin-bottom: -8px
}

.-mx-8 {
    margin-left: -8px;
    margin-right: -8px
}

.-mx-16 {
    margin-left: -16px;
    margin-right: -16px
}

.-my-48 {
    margin-top: -48px;
    margin-bottom: -48px
}

.mt-2 {
    margin-top: 2px
}

.mb-2 {
    margin-bottom: 2px
}

.mr-4 {
    margin-right: 4px
}

.ml-4 {
    margin-left: 4px
}

.mt-8 {
    margin-top: 8px
}

.ml-8 {
    margin-left: 8px
}

.mt-16 {
    margin-top: 16px
}

.mr-16 {
    margin-right: 16px
}

.mt-24 {
    margin-top: 24px
}

.mr-24 {
    margin-right: 24px
}

.mt-32 {
    margin-top: 32px
}

.mr-32 {
    margin-right: 32px
}

.mb-48 {
    margin-bottom: 48px
}

.mt-64 {
    margin-top: 64px
}

.mt-72 {
    margin-top: 72px
}

.mt-104 {
    margin-top: 104px
}

.ml-104 {
    margin-left: 104px
}

.mt-px {
    margin-top: 1px
}

.-mt-px {
    margin-top: -1px
}

.max-w-1440 {
    max-width: 1440px
}

.min-h-inherit {
    min-height: inherit
}

.opacity-0 {
    opacity: 0
}

.opacity-75 {
    opacity: .75
}

.overflow-x-hidden {
    overflow-x: hidden
}

.p-2 {
    padding: 2px
}

.p-32 {
    padding: 32px
}

.p-40 {
    padding: 40px
}

.pt-24 {
    padding-top: 24px
}

.pt-32 {
    padding-top: 32px
}

.pt-0 {
    padding-top: 0;
}
.pt-40 {
    padding-top: 40px
}
.pb-40 {
    padding-bottom: 40px
}
.pl-40 {
    padding-left: 40px
}
.pr-40 {
    padding-right: 40px
}

.pt-80 {
    padding-top: 80px
}

.pointer-events-none {
    pointer-events: none
}

.static {
    position: static
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.sticky {
    position: -webkit-sticky;
    position: sticky
}

.top-0 {
    top: 0
}

.bottom-0 {
    bottom: 0
}

.left-0 {
    left: 0
}

.resize {
    resize: both
}

.fill-current {
    fill: currentColor
}

.stroke-current {
    stroke: currentColor
}

.text-dawn {
    --text-opacity: 1;
    color: #949495;
    color: rgba(148, 148, 149, var(--text-opacity))
}

.text-sunrise {
    --text-opacity: 1;
    color: #f5f5fa;
    color: rgba(245, 245, 250, var(--text-opacity))
}

.hover\:text-zenith:hover, .text-zenith {
    --text-opacity: 1;
    color: #fff;
    color: rgba(255, 255, 255, var(--text-opacity))
}

.uppercase {
    text-transform: uppercase
}

.capitalize {
    text-transform: capitalize
}

.hover\:underline:hover, .underline {
    text-decoration: underline
}

.tracking-wide {
    letter-spacing: 1px
}

.tracking-wider {
    letter-spacing: 2px
}

.tracking-widest {
    letter-spacing: 3px
}

.w-16 {
    width: 16px
}

.w-24 {
    width: 24px
}

.w-48 {
    width: 48px
}

.w-80 {
    width: 80px
}

.w-full {
    width: 100%
}

.w-screen {
    width: 100vw
}

.group:hover .group-hover\:w-48 {
    width: 48px
}

.z-20 {
    z-index: 20
}

.z-30 {
    z-index: 30
}

.z-40 {
    z-index: 40
}

.z-50 {
    z-index: 50
}

.transform {
    --transform-translate-x: 0;
    --transform-translate-y: 0;
    --transform-rotate: 0;
    --transform-skew-x: 0;
    --transform-skew-y: 0;
    --transform-scale-x: 1;
    --transform-scale-y: 1;
    transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y))
}

.transition {
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition: all .2s ease-in-out
}

.shift-0 {
    transform: translateY(0)
}

.shift-y-16 {
    transform: translateY(16px)
}

.-shift-y-64 {
    transform: translateY(-64px)
}

.-shift-y-96 {
    transform: translateY(-96px)
}

.gradient-y-transparent-night {
    background: linear-gradient(180deg, rgba(21, 21, 21, 0), #151515)
}

.gradient-y-transparent-dusk {
    background: linear-gradient(180deg, rgba(32, 32, 34, 0), #202022)
}

.gradient-y-night-transparent {
    background: linear-gradient(0deg, rgba(21, 21, 21, 0), #151515)
}

.gradient-y-dusk-transparent {
    background: linear-gradient(0deg, rgba(32, 32, 34, 0), #202022)
}

@media (min-width: 992px) {
    .md\:sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0
    }

    .md\:block {
        display: block
    }

    .md\:flex-nowrap {
        flex-wrap: nowrap;
    }

    .md\:hidden {
        display: none
    }

    .md\:flex-row {
        flex-direction: row
    }

    .md\:flex-col {
        flex-direction: column
    }

    .md\:items-center {
        align-items: center
    }

    .md\:h-32 {
        height: 32px
    }

    .md\:h-120 {
        height: 120px
    }

    .md\:h-screen {
        height: 100vh
    }

    .md\:leading-tight {
        line-height: 1.25
    }

    .md\:m-4 {
        margin: 4px
    }

    .md\:-m-4 {
        margin: -4px
    }

    .md\:my-16 {
        margin-top: 16px;
        margin-bottom: 16px
    }

    .md\:-my-16 {
        margin-top: -16px;
        margin-bottom: -16px
    }

    .md\:mr-40 {
        margin-right: 40px
    }

    .md\:mt-72 {
        margin-top: 72px
    }

    .md\:ml-160 {
        margin-left: 160px
    }

    .md\:-mt-96 {
        margin-top: -96px
    }

    .md\:max-w-408 {
        max-width: 408px
    }

    .md\:max-w-536 {
        max-width: 536px
    }

    .md\:max-w-546 {
        max-width: 546px
    }

    .md\:min-h-240 {
        min-height: 240px
    }

    .group:hover .md\:group-hover\:opacity-50 {
        opacity: .5
    }

    .md\:hover\:opacity-important:hover {
        opacity: 1 !important
    }

    .md\:py-0 {
        padding-bottom: 0
    }

    .md\:pt-0, .md\:py-0 {
        padding-top: 0
    }

    .md\:pr-0 {
        padding-right: 0
    }

    .md\:pl-0 {
        padding-left: 0
    }

    .md\:pt-8 {
        padding-top: 8px
    }

    .md\:pt-88 {
        padding-top: 88px
    }

    .md\:pt-40 {
        padding-top: 40px;
    }

    .md\:fixed {
        position: fixed
    }

    .md\:absolute {
        position: absolute
    }

    .md\:right-0 {
        right: 0
    }

    .md\:w-120 {
        width: 120px
    }

    .md\:w-240 {
        width: 240px
    }

    .group-2:hover .md\:group-2-hover\:scale-11\/10x, .md\:hover\:scale-11\/10x:hover {
        transform: scale(1.1)
    }
}

@media (min-width: 1280px) {
    .lg\:text-4xl {
        font-size: 64px
    }

    .lg\:leading-none {
        line-height: 1
    }

    .lg\:max-w-496 {
        max-width: 496px
    }

    .lg\:max-w-546 {
        max-width: 546px;
    }

    .lg\:max-w-736 {
        max-width: 736px
    }

    .lg\:min-h-320 {
        min-height: 320px
    }

    .lg\:py-88 {
        padding-top: 88px;
        padding-bottom: 88px
    }

    .lg\:pr-88 {
        padding-right: 88px
    }

    .lg\:pl-88 {
        padding-left: 88px
    }

    .lg\:w-320 {
        width: 320px
    }
}