:root {
    --primary-400: #E138B5;
    --Neutral-Neutral-100: #0D0910;
    --Neutral-Neutral-200: #18111E;
    --Neutral-Neutral-300: #23192C;
    --Neutral-Neutral-400: #2E213A;
    --Neutral-Neutral-500: #392948;
    --Neutral-Neutral-600: #423054;
    --Neutral-Neutral-700: #977AB3;
    --Neutral-Neutral-800: #AE98C4;
    --Neutral-Neutral-900: #C5B5D5;
    --Neutral-Neutral-1000: #DCD3E6;
    --Neutral-Neutral-1100: #F3F0F7;

    --Success-Success-100: #071307;
    --Success-Success-200: #1E401E;
    --Success-Success-300: #356D35;
    --Success-Success-400: #4C9A4C;
    --Success-Success-500: #64C864;
    --Success-Success-600: #86D486;
    --Success-Success-700: #A8E0A8;
    --Success-Success-800: #CAECCA;
    --Success-Success-900: #ECF8EC;

    --Primary-Primary-100: #140319;
    --Primary-Primary-200: #3C094C;
    --Primary-Primary-300: #650F7F;
    --Primary-Primary-400: #8D15B1;
    --Primary-Primary-500: #B51BE4;
    --Primary-Primary-600: #C64EEA;
    --Primary-Primary-700: #977AB3;
    --Primary-Primary-800: #E6B3F6;
    --Primary-Primary-900: #F7E6FC;

    --Secondary-Secondary-100: #0E031A;
    --Secondary-Secondary-200: #2B084D;
    --Secondary-Secondary-300: #480D80;
    --Secondary-Secondary-400: #6413B4;
    --Secondary-Secondary-500: #8118E7;
    --Secondary-Secondary-600: #9D4BEC;
    --Secondary-Secondary-700: #B97FF2;
    --Secondary-Secondary-800: #D5B2F7;
    --Secondary-Secondary-900: #F1E5FC;
}

body,
html {
    margin-top: 0;
    margin-left: 0;
    background-color: #19131e;
}

body {
    background-image: url("https://assets.night-light.cz/landing/starry-night-sky-small.png");
    background-size: 15%;
}

p {
    font-family: Be Vietnam Pro, Helvetica, sans-serif;
    font-size: 15px;
}

div {
    max-width: 100%;
}

.navbar {
    display: flex;
    height: 104px;
    padding: 0px 120px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}

.navbardiv {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    align-self: stretch;
}

.navbarlogo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
}

.navbarlogo p {
    color: #F2EFF5;
    text-align: center;
    font-family: Montserrat;
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: 32px;
    /* 133.333% */
}

