/*! HTML5 Boilerplate v9.0.0-RC1 | 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
   ========================================================================== */

@import '../../style/css/normalize.css';

   @font-face {
   font-family: Polymode;
   src: url("../../style/fonts/Polymode-Roman-VF.woff2") format('truetype-variations');
   font-weight: 215 700;
   font-style: normal;
 }

 @font-face {
   font-family: Polymode;
   src: url("../../style/fonts/Polymode-Italic-VF.woff2") format('truetype-variations');
   font-weight: 215 700;
   font-style: italic;
 }

:root {
  --ExtraLight: 215;
  --Light: 315;
  --Regular: 400;
  --Semibold: 541;
  --Bold: 700;
  --ActingBasic1: 'RLNS' 1, 'wght' var(--ExtraLight);
  --ActingBasic2: 'RLNS' 1, 'wght' var(--Light);
  --ActingBasic3: 'RLNS' 1, 'wght' var(--Regular);
  --ActingBasic4: 'RLNS' 1, 'wght' var(--Semibold);
  --ActingBasic5: 'RLNS' 1, 'wght' var(--Bold);
  --GoingToWork1: 'RLNS' 250, 'wght' var(--ExtraLight);
  --GoingToWork2: 'RLNS' 250, 'wght' var(--Light);
  --GoingToWork3: 'RLNS' 250, 'wght' var(--Regular);
  --GoingToWork4: 'RLNS' 250, 'wght' var(--Semibold);
  --GoingToWork5: 'RLNS' 250, 'wght' var(--Bold);
  --Attitude1: 'RLNS' 750, 'wght' var(--ExtraLight);
  --Attitude2: 'RLNS' 750, 'wght' var(--Light);
  --Attitude3: 'RLNS' 750, 'wght' var(--Regular);
  --Attitude4: 'RLNS' 750, 'wght' var(--Semibold);
  --Attitude5: 'RLNS' 750, 'wght' var(--Bold);
  --Opulence1: 'RLNS' 1000, 'wght' var(--ExtraLight);
  --Opulence2: 'RLNS' 1000, 'wght' var(--Light);
  --Opulence3: 'RLNS' 1000, 'wght' var(--Regular);
  --Opulence4: 'RLNS' 1000, 'wght' var(--Semibold);
  --Opulence5: 'RLNS' 1000, 'wght' var(--Bold);
  --green: #00ad83;
  --pink: #ff3eb5;
  --text: #222;
  --visited: #466;
}

html {
  color: var(--text);
  font-size: 1.1em;
  line-height: 1.3;
  font-family: Polymode, sans-serif;
  font-weight: var(--Semibold);
  -webkit-font-feature-settings: "liga", "kern", "calt", "rvrn";
          font-feature-settings: "liga", "kern", "calt", "rvrn";
}

/*
 * A better looking default horizontal rule
 */

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



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



#background {
       background: linear-gradient(-45deg, var(--pink), var(--green));
       background-size: 400% 400%;

       -webkit-animation: Colorscroll 60s ease infinite;
       -moz-animation: Colorscroll 60s ease infinite;
       animation: Colorscroll 60s ease infinite;
   }

   @-webkit-keyframes Colorscroll {
       0%{background-position:0% 50%}
       50%{background-position:100% 50%}
       100%{background-position:0% 50%}
   }
   @-moz-keyframes Colorscroll {
       0%{background-position:0% 50%}
       50%{background-position:100% 50%}
       100%{background-position:0% 50%}
   }
   @keyframes Colorscroll {
       0%{background-position:0% 50%}
       50%{background-position:100% 50%}
       100%{background-position:0% 50%}
   }

