@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);
  }
}