style.css

* {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

/*screen width 1644px+*/

@media screen and (min-width:1644px) {
	#video {
		max-width: 700px;
		width: 40%;
		height: 400px;
		margin: 0 auto;
		margin-bottom: 2px;
		background-color: rgb(200, 200, 200);
		border: solid 1px rgb(0, 0, 0);
	}

	.buttons {
		margin: 0 auto;
		text-align: center;
		width: 40%;

	}

	ul {
		margin: 5 auto;
		position: relative;
		padding: 0;
	}

	li {
		display: inline-block;
		position: relative;
	}

	.controls {
		width: 200px;
		height: 150px;
	}

	input {
		width: 15%;
		margin: 0 auto;
		position: relative;
	}

	#connect {
		max-width: 400px;
		width : 20%;
		height: 80px;
		display: block;
		margin: 0px auto;
		margin-top: 1px;
	}

	input {
		width: 85%;
		margin-right: 2px;
		display: inline;
		float: right;
	}

	label {
		width: auto;
		margin: 0px auto;
		margin-left: 2px;
		display: inline;
		float: left;
	}

	#send {
		float: right;
		margin-top: 2px;
		margin-right: 0px;
		clear: right;
	}
}

/*screen width 1280-1643px*/

@media screen and (min-width:1280px) and (max-width: 1643px) {
	#video {
		max-width: 700px;
		width: 50%;
		height: 400px;
		margin: 0 auto;
		margin-bottom: 2px;
		background-color: rgb(200, 200, 200);
		border: solid 1px rgb(0, 0, 0);
	}

	.buttons {
		margin: 0 auto;
		text-align: center;
		width: 700px;

	}

	ul {
		margin: 5 auto;
		position: relative;
		padding: 0;
	}

	li {
		display: inline-block;
		position: relative;
	}

	.controls {
		width: 200px;
		height: 150px;
	}

	#connect {
		width : 20%;
		height: 80px;
		display: block;
		margin: 0px auto;
		margin-top: 1px;
	}

	input {
		width: 85%;
		margin-right: 2px;
		display: inline;
		float: right;
	}

	label {
		width: auto;
		margin: 0px auto;
		margin-left: 2px;
		display: inline;
		float: left;
	}

	#send {
		float: right;
		margin-top: 2px;
		margin-right: 0px;
		clear: right;
	}
}

/*screen width 980-1279px*/

@media screen and (min-width:980px) and (max-width: 1279px) {
	#video {
		width: 70%;
		height: 400px;
		margin: 0 auto;
		margin-bottom: 2px;
		background-color: rgb(200, 200, 200);
		border: solid 1px rgb(0, 0, 0);
	}

	.buttons {
		margin: 0 auto;
		text-align: center;
		width: 800px;
	}

	ul {
		margin: 5 auto;
		position: relative;
		padding: 0;
	}

	li {
		display: inline-block;
		position: relative;
	}

	.controls {
		width: 200px;
		height: 150px;
	}

	#connect {
		width : 30%;
		height: 80px;
		display: block;
		margin: 0px auto;
		margin-top: 1px;
	}

	input {
		width: 85%;
		margin-right: 2px;
		display: inline;
		float: right;
	}

	label {
		width: auto;
		margin: 0px auto;
		margin-left: 2px;
		display: inline;
		float: left;
	}

	#send {
		float: right;
		margin-top: 2px;
		margin-right: 0px;
		clear: right;
	}
}

/*screen width 743-979px*/

@media screen and (min-width:743px) and (max-width: 979px){
	#video {
		width: 90%;
		height: 400px;
		margin: 0 auto;
		margin-bottom: 2px;
		background-color: rgb(200, 200, 200);
		border: solid 1px rgb(0, 0, 0);
	}

	.buttons {
		margin: 0 auto;
		text-align: center;
		width: 650px;

	}

	ul {
		margin: 5 auto;
		position: relative;
		padding: 0;
	}

	li {
		display: inline-block;
		position: relative;
	}

	.controls {
		width: 175px;
		height: 100px;
	}

	#connect {
		width : 50%;
		height: 80px;
		display: block;
		margin: 0px auto;
		margin-top: 1px;
	}

	input {
		width: 85%;
		margin-right: 2px;
		display: inline;
		float: right;
	}

	label {
		width: auto;
		margin: 0px auto;
		margin-left: 2px;
		display: inline;
		float: left;
	}

	#send {
		float: right;
		margin-top: 2px;
		margin-right: 0px;
		clear: right;
	}
}

/*screen width 600-742px*/

@media screen and (min-width:600px) and (max-width: 742px){
	#video {
		width: 90%;
		height: 400px;
		margin: 0 auto;
		margin-bottom: 2px;
		background-color: rgb(200, 200, 200);
		border: solid 1px rgb(0, 0, 0);
	}

	.buttons {
		margin: 0 auto;
		text-align: center;
		width: 90%;

	}

	ul {
		margin: 5 auto;
		position: relative;
		padding: 0;
	}

	li {
		display: inline-block;
		position: relative;
	}

	.controls {
		width: 160px;
		height: 100px;
	}

	#connect {
		width : 50%;
		height: 80px;
		display: block;
		margin: 0px auto;
		margin-top: 1px;
	}

	input {
		width: 85%;
		margin-right: 2px;
		display: inline;
		float: right;
	}

	label {
		width: auto;
		margin: 0px auto;
		margin-left: 2px;
		display: inline;
		float: left;
	}

	#send {
		float: right;
		margin-top: 2px;
		margin-right: 0px;
		clear: right;
	}
}

/*screen width 300-599px*/

@media screen and (min-width:300px) and (max-width: 599px){
	#video {
		width: 100%;
		height: 400px;
		margin: 0 auto;
		margin-bottom: 2px;
		background-color: rgb(200, 200, 200);
		border: solid 1px rgb(0, 0, 0);
	}

	.buttons {
		margin: 0 auto;
		/*border: solid 1px rgb(0, 0, 0);*/
		text-align: center;
		width: 280px;

	}

	ul {
		margin: 5 auto;
		position: relative;
		padding: 0;
		list-style-type: none;
	}

	li {
		position: relative;
		display: inline-block;
	}

	.controls {
		width: 90px;
		height: 50px;
	}

	#connect {
	width : 100%;
	height: 80px;
	margin-top: 1px;
	float: right;
	display: block;
	
	}

	input {
		width: 85%;
		margin-right: 2px;
		display: inline;
		float: right;
	}

	label {
		width: auto;
		margin: 0px auto;
		margin-left: 2px;
		display: inline;
		float: left;
	}

	#send {
		float: right;
		margin-top: 2px;
		margin-right: 0px;
		clear: right;
	}
}