body {
	width: 100wh;
	height: 90vh;
	color: #fff;
	background: linear-gradient(0deg, #A166FF 10%, #161E2D);
	background-size: 400% 400%;
  font-family: 'EmberRegular', 'Arial', 'sans-serif';
}

@font-face {
  font-family: 'EmberBold';
  src: url(ember-bold.ttf);
}

@font-face {
  font-family: 'EmberHeavy';
  src: url(ember-heavy.ttf);
}

@font-face {
  font-family: 'EmberRegular';
  src: url(ember-regular.ttf);
}

h1,
h6 {
	font-weight: 300;
  font-family: 'EmberBold';
	text-align: center;
	position: absolute;
	top: 45%;
	right: 0;
	left: 0;
}

.ug-title {
  color: #FFFFFF;
  font-size: 2rem;
  padding-top: 20px;
}

.ug-name {
  color: #A166FF;
  font-family: 'EmberHeavy';
  font-weight: 600;
  font-size: 3.5rem;
  padding-top: 0px;
}

.bar {
  padding-bottom: 30px;
}

.btn {
  width: 50%;
  padding-top: 10px;
  padding-bottom: 10px;
  
}

.btn:hover {
  background-color: #161E2D;
  color: #FFFFFF;
  border-color: #111;
}

.element {
	margin: 0 auto;
	width: 150px;
	height: 150px;
}

.backdrop {
  -moz-box-shadow: 0px 6px 5px #111; 
  -webkit-box-shadow: 0px 6px 5px #111; 
  box-shadow: 0px 2px 10px #111; 
  -moz-border-radius:50%; 
  -webkit-border-radius:50%; 
  border-radius:50%;
  width: 240px;
  height: 240px;
}

.icon {
  width: 30px;
  height: 30px;
  padding-right: 10px;
  display: inline-block;
  overflow: hidden;
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}