@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace&display=swap');
h1 {
  font-family: 'Bruno Ace', sans-serif;
}
.brand-logo {
  font-family: 'Bruno Ace', sans-serif;
  text-decoration: none;
}
div.video-banner {
    display: grid;
    grid-template-areas: "hero";
    place-items: center;
    /*height: max(300px, calc(100vh - 152px)); /* viewport height minus the fixed height of menu header on current website, with a minimum of X pixels */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
}
div.video-banner > * {
    grid-area: hero; /* stacking all the child elements of the grid - could simply have set 1 / 1 / 2 / 2 instead of naming the area hero */
}
div.video-banner div.text {
    z-index: 1; /* to be sure that this is on top of the video */
    text-align: center;
    color: white;
    text-shadow: 2px 2px 5px black;
}
div.video-banner div.overlay {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, var(--cassiopeia-color-link), var(--cassiopeia-color-hover));
    opacity: 0.7;
}
div.video-banner video {
    width: 100%;
    /*height: 100%;*/
    object-fit: cover;
    overflow: hidden;
}