body
{
	background-image: linear-gradient(#ffffff, #b6ffee );
	height:parent;
}

.header h1
{
	height:125px;
	background-color:#49d0ff;
	color:#ffffff;
	font-size:75px;
	text-align:center;
	margin-top:-5px;
	padding-top:20px;
	font-family:Verdana;
	border-width:20px;
	border-style:solid;
	border-color:#000000;
	border-bottom-right-radius:125px;
	border-top-left-radius:125px;
}

.switch
{
	margin-top:75px;
}

.switch legend input
{
	background-color:#6facfa;
	color:#ffffff;
	border-radius:50%;
	border-width:2px;
	border-color:#000000;
	height:75px;
	width:100px;
	font-size:25px;
	text-align:center;
	transition:background-color .5s;
}
.switch legend input:hover
{
	cursor:pointer;
	background-color:#0800ff;
}

.switch fieldset
{
	margin:auto;
	width:25%;
	border-width:10px;
	border-top-style:double;
	border-radius:20px;
	border-color:#134b5f;
	font-size:20px;
	color:#134b5f;
	background-color:#49d0ff;
}


.box
{
	margin-left: 20px;
}

.oval
{
	display:inline-block;
	width:100px;
	height:50px;
	border-radius:25px;
	border-width:2px;
	border-style:solid;
	border-color:#000000;
	background-color: #ff3e00 ;
	transition: all 0.3s ease-in-out;
}
.oval:hover
{
	cursor:pointer;
}
.oval.active
{
	background-color: #5dff00 ;
}

.circle
{
	height:40px;
	width:40px;
	border-radius:100%;
	background-color:#ffffff;
	margin-top:5px;
	margin-left:5px;
	text-align:center;
	transition: all 0.3s ease-in-out;
}

.oval.active > .circle
{
	margin-left:55px;
	background-color:#000000;
}

.status
{
	margin-left:20px;
	font-size:30px;
	color:#ff0000;
	background-color:#cafefc;
	padding:3px;
	border-width:2px;
	border-style:solid;
	border-color:#000000;
	border-radius:5px;
}
.status.active
{
	color:#00ff00;
}

.footer
{
	text-align: center;
	background-color:#000000;
	color:#ffffff;
	margin-top:50px;
	padding:5px;
}

.copy
{
	font-size: 15px;
}

.contact p
{
	margin-top:-15px;
}

.social a
{
	text-decoration: none;
	color: #b6ffee ;
	font-size: 30px;
	margin-left: 20px;
}

@media screen and (max-width: 600px)
{
	.header h1
	{
		height:50px;
		font-size:20px;
		text-align:center;
		margin-top:-5px;
		padding-top:20px;
		font-family:Verdana;
		border-width:10px;
		border-style:solid;
		border-bottom-right-radius:25px;
		border-top-left-radius:25px;
	}

	.switch
	{
		margin-top:15%;
	}

	.switch legend input
	{
		border-radius:50%;
		border-width:2px;
		border-color:#000000;
		width:30%;
		height:50px;
		font-size:100%;
		text-align:center;
		color:#000000;
		transition:background-color color .5s;
	}
	.switch legend input:hover
	{
		cursor:pointer;
		color:#000000;
		background-color:#6facfa;
	}

	.switch fieldset
	{
		margin:auto;
		width:80%;
		border-width:7px;
		border-top-style:double;
		border-radius:15px;
		font-size:15px;
	}

	.box
	{
		margin-left: 20%;
	}

	.oval
	{
		display:inline-block;
		width:100px;
		height:50px;
		border-radius:25px;
		border-width:2px;
		border-style:solid;
		border-color:#000000;
		background-color: #ff3e00 ;
		transition: all 0.3s ease-in-out;
	}
	.oval:hover
	{
		cursor:pointer;
	}
	.oval.active
	{
		background-color: #5dff00 ;
	}

	.circle
	{
		height:40px;
		width:40px;
		border-radius:100%;
		background-color:#ffffff;
		margin-top:5px;
		margin-left:5px;
		text-align:center;
		transition: all 0.3s ease-in-out;
	}

	.oval.active > .circle
	{
		margin-left:55px;
		background-color:#000000;
	}

	.status
	{
		margin-left:20px;
		font-size:30px;
		color:#ff0000;
		background-color:#cafefc;
		padding:3px;
		padding-right:5px;
		border-width:2px;
		border-style:solid;
		border-color:#000000;
		border-radius:5px;
	}
	.status.active
	{
		color:#00ff00;
	}

	.footer
	{
		text-align: center;
		background-color:#000000;
		color:#ffffff;
		margin-top:25px;
		padding:2px;
	}

	.copy
	{
		font-size: 15px;
	}

	.contact p
	{
		margin-top:-15px;
	}

	.social a
	{
		text-decoration: none;
		color: #b6ffee ;
		font-size: 30px;
		margin-left: 20px;
	}
}