:root{
--muted: rgba(255,255,255,0.75);
}

body{font-family: Michroma, system-ui, -apple-system, "Segoe UI", Roboto, 'Helvetica Neue', Arial;}

.font-sans {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
               sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
               "Segoe UI Symbol", "Noto Color Emoji";
}

#hero video{ filter: brightness(.85) contrast(.95); }
#hero::before, #hero::after {
content: "";
position: absolute;
left: 0; right: 0;
height: 30%;
pointer-events: none;
z-index: 5;
}
#hero::before {
top: 0;
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}
#hero::after {
bottom: 0;
background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}

button, a.button{border-width:1px}

@media (min-width: 1024px){
h1{letter-spacing:0.02em}
}

header {
  transition: all 0.3s ease;
}

@media (min-width: 1024px) {
  header div {
    padding-top: 1.75rem; 
    padding-bottom: 1.75rem;
  }
  header a {
    width: 12rem; 
  }
}

.logo-size {
  width: 40%;
  max-width: 200px;
  min-width: 120px;
  display: block;
  height: auto;
  pointer-events: none; 
}

.logo-size,
.logo-size img {
  transition: none !important;
  outline: none; 
}

img.grayscale, img[alt] {
transition: filter .45s ease, transform .35s ease;
}
img.grayscale:hover, img:hover{
filter: none !important;
transform: scale(1.02);
}

.text-pad {
  min-height: 3rem;
}

.white-svg {
  filter: invert(1) brightness(2);
}

img.no-anim {
    transition: none !important;
    filter: none !important;
    transform: none !important;
}

img.white-svg.no-anim {
    filter: invert(1) brightness(2) !important;
    transition: none !important; 
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: white !important;
}