:root {
    font-size: 20px;
    font-family: poppins, sans-serif;
    color: #222
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0
}

footer {
    border-top: 1px solid #ccc;
    background-color: #eee;
    padding: 1rem;
    font-size: .8rem;
    margin-top: 6rem
}

footer a {
    color: #06d;
    transition: color .2s
}

footer a:hover {
    color: #888
}

footer ul {
    flex: 1 1 0;
    list-style-type: none;
    margin: 0;
    padding-left: 1rem
}

footer ul i {
    margin-right: .5rem;
    color: #555
}

footer > div {
    display: flex;
    gap: .5rem
}

footer div:first-child > a {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    border-radius: .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-radius .2s;
    animation: twitch 6s infinite cubic-bezier(.6, .2, 0, 1)
}

footer div:first-child > a:hover {
    border-radius: 1rem
}

footer > div:last-child {
    align-items: end;
    margin-top: 1rem
}

footer > div > span {
    flex: 1 1 0
}

footer a i {
    color: #fff
}

#logo {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid #bbb;
    padding: .5rem;
    border-radius: .5rem;
    transition: background-color .2s, color .2s
}

#logo img {
    width: 2rem
}

#logo span {
    display: block;
    font-family: arial
}

#logo span:first-child {
    font-weight: bold;
    font-family: monospace;
    color: #888
}

#logo:hover {
    background-color: #ccc;
    color: #555
}

* {
    box-sizing: border-box
}

a {
    text-decoration: none
}

h1, h2, h3 {
    margin: 0
}

.title {
    font: normal 2rem strong, sans-serif
}

.main {
    max-width: 72rem;
    margin: 0 auto;
    padding-right: 6rem;
    padding-left: 6rem
}

.animate > span {
    display: inline-block;
    white-space: nowrap
}

.animate span span {
    opacity: 0;
    white-space: pre;
    display: inline-block;
    transform: translateY(3rem);
    transition-delay: 0s
}

.animate:not(.show) span span {
    transition-delay: 0s !important
}

.animate.show span span {
    opacity: 1;
    transform: none;
    transition: 1s cubic-bezier(.6, .2, 0, 1)
}

.para {
    border-left: .5rem solid #aaa;
    border-radius: .5rem;
    padding-left: 2rem;
    opacity: 0
}

.para p {
    transform: translateX(-2rem)
}

.para.show {
    transition: opacity 1s;
    opacity: 1
}

.para.show p {
    transition: transform 1s cubic-bezier(.6, .2, 0, 1);
    transform: none
}

.box {
    opacity: 0;
    transform: scale(.8)
}

.box.show {
    transition: opacity 1s, transform 1s cubic-bezier(.6, .2, 0, 1);
    transform: none;
    opacity: 1
}

.banner {
    padding: 4rem 0;
    box-shadow: 0 0 20px #888;
    outline: 1px solid #fff;
    margin: 6rem 0
}

#nav {
    position: sticky;
    padding: .5rem 0;
    top: 0;
    background-color: #fffc;
    backdrop-filter: blur(5px);
    border-bottom: 1px solid #fff;
    box-shadow: 0 0 10px #666;
    z-index: 1
}

#nav a:first-child {
    display: block
}

#nav a + a:not(:last-of-type) {
    margin-right: 1.5rem
}

#nav a + a {
    display: flex;
    align-items: center;
    text-align: center;
    height: 100%;
    color: #666;
    transition: color .2s, opacity 1s, transform 1s cubic-bezier(.6, .2, 0, 1);
    font: normal .9rem strong, sans-serif
}

#nav a + a:hover {
    color: #222
}

#nav > div {
    height: 3rem;
    display: flex
}

#nav svg {
    height: 100%;
    padding-right: 2.5rem;
    transition: transform 1s cubic-bezier(.6, .2, 0, 1), opacity 1s
}

#nav g path {
    fill: none;
    stroke-linecap: round;
    stroke: #000;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: stroke .4s forwards ease-in-out
}

#nav g path:first-child {
    stroke-width: 5
}

#nav g path:nth-child(2) {
    stroke-width: 5;
    animation-delay: .2s
}

#nav g path:nth-child(3) {
    stroke-width: 2;
    animation-delay: .4s
}

#nav g path:nth-child(4) {
    stroke-width: 5;
    animation-delay: .6s
}

#nav g path:nth-child(5) {
    stroke-width: 1;
    animation-delay: .8s
}

