450 lines
8.7 KiB
CSS
450 lines
8.7 KiB
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;
|
|
display: flex;
|
|
flex-direction: column;
|
|
bottom: 0;
|
|
height: 20%;
|
|
min-height: 20%;
|
|
margin: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.buttons {
|
|
position: sticky;
|
|
bottom: 20%;
|
|
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;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
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: infinite;
|
|
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;
|
|
}
|
|
}
|