@charset "utf-8";

/*
   grants.rocks V1

   Effects Style Sheet
   Author: Grant Cooper
   Date: 2026
*/

 /* General Effects */
    body {
       background-color: hsl(145, 18%, 22%);
       }
    header {
       background-color: hsl(160, 7%, 15%);
       border-bottom: 3px solid hsl(145, 8%, 38%);
       }
    header h1 {
       color: hsl(45, 25%, 88%);
       }
    header p {
       color: hsl(45, 12%, 70%);
       }

 /* Navigation Effects */
    nav.toplinks a:link,
    nav.toplinks a:visited {
       color: hsl(45, 20%, 82%);
       }
    nav.toplinks a:hover,
    nav.toplinks a:active {
       color: hsl(155, 28%, 58%);
       }
    nav.footernav a:link,
    nav.footernav a:visited {
       color: hsl(45, 20%, 80%);
       }
    nav.footernav a:hover,
    nav.footernav a:active {
       color: hsl(160, 30%, 55%);
       }

 /* Home Page Effects */
    section#home-intro {
       background-color: hsl(30, 18%, 32%);
       border: 1px solid hsl(145, 10%, 40%);
       border-radius: 18px;
       overflow: hidden;
       box-shadow: 0px 6px 18px hsla(0, 0%, 0%, 0.3);
       transition:
          transform 0.25s ease,
          box-shadow 0.25s ease;
       }
    a.home-intro-link:hover section#home-intro,
    a.home-intro-link:focus-visible section#home-intro {
       transform: translateY(-6px);
       box-shadow: 0 18px 35px hsla(0, 0%, 0%, 0.35);
       }
    article.home-card {
       background-color: hsl(30, 18%, 32%);
       border: 1px solid hsl(145, 10%, 40%);
       border-radius: 18px;
       box-shadow: 0px 6px 18px hsla(0, 0%, 0%, 0.3);
       transition:
          transform 0.25s ease,
          box-shadow 0.25s ease;
       }
    article.home-card:hover {
       transform: translateY(-6px);
       box-shadow: 0 18px 35px hsla(0, 0%, 0%, 0.35);
       }

 /* Recent Finds Page Effects */
    section#recentfinds-intro {
       background-color: hsl(145, 10%, 28%);
       border: 1px solid hsl(145, 10%, 40%);
       border-radius: 20px;
       box-shadow: 0px 8px 20px hsla(0, 0%, 0%, 0.35);
       }
    article.find-post {
       background-color: hsl(30, 18%, 32%);
       border: 1px solid hsl(145, 10%, 40%);
       border-radius: 20px;
       box-shadow: 0px 6px 18px hsla(0, 0%, 0%, 0.3);
       transition:
          transform 0.25s ease,
          box-shadow 0.25s ease;
       }
    a.find-post-link:hover article.find-post {
       transform: translateY(-6px);
       box-shadow: 0 18px 35px hsla(0, 0%, 0%, 0.35);
       }
    a.find-post-link:focus-visible article.find-post {
       outline: 3px solid hsl(155, 30%, 60%);
       outline-offset: 6px;
       transform: translateY(-6px);
       box-shadow: 0 18px 35px hsla(0, 0%, 0%, 0.35);
       }
    p.find-date {
       color: hsl(45, 12%, 70%);
       }
    section.find-post-images img {
       border: 1px solid hsl(145, 10%, 40%);
       border-radius: 14px;
       }
    section#trip-page p.find-date {
       color: hsl(45, 12%, 70%);
       }
    article.trip-article {
       background-color: hsl(145, 10%, 28%);
       border: 1px solid hsl(145, 10%, 40%);
       border-radius: 14px;
       box-shadow: 0px 8px 20px hsla(0, 0%, 0%, 0.35);
       }
    section.trip-side-images img {
       border: 1px solid hsl(145, 10%, 40%);
       border-radius: 14px;
       box-shadow: 0px 6px 18px hsla(0, 0%, 0%, 0.3);
       }

 /* Specimen Page Effects */

 /* Rocks and Fossils Intro Effects */
    section#rocks-intro,
    section#fossils-intro {
       background-color: hsl(145, 10%, 28%);
       border: 1px solid hsl(145, 10%, 40%);
       border-radius: 20px;
       box-shadow: 0px 8px 20px hsla(0, 0%, 0%, 0.35);
       }

 /* Rock and Fossil Card Effects */
    article.specimen {
       background-color: hsl(30, 18%, 32%);
       border: 1px solid hsl(145, 10%, 40%);
       border-radius: 18px;
       box-shadow: 0px 6px 18px hsla(0, 0%, 0%, 0.3);
       transition:
          transform 0.25s ease,
          box-shadow 0.25s ease;
       }
    article.specimen:hover {
       transform: translateY(-6px);
       box-shadow: 0 18px 35px hsla(0, 0%, 0%, 0.35);
       }
    section.catalog-tools {
       background-color: hsl(145, 10%, 28%);
       border: 1px solid hsl(145, 10%, 40%);
       border-radius: 14px;
       box-shadow: 0px 6px 18px hsla(0, 0%, 0%, 0.3);
       }
    label.catalog-search span,
    p.catalog-count {
       color: hsl(45, 12%, 70%);
       }
    label.catalog-search input {
       background-color: hsl(45, 20%, 88%);
       border: 1px solid hsl(145, 10%, 42%);
       border-radius: 8px;
       color: hsl(160, 7%, 15%);
       }
    label.catalog-search input:focus {
       outline: 3px solid hsla(155, 30%, 60%, 0.32);
       border-color: hsl(155, 30%, 60%);
       }
    button.tag-filter {
       background-color: hsl(39, 15%, 45%);
       border: 1px solid hsl(39, 15%, 58%);
       border-radius: 999px;
       color: hsl(45, 20%, 88%);
       cursor: pointer;
       }
    button.tag-filter:hover,
    button.tag-filter.is-active {
       background-color: hsl(145, 12%, 34%);
       border-color: hsl(155, 30%, 60%);
       }

 /* Individual Specimen Page Effects */
    img#main-image {
       border-radius: 12px;
       }
    section#thumbnail-row {
       scrollbar-color: hsl(39, 15%, 55%) hsl(145, 18%, 22%);
       }
    section#thumbnail-row::-webkit-scrollbar-track {
       background: hsl(145, 18%, 22%);
       border-radius: 999px;
       }
    section#thumbnail-row::-webkit-scrollbar-thumb {
       background: hsl(39, 15%, 55%);
       border-radius: 999px;
       border: 4px solid hsl(145, 18%, 22%);
       }
    section#thumbnail-row::-webkit-scrollbar-thumb:hover {
       background: hsl(39, 18%, 65%);
       }
    img.thumbnail {
       border: 2px solid hsl(145, 10%, 40%);
       border-radius: 10px;
       cursor: pointer;
       transition: 0.2s;
       }
    img.thumbnail:hover {
       border-color: hsl(155, 30%, 60%);
       transform: translateY(-3px);
       }
    article.specimen-description {
       background-color: hsl(39, 15%, 45%);
       border-radius: 14px;
       }

 /* Tag Effects */
    ul.tags li {
       background-color: hsl(39, 15%, 45%);
       border-radius: 6px;
       }
    article.specimen ul.tags li {
       background-color: hsl(145, 12%, 34%);
       border: 1px solid hsl(145, 10%, 42%);
       border-radius: 999px;
       }

 /* Info Page Effects */
    section#info-intro,
    section#info-article-intro {
       background-color: hsl(145, 10%, 28%);
       border: 1px solid hsl(145, 10%, 40%);
       border-radius: 20px;
       box-shadow: 0px 8px 20px hsla(0, 0%, 0%, 0.35);
       }
    article.info-card {
       background-color: hsl(30, 18%, 32%);
       border: 1px solid hsl(145, 10%, 40%);
       border-radius: 18px;
       box-shadow: 0px 6px 18px hsla(0, 0%, 0%, 0.3);
       transition:
          transform 0.25s ease,
          box-shadow 0.25s ease;
       }
    article.info-card:hover {
       transform: translateY(-6px);
       box-shadow: 0 18px 35px hsla(0, 0%, 0%, 0.35);
       }
    article.info-article {
       background-color: hsl(145, 10%, 28%);
       border: 1px solid hsl(145, 10%, 40%);
       border-radius: 14px;
       box-shadow: 0px 8px 20px hsla(0, 0%, 0%, 0.35);
       }
    li.citation-entry,
    li.glossary-entry {
       border-bottom: 1px solid hsl(145, 10%, 40%);
       }
    li.citation-entry:target,
    li.glossary-entry:target {
       background-color: hsla(39, 15%, 45%, 0.32);
       outline: 1px solid hsl(39, 15%, 55%);
       outline-offset: 0.45rem;
       }
    a.citation-number,
    a.glossary-number {
       color: hsl(45, 12%, 70%);
       }
    li.citation-entry a,
    li.glossary-entry a,
    a.citation-ref {
       color: hsl(155, 30%, 70%);
       }
    li.citation-entry a:hover,
    li.glossary-entry a:hover,
    a.citation-ref:hover {
       color: hsl(45, 20%, 88%);
       }
    li.citation-entry ul.tags li,
    li.glossary-entry ul.tags li {
       background-color: hsl(145, 12%, 34%);
       border: 1px solid hsl(145, 10%, 42%);
       border-radius: 999px;
       }
    aside.citation-popover {
       background-color: hsl(30, 18%, 32%);
       border: 1px solid hsl(145, 10%, 40%);
       border-radius: 12px;
       box-shadow: 0px 10px 28px hsla(0, 0%, 0%, 0.4);
       }
    p.citation-popover-tags {
       color: hsl(45, 12%, 70%);
       }

 /* About Page Effects */
    section#about-intro,
    section#contact-section {
       background-color: hsl(145, 10%, 28%);
       border: 1px solid hsl(145, 10%, 40%);
       border-radius: 20px;
       box-shadow: 0px 8px 20px hsla(0, 0%, 0%, 0.35);
       }
    form#contact-form label span,
    p.contact-email {
       color: hsl(45, 12%, 70%);
       }
    form#contact-form input,
    form#contact-form textarea {
       background-color: hsl(45, 20%, 88%);
       border: 1px solid hsl(145, 10%, 42%);
       border-radius: 8px;
       color: hsl(160, 7%, 15%);
       }
    form#contact-form input:focus,
    form#contact-form textarea:focus {
       outline: 3px solid hsla(155, 30%, 60%, 0.32);
       border-color: hsl(155, 30%, 60%);
       }
    form#contact-form button {
       background-color: hsl(39, 15%, 45%);
       border: 1px solid hsl(39, 15%, 58%);
       border-radius: 8px;
       color: hsl(45, 20%, 88%);
       cursor: pointer;
       }
    form#contact-form button:hover {
       background-color: hsl(145, 12%, 34%);
       border-color: hsl(155, 30%, 60%);
       }

 /* Footer Effects */
    footer {
       background-color: hsl(160, 7%, 15%);
       border-top: 3px solid hsl(145, 8%, 38%);
       }