/* Imports */
/*@import url(https://fonts.googleapis.com/css?family=PT+Mono);*/
/*@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700');*/
@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400,700');

/* Variables */
:root {
  --border-color: #CCC;
  --better-black: #24292E;
  --better-white: #C8C9CB;
  --main-color: firebrick;
  --main-hover-color: #C4191C;
  --main-background: linear-gradient(90deg, #2E94B9 0%, #27b1b1 100%);
}

/* Generic */
::-webkit-resizer {
  display: none;
  cursor: pointer;
}
::-webkit-selection {
  text-shadow: none;
  text-decoration: none;
  background: rgba(231, 231, 0, 0.45);
}
::-moz-selection {
  text-shadow: none;
  text-decoration: none;
  background: rgba(231, 231, 0, 0.45);
}
::selection {
  text-shadow: none;
  text-decoration: none;
  background: rgba(231, 231, 0, 0.45);
}

/* Body */
body {
  /*font-family: 'PT Mono', monospace, serif;*/
  /*font-family: 'Source Code Pro', monospace;*/
  font-family: 'Fira Mono', monospace;
  background: #FFF;
  text-align: left;
  margin: 0;
}
body h1 {
  font-size: 1.6em;
}
body h2 {
  font-size: 1.4em;
}
body h3 {
  font-size: 1.225em;
}
body article {
  width: 85%;
  margin: 0 auto;
  max-width: 750px;
}
body article a {
  color: var(--main-color);
}

/* Navigation */
header {
  margin: 0;
  display: flex;
  padding: 15px;
  align-items: center;
  justify-content: space-between;
  background-color: var(--better-black);
}
header a {
  text-decoration: none;
}
header h1 {
  margin: 0;
  padding: 5px;
  font-size: 1.4em;
  align-self: flex-start;
  color: var(--better-white);
}
header a h1:hover {
  color: white;
}

img#logo {
  height: 25px;
}

.navigation {
  margin: 0;
  padding: 0 12px;
}
.navigation ul {
  margin: 0;
  padding: 15px 0;
  text-align: left;
}
.navigation li {
  padding: 4px 10px;
  display: inline-block;
  list-style: none;
}
.navigation li a {
  padding: 4px;
  text-decoration: none;
  color: var(--better-black);
}
.navigation li a:hover {
  color: white;
  border-radius: 3px;
  background-color: var(--better-black);
}
.navigation li b {
  padding: 4px;
  color: var(--better-black);
  border-bottom: 2px solid var(--better-black);
}

input:focus, select:focus, textarea:focus, button:focus {
  outline: none;
}

/* Extras */
.topstrip {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 2px;
  width: 100%;
  background-color: var(--better-black);
}

/* --- iOS | Portrait --- */
@media only screen and (min-device-width: 320px) and (max-device-width: 667px) {
  input[type="text"],
  input[type="button"],
  input[type="submit"] {
    -webkit-appearance: none;
    border-radius: 7px;
  }
}

@media (max-width: 750px) and (min-width: 320px) {
  body article {
    width: 90%;
  }

  .navigation ul {
    padding: 20px 0;
    text-align: center;
  }

  .navigation li {
    padding: 8px;
  }
}