:host .wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3vh;
    box-sizing: border-box
}

:host .wrapper .headder {
    padding: 3vh;
    padding-bottom: 0
}

:host .wrapper .headder svg {
    height: 2vh;
    fill: #8d8d8d;
    transition: all .2s ease-in-out
}

:host .wrapper .headder svg:hover {
    fill: #ef6fff
}

:host .wrapper .list {
    padding: 3vh;
    padding-top: 0;
    height: calc(100% - 4vh);
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: flex-start;
    gap: .9vh;
    column-gap: 7vh
}

:host .wrapper .list::-webkit-scrollbar {
    width: 1px;
    height: 1px
}

:host .wrapper .list::-webkit-scrollbar-button {
    width: 0px;
    height: 0px
}

:host .wrapper .list::-webkit-scrollbar-thumb {
    background: #e1e1e1;
    border: none
}

:host .wrapper .list::-webkit-scrollbar-track {
    background: transparent;
    border: none
}

:host .wrapper .list::-webkit-scrollbar-corner {
    background: transparent
}

:host .wrapper .list .item {
    flex-shrink: 0;
    max-width: 100%
}

:host model-viewer {
    height: 50vh;
    width: 50vh
}

@font-face {
    font-family: Cofo;
    src: url(/dist/assets/coforaffinethin.3c868c02.woff) format("woff");
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Cofo Regular;
    src: url(/dist/assets/coforaffineregular.99967ae6.woff) format("woff");
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: FKGrotesk;
    src: url(/dist/assets/FKGrotesk-Regular.91a186d2.woff) format("woff");
    font-style: normal;
    font-display: swap
}

:host *::-webkit-scrollbar {
    width: 4px;
    height: 4px
}

:host *::-webkit-scrollbar-track {
    background-color: transparent
}

:host *::-webkit-scrollbar-thumb {
    background-color: #0a1f4b;
    border-radius: 2px
}

:host *::-webkit-scrollbar-thumb:hover {
    background-color: #4b0a0a
}

:host * {
    font-family: FKGrotesk, sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1.6vh;
    letter-spacing: -.02em;
    ascent-override: 90%;
    descent-override: 20%;
    line-gap-override: 0%;
    size-adjust: 100%;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important
}

:host *::selection {
    background: white;
    color: #000
}

:host .grain {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/dist/assets/grain.da4e8a4a.jpg);
    background-size: 150% 150%;
    background-position: 0% 0%;
    mix-blend-mode: hard-light;
    opacity: .4
}

:host .star {
    position: absolute;
    z-index: 10;
    user-select: none;
    pointer-events: none;
    animation: starGoes 30s ease-in-out infinite alternate
}

:host .star svg {
    fill: silver
}

@keyframes starGoes {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-95vh) translate(10vw) rotate(180deg);
        opacity: 0
    }
}

:host .wrapper {
    z-index: 10;
    position: relative;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 10vh;
    box-sizing: border-box;
    overflow: hidden;
    mix-blend-mode: overlay;
    background-image: radial-gradient(200vw 200vw at 50% 160%, #fcd37f 30%, #e23b2e 40%, #200c28 49%, #030f2c 51%, #0a1f4b 67.5%, #000000 77.5%, #000000 92.5%, #000000 100%);
    background-size: 100% 200%;
    background-position: 0% 0%;
    animation: bgCycle 30s ease-in-out infinite alternate;
    animation-delay: -2s
}

:host .wrapper.fontsLoaded {
    color: #fff
}

:host .wrapper.fontsLoaded .icon {
    width: auto;
    opacity: 1
}

:host .wrapper a {
    color: #fff;
    text-decoration: none
}

:host .wrapper a:hover {
    color: #ff7e5f
}

:host .wrapper .logoIcon {
    display: block;
    margin-left: -2vh;
    animation: none
}

:host .wrapper .logoIcon svg {
    fill: #fff;
    height: 1.5vh
}

:host .wrapper .title {
    font-family: Cofo;
    font-size: 15vh;
    font-weight: 100;
    padding-bottom: 8vh;
    letter-spacing: -.04em
}

:host .wrapper .contact {
    display: flex;
    flex-direction: row;
    gap: 10vh;
    justify-content: center;
    overflow-x: auto;
    white-space: nowrap;
    width: 100%
}

:host .wrapper .contact div:not(.p) div {
    display: flex;
    gap: .5vh;
    line-height: 3vh;
    align-items: center
}

:host .wrapper .contact .p img {
    height: 10vh;
    border-radius: 4px
}

:host .wrapper .logo {
    display: flex
}

:host .wrapper .logo .number {
    font-family: Cofo;
    font-size: 20vh;
    letter-spacing: -1.7vh;
    margin-right: -3vh
}

:host .wrapper .logo svg {
    fill: #fff;
    height: 20vh
}

@media (max-aspect-ratio: 1/1) {
    :host .star {
        display: none
    }

    :host .wrapper {
        padding: 10vh 5vh 20vh;
        height: auto;
        gap: 4vh;
        background-image: radial-gradient(200vh 200vh at 50% 76%, #e23b2e 20%, #200c28 59%, #030f2c 71%, #0a1f4b 87.5%, #000000 92.5%, #000000 100%)
    }

    :host .wrapper .title {
        text-align: center
    }

    :host .wrapper .contact {
        flex-direction: column;
        align-items: center;
        gap: 4vh
    }
}

@keyframes bgCycle {
    0% {
        background-position-y: 0%
    }

    to {
        background-position-y: 100%
    }
}