/*
* Skeletal V1.0.0
* Copyright 2019, Peter Munch-Ellingsen
* skeleton.peterme.net
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 22/10/2019
*
* Based on Skeleton v2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Variables
–––––––––––––––––––––––––––––––––––––––––––––––––– */

:root {
  /* Globals */
  --line-height: calc(1em * 1.6); /* Set this way so it can be used in calculations */
  --element-padding: 8px;
  --element-border: 1px;
  --element-height: calc(var(--line-height) + var(--element-padding)*2 + var(--element-border)*2);
  --border-radius: 0;
  --main-color: black;
  --main-color-contrast: #FFF;
  --activated-color: #aaa;
  --activated-color-contrast: #FFF;
  /* Basics */
  --section-padding: 20px;
  --master-padding: 10px;
  --header-height: 50px;
  --container-max-width: 1150px;
  --text-color: black;
  --link-color: black;
  --link-color-hover: #8888;
  --background-color: #fff;
  --font-family: 'Mulish', sans-serif;
  --font-size: 1.75rem;
  --font-weight: 300;
  --heading-base-size: calc(var(--font-size) * 1.15);
  --heading-increase-pitch: 0.7rem;
  --heading-increase-pitch-phone: 0.5rem;
  --heading-base-line-height: 1.6;
  --heading-decrease-pitch: 0.08;
  --heading-font-family: font-family: 'Comfortaa', sans-serif;
  --heading-color: var(--text-color);
  --heading-margin: 2rem;
  /* Buttons */
  --button-height: var(--element-height);
  --button-line-height: calc(var(--element-height) - var(--element-border));
  --button-border: var(--element-border) solid;
  --button-border-radius: var(--border-radius);
  --button-padding-leftright: 30px;
  /* Basic button */
  --button-color: #555;
  --button-background-color: var(--background-color);
  --button-border-color: #bbb;
  --button-color-focus: #333;
  --button-background-color-focus: var(--background-color);
  --button-border-color-focus: #888;
  /* Primary button */
  --button-primary-color: var(--main-color-contrast);
  --button-primary-background-color: var(--main-color);
  --button-primary-border-color: var(--main-color);
  --button-primary-color-focus: var(--activated-color-contrast);
  --button-primary-background-color-focus: var(--activated-color);
  --button-primary-border-color-focus: var(--activated-color);
  /* Forms */
  --input-padding-topbottom: var(--element-padding);
  --input-padding-leftright: 10px;
  --input-height: var(--element-height);
  --textarea-min-height: calc((var(--element-height) - var(--element-padding) - var(--element-border))*2);
  --input-border: var(--element-border) solid;
  --input-border-color: #D1D1D1;
  --input-border-color-focus: var(--main-color);
  --input-border-radius: var(--border-radius);
  --input-color: var(--text-color);
  --input-background-color: var(--background-color);
  --placeholder-color: var(--text-color);
  --placeholder-opacity: 0.8;
  /* Code */
  --code-color: var(--text-color);
  --code-background-color: #FAFAFA;
  --code-border: var(--element-border) solid;
  --code-border-color: #E1E1E1;
  --code-border-radius: var(--border-radius);
  --code-block-color: var(--code-color);
  --code-block-background-color: var(--code-background-color);
  --code-block-border: var(--code-border);
  --code-block-border-color: var(--code-border-color);
  --code-block-border-radius: var(--code-border-radius);
  /* Tables */
  --td-border-bottom: 1px solid #E1E1E1;
  /* Horizontal rule */
  --hr-border-top: 1px solid #E1E1E1;
  /* Navbar */
  --navbar-border-top: 1px solid #E1E1E1;
  --navbar-border-bottom: 1px solid #E1E1E1;
  /* Hero */
  --hero-padding: 6vh;
/* lightbox */
    --caption-width: 450px;
}


/* Larger than tablet */
@media (min-width: 768px) {
    :root {
        --header-height: 75px;
        --section-padding: 20px;
        --master-padding: 30px;
        }
    }