@background-colour: #000;
@text-colour: #FFF;
@link-color: #228B22;
@link-color-hover: #228B22;
@text-font: "Courier New", monospace;
@content-bg-colour: #FFF;
@content-fg-colour: #000;

a, .link {
  color: @link-color;
  text-decoration: none;
}

a:hover {
   color: @link-color-hover;
   font-weight: bold;
}

ul {
   list-style-type: disc;
}

/* View port stages */

.up-to-phone-portrait(@content) {
  @media (max-width: 600px) { 
     @content();
  }
}

.up-to-phone-landscape(@content) {
  @media (min-width: 601px) and (max-width: 900px) { 
     @content();
  }
}

.up-to-tablet-landscape(@content) {
  @media (min-width: 901px) and (max-width: 1250px) { 
     @content(); 
  }
}

.up-to-desktop(@content) {
  @media (min-width: 1251px) and (max-width: 1500px) { 
     @content(); 
  }
}

.large-desktop(@content) {
  @media (min-width: 1501px) { 
     @content(); 
  }
}

*,
::before,
::after {
    box-sizing: inherit;
}

.clearfix::after {
  display: block;
  content: " ";
  clear: both;
}

body * + * {

}

:root {
    background-position: center;
}

body {
    background: @background-colour;
    color: @text-colour;
    font-family: @text-font;
    line-height: 1.3;

    .up-to-phone-portrait({
      margin: 0em 1em;
      font-size: 1.0em;
    });

    .up-to-phone-landscape({
      margin: 0em 1em;
      font-size: 1.0em;
    });

    .up-to-tablet-landscape({
      margin: 0em 8em;
      font-size: 1.0em;
    });

    .up-to-desktop({
      margin: 0em 10em;
    });

    .large-desktop({
      margin: 0em 30em;
    });
}

main pre {
     white-space: pre-wrap;
}

/* Header */

.header {
    padding: 1em 0em;
    display: flex;
    background: #000;
    color: #FFF;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header a, .link {
  color: #FFF;
  text-decoration: none;
}

.header a:hover {
   color: #FFF;
}

.header > * {
    padding: 0.5em;
}

.header > .homelink {
    flex: auto;
}

.header > .menuright {
    flex: initial;
}

/* Content common styling */

#content {
   background: @content-bg-colour;
   color: @content-fg-colour;
   padding: 1em 1em;
   overflow: auto;
   min-height: 100vh;
}

img.imgembed {
   float: right;
   width: 35%;
   padding: 0.5em;
   clear: both;
   height: auto;
}

/* Content blog styling */

.blog {
   font-family: "Courier New", monospace;
   color: #000;
}

.blog > .title {
   font-size: 1.5em;
}

.blog > .description {
   font-weight: bold;
   margin: 0.5em 0em;
}

.blog > .published{
   font-size: 0.9em;
   color: #444;
}

/* Index page formatting - cannot add theme */

.summary {
    margin: 1em 0.5em;

    .up-to-phone-portrait({
       font-size: 1em;
    });

    .up-to-phone-landscape({
       font-size: 1em;
    });

    .up-to-tablet-landscape({
       font-size: 1em;
    });

    .up-to-desktop({
       font-size: 1em;
    });

    .large-desktop({
       font-size: 1em;
    });
}

.summary .title {
    font-size: 1.2em;
}

.summary .created {
    font-size: 0.8em;
}

/* Pager */

.pager {
    display: flex;
    width: 100%;
    margin: 1em 0em;
}

.pager > .next {
    flex: 1 0 50%;
}

.next img {
    float: right;
}

.pager > .previous {
    flex: 1 0 50%;
}

.pager img {
    width: 2.5em;
}