rit.wtf/style.css

html, body, #mainBod {
    margin: 0;
    padding: 0;
}

#mainBod {
    cursor: url("data/rotchie.png"), auto;
    top: 0; bottom: 0;
    left: 0; right: 0;
    overflow: auto;
    background-image: url("data/rit.webp");
    width: 100vw;
    min-height: 100vh;
    height: 100vh;
    animation: bg 1s linear infinite alternate;
    display: flex;
    flex-direction: column;
    font-family: "Comic Sans", "Comic Sans MS", "Chalkboard", "ChalkboardSE-Regular", sans-serif;
}

.wank {
    transform: rotateZ(180deg);
}

.thicc {
    flex: 1;
}

.top {
    width: 50%;
    background-color: black;
    color: white;
    align-self: center;
    text-align: center;
}

#middle {
    font-size: 2em;
    width: fit-content;
    background-color: black;
    color: orange;
    animation: across 2s linear infinite;
    margin-left: 10%;
}

a {
    cursor: url("data/cursor.png"), pointer !important;
}

td a {
    color: yellow;
}

.clickable:hover {
    cursor: url("data/cursor.png"), pointer !important;
}

td:hover {
    background-color: orange;
}

td:hover a {
    color: black;
}

.top td {
    animation: border 1s linear infinite alternate;
}

.middle {
    width: 75%;
    align-self: center;
    text-align: center;
    background-color: black;
    margin-bottom: 2em;
}

.middle td {
    border: .25vw solid orange;
    height: 5vw;
}

.middle td:hover {
    border: 2px solid black;
    background-color: orange;
}

footer {
    background-size: cover;
    position: sticky;
    bottom: 0;
    height: 10%;
    min-height: 10%;
    margin: 0;
    overflow: auto;
}

.buttons {
    position: sticky;
    bottom: 10%;
    align-self: center;
    margin: 0;
    margin-top: 1em;
}

.buttons img {
    height: 2em;
}

footer video {
    width: 100%;
    height: 100%;
    object-fit: fill;
    margin: 0;
    animation: spin 10s linear infinite;
}

marquee {
    margin-top: 2em;
    display: block;
    height: 12em;
}

marquee img {
    height: 12em;
}

.title {
    width: 100%;
    text-align: center;
    font-size: 75px;
    margin: 0.75em 0em;
    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);
 }

html.dither>body>div{
    background: url("data:image/webp;base64,UklGRjAAAABXRUJQVlA4TCQAAAAvA8AAAIVS27ahb3uzOUmSJoqqrOq6P47of8DQdcprYdP8/VY=");
    filter: contrast(2000);
    image-rendering: crisp-edges;
}

html.dither>body>div>div{
    filter: initial;
    mix-blend-mode: soft-light;
    isolation: isolate;
    image-rendering: initial;
}

.sprinkler {
    margin-top: 2.5em;
    text-align: center;
    font-size: 2.5em;
    font-weight: 1000;
    color: aqua;
    animation: flash 0.3s linear infinite;
}

.munson {
    text-align: center;
    width: 80%;
    font-size: 5vh;
    padding: 0;
    margin: 0;
    margin-bottom: 1em;
    animation: colorflash 1s linear infinite;
    margin-left: 10%;
}

#munson {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

#munson img {
    height: 20vh;
    width: 100%;
}

#munson img:hover {
    animation: scale 0.3s linear;
    animation-fill-mode: forwards;
}

.john {
    margin-left: auto;
    display: block;
    margin-right: auto;
    max-width: 732px;
    width: 100%;
    height: 94px;
    border: none;
    margin-bottom: 2em;
}

#batterys {
    perspective: 5000000em;
	position: relative;
	height: 2em;
	width: 100%;
	overflow-x: visible;
    margin-bottom: 13vw;
}

#batterys p {
    text-align: center;
    font-size: 4vw;
    color: #fff;
    width: 50.1vw;
    background-color: #232323;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #49ff18, 0 0 30px #49ff18, 0 0 40px #49ff18, 0 0 55px #49ff18, 0 0 75px #49ff18;
    display: inline-block;
    position: absolute;
    left: 50%;
    animation: spincube 2.5s linear infinite;
}


#batterys img {
    display: inline-block;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #49ff18, 0 0 30px #49ff18, 0 0 40px #49ff18, 0 0 55px #49ff18, 0 0 75px #49ff18;
    display: inline-block;
    position: absolute;
    left: 50%;
    width: 48.1vw;
    border: black 1vw solid;
    animation: spincube 2.5s linear infinite;
}


@keyframes spincube {
    from {
        transform: translateX(-50%) rotateY(var(--rot)) translateZ(25vw);
    }
	to {
		transform: translateX(-50%) rotateY(calc(var(--rot) + 90deg)) translateZ(25vw);
	}
}

@keyframes bg {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 10% 10%;
    }
}

@keyframes spin {
    0%, 100% {
        transform: rotateY(0deg) rotateX(0deg);
    }
    50%  {
        transform: rotateY(3000deg) rotateX(3000deg);
    }
}

@keyframes title {
    0%,
    100% {
     transform:translateY(-25%);
     animation-timing-function:cubic-bezier(.8,0,1,1)
    }
    50% {
     transform:none;
     animation-timing-function:cubic-bezier(0,0,.2,1)
    }
}

@keyframes flash {
    50% {
        opacity: 0;
    }
}

@keyframes colorflash {
    0%, 100%, 49% {
        border: 5px solid orange;
        background-color: black;
        color: orange;
    }
    50%, 99% {
        border: 5px solid black;
        background-color: orange;
        color: black;
    }
}

@keyframes border {
    0%,
    100% {
        border: 2px solid rgb(255, 0, 0);
    }
    33% {
        border: 2px solid rgb(0, 255, 0);
    }
    66% {
        border: 2px solid rgb(0, 0, 255);
    }
}

@keyframes across {
    0%,
    100% {
      transform: translateX(0%);
    }
    50% {
      transform: translateX(calc(80vw - 100%));
    }
}

@keyframes scale {
    from {
        transform: scale3d(100%, 100%, 100%);
    }
    to {
        transform: scale3d(120%, 120%, 120%);
    }
}

html.flash>body>div>div>div>menu {
    animation: epilepsy .25s linear infinite;
}

.flashy {
    margin: 0;
    padding: 0;
    list-style:none; 
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    overflow: scroll;
    pointer-events: none;
}

@keyframes epilepsy {
    0%, 100% {
        background-color: rgba(255,0,0,.4);
    }
    20% {
        background-color: rgba(255,255,0,.4);
    }
    40% {
        background-color: rgba(0,255,0,.4);
    }
    60% {
        background-color: rgba(0,255,255,.4);
    }
    80% {
        background-color: rgba(0,0,255,.4);
    }
}

.center {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#webring {
    min-width: 25%;
    padding: .5rem;
    border: solid 5px orange;
    background-color: black;
    color: white;
    display: flex;
    flex-direction: row;
}

#webring .links {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    min-width: 30%;
    padding: 0 .5rem;
}

#webring .links a {
    margin: 0;
    height: auto;
    margin-left: .25rem;
}

#webring p {
    margin: 0;
    flex: 1;
}

.spread {
    animation: 3s infinite ease-in-out alternate kurn;
    font-style: italic;
    text-decoration: underline;
}

@keyframes kurn {
    from {
        letter-spacing: .05rem;
    }

    to {
        letter-spacing: .25rem;
    }
}