:root {
  --accent: #c3d838;
  --background: #fff;
  --background-highlight: hsla(0, 0%, 50%, 0.125);
  --dropnav-items: #cb2867;
  --header: #cb2867;
  --highlight: #c3d838;
  --highlight: #674134;
  --homepage-margin: 50px;
  --homepage-link: #674134;
  --link: #828284;
  --link-focus: #cc8aa3;
  --link-highlight: #14a6d7;
  --link-lowlight: #10618b;
  --link-marker: var(--link-highlight);
  --link-marker-focus: var(--background);
  --link-visited: #929294;
  --link-visited-highlight: #65bed6;
  --marker: #aaa;
  --text: #674134;
  --pets: #a3a3a5;
  --collar: #14a6d7;
  --re-urred: #664033;
  --pet-care: #c3db35;
  --new: var(--collar);
  --warning: #ff0;
  --neutral: var(--text);
  --success: #c3d838;
  --failure: #cb2867;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #c3d838;
    --background: #170e0b;
    --background-highlight: #67413433;
    --dropnav-items: #cc8aa3;
    --header: #fff;
    --highlight: #cb2867 /* #C3D838 */;
    --homepage-link: #ccc;
    --link: #828284;
    --link-focus: #ccc;
    --link-highlight: #c3d838;
    --link-lowlight: #78842f;
    --link-marker: var(--highlight);
    --link-marker-focus: #ccc;
    --link-visited: #929294;
    --link-visited-highlight: var(--link-lowlight);
    --marker: #664033;
    --text: #cc8aa3;

    /*     
    --pets: #808080;
    --collar: var(--link-marker);
    --re-urred: #cc8aa3;
    --pet-care: #664033;
    */

    --pets: #a3a3a5;
    --collar: #14a6d7;
    --re-urred: #664033;
    --pet-care: #c3db35;

    --new: var(--collar);
    --warning: #ff0;
    --neutral: var(--text);
    --success: #c3d838;
    --failure: #cb2867;
  }
}
#re-urred {
  fill: var(--re-urred);
}
#pet-care {
  fill: var(--pet-care);
}
#pug,
#cat {
  fill: var(--pets);
}
#pug-collar {
  fill: var(--collar);
}
footer,
header,
section {
  display: block;
}
html {
  font-size: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  scrollbar-gutter: stable both-edges;
}
body {
  margin: 0;
  font-family: sans-serif;
  font-size: 13px;
  line-height: 1.231;
  color: #222;
}
::-moz-selection {
  background: var(--link-highlight); /* Blue */
  color: var(--background); /* White */
  text-shadow: none;
}
::selection {
  background: var(--link-highlight); /* Blue */
  color: var(--background); /* White */
  text-shadow: none;
}
a {
  color: var(--link); /* Gray */
  text-decoration: none;
  border-bottom: solid 1px var(--link-highlight); /* Blue */
  cursor: pointer;
}
a:visited {
  color: var(--link-visited); /* Lighter Gray */
  border-bottom-color: var(--link-visited-highlight); /* Light Blue */
}
a:focus {
  outline: thin dotted;
}
a:hover,
a:active {
  color: var(--link-focus);
  outline: 0;
}
img {
  border: 0;
  -ms-interpolation-mode: bicubic;
}
svg:not(:root) {
  overflow: hidden;
}

/* Site Styles */
@font-face {
  font-family: "Comfortaa";
  src: url("/comfortaa_regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
body {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  font-size: 20px;
  line-height: 1.4;
  color: var(--text); /* Brown */
  background: var(--background);
}
body > * {
  width: 52rem;
  max-width: calc(100vw - 20px);
  margin-inline: auto;
}
body,
h1 {
  font-family: "Comfortaa", Tahoma, sans-serif;
  font-weight: normal;
}
h1 {
  font-size: 2em;
  color: var(--header); /* Pink */
  margin: 0.5em 0;
}
section,
div {
  background-color: light-dark(hsl(0 0% 0 / 0.1), hsl(15 33% 30% / 0.175));
  border-radius: 2rem;
  margin-block: 2rem;
  padding: 1rem 1rem;
}
div {
  margin-inline: auto;
  padding: 1rem 2rem;
  width: min-content;
}
h1,
p {
  margin-block-start: 0;
}
p:last-child {
  margin-block-end: 0;
}
strong {
  color: var(--highlight);
}
em {
  color: light-dark(var(--highlight), var(--accent));
  font-style: normal;
}
footer {
  margin-top: 2em;
  font-size: 0.8em;
}

.info {
  font-size: 1rem;
}