#po {
     font-variation-settings: var(--Opulence5);
   }

   @-webkit-keyframes po_rlns {
     0%  { font-variation-settings: var(--ActingBasic5);}
     15% { font-variation-settings: var(--ActingBasic5);}
     25% { font-variation-settings: var(--GoingToWork5);}
     40% { font-variation-settings: var(--GoingToWork5);}
     50% { font-variation-settings: var(--Attitude5);}
     65% { font-variation-settings: var(--Attitude5);}
     75% { font-variation-settings: var(--Opulence5);}
     90% { font-variation-settings: var(--Opulence5);}
   }

   @-moz-keyframes po_rlns {
      0%  { font-variation-settings: var(--ActingBasic5);}
      15% { font-variation-settings: var(--ActingBasic5);}
      25% { font-variation-settings: var(--GoingToWork5);}
      40% { font-variation-settings: var(--GoingToWork5);}
      50% { font-variation-settings: var(--Attitude5);}
      65% { font-variation-settings: var(--Attitude5);}
      75% { font-variation-settings: var(--Opulence5);}
      90% { font-variation-settings: var(--Opulence5);}
    }

   @keyframes po_rlns {
     0%  { font-variation-settings: var(--ActingBasic5);}
     15% { font-variation-settings: var(--ActingBasic5);}
     25% { font-variation-settings: var(--GoingToWork5);}
     40% { font-variation-settings: var(--GoingToWork5);}
     50% { font-variation-settings: var(--Attitude5);}
     65% { font-variation-settings: var(--Attitude5);}
     75% { font-variation-settings: var(--Opulence5);}
     90% { font-variation-settings: var(--Opulence5);}
   }

   @-webkit-keyframes light_rlns {
      0%  { font-variation-settings: var(--ActingBasic1);}
      15% { font-variation-settings: var(--ActingBasic1);}
      25% { font-variation-settings: var(--GoingToWork1);}
      40% { font-variation-settings: var(--GoingToWork1);}
      50% { font-variation-settings: var(--Attitude1);}
      65% { font-variation-settings: var(--Attitude1);}
      75% { font-variation-settings: var(--Opulence1);}
      90% { font-variation-settings: var(--Opulence1);}
    }

    @-moz-keyframes light_rlns {
       0%  { font-variation-settings: var(--ActingBasic1);}
       15% { font-variation-settings: var(--ActingBasic1);}
       25% { font-variation-settings: var(--GoingToWork1);}
       40% { font-variation-settings: var(--GoingToWork1);}
       50% { font-variation-settings: var(--Attitude1);}
       65% { font-variation-settings: var(--Attitude1);}
       75% { font-variation-settings: var(--Opulence1);}
       90% { font-variation-settings: var(--Opulence1);}
     }

    @keyframes light_rlns {
      0%  { font-variation-settings: var(--ActingBasic1);}
      15% { font-variation-settings: var(--ActingBasic1);}
      25% { font-variation-settings: var(--GoingToWork1);}
      40% { font-variation-settings: var(--GoingToWork1);}
      50% { font-variation-settings: var(--Attitude1);}
      65% { font-variation-settings: var(--Attitude1);}
      75% { font-variation-settings: var(--Opulence1);}
      90% { font-variation-settings: var(--Opulence1);}
    }

body {
  margin:1rem 1rem 2rem 1rem;
}

h1 {
  font-size: 2rem;
  line-height: 2rem;
  margin-bottom: 0;
  margin-top:0;
}

h2 {
  margin-bottom:0;
}
h3 {
  margin-bottom:0;
}
p {
  font-size: 1.1rem;
}
a {
  color: var(--text);
}
a:hover {
  text-decoration: none;
}
a:visited {
  color: var(--visited);
}
ul {
  padding-left:0.5rem;
}
li {
  font-size: 1.1rem;
  list-style: none;
  padding-bottom:0.25rem;
}
ul ul {
  padding-left:1rem;
}

li li {
  padding-left:0.5rem;
  list-style-type: "→";
}
form label {
  font-weight: bold;
}
form input {
  margin-bottom:0.5rem;
}
img {
  max-height: 30rem;
  max-width: 100%;
  padding-bottom:2rem;
}
.buttondown {
  text-align: center;
}
.center {
  text-align: center;
  width:100%;
  margin-top:0;
}
p.center {
  font-size: 0.9rem;
}
#light {
  font-size:1.75rem;
  font-weight: var(--ExtraLight);
}
.intro {
  font-variation-settings: var(--Attitude3);
  font-size: 1.5rem;

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

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

@media only screen and (min-width: 35rem) {
   body {
     margin:2rem 2rem 4rem 4rem;
   }

   h1 {
     font-size: 3rem;
     line-height: 3rem;
     margin-left: -1rem;
   }
   p {
     font-size: 1.2rem;
     width: 80%;
   }
   #light {
     font-size:2.75rem;
   }
   li {
     font-size: 1.2rem;
   }
   .intro {
     font-size: 2.25rem;
   }
}

@media only screen and (min-width: 59rem) {
  p {
    font-size: 1.4rem;
    max-width: 48rem;
  }
  h1 {
    font-size: 3.25rem;
    line-height: 3.25rem;
    max-width: 55rem;
  }
  h3 {
    font-size: 1.4rem;
  }
  li {
    font-size: 1.4rem;
  }
  #po {
    font-variation-settings: var(--ActingBasic5);
     -webkit-animation: po_rlns 6s ease infinite;
        -moz-animation: po_rlns 6s ease infinite;
             animation: po_rlns 6s ease infinite;
  }
  #light {
    font-size: 3rem;
    font-variation-settings: var(--ActingBasic1);
     -webkit-animation: light_rlns 6s ease infinite;
        -moz-animation: light_rlns 6s ease infinite;
             animation: light_rlns 6s ease infinite;
  }
  p.center {
    max-width:100%;
    font-size: 1.2rem;
  }
}

@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: #fff !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;
  }
}