@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");
*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  font-family: 'Roboto';
  padding: 0;
  margin: 0;
  font-size: 16px;
  overflow: hidden;
}

.message {
  background: #eee;
  box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.31);
  border-radius: 1em;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  max-width: 40em;
  margin: 2em auto;
}
.message header {
  background: #9E9E9E;
  width: 100%;
  padding: .5em;
}
.message i:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f128';
  font-style: normal;
  color: #eee;
  background: #353535;
  padding: 1em .75em;
  font-size: 1.25em;
  display: block;
  width: 2.5em;
  height: 100%;
  text-align: center;
}
.message h2 {
  margin: .75em;
  font-size: 1.25em;
  position: relative;
  display: block;
  width: calc(100% - 2.5em - 1.5em);
}
.message h2 span {
  color: #9E9E9E;
}
.message h2:after {
  content: '';
  border-bottom: 0.1em solid #9E9E9E;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.error header {
  background: #D50000;
}
.error i:after {
  background: #3d1d1d;
  color: #ff5656;
  content: "\f12a";
}
.error h2 span {
  color: #D50000;
}
.error h2:after {
  border-bottom: 0.1em solid #D50000;
}

.warning header {
  background: #FF6F00;
}
.warning i:after {
  background: #432e1d;
  color: #ffb780;
  content: "\f071";
}
.warning h2 span {
  color: #FF6F00;
}
.warning h2:after {
  border-bottom: 0.1em solid #FF6F00;
}

.neutral header {
  background: #448AFF;
}
.neutral i:after {
  background: #273243;
  color: #c4daff;
  content: "\f05a";
}
.neutral h2 span {
  color: #448AFF;
}
.neutral h2:after {
  border-bottom: 0.1em solid #448AFF;
}

.success header {
  background: #388E3C;
}
.success i:after {
  background: #253226;
  color: #7bcb7e;
  content: "\f058";
}
.success h2 span {
  color: #388E3C;
}
.success h2:after {
  border-bottom: 0.1em solid #388E3C;
}

.uhm header {
  background: #c1610d;
}
.uhm i:after {
  background: #3a2b1f;
  color: #f4a25a;
  content: "\f2fe";
}
.uhm h2 span {
  color: #c1610d;
}
.uhm h2:after {
  border-bottom: 0.1em solid #c1610d;
}