main
  header
    h1.emotion :(
  p.description Your PC ran into a problem and needs to restart.  We're just collecting some error info, and then we'll restart for you.
    span(role="progress")  (0% complete)
  footer
    p
      small If you'd like to know more, you can search online later for this error:
        span  HAL_INITIALIZATION_FAILED
    
View Compiled
@import "compass/css3";

$primaryColour: #008CFF;
$textColour: #FFF;

// Icons
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css");

%light {
  font-family: "Segoe UI Light";
  font-weight: 300;
}

%visuallyhidden {
  border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	left: -500%;
}

%padding {
  padding: 0 2rem;
}

h1, h2, h3, h4, h5, h6 {
  @extend %light;
}

body {
  font-family: "Segoe UI";
  color: $textColour;
  background: $primaryColour;
  margin: 0;
}

main {
  margin: 4% 35%;
}

.emotion {
  font-size: 8em;
  margin: 0;
}

.description {
  font-size: 1.4em;
  margin-bottom: 3em;
}

footer {
  small {
    font-size: 0.8em;
  }
}
View Compiled
Rerun