@font-face {
   font-family: "Earth";
   src: url("/fonts/earth.woff2");
}

body, html
{
   height: 100%;
   margin: 0;
}

body
{
   display: flex;
   flex-direction: column;
   font-family: sans-serif;
}

a
{
   text-decoration: none;
   color: inherit;
}

a:visited
{
   color: inherit;
}

h1
{
   font-family: "Earth", sans-serif;
   text-align: center;
   line-height: 1.1em;
}

.hero
{
   min-height: 600px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   background: center / cover no-repeat url("/images/hero/hero1.webp");
   transition: background-image 5s ease;
}

.hero > .inner
{
   flex: 1;
   display: flex;
   gap: 50px;
   flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
   backdrop-filter: blur(10px);
}

.intro
{
   color: #fff;
   filter: drop-shadow(5px 5px 5px #0005);
}

.intro > span
{
   display: block;
}