476 lines
9.1 KiB
CSS
Executable file
476 lines
9.1 KiB
CSS
Executable file
@font-face{
|
|
font-family: 'comic';
|
|
src: url('COMIC.TTF') format('truetype');
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
cursor: url("gifs/borger.gif"), auto !important;
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
body>div{
|
|
min-height: 100%;
|
|
background-image: url(flbl.png);
|
|
background-repeat: repeat;
|
|
background-color: #8b8b8b;
|
|
}
|
|
|
|
#bgtoggle:checked+input+input+input+input+div {
|
|
background-image: url("./trans/trans.png");
|
|
}
|
|
|
|
#lentoggle:checked+input+input+input+div {
|
|
background-image: url("./trans/lenn.jpg");
|
|
}
|
|
|
|
#fisrtoggle:checked+input+input+div {
|
|
background-image: url("./trans/fisr.png");
|
|
}
|
|
|
|
#haxortoggle:checked+input+div {
|
|
background-image: url("./trans/haxor.hpg");
|
|
}
|
|
|
|
#zucctoggle:checked+div {
|
|
background-image: url("./trans/zucc.jpg");
|
|
}
|
|
|
|
#ytvid {
|
|
display:flex;
|
|
position:absolute;
|
|
animation: spin 290s linear infinite;
|
|
align-items:center;
|
|
justify-content:center;
|
|
top: 90px;
|
|
width: 100%;
|
|
pointer-events:none;
|
|
right:0;
|
|
bottom:90px;
|
|
}
|
|
|
|
.marquee {
|
|
height: 70px;
|
|
width: 1000%;
|
|
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.gurl {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
height: 20rem;
|
|
z-index: -1;
|
|
animation: swoosh 20s linear infinite alternate;
|
|
}
|
|
|
|
.marquee div {
|
|
display: block;
|
|
width: 200%;
|
|
height: 70px;
|
|
|
|
position: absolute;
|
|
overflow: hidden;
|
|
|
|
animation: marquee 180s linear infinite;
|
|
}
|
|
|
|
.marquee span {
|
|
float: left;
|
|
font-size: 36px;
|
|
width: 100%;
|
|
}
|
|
|
|
@keyframes marquee {
|
|
0% { left: 0; }
|
|
100% { left: -100%; }
|
|
}
|
|
|
|
#bgtoggle:checked+input+input+input+input+div>#mainBod>h1>button {
|
|
display: none;
|
|
}
|
|
|
|
#bgtoggle:checked+input+input+input+input+div>#mainBod>h1>button+button {
|
|
display: initial !important;
|
|
}
|
|
|
|
|
|
.marquay div {
|
|
display: block;
|
|
width: 200%;
|
|
bottom: 0;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
animation: marquay 60s linear infinite;
|
|
|
|
|
|
}
|
|
|
|
.marquay span {
|
|
float: left;
|
|
font-size: 22px;
|
|
width: 100%;
|
|
}
|
|
|
|
@keyframes marquay {
|
|
0% { left: 100%; }
|
|
100% { left: -50%; }
|
|
}
|
|
|
|
#mainBod {
|
|
border: 20px solid;
|
|
content: "";
|
|
white-space: nowrap;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
border-image: url(gifs/archbtw.gif);
|
|
border-image-slice: 390 390 390 390 fill;
|
|
border-image-repeat: stretch;
|
|
border-image-width: 388883px;
|
|
}
|
|
h1 {
|
|
animation-name: h1blink;
|
|
animation-duration:1s;
|
|
animation-iteration-count: infinite;
|
|
font-size: 369%;
|
|
font-family: 'comic', sans-serif;
|
|
background: #00FCEC;
|
|
background: linear-gradient(to right, #00FCEC 17%, #FF69E6 66%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
a,label,p {
|
|
cursor: url("gifs/borger.gif"), auto !important;
|
|
display: inline-block;
|
|
background: #00FCEC;
|
|
background: linear-gradient(to right, #00FCEC 17%, #FF69E6 66%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
text-decoration: wavy underline;
|
|
}
|
|
li:hover a{
|
|
cursor: url("gifs/borger.gif"), auto !important;
|
|
animation-name: blink;
|
|
animation-duration: 2s;
|
|
animation-iteration-count: infinite;
|
|
text-decoration: none;
|
|
}
|
|
li:hover label{
|
|
cursor: url("gifs/borger.gif"), auto !important;
|
|
animation-name: blink;
|
|
animation-duration: 2s;
|
|
animation-iteration-count: infinite;
|
|
text-decoration: none;
|
|
}
|
|
|
|
li:visited {
|
|
color: cyan;
|
|
text-decoration: none;
|
|
}
|
|
li,p {
|
|
font-size: 300%;
|
|
font-family: 'comic', sans-serif;
|
|
color: cyan;
|
|
|
|
}
|
|
#footer {
|
|
cursor: url("gifs/borger.gif"), auto !important;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
#footer img {
|
|
height: 31px;
|
|
cursor: url("gifs/borger.gif"), auto !important;
|
|
}
|
|
|
|
.c, .c:checked+label, .c:not(:checked)+label+.c+label, .c:not(:checked)+label+a {
|
|
display: none;
|
|
}
|
|
|
|
embed { display: none; }
|
|
|
|
button:active + embed { display: block; }
|
|
|
|
#pushp label,span,a{
|
|
font-family: 'comic', sans-serif;
|
|
cursor: url("gifs/borger.gif"), auto !important;
|
|
background: #00FCEC;
|
|
background: linear-gradient(to right, #00FCEC 17%, #FF69E6 66%);
|
|
text-shadow: 1px 1px 0px #00fcec,
|
|
2px 2px 0px #00fcec,
|
|
3px 3px 0px #00fcec,
|
|
4px 4px 0px #ff69e6,
|
|
5px 5px 0px #ff69e6
|
|
, 6px 6px 0px #ff69e6,
|
|
7px 7px 0px #ff69e6,
|
|
8px 8px 0px #ff69e6,
|
|
9px 9px 0px #ff69e6,
|
|
10px 10px 0px #ff69e6,
|
|
15px 15px 20px #00fcec;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
text-decoration: none;
|
|
}
|
|
|
|
button {
|
|
font-family: 'comic', sans-serif;
|
|
font-size: 4rem;
|
|
cursor: url("gifs/borger.gif"), auto !important;
|
|
display: inline-block;
|
|
padding: 0;
|
|
border: none;
|
|
background: none;
|
|
background: #00FCEC;
|
|
background: linear-gradient(to right, #00FCEC 17%, #FF69E6 66%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation-name: h1blink;
|
|
animation-duration:1s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
|
|
details img {
|
|
left: 3rem;
|
|
top: 1rem;
|
|
position: absolute;
|
|
width: 70rem;
|
|
}
|
|
|
|
details audio{
|
|
left: 3rem;
|
|
top: 1rem;
|
|
position: absolute;
|
|
width: 70rem;
|
|
}
|
|
|
|
details {
|
|
position: absolute;
|
|
align-self: center;
|
|
align-content: center;
|
|
}
|
|
details:not([open]) audio { display: none; }
|
|
@keyframes spin {
|
|
from {
|
|
transform: perspective(1900px) translate3d(20rem,10px,0rem) scale(69%);
|
|
}
|
|
to {
|
|
transform: perspective(1900px) translate3d(20rem,10px,10rem) scale(96%) rotateZ(5deg) rotateY(5deg)rotateX(54deg);
|
|
}
|
|
}
|
|
|
|
@keyframes swoosh {
|
|
0% {
|
|
left: 0;
|
|
top: 20%;
|
|
}
|
|
10% {
|
|
left: 100%;
|
|
top: 40%;
|
|
}
|
|
20% {
|
|
left: 50%;
|
|
top: 100%;
|
|
}
|
|
30% {
|
|
left: 0;
|
|
top: 40%;
|
|
}
|
|
40% {
|
|
left: 60%;
|
|
top: 0;
|
|
}
|
|
50% {
|
|
left: 100%;
|
|
top: 80%;
|
|
}
|
|
60% {
|
|
left: 80%;
|
|
top: 100%;
|
|
}
|
|
70% {
|
|
left: 20%;
|
|
top: 0;
|
|
}
|
|
80% {
|
|
left: 0;
|
|
top: 30%;
|
|
}
|
|
90% {
|
|
left: 60%;
|
|
top: 100%;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
top: 30%;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@keyframes h1blink {
|
|
0% {color: pink;text-shadow:
|
|
0 0 4px #fff,
|
|
0 0 11px #fff,
|
|
0 0 19px #fff,
|
|
0 0 40px #ff01ec,
|
|
0 0 80px #ff01ec,
|
|
0 0 90px #ff01ec,
|
|
0 0 100px #ff01ec,
|
|
0 0 150px #ff01ec;
|
|
}
|
|
18% {color: cyan;text-shadow:
|
|
0 0 4px #fff,
|
|
0 0 11px #fff,
|
|
0 0 19px #fff,
|
|
0 0 40px #ff01ec,
|
|
0 0 80px #ff01ec,
|
|
0 0 90px #ff01ec,
|
|
0 0 100px #ff01ec,
|
|
0 0 150px #ff01ec;
|
|
}
|
|
22% {color: pink; text-shadow:
|
|
0 0 4px #fff,
|
|
0 0 11px #fff,
|
|
0 0 19px #fff,
|
|
0 0 40px #ff01ec,
|
|
0 0 80px #ff01ec,
|
|
0 0 90px #ff01ec,
|
|
0 0 100px #ff01ec,
|
|
0 0 150px #ff01ec;
|
|
}
|
|
25% {color: cyan;text-shadow:
|
|
0 0 4px #fff,
|
|
0 0 11px #fff,
|
|
0 0 19px #fff,
|
|
0 0 40px #ff01ec,
|
|
0 0 80px #ff01ec,
|
|
0 0 90px #ff01ec,
|
|
0 0 100px #ff01ec,
|
|
0 0 150px #ff01ec;
|
|
}
|
|
53% {color: pink;text-shadow:
|
|
0 0 4px #fff,
|
|
0 0 11px #fff,
|
|
0 0 19px #fff,
|
|
0 0 40px #ff01ec,
|
|
0 0 80px #ff01ec,
|
|
0 0 90px #ff01ec,
|
|
0 0 100px #ff01ec,
|
|
0 0 150px #ff01ec;
|
|
}
|
|
57% {color: cyan;text-shadow:
|
|
0 0 4px #fff,
|
|
0 0 11px #fff,
|
|
0 0 19px #fff,
|
|
0 0 40px #ff01ec,
|
|
0 0 80px #ff01ec,
|
|
0 0 90px #ff01ec,
|
|
0 0 100px #ff01ec,
|
|
0 0 150px #ff01ec;
|
|
}
|
|
100% {color: pink;text-shadow:
|
|
0 0 4px #fff,
|
|
0 0 11px #fff,
|
|
0 0 19px #fff,
|
|
0 0 40px #ff01ec,
|
|
0 0 80px #ff01ec,
|
|
0 0 90px #ff01ec,
|
|
0 0 100px #ff01ec,
|
|
0 0 150px #ff01ec;
|
|
}
|
|
20%, 24%, 55% {color: cyan;
|
|
text-shadow: none;
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes blink {
|
|
0% { color: white;text-shadow:
|
|
0 0 4px #fff,
|
|
0 0 11px #fff,
|
|
0 0 19px #fff,
|
|
0 0 40px #ff01ec,
|
|
0 0 80px #ff01ec,
|
|
0 0 90px #ff01ec,
|
|
0 0 100px #ff01ec,
|
|
0 0 150px #ff01ec;
|
|
}
|
|
18% { color: white;text-shadow:
|
|
0 0 4px #fff,
|
|
0 0 11px #fff,
|
|
0 0 19px #fff,
|
|
0 0 40px #ff01ec,
|
|
0 0 80px #ff01ec,
|
|
0 0 90px #ff01ec,
|
|
0 0 100px #ff01ec,
|
|
0 0 150px #ff01ec;
|
|
}
|
|
22% {color: white; text-shadow:
|
|
0 0 4px #fff,
|
|
0 0 11px #fff,
|
|
0 0 19px #fff,
|
|
0 0 40px #0fa,
|
|
0 0 80px #0fa,
|
|
0 0 90px #0fa,
|
|
0 0 100px #0fa,
|
|
0 0 150px #0fa;
|
|
}
|
|
25% {color: white;text-shadow:
|
|
0 0 4px #fff,
|
|
0 0 11px #fff,
|
|
0 0 19px #fff,
|
|
0 0 40px #ff01ec,
|
|
0 0 80px #ff01ec,
|
|
0 0 90px #ff01ec,
|
|
0 0 100px #ff01ec,
|
|
0 0 150px #ff01ec;
|
|
}
|
|
53% {color: pink;text-shadow:
|
|
0 0 4px #fff,
|
|
0 0 11px #fff,
|
|
0 0 19px #fff,
|
|
0 0 40px #0fa,
|
|
0 0 80px #0fa,
|
|
0 0 90px #0fa,
|
|
0 0 100px #0fa,
|
|
0 0 150px #0fa;
|
|
}
|
|
57% {color: pink;text-shadow:
|
|
0 0 4px #fff,
|
|
0 0 11px #fff,
|
|
0 0 19px #fff,
|
|
0 0 40px #ff01ec,
|
|
0 0 80px #ff01ec,
|
|
0 0 90px #ff01ec,
|
|
0 0 100px #ff01ec,
|
|
0 0 150px #ff01ec;
|
|
}
|
|
100% {color: pink;text-shadow:
|
|
0 0 4px #fff,
|
|
0 0 11px #fff,
|
|
0 0 19px #fff,
|
|
0 0 40px #ff01ec,
|
|
0 0 80px #ff01ec,
|
|
0 0 90px #ff01ec,
|
|
0 0 100px #ff01ec,
|
|
0 0 150px #ff01ec;
|
|
}
|
|
20%, 24%, 55% {color: white;
|
|
text-shadow: none;
|
|
}
|
|
from {
|
|
transform: perspective(1200px) translate3d(10rem,10px,10rem) scale(150%) rotateX(75deg) rotateZ(220deg);
|
|
}
|
|
to {
|
|
transform: perspective(800px) translate3d(10rem,10px,30rem) scale(150%) rotateX(75deg) rotateZ(370deg);
|
|
}
|
|
} |