body {
  margin    : 0;
  padding   : 0;
  width     : 100%;
  height    : 100%;
  position  : absolute;
  top       : 0;
  right     : 0;
  bottom    : 0;
  left      : 0;
  overflow: hidden;
    background: -webkit-repeating-radial-gradient(0% 25%, circle, transparent, transparent 1px, rgba(0, 0, 0, 0.6) 1px, rgba(10, 0, 0, 0.6) 2px, transparent 1px);
     -webkit-animation: background-mover infinite linear var(--animation-time);
    overflow: hidden;

}


#viewport {
  width     : 50%;
  height    : 50%;
  margin    : -150px 0 0 -150px;
  /* border    : 1px solid #666; */
  overflow  : hidden;
}

/* set the default transition time */
:root {
  --animation-time: 12s;
	
	--animation-x: 0%;
	--animation-y: 0%;
	
}


#one, #two {
  width     : 200%;
  height    : 200%;
  margin    : 0 auto;
  position  : absolute;
  z-index   : -10;
}

@-webkit-keyframes anim {
  0%    { left: var(--animation-x); top: var(--animation-y); }
  50%   { left: var(--animation-x); top: var(--animation-y); transform: rotate(9deg)}
 
	100%  { left: var(--animation-x); top: var(--animation-y);}

}

    #videogoat{
        width: var(--br);
        position: relative;
        margin: 0 auto;
        opacity: 0.5;
        top:250px;
    }

@-webkit-keyframes anim-two {
  0%    { left: 0; top: -100%; }
  50%   { left: -25%; top: -62%;
          transform: skew(10deg,10deg);}
  100%  { left: 0; top: -25%;
          transform: skew(0deg,10deg);
  }
}

    @-webkit-keyframes background-mover {
        0% {left: 0; top:0;}
        50% { left:1; top: 0;}
        100{left:2; top:0;}
    }

#one {
  background: -webkit-repeating-linear-gradient(0% 25%, circle, transparent, transparent 1px, rgba(0, 0, 0, 0.6) 1px, rgba(10, 0, 0, 0.6) 2px, transparent 3px);
  -webkit-animation: anim infinite linear var(--animation-time);
    overflow: hidden;
}

#two {
  background: -webkit-repeating-radial-gradient(50% 50%, rectangle, transparent, transparent 1px, rgba(0, 0, 0, 0.6) 4px, rgba(0, 0, 0, 0.6) 2px, transparent 3px);
  -webkit-animation: anim-two infinite linear 5s alternate;
    overflow: hidden;
}

    /*#three{
        background-image: image('images/default.jpg');
        background: -webkit-repeating-radial-gradient(50% 50%, circle, transparent, transparent 5px, rgba(0, 0, 0, 0.6) 5px, rgba(0, 0, 0, 0.6) 1px, transparent 10px);
  -webkit-animation: anim-two infinite linear 15s alternate;
    overflow: hidden;
    } */

#helpButton{
float:right;
}


    #controls, #helpPanel{
        width: 100%;
		position: relative;
        display: inline-block;
        border: 4px groove #000;
        background-color: antiquewhite;
        word-wrap: break-word;
        padding: 2px;
        z-index: 200;
    }

.controlItem{
    text-align: center;
    width:20%;
    display: inline-block;
    position: relative;
}



@media only screen and (max-width: 600px) {
	.controlItem{
	width:100%;
	
	}
	
}