.navbarmenu {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.navbarmenu a {
    display: flex;
    padding: 8px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: Be Vietnam Pro, Helvetica, sans-serif;
    color: #A095AA;
    font-size: 16px;
    text-decoration: none;
}

.navbarmenu a:hover {
    color: #E138B5;
}

.navbarsign {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 32px;
    flex: 1 0 0;
}

.navbarsignlogin {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    transition: all 0.5s;

}

.navbarsignlogin:hover {
    color: #E138B5;
}

.navbarsignsignup {
    display: flex;
    padding: 0px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    background: var(--primary-400, #E138B5);
    height: 39px;
    color: white;
    text-decoration: none;
    transition: all 0.5s;
}

.navbarsignsignup:hover {
    background: rgb(155, 23, 121);
}

.headermain {
    background-image: url('icon/landing/backgorundGradient.svg');
    background-repeat: no-repeat;
    background-size: 100%;
}

.header {
    display: flex;
    height: 100vh;
    padding-top: 97px;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    align-self: stretch;
}

.headercontent {
    display: flex;
    width: 100%;
    height: 805px;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute;
}

.headerpost {
    display: flex;
    height: 256px;
    align-items: flex-start;
    gap: 6.821px;
    position: absolute;
    right: 168.536px;
    bottom: -147px;
    opacity: 0;
    transition: all 1s;
    animation: postreveal 1.5s forwards, postfloat 5s infinite;
}

@keyframes postfloat {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(50px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes postreveal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.headerpostcontent {
    display: flex;
    width: 211.464px;
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 13.643px;
    background: #2D2238;
}

.headerposthead {
    display: flex;
    padding: 1.232px 13.643px;
    align-items: center;
    gap: 6.821px;
    align-self: stretch;
}

.headerpostheadcontent {
    display: flex;
    align-items: center;
    gap: 6.821px;
}

.headerpostheadprofile {
    display: flex;
    align-items: center;
    gap: 6.821px;
}

.headerpostheadprofile1 {
    width: 27.286px;
    height: 27.286px;
    border-radius: 27.286px;
    border: 0.853px solid rgba(242, 239, 245, 0.25);
    background: url(<path-to-image>), lightgray 50% / cover no-repeat;
    background-size: cover;
}

.headerpostheadtext {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.headerpostheadtext1 {
    display: flex;
    align-items: center;
    gap: 3.411px;
}

.headerpostheadtext1 p {
    color: #F2EFF5;

    /* Caption 1/600 - Semi Bold */
    font-family: Be Vietnam Pro;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    /* 142.857% */
    letter-spacing: -0.14px;
}

.header0 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    z-index: 2;
}

.header1 {
    display: flex;
    width: 900px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.header1title {
    align-self: stretch;
    text-align: center;
    font-family: Be Vietnam Pro;
    font-size: 62px;
    font-style: normal;
    font-weight: 800;
    line-height: 78px;
    letter-spacing: -1.44px;
    background: linear-gradient(117deg, #F2EFF5 11.23%, #D7C4EB 103.4%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.header1description {
    align-self: stretch;
    color: #CAC2D0;
    text-align: center;
    font-family: Be Vietnam Pro;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: -0.216px;
    margin-top: -70px;
}

.headerbuttons {
    display: flex;
    padding-top: 16px;
    align-items: flex-start;
    gap: 16px;
}

.headerbuttonsguest {
    display: flex;
    padding: 0px 36px;
    justify-content: center;
    align-items: center;
    border-radius: 56px;
    background: var(--primary-400, #E138B5);
    height: 50px;
    color: white;
    transition: all 0.5s;
    text-decoration: none;
}

.headerbuttonsguest:hover {
    background: rgb(155, 23, 121);
}

.headerbuttonslearn {
    display: flex;
    padding: 0px 36px;
    justify-content: center;
    align-items: center;
    border-radius: 56px;
    border: 1px solid #F2EFF5;
    height: 48px;
    color: white;
    transition: all 0.5s;
    text-decoration: none;
}

.headerbuttonslearn:hover {
    background: #F2EFF5;
    color: black;
}

.featuresdiv {
    display: flex;
    padding: 148px 0px;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    align-self: stretch;
}

.featurestitle {
    display: flex;
    width: 768px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.featurestitlediscover {
    color: var(--secondary-400, #8E2FEA);
    text-align: center;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    /* 24px */
}

.featurstitletextdiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.featurestitletextmain {
    align-self: stretch;
    text-align: center;

    /* H3/700 - Bold */
    font-family: Be Vietnam Pro;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 54px;
    /* 112.5% */
    letter-spacing: -0.96px;
    background: linear-gradient(180deg, #F2EFF5 -117.59%, #C6ADE0 253.7%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: -15px;
}

.featurestitletextdescription {
    align-self: stretch;
    color: #A095AA;
    text-align: center;

    /* Body 1/400 - Regular */
    font-family: Be Vietnam Pro;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    /* 144.444% */
    letter-spacing: -0.216px;
    margin-top: -35px;
}

.featurescards {
    display: flex;
    padding: 0px 120px;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    align-self: stretch;
    scroll-behavior: smooth;
}

.featurescard1 {
    display: flex;
    height: 548px;
    align-items: flex-start;
    align-self: stretch;
    justify-content: center;
}

.featurescard1content {
    display: flex;
    padding: 0px 96px 0px 10vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    align-self: stretch;
}

.featurescard1contenttext {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    width: 370px;
}

.featurescard1contentdescription {
    align-self: stretch;
    color: #A095AA;

    /* Body 2/400 - Regular */
    font-family: Be Vietnam Pro;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
    letter-spacing: -0.16px;
    margin-top: -25px;
}

.featurescard1image {
    display: flex;
    padding: 28px 0px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.featurescard1image-desktop {
    display: flex;
    padding: 28px 0px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.featurescard1imagecontent {
    display: flex;
    width: 456px;
    justify-content: center;
    align-items: center;
}

.featurescard1imagesource {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("https://assets.night-light.cz/landing/landing-feesh-low.png");
    background-size: cover;
    background-position: center;
    width: 496px;
    height: 248px;
    flex-shrink: 0;
    border-radius: 16px;
    transform: scale(1);
    box-shadow: none;
    transition: all 0.5s;
    z-index: 1;
}

.featurescard1imagesource:hover {
    background-image: url("https://assets.night-light.cz/landing/landing-feesh.png");
    transform: scale(1.1);
    box-shadow: 0 0 70px 0px var(--primary-400);
}

.featurescard2imagesource {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("https://assets.night-light.cz/landing/features-img2.png");
    width: 496px;
    height: 447px;
    background-size: contain;
    flex-shrink: 0;
    border-radius: 16px;
    transform: scale(1);
    box-shadow: none;
    transition: all 0.5s;
    z-index: 1;
    background-size: 100%;
    background-repeat: no-repeat;
}

.featurescard2imagesource:hover {
    transform: scale(1.1);
}

.featurescard3imagesource {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("https://assets.night-light.cz/landing/features-img3.gif");
    width: 496px;
    height: 295px;
    background-size: contain;
    flex-shrink: 0;
    border-radius: 16px;
    transform: scale(1);
    box-shadow: none;
    transition: filter 1s;
    z-index: 1;
    background-size: 100%;
    background-repeat: no-repeat;
}

.featurescard3imagesource:hover {
    filter: hue-rotate(270deg);
}

.featurescard1imageback {
    display: none;
    padding: 104px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    background: url('https://assets.night-light.cz/landing/preview-background.png'), #1D1624 0% 0% / 100px 100px repeat;
    position: absolute;
    width: 330px;
    height: 190px;
}

.connect {
    display: flex;
    padding: 112px 64px;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    align-self: stretch;
}

.connectitle {
    display: flex;
    width: 768px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.connecttitleheader {
    color: #F2EFF5;
    text-align: center;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    /* 24px */
}

.connecttitlecontent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}

.connecttitlecontentheader {
    align-self: stretch;
    color: #F2EFF5;
    text-align: center;

    /* H3/800 - Extra Bold */
    font-family: Be Vietnam Pro;
    font-size: 48px;
    font-style: normal;
    font-weight: 800;
    line-height: 54px;
    /* 112.5% */
    letter-spacing: -0.96px;
}

.connecttitlecontentdescription {
    align-self: stretch;
    color: #A095AA;
    text-align: center;

    /* Body 1/400 - Regular */
    font-family: Be Vietnam Pro;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    /* 144.444% */
    letter-spacing: -0.216px;
}

.connectmain {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    align-self: stretch;
}

.connectmaincontent {
    display: flex;
    align-items: center;
    gap: 48px;
    align-self: stretch;
}

.connectmaincontentcolumn {
    display: flex;
    width: 303px;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

.connectmaincontentcolumn1 {
    display: flex;
    width: 240px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.connectmaincontentcolumn2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.connectmaincontentcolumnheading {
    align-self: stretch;
    color: #F2EFF5;
    text-align: center;
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    /* 33.6px */
}

.connectmaincontentcolumndescription {
    align-self: stretch;
    color: #A095AA;
    text-align: center;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 24px */
}

.footer {
    display: flex;
    padding: 80px 64px;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    align-self: stretch;
    background: #1D1624;
}

.footercontent {
    display: flex;
    align-items: center;
    gap: 32px;
    align-self: stretch;
}

.footercontentlogo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1 0 0;
}

.footercontentlinks {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.footercontentlinks a {
    color: #F2EFF5;
    font-family: Be Vietnam Pro;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    text-decoration: none;
    /* 24px */
}

.footercontentsocials {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
}

.footercredits {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    align-self: stretch;
}

.footercreditsrow {
    display: flex;
    align-items: center;
    gap: 24px;
}

.footercreditsrowcopy {
    color: #F2EFF5;
    font-family: Be Vietnam Pro;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    /* 21px */
}

.footercreditslinks {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.footercreditslinks a {
    color: #F2EFF5;
    font-family: Be Vietnam Pro;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    /* 21px */
    text-decoration-line: none;
    transition: all 0.5s;
}

.footercreditslinks a:hover {
    text-decoration-line: underline;
}

.divider {
    height: 1px;
    align-self: stretch;
    background: #F2EFF5;
    opacity: 0.7;
}

.featurescard1image-phone {
    display: none;
}

.downMenu {
    display: flex;
    width: 200px;
    height: auto;
    flex-direction: column;
    position: absolute;
    background-color: var(--Neutral-Neutral-300);
    border-radius: 15px;
    border: solid 1px var(--Neutral-Neutral-500);
    z-index: 5;
    overflow: hidden;
}

.downMenu a {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    padding: 8px 15px;
    background-color: transparent;
}

.downMenu a:hover {
    background-color: var(--Neutral-Neutral-400);
}

.downMenu h3 {
    font-family: Montserrat;
    font-size: 16px;
    margin: 0;
    color: var(--Primary-Primary-800);
}

.downMenu p {
    font-family: Be Vietnam Pro;
    font-size: 11px;
    margin: 0;
    color: var(--Neutral-Neutral-800);
}

@media screen and (max-width: 1100px) {

    .featurescard1image {
        display: block;
    }

    .featurescard1content {
        padding: 0;
        width: 98%;
    }

    .headerpost {
        display: none;
    }

    .header1title {
        font-size: 45px;
        line-height: 47px;
    }

    .header1description {
        margin-top: -50px;
    }

    .header0 {
        width: 90%;
    }

    .headerbuttonsguest {
        padding: 0px 33px;
    }

    p {
        font-size: 13px;
    }

    .featurestitle {
        width: 95%;
    }

    .featurescards {
        padding: 0px 60px;
        width: 90%;
        align-self: auto;
    }

    .featurescard1imagesource {
        height: 165px;
    }

    .featurescard1image-phone {
        display: block;
    }

    .featurescard1image-desktop {
        display: none;
    }

    .featurescard1imagesource {
        background-image: url("https://assets.night-light.cz/landing/preview-full.jpg");
        box-shadow: 0 0 80px 0px var(--primary-400);
    }

    .featurescard1 {
        display: block;
        height: 700px;
    }

    .navbar {
        height: 205px;
        width: 100%;
        padding: 0;
    }

    .navbardiv {
        display: block;
        height: 100%;
        align-self: normal;
    }

    .navbarlogo {
        width: 223px;
        margin: auto;
    }

    .navbarmenu {
        gap: 9px;
        justify-content: center;
    }

    .navbarsign {
        margin-top: 10px;
        justify-content: center;
    }

    .headermain {
        background-position: center;
        background-size: 150vh;
    }

    .footer {
        padding: 45px 20px;
    }

    .footercontent {
        align-items: normal;
    }

    .footercontentlinks {
        display: block;
    }


}