body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #1e202e;
    color: #f7f8f8;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
}

main {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    padding: 40px;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse 80% 50% at 50% -20%,rgba(120,119,198,0.3), hsla(0,0%,100%,0));

}

.heading-text > h1 {
    text-align: center;
    font-size: 6.5rem;
    user-select: none;
    cursor: default;
    line-height: 1;
    margin: 1.5rem 0px;
    background: linear-gradient(to right bottom, rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0.38));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.heading-text > h1 > span {
    letter-spacing: -35px;
    margin-right: 35px;

}

.heading-text > p {
    color: rgb(180, 188, 208);
    text-align: center;
    margin: 0px 0px 3rem;
    font-size: 1.375rem;
    line-height: 1.3;
}

.cta {
    display: flex;
    flex: initial;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    gap: 1rem;
}

.cta > a {
    appearance: none;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    white-space-collapse: collapse;
    text-wrap: nowrap;
    user-select: none;
    text-decoration: none;
    max-width: 100%;
    flex-shrink: 0;
    color: inherit;
    height: 3rem;
    text-shadow: rgba(0, 0, 0, 0.25) 0px 0.1875rem .5rem;
    gap: .5rem;
    margin: 0px;
    border-radius: 999px;
    transition: border 120ms ease 0s, background-color, color, box-shadow, opacity;
    padding: 0px 3rem;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    }

.cta > .get-demo {
    background: linear-gradient(92.88deg, rgb(69, 94, 181) 9.16%, rgb(86, 67, 204) 43.89%, rgb(103, 63, 215) 64.72%);
}

.cta > .get-demo:hover {
    color: inherit;
    text-shadow: rgba(0, 0, 0, 0.56) 0px 0.1875rem 0.75rem;
    box-shadow: rgba(80, 63, 205, 0.5) 0px 1px 2,5rem;
}

.cta > .sign-in {
    backdrop-filter: blur(12px);
    transition: border 120ms ease 0s, background-color, color, box-shadow, opacity;
    background: rgba(255, 255, 255, 0.1);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.05);
    border-image: initial;
}

.cta > .sign-in:hover {
    color: inherit;
    background: rgb(43, 44, 59);
}


@media only screen and (max-width: 600px) {
    main {
        padding: 20px;
    }

    .heading-text > h1 {
        font-size: 6rem;
    }

    .heading-text > p {
        font-size: 1rem;
    }
}