Styles for website (along with the bootstrap in the html)

styles.css

/* Basic reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
	/* Better text styling */
	font: bold 14px Arial, sans-serif;
}

.header img {
    
	background: linear-gradient(#202b5b, #142260) !important;
    height: 150px;
    width: 300px;
    border-radius: 50px;
    
    display: block;
    margin: 0 auto;
    margin-top: 10px;
}



/* Finally adding some IE9 fallbacks for gradients to finish things up */

/* A nice BG gradient */
html {
	height: 100%;
	background: #FFFF66;
	background: radial-gradient(circle, #FFFF66 20%, #ccc);
	background-size: cover;
}

.navagation span {
    float: right;
}


/* Inset shadow on the screen to create indent */
.screen {
	height: 450px;
	width: 210px;
	
	float: right;
	word-wrap: break-word;
	padding: 0 10px;
	
	background: rgba(0, 0, 0, 0.2);
	border-radius: 3px;
	box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
	
	/* Typography */
	font-size: 17px;
	line-height: 40px;
	color: white;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	text-align: right;
	letter-spacing: 1px;
}

.navagation {
    margin-left: 10px;
}

/* Using box shadows to create 3D effects */
#object-calculator {
	width: 1100px;
	height: 700px;
	
	margin: 0;
	padding: 20px 20px 9px;
	background: linear-gradient(#FFF0F5, #fff);
	border-radius: 3px;
	box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}





/* Clear floats */
.keys, .navagation {overflow: hidden;}

/* Applying same to the keys */

.navagation span {
    width: 80px;
    height: 50px;
}

#main span {
	width: 110px;
	height: 150px;
    color: white;
    background: #1a1a1a;
    box-shadow: 0 4px black;
    
}


.keys span, .navagtion span.clear, .navagation span {
	float: left;
	position: relative;
	top: 0;
	
	cursor: pointer;
	
	
	background: white;
	border-radius: 3px;
	box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
	
	margin: 0 7px 11px 0;
	
	color: #888;
	line-height: 36px;
	text-align: center;
	
	/* prevent selection of text inside keys */
	user-select: none;
	
	/* Smoothing out hover and active states using css3 transitions */
	transition: all 0.2s ease;
}

/* Remove right margins from operator keys */
/* style different type of keys (operators/evaluate/clear) differently */
span.operator {
	background: #000000;
    width: 75px;
}
span.eval {
	background: #e6e6e6;
	box-shadow: 0px 4px grey;
	color: black;
    width: 110px;
}

.navagation span {
    width: 100px !important;
	height: 50px;
}

span.clear {
	background: #ff9fa8;
	box-shadow: 0px 4px #ff7c87;
	color: white;
}

#general, #lights, #devices, #computers, #kitchen, #washroom, #home {
    display: none;
}
/* Some hover effects */
.keys span:hover {
	background: #9c89f6;
	box-shadow: 0px 4px #6b54d3;
	color: white;
}
span.eval:hover {
	background: black;
	box-shadow: 0px 4px grey;
	color: white;
}
span.clear:hover {
	background: #f68991;
	box-shadow: 0px 4px #d3545d;
	color: white;
}

/* Simulating "pressed" effect on active state of the keys by removing the box-shadow and moving the keys down a bit */
span:active {
	box-shadow: 0px 0px #6b54d3;
	top: 4px;
}
span.eval:active {
	box-shadow: 0px 0px grey;
	top: 4px;
}
span.clear:active {
	top: 4px;
	box-shadow: 0px 0px #d3545d;
}

#main span {
    pointer-events: none;
}