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

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

/* custom utilities */

/* header */

.topbar, .topbar a, .topbar ul, .topbar li {
    background-color: var(--pico-color-azure-650);
}
    .topbar ul li {
        display: inline;
        margin-left: 1em;
    }

.menuitem {
    font-size: 120%;
}

.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 */

.masony-gallery {
  position: relative;
  margin: 20px auto 60px auto;
}

.gallery-item {
  position: absolute;
  transition: transform .2s; /* Animation */
}

    .gallery-item :hover {
      opacity: .75;
      cursor: zoom-in;
      transform: scale(0.9);
    }

.feature {
    transition: transform .2s; /* Animation */
}
    .feature:hover {
        transform: scale(1.05);
    }
    .feature header {
      height: 15em;
      background-size: cover;
      background-position: center;
    }

.grid-card article p  {
    min-height: 4rem;
}

.flickity-button {
  background: transparent;
}

.flickity-button:hover {
  background: transparent;
}

.flickity-button-icon {
  fill: white;
  opacity: .5;
}