nav { background-color: rgba(22, 23, 25, 0.4) !important; transition: background-color 0.5s; } body.is-scrolled nav { background-color: rgba(22, 23, 25, 1.0) !important; } .navbar-collapse:not(.collapsing):not(.show) { max-width: fit-content; } .navbar-nav .btn { padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x); padding-right: var(--bs-navbar-nav-link-padding-x); padding-left: var(--bs-navbar-nav-link-padding-x); } .hero { height: 100vh; } .row { --bs-gutter-y: var(--bs-gutter-x); } .text-shadow { text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4), -1px 0px 1px rgba(0, 0, 0, 0.4), -1px 1px 1px rgba(0, 0, 0, 0.4), 0px -1px 1px rgba(0, 0, 0, 0.4), 0px 0px 1px rgba(0, 0, 0, 0.4), 0px 1px 1px rgba(0, 0, 0, 0.4), 1px -1px 1px rgba(0, 0, 0, 0.4), 1px 0px 1px rgba(0, 0, 0, 0.4), 1px 1px 1px rgba(0, 0, 0, 0.4); } :target::before { content: ""; display: block; height: 4rem; margin-top: -4rem; visibility: hidden; } .anchor-link { text-decoration: none; opacity: 0; transition: opacity 0.2s; } h1:hover .anchor-link, h2:hover .anchor-link, h3:hover .anchor-link, h4:hover .anchor-link, h5:hover .anchor-link, h6:hover .anchor-link { opacity: 1; } .cover, .parallax, .card-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .parallax { height: 100vh; } .card-img-overlay { position: unset; z-index: 1; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); transition: background-color 0.2s; } .card:hover .card-img-overlay { background-color: rgba(0, 0, 0, 0.4); }