#brian{
    position:fixed;
    left:calc(50% - 25vh);
    top:calc(50% - 25vh);
    width:50vh;
    height:50vh;

    animation: brianappear 10s linear, brianfloat 5s infinite;

    filter:drop-shadow(0 0 0.75rem rgb(0, 0, 0));
}

#footer{
    background-color:#00000066;
    
    width:170px;
    height:32px;
    border-radius: 0px 16px 0px 0px;

    position:fixed;
    bottom:0px;
    left:0px;

    display:flex;
    justify-content: center;
    align-items: center;
}

#footer > * {
    font-family: 'Lucida Console';
    font-weight: 500;
    text-decoration: none;
    color:#FFFFFF
}

body {
    margin:0px;
    overflow: hidden;
}

#background {
    position:fixed;
    width:calc(100vw + 100px);
    height:calc(100vh + 100px);
    background: repeating-conic-gradient(#ebebeb77 0 25%, #0000 0 50%) 50% / 100px 100px;
    animation: scrollbg 1s linear infinite;
}

#background::after {
    content:"";
    position:absolute;
    left:-100px;
    width:calc(100vw + 200px);
    height:calc(100vh + 200px);
    background: repeating-conic-gradient(#dfdfdf77 0 25%, #0000 0 50%) 50% / 100px 100px;
    animation: scrollbgalt 2s linear infinite;
    z-index: -5;
}

@keyframes scrollbg {
    from {
        top:0%;
        left:0%;
    }
    to {
        top:-100px;
        left:-100px;
    }
}
@keyframes scrollbgalt {
    from {
        top:-200px;
        left:-100px;
    }
    to {
        top:0px;
        left:0%;
    }
}

@keyframes brianappear {
    from {
        filter:brightness(0) drop-shadow(0 0 0.75rem rgb(0, 0, 0));
        opacity:0;
    }
    to {
        filter:brightness(1) drop-shadow(0 0 0.75rem rgb(0, 0, 0));
        opacity:1;
    }
}

@keyframes brianfloat {
    0% {
        top:calc(47.5% - 25vh);
        transform: rotate(0);
    }
    50% {
        top:calc(52.5% - 25vh);
    }
    100% {
        top:calc(47.5% - 25vh);
    }
}