/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root
{
  --max-content-width: 40em;
  --small-screen-padding: 1em;

  --color-primary1: #1f3033;
  --color-primary2: #496079;
  --color-primary3: #CDD3E4;
  --color-secondary1: #322849;
  --color-secondary2: #439580;
  --color-accent: #1E8CBC;
}

html, body
{
  height: 100%;
}

html
{
  font-family: 'NowRegular', sans;
  font-weight: normal;
  font-style: normal;

  line-height: 1.5em;

  margin: 0;
  padding: 0;
  border: 0;
}

body
{
  display: table;

  margin: 0 auto;
  padding: 0;
  border: 0;

  color: var(--color-primary1);
  background-color: var(--color-primary3);
}

h1, h2, h3, h4, h5, h6
{
  font-family: 'PlayfairDisplayBold';
  line-height: 1em;
  margin: 0.25em 0 0.25em 0;
  font-weight: normal;
  color: var(--color-secondary1);
}

h1
{
  font-size: 4.2em;
}

h2
{
  font-size: 2.6em;
}

h3
{
  font-size: 1.6em;
}

a
{
  color: var(--color-secondary2);
}

p
{
  margin: 0.9em 0;
}

code
{
  font-family: 'NowSemiBold';
  color: var(--color-secondary1);
}

main
{
  max-width: var(--max-content-width);
  margin: 0 auto;
}

hr
{
  border-width: 0.1em 0 0 0;
  border-style: solid;
  border-color: var(--color-primary2);
}

footer
{
  display: table-row;

  color: var(--color-primary2);
}

#footer-container
{
  border-width: 0.15em 0 0 0;
  border-style: solid;
  border-color: var(--color-primary2);
}

footer p
{
  display: inline;
  font-size: 0.9em;
}

article, header, .article-list-item
{
  margin: 2em 0;
}

.full_width_img
{
	width: 100%;
}

.soft_text
{
	color: var(--color-primary2);
}

/******************************************************************************
 * Main Header
 *****************************************************************************/

h1#main-header
{
  font-family: 'PlayfairDisplaySCBold';
  font-weight: bold;
}

/******************************************************************************
 * Nav
 *****************************************************************************/

nav#main_nav
{
  border-width: 0 0 0.15em 0;
  border-style: solid;
  border-color: var(--color-primary2);

  color: var(--color-accent);
}

nav#main_nav a
{
  color: var(--color-accent);
}

nav#main_nav h1
{
  font-family: 'PlayfairDisplayRegular';

  display: inline;
  border: 0;
  margin: 0;

  font-size: 1.6em;
}

nav#main_nav h1 a
{
  text-decoration: none;
  color: var(--color-primary2);
}

nav#main_nav ul
{
  list-style-type: none;

  margin: 0;
  line-height: 1.6em;
}

nav#main_nav li
{
  border: 0;
  margin: 0 0 0 1em;

  font-family: 'NowMedium';
}

/******************************************************************************
 * Article
 *****************************************************************************/

.article-list
{
  list-style-type: none;
  padding: 0;
}

.article-list li
{
  border: 0;
  margin: 0;
}

.article-list-item span.date
{
  border-bottom: 2px dotted var(--color-secondary1);
}

@media screen and (max-width: 900px)
{
  body
  {
    font-size: 14px;
    padding: 0.3em var(--small-screen-padding);
    max-width: var(--max-content-width);
  }

  nav#main_nav ul
  {
    padding: 0;
  }

  nav#main_nav li
  {
    margin: 0;
  }
}

@media screen and (min-width: 900px)
{
  body
  {
    font-size: 18px;
    width: var(--max-content-width);
  }

  nav#main_nav
  {
    padding: 0.75em 0;
  }

  nav#main_nav ul
  {
    float: right;
  }

  nav#main_nav li
  {
    display: inline-block;
    position: relative;
  }

  main
  {
    padding: 0.75em 0;
  }
}

/******************************************************************************
 * Pre
 *****************************************************************************/

pre
{
  padding: 1em;

  background-color: var(--color-primary1);
}

pre code
{
  font-size: 0.8em;
  font-family: 'monospace';
  color: var(--color-secondary2);
}

/******************************************************************************
 * Code Highlight
 *****************************************************************************/

.highlight .c1 { color: var(--color-primary2); }
.highlight .cp { color: var(--color-primary3); font-weight: bold; }
.highlight .nb { color: var(--color-primary3); font-weight: bold; }
.highlight .nc { font-weight: bold; }
.highlight .nf { color: var(--color-primary3); }
.highlight .k { color: var(--color-accent); font-weight: bold; }
.highlight .kt { color: var(--color-accent); }
.highlight .kp { color: var(--color-primary2); font-weight: bold; }
.highlight .s { color: var(--color-primary2); font-weight: bold; }
.highlight .vi { color: var(--color-accent); }