/* BLE$$ website: fonts, resets and hover states. Layout is inline on each element. */
@font-face{font-family:"Bolster Condensed";src:url("../assets/fonts/BolsterCondensed.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Arial BLESS";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:700;font-style:normal;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#FFD000;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:#003C23;transition:color 160ms cubic-bezier(.2,0,.2,1)}
a:hover{color:#FF00FF}
a:focus-visible{outline:4px solid #003C23;outline-offset:2px}
.h1:hover{color:#FF00FF !important}
.h2:hover{color:#FFD000 !important}
.h3:hover{color:#FF00FF !important}
.h4:hover{color:#FF00FF !important}
.h5:hover{color:#FFD000 !important}
.h6:hover{color:#FF00FF !important}
.h7:hover{color:#FF00FF !important}
footer a:focus-visible,article a:focus-visible{outline-color:#FFD000}
/* Home: hero and "What you can do" each fill one screen; snap between them. */
html{scroll-snap-type:y proximity}
.hero,.what,.screen{scroll-snap-align:start}
@media (max-width:760px){
  .hero{height:auto !important;padding:24px 0 !important}
  .hero-art{max-height:none !important;width:100% !important}
  .what,.screen{min-height:0 !important}
  html{scroll-snap-type:none}
}