/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1rem;
  /* line-height: 1.4; */
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

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

body {
  display: relative;
  top: 0;
  bottom: 0;
}

#header {
  display: block;
  overflow: hidden;
  width: 100%;
  border-bottom: 2px solid rgba(0, 0, 0, .2);
  background-color: var(--color-bg-header);
}

.header-logo {
  padding: var(--grid-size);
}

#map-container {
  position: relative;
  /* height: calc(100vh - (7.7 * var(--grid-size))); */
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

#footer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  background-color: var(--color-bg-header);
}

#footer > div {
  display: block;
  padding: 5px 5px 5px;
  font-size: 0.7rem;
  /* font-family: 'Courier New'; */
  font-family: "Verdana";
  /* font-family: "Impact"; */
  /* font-style: italic; */
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}

#footer > div > span:focus,
#footer > div > span:hover {
  background: linear-gradient(90deg,#ffb339,#75efdd);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  box-decoration-break: clone;
  cursor: pointer;
  /* text-shadow: none;
  text-decoration: underline;
  text-decoration-color: #ccc; */
}

/* #attribution {
  display: none;
  position: absolute;
  box-sizing: content-box;
  z-index: 1;
  bottom: 30px;
  right: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  padding: 5px;
  background-color: var(--color-bg-header);
}

#attribution > div.close {
  display: block;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  background-image: url("../img/x-mark.svg");
  background-position: center;
  background-repeat: no-repeat;
  filter: invert(62%) sepia(72%) saturate(420%) hue-rotate(41deg) brightness(96%) contrast(91%);
} */

/* ==========================================================================
   Layer Control Box
   ========================================================================== */

/* #toggle-box {
  display: block;
  position: absolute;
  top: var(--grid-size);
  left: 0px;
  height: 32px;
  width: 32px;
  background-color: var(--color-bg-layerbox);
  background-image: url("../img/plastic32.png");
  background-position: center;
  background-repeat: no-repeat;
  padding: 5px;
  z-index: 2;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 0 2px rgba(0,0,0,.1);
  transition: left 0.65s;
} */

#toggle-box {
  display: block;
  position: absolute;
  top: var(--grid-size);
  left: 0px;
  height: 32px;
  width: 32px;
  background-color: var(--color-bg-layerbox);
  background-image: url("../img/layers2.svg");
  background-position: center;
  background-size: 28px;
  background-repeat: no-repeat;
  /* filter: invert(62%) sepia(72%) saturate(420%) hue-rotate(41deg) brightness(96%) contrast(91%); */
  padding: 5px;
  z-index: 2;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 0 2px rgba(0,0,0,.1);
  transition: left 0.65s;
}

#toggle-box:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 2px 2px #89c12d;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

#toggle-box:hover:after {
  opacity: 1;
}
  

#layerbox {
	position: absolute;
	display: block;
	top: 10px;
	left: -250px;
	background-color: var(--color-bg-layerbox);
	padding: 0;
	z-index: 1;
	border-radius: 0 4px 4px 0;
  box-shadow: 0 0 0 2px rgba(0,0,0,.1);
  transition: all 0.65s;
}

#layerbox > div:last-child {
	border-radius: 0 0 4px 0;
}

.layer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 7px 10px 10px;
}

.layer-header > p {
	color: #444;
	font-size: 13px;
  font-weight: 700;
  font-family: var(--font-layerbox-layer);
	margin: 0;
}

.layer-header > div#close-box {
  position: relative;
  top: 1px;
  width: 12px;
  height: 12px;
  background-image: url("../img/close.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
}

.layer-header > div#close-box:hover {
  cursor: pointer;
  filter: invert(21%) sepia(55%) saturate(3221%) hue-rotate(355deg) brightness(87%) contrast(88%);
}

.layer-category {
	line-height: 25px;
	padding: 5px 10px 5px;
	border-top: 1px solid rgba(221,221,221,1);
}

.switch {
  position: relative;
  display: block;
}

.switch-input {
  display: none;
}

.switch-label {
  display: block;
  position: relative;
  width: 48px;
  height: 24px;
	text-indent: 56px;
	white-space: nowrap;
  user-select: none;
	cursor: pointer;
}

.switch-label::before,
.switch-label::after {
  content: "";
  display: block;
  position: absolute;
  cursor: pointer;
}

.switch-input + .switch-label:before {
  width: 100%;
  height: 50%;
  background-color: #dedede;
  border-radius: 9999em;
  margin-top: 6px;
  -webkit-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease;

}

.switch-label::after {
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
  -webkit-transition: left 0.25s ease;
  transition: left 0.25s ease;
}

.switch-input:checked + .switch-label::before {
  background-color: #89c12d;
}

.switch-input:checked + .switch-label::after {
  left: 28px;
}

.switch-input + .switch-label > p {
  margin: 0;
  font-size: 12px;
  font-family: var(--font-layerbox-layer);
  color: rgba(68,68,68,0.35);
  line-height: 23px;
	transition: all 0.25s ease;
}

.switch-input:checked ~ .switch-label > p {
	color: rgba(68,68,68,1);
/* 	transform: skewX(0deg); */
}


