@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Montserrat:wght@400;600&display=swap');

html {
  scroll-behavior: smooth;
}

.block.block-html {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
  animation-delay: 0.75s;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
ul#sharing-buttons {
    justify-content: center;
    margin-top:60px;
}
.site-page-mcilrath-swhof-acknowledgements #main-content p {
    margin-bottom:0;
}
.site-page-home h2 {
    font-size:1.75rem;
}
body.search .resource__thumbnail {
    width: 75%;
}
.media-embed .resource h3 {
   text-align:center!important;
}
.pagination .row-count, .pagination .pager label, .pagination .pager .page-count{
color:#222222;
font-size: .8125rem;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

quote {
  display: block;
  font-family: 'Montserrat', sans-serif; /* Montserrat for the main quote */
  font-size: 2rem;
  font-style: italic;
  color: #333;
  text-align: center;
  margin: 2rem auto;
  line-height: 1.5;
  padding: 2rem;
  background: #fdfaf6;
  border-left: 5px solid #b76e79;
  position: relative;
opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

quote.visible {
  opacity: 1;
  transform: translateY(0);
}

quote::before,
quote::after {
  font-family: Georgia, serif;
  font-size: 6rem;
  color: rgba(183, 110, 121, 0.15); /* Faded red-pink */
  position: absolute;
  pointer-events: none;
}

quote::before {
  content: "“";
  top: -20px;
  left: 0px;
}

quote::after {
  content: "”";
  bottom: 20px;
  right: 20px;
}

quote span {
  display: block;
  font-family: 'Dancing Script', cursive;
  font-size: 1.5rem;
  font-style: normal;
  color: #7a4e56; /* Slightly deeper tone for contrast */
  margin-top: 1rem;
  text-align: right;
  padding-right: 1rem;
}
.block.block-media.grid-position-1.grid-span-3, .block.block-media.grid-position-8.grid-span-5, nav.sub-menu {
  margin-bottom:40px;
}
.sub-menu .navigation {
  list-style: none;
  display: flex;
  flex-wrap:nowrap; /* allows wrapping on smaller screens */
  gap: 10px;
  padding: 0;
  margin: 0;
  justify-content: center; /* center-align the menu */
}

.sub-menu .navigation li {
  margin: 0;
}

.sub-menu .navigation li a {
  display: inline-block;
  padding: 10px 16px;
  background-color: #394f68;
  color: #fff;
  text-align:center;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.sub-menu .navigation li a:hover,
.sub-menu .navigation li a:focus {
  background-color: #003d80;
}

.block-pageTitle,
.home-subtitle {
  opacity: 0;
  visibility: hidden;
  animation-fill-mode: forwards;
}
.site-page-home .title {
width:80%;
}

/* Fade in the title after 0.5s */
.block-pageTitle {
  animation: fadeIn 0.6s ease-out 0.5s forwards;
}

/* Fade in the subtitle after 1s */
.home-subtitle {
  animation: fadeIn 0.9s ease-out 1s forwards!important;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
  }
}


.site-page-home .banner img {
    display:none!important;
}
.site-page-home .banner {
    background-image: url('https://exhibits.library.umkc.edu/files/asset/80c8265c7f197a1922d90845f3dcc6d384858344.jpg');
    height: 50vh!important;
    background-size: cover;
    width: 100%;
    max-width: none;
}
.site-page-home .media-render.file {
height:auto;}

.site-page-home .home-subtitle {
    z-index: 1;
    position: absolute;
    margin-top: -130px;
    font-style: italic;
    font-size: 25px;
    width: 70vw;
}
.site-page-home .block.block-pageTitle{
    width: 70vw;
    z-index: 1;
    margin-top: -300px;
}
.block.block-html.grid-position-6.grid-span-7 {
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.main-navigation .navigation>li>ul {
    flex-wrap:nowrap;
}

.media-embed .resource {
    vertical-align: top;
    width: 90%;
}

.media-render.file {
  width: 100%;
  height: 200px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
}

.media-render.file img {
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center center; /* <<< key addition to center cropping */
  display: block;
  transition: transform 0.3s ease;
  transform-origin: center center;
}

.media-render.file:hover img {
  transform: scale(0.95);
  cursor: pointer;
}





.main-navigation .navigation>li>a {
    color: white;
}
.main-header__main-bar, .main-header {
    background: #be3f34;
}
.main-navigation .navigation>li>a::after, .main-navigation__toggle span {
    background:white;
}
    .main-header__top-bar {
     background: #8d2e26;
    }
a.main-header__advanced-search {
    color: white;}
a.main-header__advanced-search:hover {
    color: white;
    text-decoration:none;}

.main-header hr {
background-color:#be3f34!important;
}

.main-footer__top {
    background:#302827;
}
.main-footer__bottom {
    background:#161616;
}

footer.main-footer hr {
    background-color:#302827;
}

/** ITEMS **/
.resource__thumbnail {
  width: 200px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.resource__thumbnail a {
  display: block;
  width: 100%;
  height: 100%;
}

.resource__thumbnail img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 110%;
  transform: translate(-50%, -50%) scale(1.1); /* 💥 Center the image, zoom in slightly */
  transition: transform 0.3s ease;
  object-fit: cover;
}

.resource__thumbnail a:hover img {
  transform: translate(-50%, -50%) scale(1); /* 💥 Zoom out on hover while keeping center focus */
}

.resource__thumbnail {
    width:35%;
}
.resource-list .resource__thumbnail img {
    height: auto;
    object-fit: cover;
    width: 100%;
}

.resource-list .resource {
    margin-top:30px;
}

.resource-grid .resource__thumbnail {
     width:100%;
}
.right-mobile-no-padding {
padding-right:60px;
}
.mobile-hide {
display:inline;}
}

@media (max-width: 1768px) {
.title {
    width:80%;
}
}
@media (max-width: 1024px) {
.site-page-home .banner {
    height:400px;
}
}

/* Mobile */
@media (max-width: 768px) {

/* Browse page */
body.browse .resource-list .resource {
    flex-direction: column-reverse;
}
body.browse .resource__thumbnail {
    width:100%;
    padding:10px;
}
body.browse .resource-list .resource__thumbnail {
    padding:0;
    margin:0px 15px 15px auto;
}
.media-embed .resource {
    width:100%;
}
.site-page-home #main-content {
    padding-top:2rem;
}
.site-page-home .block.block-media.grid-position-1.grid-span-6 {
    padding-top:130px;
}
.site-page-home h2 {
    margin-top:40px;
    font-size:1.25rem;
}
.media-embed .resource h3 {
   padding-bottom:20px;
}
.site-page-home .home-subtitle {
    margin-top: -100px;
}
.site-page-home .banner {
    height: 42vh !important;
}
.site-page-home .banner {
    background-image: url('https://exhibits.library.umkc.edu/files/asset/3003fe4d3533fba4de34172c9587e364e62f225b.jpg');
    height: 100vh;
    background-size: cover;
    background-position: 80% 80%;
}
.right-mobile-no-padding {
    padding-right:0px;
}
.title {
    width:100%;
}
.mobile-hide {
   display:none;
}
.site-page-home .title {
width:100%;
}
.site-page-home .block.block-pageTitle {
width: 100vw;
}
.site-page-home .blocks {
    margin-top: 0px;
}
.site-page-home .block.block-html {
    padding-top: 40px;
}
  .sub-menu .navigation {
    flex-direction: column;
    align-items: center;
  }
.site-page-home #main-content {
padding-left:30px;
padding-right:30px;}
}

<script>
document.querySelectorAll('h3 > a').forEach(anchor => {
  const parent = anchor.parentElement;
  // Replace the <a> with its contents
  parent.replaceChild(document.createTextNode(anchor.textContent), anchor);
});

</script>

<script>
document.querySelectorAll('h3').forEach(h3 => {
  h3.style.color = 'red';
});
</script>