2023-09-28 23:58:09 +00:00
/* <body> tag 'background-color' is boilerplate here. We only care about the box-shadow and filter effects. We can add a woods background-image for added effect. */
body {
background-size : cover ;
background-attachment : fixed ;
background-color : # 000 ;
box-shadow : 0 0 900px rgba ( 0 , 0 , 0 , 0 . 9 ) inset ;
overflow-x : hidden ;
}
2023-10-14 20:55:17 +00:00
html {
2023-10-11 20:50:33 +00:00
filter : sepia ( 100 % ) hue-rotate ( 180deg ) saturate ( 300 % ) ;
}
# canvas {
2023-10-13 17:22:59 +00:00
z-index : 1 ;
position : fixed ;
2023-10-11 20:50:33 +00:00
pointer-events : none ;
}
2023-09-28 23:58:09 +00:00
canvas . particles {
pointer-events : none ;
position : fixed ;
left : 0 ;
top : 0 ;
z-index : 1 ;
filter : blur ( 1 . 5px ) ;
animation : flicker 4s infinite ;
}
@ keyframes flicker {
0 % {
filter : brightness ( 30 % ) ;
}
48 % {
filter : brightness ( 30 % ) ;
}
50 % {
filter : contrast ( 1 . 5 ) brightness ( 40 % ) ;
}
60 % {
filter : contrast ( 1 . 5 ) brightness ( 40 % ) ;
}
62 % {
filter : brightness ( 30 % ) ;
}
78 % {
filter : brightness ( 20 % ) ;
}
84 % {
filter : brightness ( 40 % ) ;
}
88 % {
filter : brightness ( 30 % ) ;
}
96 % {
filter : brightness ( 80 % ) ;
}
98 % {
filter : brightness ( 30 % ) ;
}
100 % {
filter : brightness ( 90 % ) ;
}
}
