html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body {
    /* Landing Card */
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    /* background: #000000; */
    background: url(images/landing-background.png);
    background-size: cover;
}

/* Logo */
.logo{
    position: absolute;
    width: 30%;
    max-width: 220px;
    height: auto;
    left: 5%;
    top: 10%;
}

#message {
    position: absolute;
    left: 5%;
    top: 40%;
}

.slogan {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 64px;
    line-height: 64px;
    /* or 100% */

    color: #FFFFFF;
}

.sloganAction{
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
    /* identical to box height, or 117% */

    margin-top: 16px;
    /* control spacing below the slogan */

    color: #FFFFFF;

    opacity: 0.5;
}

/* 
width: 288.813px;
height: 274.314px;
flex-shrink: 0; */

/* Group 35896 */
.g1{
    position: absolute;
    width: 288.81px;
    height: 274.31px;
    left: 414.09px;
    top: 230.84px;
}

.g1E1{
    position: absolute;
    left: 27.39%;
    right: 55.62%;
    top: 38.14%;
    bottom: 48.01%;
    
    background: #FDE598;
    filter: blur(50px);
    transform: rotate(-16.2deg);
}
.g1E2{
    position: absolute;
    left: 27.97%;
    right: 55.36%;
    top: 30.67%;
    bottom: 55.48%;
    
    background: #FF5555;
    filter: blur(50px);
    transform: rotate(-16.2deg);
    
}

/* Group 35887 */
.g2{
    position: absolute;
    width: 725.49px;
    height: 725.49px;
    left: 0px;
    top: 0px;
}
.g2E1{
    box-sizing: border-box;

    position: absolute;
    width: 383.17px;
    height: 551.56px;
    left: calc(50% - 383.17px/2 - 171.16px);
    top: 335.47px;

    border: 1px solid #FFFFFF;
    transform: rotate(-45deg);
}

.g2E2{
    box-sizing: border-box;

    position: absolute;
    width: 383.17px;
    height: 551.56px;
    left: calc(50% - 383.17px/2 - 138.89px);
    top: 303.21px;
    
    border: 1px solid #FFFFFF;
    transform: rotate(-45deg);
    
}

.g2E3{
    box-sizing: border-box;

    position: absolute;
    width: 383.17px;
    height: 551.56px;
    left: calc(50% - 383.17px/2 - 106.63px);
    top: 270.94px;
    
    border: 1px solid #FFFFFF;
    transform: rotate(-45deg);
    
}


/* Group 35899 */
.g3{
    position: absolute;
    width: 439.78px;
    height: 689.75px;
    left: 942.99px;
    top: 211.43px;    
}

.g3E1{
    position: absolute;
    width: 318.8px;
    height: 171.75px;
    left: calc(50% - 318.8px/2 + 708.35px);
    top: calc(50% - 171.75px/2 - 44.96px);
    
    transform: rotate(150deg);
}

.g3E2{
    position: absolute;
    width: 382.25px;
    height: 205.93px;
    left: calc(50% - 382.25px/2 + 817.89px);
    top: calc(50% - 205.93px/2 + 322.02px);
    
    background: #FF5555;
    filter: blur(51.5773px);
    transform: rotate(150deg);    
}


/* Star 1 */
.star1{
    position: absolute;
    width: 64px;
    height: 64px;
    left: calc(50% - 64px/2 + 621px);
    top: 209.9px;

    background: #FFFFFF;
}

    
/* Star 2 */
.star2{
position: absolute;
width: 48px;
height: 48px;
left: calc(50% - 48px/2 + 165.57px);
top: 691.57px;

background: #FFB700;
transform: rotate(150deg);
}


/* Star 3 */
.star3{
    position: absolute;
    width: 46.17px;
    height: 46.17px;
    left: calc(50% - 46.17px/2 - 654.27px);
    top: calc(50% - 46.17px/2 - 177.92px);     
}

.star2{
    position: absolute;

    width: 48px;
    height: 48px;
    transform: rotate(150deg);
    flex-shrink: 0;
    left: calc(50% - 48px/2 + 165.57px);
    top: 691.57px;

}

.star8{
    width: 46.167px;
    height: 46.167px;
    transform: rotate(45deg);
    flex-shrink: 0;
    left: calc(50% - 46.17px/2 - 228.27px);
    top: calc(50% - 46.17px/2 + 322.08px);

}

/* 1 */
/* Auto layout */
.column1{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;

    position: absolute;
    width: 240px;
    height: 1054.92px;
    left: 870px;
    top: -5px;

}

/* Home - Mobile */
.c1Screen1{
    box-sizing: border-box;

    width: 240px;
    height: 519.24px;

    /*background: url(Home - Mobile.png);*/ 
    /*background: url(images/c1.s1.png);*/
    border: 1px solid #FFFFFF;
    border-radius: 20px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}


/* View Comments in Post - Mobile 1 */
.c1Screen2{
    box-sizing: border-box;

    width: 240px;
    height: 519.68px;

    /*background: url(View Comments in Post - Mobile.png);*/
    /*background: url(images/c1.s2.png);*/
    border: 1px solid #FFFFFF;
    border-radius: 20px;

    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}

/* 2 */
/* Auto layout */
.column2{
    display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 8px;

position: absolute;
width: 241px;
height: 1573.09px;
left: 1126px;
top: calc(50% - 1573.09px/2 - 0.46px);
}

/* Content Views - Mobile 1 */
.c2Screen1{
    box-sizing: border-box;

    width: 241px;
    height: 519.68px;

    /*background: url(Content Views - Mobile.png);*/
    border: 1px solid #FFFFFF;
    border-radius: 20px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}


/* Create Content - Mobile */
.c2Screen2{
    box-sizing: border-box;

    width: 241px;
    height: 517.73px;

    /*background: url(Create Content - Mobile.png);*/
    border: 1px solid #FFFFFF;
    border-radius: 20px;

    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;

}

/* Manage Content - Mobile 1 */
.c2Screen3{
    box-sizing: border-box;

    width: 241px;
    height: 519.68px;

    /*background: url(Manage Content - Mobile.png);*/
    border: 1px solid #FFFFFF;
    border-radius: 20px;

    /* Inside auto layout */
    flex: none;
    order: 2;
    align-self: stretch;
    flex-grow: 0;
}

/* 3 */
/* Auto layout */
.column3{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;

    position: absolute;
    width: 240px;
    height: 1055.24px;
    left: 1383px;
    top: calc(50% - 1055.24px/2 - 0.38px);
}

/* Earning & Analytics - Mobile */
.c3Screen1{

    box-sizing: border-box;
    
    width: 240px;
    height: 520px;
    
    /*background: url(Earning & Analytics - Mobile.png);*/
    border: 1px solid #FFFFFF;
    border-radius: 20px;
    
    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Subscribers - Mobile */
.c3Screen2{
    box-sizing: border-box;

    width: 240px;
    height: 519.24px;

    /*background: url(Subscribers - Mobile.png);*/
    border: 1px solid #FFFFFF;
    border-radius: 20px;

    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}