/*************************************
* Copyright 2016 elementary LLC.   *
* This file is part of elementary.io *
*************************************/

nav {
  color: #fff;
  fill: #fff;
  position: absolute;
  width: 100%;
  z-index: 3;
}

nav > ul > li > a:focus {
  color: #1f1f1f;
  fill: #1f1f1f;
}

footer ul li a:focus i.fa {
  color: #1f1f1f;
  text-shadow: 0 1px 6px #fff;
}

/*********
* Button *
*********/

.dark button.suggested-action,
.dark .button.suggested-action {
  border: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.15),
    0 1px 0 0 rgba(0, 0, 0, 0.15);
}

.dark button.suggested-action:active,
.dark .button.suggested-action:active {
  background-color: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.25),
    0 2px 0 0 rgba(255, 255, 255, 0.1);
}

/*******
* Hero *
*******/

section.hero {
  background-color: #4d4267;
  background-image: radial-gradient(#5d4e75 0%, #4d4267 100%);
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  padding: 120px 0 64px;
  max-width: 100%;
  position: relative;
}

section.hero::before {
  background-image:
    linear-gradient(
      0deg,
      transparent 0%,
      transparent 18px,
      rgba(255, 255, 255, 0.04) 18px,
      rgba(255, 255, 255, 0.04) 20px,
      transparent 20px,
      transparent 38px,
      rgba(255, 255, 255, 0.02) 38px,
      rgba(255, 255, 255, 0.02) 40px,
      transparent 40px,
      transparent 58px,
      rgba(255, 255, 255, 0.02) 58px,
      rgba(255, 255, 255, 0.02) 60px,
      transparent 60px,
      transparent 78px,
      rgba(255, 255, 255, 0.02) 78px,
      rgba(255, 255, 255, 0.02) 80px,
      transparent 80px,
      transparent 98px,
      rgba(255, 255, 255, 0.02) 98px,
      rgba(255, 255, 255, 0.02) 100px
    ),
    linear-gradient(
      -90deg,
      transparent 0%,
      transparent 18px,
      rgba(255, 255, 255, 0.04) 18px,
      rgba(255, 255, 255, 0.04) 20px,
      transparent 20px,
      transparent 38px,
      rgba(255, 255, 255, 0.02) 38px,
      rgba(255, 255, 255, 0.02) 40px,
      transparent 40px,
      transparent 58px,
      rgba(255, 255, 255, 0.02) 58px,
      rgba(255, 255, 255, 0.02) 60px,
      transparent 60px,
      transparent 78px,
      rgba(255, 255, 255, 0.02) 78px,
      rgba(255, 255, 255, 0.02) 80px,
      transparent 80px,
      transparent 98px,
      rgba(255, 255, 255, 0.02) 98px,
      rgba(255, 255, 255, 0.02) 100px
    );
  background-size: 100px 100px;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

section.hero > div {
  position: relative;
}

section.hero .button.suggested-action {
  max-width: 100%;
}

section.hero .small-label a {
  color: inherit;
  font-weight: bold;
}

section.hero .small-label a:hover {
  text-decoration: underline;
}

/*************
* Code Block *
**************/

code,
pre {
  background: #fdf6e3;
  border-radius: 3px;
  color: #657b83;
  font-family: "Roboto Mono", monospace;
  font-size: 90%;
  text-align: justify;
}

pre {
  overflow: auto;
  padding: 8px;
}

pre > code {
  border: none;
  padding: 0;
  white-space: pre;
}

pre.highlighted {
  border: none;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
  padding: 0;
}

pre.highlighted code {
  border-radius: 0 3px 3px 0;
  line-height: 1.5em;
}

pre.highlighted .pre-numbering {
  background-color: #eee8d5;
  border-radius: 3px 0 0 3px;
  color: #9faaa9;
  float: left;
  font-size: 90%;
  line-height: 1.5em;
  list-style: none;
  margin: 0;
  min-width: 2.5em;
  padding: 0.5em;
  text-align: right;
  user-select: none;
}

/*******
* Other *
*******/

@media only screen and (min-width: 640px) {
  .grid .grid .half {
    text-align: center;
  }
}

.third .fa,
.third .fab {
  color: #4d4267;
}

footer,
.grey {
  background-color: #fafafa;
}

/******************
* Loki Beta Popup *
******************/

.modal p {
  margin: auto;
}

.modal .row.actions .column {
  width: 200px;
}

.modal .row.actions .column:first-of-type a {
  width: 100%;
  margin: 0;
}