#nav g path:nth-child(6) {
    stroke-width: 5;
    animation-delay: 1s
}

#nav g path:nth-child(7) {
    stroke-width: 5;
    animation-delay: 1.2s
}

#nav g path:nth-child(8) {
    stroke-width: 5;
    animation-delay: 1.4s
}

#nav g path:nth-child(9) {
    stroke-width: 1;
    animation-delay: 1.6s
}

#nav g path:nth-child(10) {
    stroke-width: 6;
    animation-delay: 1.8s;
    animation-duration: 1s;
    stroke: #e22
}

#nav g path:nth-child(11) {
    stroke-width: 2;
    animation-delay: 2s;
    stroke: #e22
}

#nav g path:nth-child(12) {
    stroke-width: 5;
    animation-delay: 2.2s
}

#nav g path:nth-child(13) {
    stroke-width: 5;
    animation-delay: 2.4s
}

#nav g path:nth-child(14) {
    stroke-width: 5;
    animation-delay: 2.6s
}

#nav g path:nth-child(15) {
    stroke-width: 5;
    animation-delay: 2.8s
}

#nav g path:nth-child(16) {
    stroke-width: 5;
    animation-delay: 3s
}

#nav circle {
    transform: translate(-4%, 15%);
    animation: move .6s 2.2s forwards;
    opacity: 0
}

#nav i {
    display: none;
    align-items: center;
    flex: 1 1 0;
    justify-content: flex-end
}

#facebook {
    background-color: #17f
}

#instagram {
    background-color: #c49;
    animation-delay: .1s
}

#tiktok {
    background-color: #000;
    animation-delay: .2s
}

.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 4rem 0
}

.grid span {
    font-size: 4rem;
    color: #f55
}

.grid div {
    padding: 1rem;
    border-radius: .8rem;
    box-shadow: 0 0 10px #888;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1 1 14rem;
    gap: .5rem
}

.grid p {
    color: #555
}

.grid h3 {
    font: normal 1rem strong, sans-serif
}

.button:after {
    position: absolute;
    content: "";
    display: block;
    width: 2rem;
    height: 100%;
    top: 0;
    right: calc(100% + 2rem);
    background-color: #fff5;
    transform: translateX(50%) skew(-45deg)
}

.button {
    font: inherit;
    cursor: pointer;
    border: 2px solid #ddd;
    position: relative;
    padding: .5rem 1rem;
    background-color: #555;
    display: inline-block;
    border-radius: 2rem;
    overflow: hidden;
    color: #fff;
    transition: background-color .2s, border-color .2s
}

.button:hover:after {
    right: -2rem;
    transition: right .5s cubic-bezier(.5, 0, .3, 1)
}

.button:hover {
    background-color: #888;
    border-color: #fff
}

.intersect.button {
    opacity: 0
}

.button.show {
    animation: fade 1s forwards cubic-bezier(.6, .2, 0, 1)
}

.button.show:after {
    animation: shine .5s .2s cubic-bezier(.5, 0, .3, 1)
}

@font-face {
    font-family: poppins;
    src: url(poppins.woff2), url(poppins.woff)
}

@font-face {
    font-family: funnel;
    src: url(funnel.woff2), url(funnel.woff)
}

@font-face {
    font-family: strong;
    src: url(strong.woff2), url(strong.woff)
}

@media screen and (max-width: 65rem) {
    :root {
        font-size: 16px
    }

    .main {
        padding-left: 4rem;
        padding-right: 4rem
    }
}

@media screen and (max-width: 40rem) {
    :root {
        font-size: 14px
    }

    .main {
        padding-left: 2rem;
        padding-right: 2rem
    }

    #nav i {
        display: flex
    }

    #nav a:first-child {
        width: 0
    }

    #nav a + a {
        opacity: 0;
        transform: translateX(2rem);
        pointer-events: none
    }

    #nav.open svg {
        transform: translate(-5rem);
        opacity: 0
    }

    #nav.open a + a {
        opacity: 1;
        transform: none;
        pointer-events: all
    }
}

@keyframes move {
    to {
        transform: none;
        opacity: 1
    }
}

@keyframes stroke {
    to {stroke-dashoffset: 0}
}

@keyframes twitch {
    10% {transform: translateY(-.5rem)}
    20% {transform: none}
}

@keyframes shine {
    to {right: -2rem}
}

@keyframes fade {
    from {transform: scale(.8)}
    to {opacity: 1}
}