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

body{
height:100vh;
overflow:hidden;
font-family:Segoe UI, sans-serif;
background: radial-gradient(circle at bottom,#06070f,#000);
color:white;
}

/* SKY */

.sky{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}

canvas{
width:100%;
height:100%;
}

/* TITLE */

.content{
position:absolute;
top:30%;
left:50%;
transform:translateX(-50%);
text-align:center;
z-index:3;
}

h1{
font-size:3.5rem;
letter-spacing:4px;
text-shadow:0 0 10px rgba(255,255,255,0.3);
margin-bottom:10px;
}

.subtitle{
opacity:0.8;
margin-bottom:10px;
}

.coming{
opacity:0.6;
}

/* HILL */

.hill{
position:absolute;
bottom:0;
width:100%;
height:32vh;
background:#020202;
border-top-left-radius:50% 100%;
border-top-right-radius:50% 100%;
z-index:2;
}

/* PERSON */

.person{
position:absolute;
bottom:30vh;
left:60%;
width:5px;
height:18px;
background:white;
}

.person::before{
content:"";
position:absolute;
top:-8px;
left:-3px;
width:11px;
height:11px;
border-radius:50%;
background:white;
}