/* ==========================================================================
   Clear Checkboxes
   ========================================================================== */

   .clr-switch {
    position: relative;
    display: block;
  }
  
  .clr-switch-input {
    display: none;
  }
  
  .clr-switch-label {
    display: block;
    position: relative;
    width: 48px;
    height: 24px;
    text-indent: 56px;
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
  }
  
  .clr-switch-label::before,
  .clr-switch-label::after {
    content: "";
    display: block;
    position: absolute;
    cursor: pointer;
  }
  
  .clr-switch-label::before {
    width: 100%;
    height: 50%;
    background-color: #dedede;
    border-radius: 9999em;
    margin-top: 6px;
    -webkit-transition: background-color 0.25s ease;
    transition: background-color 0.25s ease;
  }
  
  .clr-switch-label::after {
    top: 2px;
    left: 0;
    background-color: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
    -webkit-transition: left 0.25s ease;
    transition: left 0.25s ease;
  }
  
  .clr-switch-input:checked + .clr-switch-label::before {
    background-color: #89c12d;  
  }
  
  .clr-switch-input:checked + .clr-switch-label::after {
    left: 28px;
  }
  
  .clr-switch-input + .clr-switch-label > p {
    margin: 0;
    font-size: 12px;
    font-family: var(--font-layerbox-layer);
    color: rgba(68,68,68,0.35);
    line-height: 23px;
    transition: all 0.25s ease;
  }
  
  .clr-switch-input:checked + .switch-label > p {
    color: rgba(68,68,68,1);
  }
  
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
  display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
  visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}

/* ==========================================================================
   Root variables.
   Inlined to avoid the additional HTTP request:
   https://developer.mozilla.org/en-US/docs/Web/CSS/:root
   ========================================================================== */

:root {
  --grid-size:10px;
  --color-bg-header: #fff;
  --color-bg-layerbox: #fff;
  
  --font-layerbox-layer: "Verdana", sans-serif;

  --color-white:#fff;
  --color-off-white:#aaa;
  --color-light-blue:#009dff;
  --color-blue:#0f6ecd;
  --color-dark-blue:#0a4784;
  --color-purple:#862790;
  --color-red:#c42826;
  --color-green:#2ab770;
  --color-blue:#2db5f9;
  --color-border:rgba(0,0,0,0.1);
  --color-light-gray:#999;
  --color-gray:#555;
  --color-dark-gray:#333;
  --color-black:#000;
  --font-color:#333;
  --font-color:var(--color-dark-gray);
  --font-color-hover:#000;
  --font-color-hover:var(--color-black);
  --font-color-inverse:#aaa;
  --font-color-inverse:var(--color-off-white);
  --font-color-inverse-hover:#fff;
  --font-color-inverse-hover:var(--color-white);
  --link-color:#2db5f9;
  --link-color:var(--color-blue);
  --link-color-hover:#0a4784;
  --link-color-hover:var(--color-dark-blue);
  --dark-background-color:#212329;
  --darker-background-color:#141414;
  --body-font-size:15px;
  --block-quote-font-size:15px;
  --block-quote-font-weight:500;
  --pre-font-size:13px;
  --header1-font-size:25px;
  --header1-line-height:1.2;
  --header2-font-size:21px;
  --header2-line-height:1.3;
  --header3-font-size:19px;
  --header3-line-height:1.4;
  --header4-font-size:19px;
  --header4-line-height:1.4;
  --header5-font-size:17px;
  --header5-line-height:1.4;
  --header6-font-size:15px;
  --header6-line-height:1.4;
  --table-first-column-font-size:15px;
  --feature-points-font-size:15px;
  --border-radius:4px;
  --card-padding:calc(10px * 2);
  --card-padding:calc(var(--grid-size) * 2);
  --header-background-color:#212329;
  --header-background-color:var(--dark-background-color);
  --responsive-header-background-color:#141414;
  --responsive-header-background-color:var(--darker-background-color);
  --hero-background:#17191c;
  --menu-offset:calc(10px * 2);
  --menu-offset:calc(var(--grid-size) * 2);
  --toggle-button-width:calc(10px * 2.6);
  --toggle-button-width:calc(var(--grid-size) * 2.6);
  --header-size:calc(10px * 6);
  --header-size:calc(var(--grid-size) * 6);
  --footer-size:calc(10px * 4.4);
  --footer-size:calc(var(--grid-size) * 4.4);
  --content-top-padding:calc(10px * 6);
  --content-top-padding:calc(var(--grid-size) * 6);
  --content-padding:calc(10px * 3);
  --content-padding:calc(var(--grid-size) * 3);
  --console-background-color:#141414;
  --console-background-color:var(--darker-background-color)
}
@media (max-width:768px) {
  :root {
    --header1-font-size:24px;
    --header2-font-size:22px;
    --header3-font-size:20px;
    --header4-font-size:18px;
    --header5-font-size:16px;
    --header6-font-size:14px
  }
}
@media (max-width:850px) {
  :root {
    --header-size:calc(10px * 5);
    --header-size:calc(var(--grid-size) * 5);
    --content-top-padding:10px;
    --content-top-padding:var(--grid-size);
    --content-padding:10px;
    --content-padding:var(--grid-size);
    --footer-size:calc(10px * 3.9);
    --footer-size:calc(var(--grid-size) * 3.9)
  }
}