html, body {
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
background:black;
}
#page {
position:relative;
width:100vw;
height:100vh;
}
/* MAIN PHOTO */
#photo {
position:absolute;
width:100%;
height:100%;
object-fit:cover;
z-index:1;
}
/* NORMAL MENU */
#menu {
position:absolute;
width:100%;
height:100%;
z-index:10;
}
.word {
position:absolute;
left:8vw;
color:#263d2e;
font-family:"Cormorant Garamond", serif;
font-size:32px;
font-weight:400;
text-decoration:none;
letter-spacing:1px;
transition:color .3s, text-shadow .3s;
}
/* positions */
.bio {
top:38%;
}
.projects {
top:45%;
}
.events {
top:52%;
}
.recordings {
top:59%;
}
/* GLITCH CIRCLE */
#glass {
position:absolute;
width:100px;
height:100px;
border-radius:50%;
overflow:hidden;
pointer-events:none;
z-index:3;
display:none;
border:1px solid rgba(120,255,120,.4);
}
/* distorted photo */
#glass img {
position:absolute;
width:100vw;
height:100vh;
object-fit:cover;
z-index:1;
filter:
contrast(2)
saturate(3)
hue-rotate(90deg)
brightness(1.2);
animation:glitch .15s infinite;
}
/* words inside glass */
#glass-menu {
position:absolute;
width:100vw;
height:100vh;
z-index:20;
pointer-events:none;
}
.glass-word {
position:absolute;
left:8vw;
color:#8cff8c;
font-family:"Cormorant Garamond", serif;
font-size:32px;
z-index:30;
text-shadow:
0 0 8px #8cff8c,
0 0 20px rgba(140,255,140,.8);
}
/* same positions */
.glass-word.bio {
top:38%;
}
.glass-word.projects {
top:45%;
}
.glass-word.events {
top:52%;
}
.glass-word.recordings {
top:59%;
}
/* glitch movement */
@keyframes glitch {
0% {
transform:translate(0,0);
}
25% {
transform:translate(5px,-3px);
}
50% {
transform:translate(-5px,4px);
}
75% {
transform:translate(3px,2px);
}
100% {
transform:translate(0,0);
}
}
.word:hover {
color:#8cff8c;
text-shadow:
0 0 8px rgba(140,255,140,.8),
0 0 15px rgba(140,255,140,.5);
}