*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Poppins',sans-serif;

    width:100%;

    height:100vh;

    overflow:hidden;

    background:
    linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.75)),
    url("rakenja.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

/* Glow */

body::before{

content:"";

position:absolute;

width:700px;

height:700px;

background:#FFD700;

filter:blur(200px);

opacity:.18;

left:-200px;

top:-150px;

animation:moveGlow 10s infinite alternate;

pointer-events:none;

}

/* Overlay */

.overlay{

position:absolute;

inset:0;

display:flex;

align-items:flex-end;

padding:80px;

cursor:pointer;

background:linear-gradient(

to top,

rgba(0,0,0,.88),

rgba(0,0,0,.25),

transparent

);

transition:1s;

}

.overlay.hide{

opacity:0;

visibility:hidden;

}

/* Content */

.content{

max-width:600px;

animation:fadeUp 1.2s;

}

.badge{

display:inline-block;

padding:8px 18px;

background:#FFD700;

color:#111;

border-radius:50px;

font-size:13px;

font-weight:700;

margin-bottom:25px;

}

h1{

font-size:70px;

font-weight:800;

color:white;

line-height:1.1;

margin-bottom:15px;

text-shadow:0 10px 40px rgba(0,0,0,.6);

}

p{

font-size:22px;

color:#ddd;

line-height:1.7;

max-width:500px;

}

/* Hint */

.overlay::after{

content:"CLICK ANYWHERE";

position:absolute;

right:50px;

bottom:40px;

color:#FFD700;

letter-spacing:5px;

font-size:13px;

animation:blink 1.5s infinite;

}

/* Animation */

@keyframes blink{

50%{

opacity:.3;

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes moveGlow{

from{

transform:translate(0,0);

}

to{

transform:translate(200px,150px);

}

}

/* Mobile */

@media(max-width:768px){

.overlay{

padding:40px;

}

h1{

font-size:42px;

}

p{

font-size:17px;

}

.overlay::after{

left:40px;

right:auto;

bottom:25px;

}

}