/* elements */ html { overflow: auto; } body { margin: 0; min-width: 800px; min-height: 100vh; position: relative; font-family: "Comic Sans", "Comic Sans MS", sans-serif; cursor: url("../images/rotchie.jpg"), auto; background-image: url("../images/rit.jpg"); animation: diag 1s linear infinite alternate; } a { color: yellow; } a:hover, [onclick]:hover { cursor: url("../images/cursor.png"), pointer !important; } .btn { background: black; color: yellow; padding: 5px; margin: 5px auto; border: 3px solid yellow; width: fit-content; &:hover { background: orange; color: black; border-color: black; } } /* header */ header#header { /* goofy bouncy title :3 */ div#title { margin-top: 40px; width: 100%; text-align: center; font-size: 75px; color: #f7ff07; font-family: Courier New; text-shadow: 0px 0px 0 rgb(240,248,0), 1px 1px 0 rgb(234,242,0), 2px 2px 0 rgb(227,235,0), 3px 3px 0 rgb(221,229,0), 4px 4px 0 rgb(214,222,0), 5px 5px 0 rgb(208,216,0), 6px 6px 0 rgb(201,209,0), 7px 7px 0 rgb(194,202,0), 8px 8px 0 rgb(188,196,0), 9px 9px 0 rgb(181,189,0), 10px 10px 0 rgb(175,183,0), 11px 11px 0 rgb(168,176,0), 12px 12px 0 rgb(161,169,0), 13px 13px 0 rgb(155,163,0), 14px 14px 0 rgb(148,156,0), 15px 15px 0 rgb(142,150,0), 16px 16px 0 rgb(135,143,0), 17px 17px 0 rgb(129,137,0), 18px 18px 0 rgb(122,130,0), 19px 19px 0 rgb(115,123,0), 20px 20px 0 rgb(109,117,0), 21px 21px 0 rgb(102,110,0), 22px 22px 0 rgb(96,104,0), 23px 23px 0 rgb(89,97,0), 24px 24px 0 rgb(83,91,0), 25px 25px 0 rgb(76,84,0), 26px 26px 0 rgb(69,77,0), 27px 27px 0 rgb(63,71,0), 28px 28px 0 rgb(56,64,0), 29px 29px 0 rgb(50,58,0), 30px 30px 0 rgb(43,51,0), 31px 31px 0 rgb(36,44,0), 32px 32px 0 rgb(30,38,0), 33px 33px 0 rgb(23,31,0), 34px 34px 0 rgb(17,25,0), 35px 35px 0 rgb(10,18,0), 36px 36px 0 rgb(4,12,0), 37px 37px 0 rgb(-3,5,0), 38px 38px 0 rgb(-10,-2,0), 39px 39px 38px rgba(255,0,0,1), 39px 39px 1px rgba(255,0,0,0.5), 0px 0px 38px rgba(255,0,0,.2); span { display: inline-block; animation: 1s bounce linear infinite; } } /* nav bar */ nav#nav { margin-top: 40px; margin-left: auto; margin-right: auto; width: fit-content; } } /* footer */ footer#footer { margin-top: 40px; #buttons { display: block; margin: 0 auto; width: fit-content; img { height: 33px; } } #john { display: block; margin: 0 auto; max-width: 732px; height: 94px; width: 100%; border: none; background: white; } } /* dither */ html.dither { #ditherMask { background: url("data:image/webp;base64,UklGRjAAAABXRUJQVlA4TCQAAAAvA8AAAIVS27ahb3uzOUmSJoqqrOq6P47of8DQdcprYdP8/VY="); filter: contrast(2000); image-rendering: crisp-edges; } #ditherFilter { filter: initial; mix-blend-mode: soft-light; isolation: isolate; image-rendering: initial; } } /* flip */ html.flip { transform: rotateZ(180deg); } /* strobe */ #strobe { pointer-events: none; position: sticky; top: 0; left: 0; height: 100%; width: 100vw; } html.strobe { #strobe { animation: strobe .25s linear infinite; } }