/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */

body {
color:#FFFFFF;
background-color:#000000;
margin:0px;
font-family:Courier;
}

.dropbtn {
color:#FFFFFF;
background-color:#000000;
margin-top:20px;
font-family:Courier;
font-size:32px;
font-weight:bold;
border:none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #FFFFFF;
  color:#000000;
  z-index: 1;
}

.dropdown:hover .dropdown-content {display: block;}

.dropdown-content a{
   color:#000000;
   text-decoration:underline; 
   cursor: crosshair; 
}

.slider {
  -webkit-appearance: none;
  width: 25%;
  height: 5px;
  color: #000000;
  background: #000000;
   display:inline;
  outline-color: #FFFFFF;
  outline-style:solid;
  outline-width:thin;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 10px;
  background: #FFFFFF;
  outline: none;
  cursor: crosshair;
}

.slider::-webkit-slider-thumb {
 -webkit-appearance: none;
  width: 20px;
  height: 10px;
  background: #FFFFFF;
  outline: none;
  cursor: crosshair;
}

.sliderX {
  -webkit-appearance: none;
  width: 25%;
  height: 5px;
  color: #000000;
  background: #000000;
   display:inline;
  outline-color: #858585;
  outline-style:solid;
  outline-width:thin;
  pointer-events:none;
}

.sliderX::-moz-range-thumb {
  width: 20px;
  height: 10px;
  background: #858585;
  outline: none;
  cursor: crosshair;
}

.sliderX::-webkit-slider-thumb {
 -webkit-appearance: none;
  width: 20px;
  height: 10px;
  background: #858585;
  outline: none;
  cursor: crosshair;
}


.pcBack{
margin-top:20px;
padding-bottom:20px;
  width: 70%;
  padding-left:0%;
  display:flex;
  position:relative;
z-index:0;
}
.pcFront{
  width: 70%;
  padding-left:0%;
  display:flex;
  position:relative;

}

.secret{
display:none;
opacity:0;
}

#pController{
height:100%;
width:100%;
pointer-events:none;
}

#hController{
width:900px;
height:506px;
position:absolute;
}

#streamer{
height:100%;
width:100%;
}

#player{
height:100%;
width:100%;
}

#playerA{
height:100%;
width:100%;
}

#playerB{
height:100%;
width:100%;
}

.index {
position:absolute;
z-index:-1;
}

.gen{
color:#000000;
font-size:0;
overflow:hidden;
}

.button{
display:inline-block;
color:#FFFFFF;
text-decoration:none;
}
.button:hover{
   text-decoration:underline; 
   cursor: crosshair;               
}

.buttonX{
display:inline-block;
color:#858585;
text-decoration:none;
pointer-events:none;
}
.buttonY{
display:inline-block;
text-decoration:overline;  
pointer-events:none;
}
.buttonLabel{
display:inline-block;
color:#FFFFFF;
text-decoration:none;
pointer-events:none;
}

.columns {
  display: flex;
  max-width:1280px;
}

.columnsNU {
  display: flex; 
  position:relative;
  width:1280px;
}

.colA {
 position:relative;
  width:1280px;
}
.colB { 
  margin-left:150px;
}

.vidmixer {
  display:flex;
  position:relative;
   height: 100vh;
   width: 100vw;
}

.srcA {
    height: 100%;
    width: 100%;      
    border: none;
    position: absolute;      
}

.srcB {
    height: 100%;
    width: 100%;
    transform: scale(1.4);       
    border: none;
    position: absolute;      
}

.srcAb {
    border: none;
    position: absolute;
}

.srcKeyR {
    position: absolute;
    filter:url(#keyR);
}

.srcKeyG {
    position: absolute;
    filter:url(#keyG);
}

.srcKeyB {
    position: absolute;
    filter:url(#keyB);
}

.srcBlend {
    position: absolute;
    opacity:50%;
}

.srcOverlay {
    border: none;
    opacity: 0%;
    position: absolute;
    z-index:-1;
}

.hueNone {
position: absolute;
}
.hueA {
position: absolute;
filter:hue-rotate(var(--huey)) saturate(var(--saty));
}
.hueB {
position: absolute;
filter:invert(var(--invy));
}
.hue0 {
position: absolute;
filter:hue-rotate(0deg);
}
.hue90 {
filter:hue-rotate(90deg);
position: absolute;
}
.hue180 {
filter:hue-rotate(180deg);
position: absolute;
}
.hue270 {
filter:hue-rotate(270deg);
position: absolute;
}
.hueBW {
filter: grayscale(100%);
position: absolute;
}
.hueNeg {
filter: invert(100%);
position: absolute;
}

.info{
max-width: 1280px;}

#schedule{
width: 1280px;
height: 80px;
}

media-playlist {
width:100%;
height:100%;
--media-object-fit: cover;
}