@charset "UTF-8";

/* override defaults */

:root {
  --pico-border-radius: 0.5rem;
  --pico-font-family-sans-serif: Inter, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji);
  --pico-font-size: 90%;
  --pico-line-height: 1.25;
  --pico-form-element-spacing-vertical: 0.5rem;
  --pico-form-element-spacing-horizontal: 1.0rem;
}

@media (min-width: 576px) {
    :root {
        --pico-font-size: 90%;
    }
}

@media (min-width: 768px) {
    :root {
        --pico-font-size: 90%;
    }
}

@media (min-width: 1024px) {
    :root {
        --pico-font-size: 90%;
    }
}

@media (min-width: 1280px) {
    :root {
        --pico-font-size: 90%;
    }
}

@media (min-width: 1536px) {
    :root {
        --pico-font-size: 90%;
    }
}

a:link {
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .ff-theme {
    font-family: "Merienda", cursive;
}

.theme-color {
    color: var(--pico-color-grey-150);
}

.theme-bg-color {
    background-color: var(--pico-color-azure-750);
}

button, a[role="button"] {
    border-radius: 2rem;
    transition: transform .2s; /* Animation */
}
button:hover, a[role="button"]:hover {
    border-radius: 2rem;
    transform: scale(1.05);
}

/* custom utilities */

/* header */

.topbar ul li {
    display: inline;
    margin-left: 1em;
}

@media (min-width: 900px) {
    .menuitem li {
        border-right: solid 1px #052940;
    }
        .menuitem li:last-of-type {
            border-right: none;
        }
}

.menuitem a, .menuitem li {
    border-radius: 0;
}

.menuitem a {
    margin-left: .25em;
    margin-right: .25em;
}

@media (min-width: 900px) {
    .menuitem a:hover, .menuitem a.active {
        border-top: solid 3px #052940;
    }
}

.hero {
  background-color: #394046;
  background-image: url("https://picsum.photos/id/80/3000/1000");
  background-position: center;
  background-size: cover;
  margin-top: 1.5em;
}
    .hero header {
      padding: 8rem 0;
    }

    .hero header hgroup > :last-child {
      color: var(--h3-color);
    }

    @media (min-width: 576px) {
        .hero {
            margin-top: 1em;
        }
    }

/* components */

.adoption-container {
    background: linear-gradient(to bottom, var(--pico-color-azure-600), var(--pico-color-azure-850));
}

.gallery-container {
    background: linear-gradient(to bottom, var(--pico-color-cyan-300), var(--pico-color-cyan-700));
}

.gallery div {
    transition: transform .2s; /* Animation */
}

    .gallery div:hover {
      transform: scale(1.03);
    }

    .gallery div img {
        border-radius: 0;
    }

    .gallery div img:hover {
        cursor: zoom-in;
    }

.feature {
    transition: transform .2s; /* Animation */
}
    .feature:hover {
        transform: scale(1.05);
    }

    .feature header {
      height: 15em;
      background-size: cover;
      background-position: center;
    }