style.css

@font-face {
  font-family: 'roboto';
  src: url('font/roboto-bold-webfont.eot'); /* IE9 Compat Modes */
  src: url('font/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font/roboto-bold-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('font/roboto-bold-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('font/roboto-bold-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('font/roboto-bold-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

* { box-sizing: border-box; }

body {
  background: rgb(15,15,15);
  font-family: "Roboto", Fallback, sans-serif;
  font-size: 13px;
  color: white;
}

div {
  margin-left: 5px;
  margin-right: 5px;
}

.flex {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

#main, #arcane-charge {
	padding-top: 2px;
	padding-bottom: 4px;
}

#arcane-charge {
	padding-top: 2px;
	padding-bottom: 4px;
}

#charge-diamond, #charge-phirius {
	padding-left: 14px;
}

#charge-calc {
	padding-left: 20px;
}

#calc {
	padding-top: 22px;
	padding-bottom: 22px;	
}

#results {
	padding-top: 22px;
	padding-bottom: 22px;	
}

input {
	max-width: 180px;
	margin: auto;
	text-align: center;
}

#calc-button {
	max-width:160px;
}

.lrpaddingsmall{
	padding-left: 5px;
	padding-right: 5px;
}

.w3-section {
	margin-top: 12px!important;
	margin-bottom: 12px!important;
}

.title {
	font-size: 14px;
	font-weight: bold;
	color: rgb(240,175,0);
}

.border-rounded-medium {
	border-radius: 8px;
	border-color: rgb(240,175,0)!important;
}

.border-rounded-small {
	border-radius: 5px;
}

.my-dark-grey {
	background-color: rgb(20,20,20);
}

.my-dark-gold {
	color: rgb(240,175,0)!important;
}