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

/* =========================================================================
   Custom properties
   ========================================================================= */

:root {
  --text-color: #222;
  --text-color-inverted: #fff;
  --block-color: rgba(255, 255, 255, 0.3);
  --block-border-color: rgba(255, 255, 255, 0.6);
  --primary-color: #123456;
  --primary-color-offset: #bf075a;
  --gradient-color-1: #85f8b4;
  --gradient-color-2: #8fd3f4;
  --secondary-color: #0d9992;
  --secondary-color-offset: #85f8b4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #fff;
    --text-color-inverted: #222;
    --block-color: rgba(0, 0, 0, 0.3);
    --block-border-color: rgba(0, 0, 0, 0.1);
    --primary-color: #76b1ec;
    --primary-color-offset: #eb589a;
    --gradient-color-1: #1c3627;
    --gradient-color-2: #172b35;
    --secondary-color: #0d9992;
    --secondary-color-offset: #85f8b4;
  }
}

/* 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(--text-color);
  font-size: 1em;
  line-height: 1.5;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

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

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

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

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

html,
body {
  min-height: 100%;
}

body {
  max-width: 40rem;
  margin: 2rem auto;
  background: var(--gradient-color-2)
    linear-gradient(
      120deg,
      var(--gradient-color-1) 0%,
      var(--gradient-color-2) 100%
    )
    no-repeat;
}

main {
  padding: 2rem;
  margin: 2rem;
  background: var(--block-color) url("Bunches-5--small.png") no-repeat top
    0.5rem right 1rem;
  /* Image from Wild flora wonders, deniseanne.com */
  border: 1px solid var(--block-border-color);
}

h1 {
  margin-top: 0;
  text-shadow: 0 0 3px var(--text-color-inverted);
}

ul {
  padding-left: 0;
}

li {
  padding: 0.25rem 0;
}

a {
  --bg-h: 0.5rem;
  font-weight: 700;
  color: var(--primary-color);
  text-decoration: none;
  background: linear-gradient(
      90deg,
      var(--secondary-color-offset),
      var(--secondary-color)
    )
    no-repeat right bottom / 0 var(--bg-h);
  
  padding-bottom: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  a {
    transition: background-size 350ms;
  }
}

a:focus {
  outline: none;
}

a:hover, a:focus {
  background-size: 100% var(--bg-h);
  background-position-x: left;
  color: var(--primary-color-offset);
}

hr {
  display: block;
  margin: 1em 0;
  padding: 0;
  background: transparent url("Border-3--small.png") no-repeat center;
  /* Image from Wild flora wonders, deniseanne.com */
  height: 41px;
  border: 0;
}

/* ==========================================================================
     Print styles.
   ========================================================================== */

@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) ")";
  }

  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  p {
    orphans: 3;
    widows: 3;
  }
}