// ============================================================================= // Light theme 404 page // =============================================================================

// Variables // =============================================================================

// Shades of gray

$black: #000; $gray-darkest: #121111; $gray-darker: lighten($gray-darkest, 15); $gray-dark: lighten($gray-darkest, 30); $gray: lighten($gray-darkest, 45); $gray-light: lighten($gray-darkest, 60); $gray-lighter: lighten($gray-darkest, 75); $gray-lightest: lighten($gray-darkest, 85); $white: fff;

// Font colors

$base-font-color: $gray-dark; $base-accent-color: $gray-dark; $base-accent-highlighted-color: darken($base-accent-color, 15);

// Border color

$base-border-color: $gray-lightest;

// Page specific colors

$body-background: $white; $header-logo-color: $black; $header-link-color: $gray-darker; $header-link-color-hover: $gray-darkest; $article-header-title-color: $gray-darkest; $article-header-description-color: $gray-dark; $article-post-titles-color: $gray-darkest; $article-footer-color: $gray-light; $article-footer-link-color: $gray-dark; $article-footer-link-color-hover: $gray-darkest; $article-paginator-color-hover: $gray-darkest;

// Imports // =============================================================================

// Vendors

@import “vendor/normalize”;

// Settings

@import “variables”; @import “mixins”; @import “base”;

// Styles

.notfound-wrapper {

position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;

}

.notfound-content {

flex: auto;
max-width: 250px;
text-align: center;
h1 {
  display: inline-block;
  margin-bottom: 4px;
  font-family: $serif;
  font-size: 36px;
  a {
    color: $gray-darkest;
    text-decoration: none;
  }
}
p {
  display: block;
  text-align: center;
  a {
    color: $gray-darkest;
  }
}

}