/* v0.0.1 */

/* ==========================================================================
   Theme color variables
   ========================================================================== */

   :root {
    --theme-primary-color: #FE4501;
    --theme-primary-text-color: #000;
    --theme-primary-background-color: #FFF;
    --theme-primary-accent-color: #666;
    --theme-secondary-color: #666;
    --theme-secondary-text-color: #FFF;
    --theme-secondary-background-color: #FE4501;
    --theme-secondary-accent-color: #DDD;
    --theme-highlight-text: #b3d4fc;
    color-scheme: light;
}
/* Dark Color Scheme (System Preference) */
@media (prefers-color-scheme: dark) {
    :root {
        --theme-primary-color: #FE4501;
        --theme-primary-text-color: #FFF;
        --theme-primary-background-color: #333;
        --theme-primary-accent-color: #AAA;
        --theme-secondary-color: #888;
        --theme-secondary-text-color: #CCC;
        --theme-secondary-background-color: #FE4501;
        --theme-secondary-accent-color: #AAA;
        --theme-highlight-text: #526377;
        color-scheme: dark;
    }
}

/* Fonts */
/* pt-serif-caption-regular - cyrillic_cyrillic-ext_latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'PT Serif Caption';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/pt-serif-caption-v17-cyrillic_cyrillic-ext_latin_latin-ext-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/pt-serif-caption-v17-cyrillic_cyrillic-ext_latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/pt-serif-caption-v17-cyrillic_cyrillic-ext_latin_latin-ext-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/pt-serif-caption-v17-cyrillic_cyrillic-ext_latin_latin-ext-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/pt-serif-caption-v17-cyrillic_cyrillic-ext_latin_latin-ext-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/pt-serif-caption-v17-cyrillic_cyrillic-ext_latin_latin-ext-regular.svg#PTSerifCaption') format('svg'); /* Legacy iOS */
}
/* pt-serif-caption-italic - cyrillic_cyrillic-ext_latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'PT Serif Caption';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/pt-serif-caption-v17-cyrillic_cyrillic-ext_latin_latin-ext-italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/pt-serif-caption-v17-cyrillic_cyrillic-ext_latin_latin-ext-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/pt-serif-caption-v17-cyrillic_cyrillic-ext_latin_latin-ext-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/pt-serif-caption-v17-cyrillic_cyrillic-ext_latin_latin-ext-italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/pt-serif-caption-v17-cyrillic_cyrillic-ext_latin_latin-ext-italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/pt-serif-caption-v17-cyrillic_cyrillic-ext_latin_latin-ext-italic.svg#PTSerifCaption') format('svg'); /* Legacy iOS */
}

/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.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: var(--theme-primary-text-color);
  background: var(--theme-primary-background-color);
  font-size: 1em;
  line-height: 1.4;
}

/*
  * Remove text-shadow in selection highlight:
  * https://twitter.com/miketaylr/status/12228805301
  *
  * Customize the background color to match your design.
  */

::-moz-selection {
  background: var(--theme-highlight-text);
  text-shadow: none;
}

::selection {
  background: var(--theme-highlight-text);
  text-shadow: none;
}

/*
  * A better looking default horizontal rule
  */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid var(--theme-primary-accent-color);
  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;
}

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

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

body {
  color: var(--theme-primary-text-color);
  background: var(--theme-primary-background-color);
  font-family: 'PT Serif Caption', serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
header h1 {
  /* position: relative; */
  letter-spacing: -0.1em;
  padding-right: 0.1em;
  /* top: 0.5em; */
  font-size: 4em;
  white-space: nowrap;
}
header h1 a {
  text-decoration: none;
}

footer {
  background: var(--theme-secondary-background-color);
  color: var(--theme-secondary-text-color);
  border-top: 0.5em solid var(--theme-secondary-accent-color);
  margin-top: auto;
  padding: 0.5em 1em;
  text-align: right;
}

/* --------------------------------------------------------------------------
    hlf.me
   -------------------------------------------------------------------------- */
.sub {
    color: var(--theme-secondary-accent-color);

}
.domain {
  color: var(--theme-primary-accent-color);
}
.tld {
  color: var(--theme-primary-color);
}
/* --------------------------------------------------------------------------
    Dodgy animations
   -------------------------------------------------------------------------- */
.domain {
  animation-name: colorchange;
  animation-duration: 5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.tld {
  animation-name: colorchange;
  animation-duration: 5s;
  animation-direction: alternate-reverse;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes colorchange {
  from {
    color: var(--theme-primary-accent-color);
  }
  10% {
    color: var(--theme-primary-accent-color);
  }
  90% {
    color: var(--theme-primary-color);
  }
  to {
    color: var(--theme-primary-color);
  }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

 .hidden,
 [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
   */
 
 .visually-hidden {
   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 .visually-hidden class to allow the element
   * to be focusable when navigated to via the keyboard:
   * https://www.drupal.org/node/897638
   */
 
 .visually-hidden.focusable:active,
 .visually-hidden.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
   *
   * 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: "";
   display: table;
 }
 
 .clearfix::after {
   clear: both;
 }

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

@media print {

  *,
  *::before,
  *::after {
    background: var(--secondary-theme-color) !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;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}