twin peaks layout

<style>

:root {

--logo-blue: #8f1313;

--darker-blue: #ff0000;

--lighter-blue: #000000;

--even-lighter-blue: #000000;

--lightest-blue: #ede7e6;

--dark-orange: #ede7e6;

--light-orange: #000000;

--even-lighter-orange: #8f1313;

--green: #2ed090;

main::before {

width: 100%;

height: 300px;

display: block;

content: "";

background-image: url('https://i.pinimg.com/originals/71/1e/78/711e78fc95d13a543604b2dde9958f45.gif');

background-position: center center;

background-size: cover;

}

#comments{min-height:500px; height:500px; overflow:auto}

}

body

{background-image:

url(https://i.pinimg.com/736x/0b/31/6a/0b316aaa4c9a9ce15eed17379f214c4c.jpg);

background-attachment: fixed;

}

main {

background-color: #8f1313;

color: #000000;

</style>

<style>body::before {

content: "";

display: block;

position: fixed;

left: -32px;

top: 0;

width: calc(100% + 32px);

height: calc(100% + 32px);

background-image: url(https://i.pinimg.com/originals/a8/57/16/a857160dd8e0c9146f5f9fdb9e53a4bf.gif);

background-size: cover;

background-position: center;

background-repeat: repeat;

z-index: 10000000;

animation: ScanlineAnimationRight 0.4s linear infinite;

pointer-events: none;

opacity: 1;

animation: hide 0.9s linear 1s 1 forwards;

}

@keyframes hide {

to {

opacity: 0;

}

}</style>

<style>

.online {content:url('https://biscuit.crd.co/assets/images/gallery100/bd15cad6.gif?v=edffcd2f'); background-repeat: no-repeat; background-position: -15% 75%; z-index: 2;

}

</style>