body{
margin:0;
font-family:Georgia, serif;
color:#f4e6c7;
background-color:#0b0b12;
text-align:center;
}

/* TITLE PAGE BACKGROUND */

.title{
background-image:url("cover.png");
background-size:cover;
background-position:center;
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

.overlay{
background:rgba(0,0,0,0.6);
padding:40px;
border-radius:12px;
}

/* BUTTONS */

button{
background:#1f1f2e;
border:1px solid #555;
color:#f4e6c7;
padding:10px 20px;
margin:10px;
cursor:pointer;
}

button:hover{
background:#2c2c40;
}

/* LANTERN FLICKER */

.lantern{
width:90px;
animation:flicker 3s infinite;
margin:10px;
}

@keyframes flicker{
0%{filter:brightness(1);}
50%{filter:brightness(1.7);}
100%{filter:brightness(1);}
}

/* GLITCH TEXT */

.glitch{
font-size:28px;
position:relative;
}

.glitch:before,
.glitch:after{
content:attr(data-text);
position:absolute;
left:0;
}

.glitch:before{
color:red;
animation:glitch1 2s infinite;
}

.glitch:after{
color:cyan;
animation:glitch2 2s infinite;
}

@keyframes glitch1{
0%{clip-path:inset(0 0 80% 0);}
50%{clip-path:inset(10% 0 60% 0);}
100%{clip-path:inset(0 0 80% 0);}
}

@keyframes glitch2{
0%{clip-path:inset(80% 0 0 0);}
50%{clip-path:inset(60% 0 10% 0);}
100%{clip-path:inset(80% 0 0 0);}
}

/* WHISPER TEXT */

.whisper{
position:fixed;
color:#bbb;
opacity:0.6;
pointer-events:none;
font-style:italic;
}