*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

/* BODY */

body{

height:100vh;
   overflow-y:auto;

display:flex;
align-items:center;
justify-content:center;

overflow-x:hidden;

/* LIQUID GRADIENT */

background:#fff;

background-size:400% 400%;

animation:liquid 12s ease infinite;

}

/* GRADIENT ANIMATION */

@keyframes liquid{

0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}

}

/* HERO */

.hero{

width:100%;
height:100vh;

display:flex;
align-items:center;
justify-content:center;

text-align:center;

position:relative;

}

/* CONTENT */

.content{

max-width:750px;

z-index:2;

}

/* BRAND */

.brand{

font-size:clamp(48px,6vw,80px);

font-weight:800;

letter-spacing:1px;

background:linear-gradient(
90deg,
#1f8f5f
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

margin-bottom:10px;

}

/* SLOGAN */

.slogan{

font-size:clamp(26px,3vw,40px);

font-weight:600;

color:#222;

margin-bottom:15px;

}

/* LAUNCH */

.launch{

font-size:24px;

letter-spacing:6px;

color:#1f8f5f;

margin-bottom:25px;

}

/* DESC */

.desc{

font-size:18px;

color:#555;

margin-bottom:15px;

}

/* WEBSITE */

.website{

font-size:16px;

letter-spacing:3px;

color:#888;

margin-bottom:35px;

}

/* SOCIAL */

.social{

display:flex;
justify-content:center;
gap:28px;

}

.social-icon{

font-size:28px;

color:#1f8f5f;

transition:.35s;

}

.social-icon:hover{

transform:translateY(-8px) scale(1.25);

color:#0f5132;

filter:drop-shadow(0 8px 14px rgba(0,0,0,.15));

}

/* TEXT REVEAL */

.brand,
.slogan,
.launch,
.desc,
.website{

opacity:0;
transform:translateY(40px);

animation:reveal .9s ease forwards;

}

.slogan{animation-delay:.3s;}
.launch{animation-delay:.6s;}
.desc{animation-delay:.9s;}
.website{animation-delay:1.2s;}

@keyframes reveal{

to{
opacity:1;
transform:translateY(0);
}

}

/* CANS */

.can{

position:absolute;

width:360px;

filter:drop-shadow(0 30px 40px rgba(0,0,0,.18));

transition:transform .25s ease;

}

/* LEFT CAN */

.left{

left:3%;
bottom:10%;

transform:rotate(-12deg);

}

/* RIGHT CAN */

.right{

right:3%;
top:5%;

transform:rotate(12deg);

}

/* FLOAT ANIMATION */

.can{

animation:float 6s ease-in-out infinite;

}

@keyframes float{

0%{transform:translateY(0)}
50%{transform:translateY(-15px)}
100%{transform:translateY(0)}

}

/* MOBILE */

@media(max-width:768px){

.can{
width:200px;
}

.desc{
font-size:16px;
}

.brand{
font-size:42px;
}

}
/* =========================
   MOBILE RESPONSIVE
========================= */

@media (max-width:768px){

body{
padding:20px;
overflow:auto;
}

.hero{
height:auto;
min-height:100vh;
padding:60px 20px;
}

.content{
max-width:100%;
padding:0 10px;
}

/* BRAND */

.brand{
font-size:42px;
}

/* SLOGAN */

.slogan{
font-size:22px;
}

/* DESC */

.desc{
font-size:16px;
}

/* WEBSITE */

.website{
font-size:14px;
}

/* SOCIAL */

.social{
gap:20px;
}

.social-icon{
font-size:24px;
}

/* CANS */

.can{
width:180px;
opacity:.35;
filter:blur(0px);
}

/* LEFT CAN */

.left{
left:-60px;
bottom:0;
transform:rotate(-15deg);
}

/* RIGHT CAN */

.right{
right:-60px;
top:20%;
transform:rotate(15deg);
}

}