@font-face {
	font-family: PixelOperator8-Bold;
	src: url("https://roachbottle.neocities.org/PixelOperator8-Bold.ttf");
}
body { 
font-family: PixelOperator8-Bold;
background: url(https://roachbottle.neocities.org/tenna%20stuff/175637.gif);
background-attachment: cover;
cursor: url(https://roachbottle.neocities.org/tenna%20stuff/84442.png), default !important;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
	margin: 10px 8px 16px 8px;
font-family: PixelOperator8-Bold;
  display: inline-block;
	width: 200px;
	height: 50px;
	background-color: black;
	color: white;
}
.collapsible:hover {
	cursor: url(https://roachbottle.neocities.org/tenna%20stuff/80898.png), pointer;
}
a:hover {
	cursor: url(https://roachbottle.neocities.org/tenna%20stuff/80898.png), pointer;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}
.box {
  overflow-y: scroll;
	top: 30%;
	width: 100px;
	height: 100px;
	background: white;
	float: left;
	position: absolute;
} 
.nav {
	display: inline-block;
	width: 800px;
	height: 100px;
	background: url(https://roachbottle.neocities.org/tenna%20stuff/greenroom.png);
	background-size: 100% 100%;
	position: relative;
	border-width: 5px;
  border-spacing: 2px;
  border-style: outset;
  border-color: grey;
  overflow-y: scroll;
} 
/* Style the collapsible content. Note: hidden by default */
.content {
  text-align: center;
  padding: 0 18px;
  display: none;
  height: 200px; 
  width: 550px;
  overflow: hidden;
  background-color: white;
  color: black;
  border-color: grey;
  border-style: outset;
  overflow-y: scroll;
}

  /* Filters */
#static,
#flickering,
#vhsFilter,
#vhsFilter2,
#screendoorEffect {
overflow: hidden;
	  z-index: 9999;
  left: 33%;
    top: 64%;
  width: 420px;
  border-style: transparent;
  height: 290px;
    border-radius: 20% 30% 32% 35% / 12% 12% 52% 35%;
	transform: rotate(-6deg); 
	transform-origin: bottom center;
	position: absolute;
}
#curvature {
  width: 649px;
  height: 492px;
  border: 10px;
  border-color: hidden;
}
#static {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
}
#vhsFilter {
  z-index: 3;
  opacity: 0.03;
  pointer-events: none;
  visibility: hidden;
}
#vhsFilter2 {
  z-index: 5;
  opacity: 0.15;
  pointer-events: none;
  visibility: hidden;
}
#curvature {
  z-index: 5;
  pointer-events: none;
}
#screendoorEffect {
  border-top: 1px hidden;
  border-bottom: 1px hidden;
  position: absolute;
  z-index: 5;
  pointer-events: none;
}
#screendoorEffect::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.10) 50%),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.06),
      rgba(0, 255, 0, 0.02),
      rgba(0, 0, 255, 0.06)
    );
  z-index: 4;
  background-size: 100% 2px, 2px 100%;
  pointer-events: none;

}
#screendoorEffect::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 5;
  pointer-events: none;
    animation: flicker 0.15s infinite;
}
#flickering {
  animation: flicker 0.15s infinite;
  background: rgba(18, 16, 16, 0.1);
  display: none;
  pointer-events: none;
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
@keyframes flicker {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.33891;
  }
  30% {
    opacity: 0.55583;
  }
  35% {
    opacity: 0.57807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.54693;
  }
  50% {
    opacity: 0.56019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.51988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.41428;
  }
  85% {
    opacity: 0.40419;
  }
  90% {
    opacity: 0.2003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}



.television__screen {
  z-index: 4;
  left: 33%;
    top: 63%;
  margin: 0 auto;
  display: block;
border-style: none;
   position: absolute !important;
   padding: 0;

   
}

.television__channels-wrapper {
   width: 70px;
   height: 190px;
   background-color: #ce2350;
   border-radius: 48px;
   position: relative;
   top: 200px;
   float: right;
}

.television__channels {
   padding: 0;
}

.television__channel {
   list-style-type: none;
   background-color: #F8CA00;
   width: 25px;
   height: 25px;
   margin: 5px;
   float: left;
   position: relative;
        clip-path: polygon(50% 0,79% 90%,2% 35%,98% 35%,21% 90%); 
}

.television__channel a {
   display: block;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #F8CA00;
   width: 12px;
   height: 12px;
   border-radius: 50%;
}
.television__channel, .television_channel a:hover {
	cursor: url(https://roachbottle.neocities.org/tenna%20stuff/80898.png), pointer;
}
.television__channel a:active {
   box-shadow: inset rgba(255,255,255,0.6) 0 2px 2px,
               inset rgba(0,0,0,0.15) 0 -2px 5px, /* inner shadow */
          rgba(100,100,100,0.6) 0 2px 1px,
               rgba(100,100,100,0.6) 0 2px 1px; /* color border */
			   
}

#crtOutput,
#crtOutputNonJS {
  z-index: 0;
  width: 100%;
  height: 100%;
  transition-duration: 0.5s;
}
#crtOutputNonJS {
  filter: saturate(150%) contrast(110%) brightness(110%) blur(0.6px);
}