*{
	margin:0;
	padding:0;
}

html{
	background:url('../img/bg.jpg') #1f2129;
	position:relative;
}

body{
	font:14px/1.3 'Segoe UI',Arial, sans-serif;
}

a, a:visited {
	text-decoration:none;
	outline:none;
	color:#54a6de;
}

a:hover{
	text-decoration:underline;
}

.main{
    display: grid;
    grid-auto-flow: column;
	justify-content: center;
	position: relative;
}


.bars{
	height: 212px;
	margin: 0 auto;
	position: relative;
	width: 228px;
}

.control{
	width:90px;
	height:90px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-45px 0 0 -45px;
}

.colorBar{
	width:20px;
	height:8px;
	position:absolute;
	opacity:0;
	-moz-transition:0.3s;
	-webkit-transition:0.3s;
	-o-transition:0.3s;
	transition:0.3s;
}

.colorBar.active{
	opacity:1;
}

.display {
	font-size: 40px;
    color: white;
    display: grid;
    grid-auto-columns: 60px;
    grid-auto-flow: column;
    column-gap: unset;
	justify-content: center;
	text-align: center;
}

.display > .field {
	font-family: 'Segment7Standard';
	color: #333;
	width: 120px;
	text-align: right;
}

.display > .field > .background {
	position: absolute;
	top: 0;
	z-index: -100;
}

.display > .field > .text {
    color: white;
    left: -49px;
    position: relative;
}

.display > .symbol {
	font-family: math;
    font-size: 30px;
	color: white;
	position: relative;
}

.top {
	display: grid;
    grid-auto-columns: 150px;
    grid-auto-flow: column;
	justify-content: center;
	text-align: center;
	place-items: center;
}

.top > h1 {
	font-size: 40px;
	color: white;
}

.top > img {
	width: 50px;
	height: 50px;
}

section {
	margin-bottom: 5px;
}