@import url('https://fonts.googleapis.com/css2?family=Kalnia+Glaze:wght@100..700&family=Kalnia:wght@100..700&family=Karla:ital,wght@0,200..800;1,200..800&family=Nova+Mono&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

#body {
  background-color: steelblue;
}

#coverContainer {
  margin-top: 30px;
}

#cover {
  background-color: steelblue;
  background-image: url('/img/pexels-pixabay-355810.jpg');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 300px;
  position: sticky; top: 40px; 
  z-index: -100;
}

#spiel {
  background-color: aliceblue;
  border: 1px solid lightblue;
  border-radius: 40px;
}

.callout {
  position: relative;
  top: -40px;
  left: 20px;
    animation: glow 3s infinite alternate;
    color: rgb(246, 252, 255);
}



.lead { font-size: 1.5em; font-family: 'Ubuntu', sans-serif;}
.lead1 { margin-top: -40px;}

@keyframes glow {
    to {
        text-shadow: 0 0 10px aliceblue;
    }
}


body { 
    --bs-font-sans-serif: 'Karla', sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-font-monospace: 'Nova Mono', monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

h1, .h1, h2, h3 {
  font-family: 'Kalnia', serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

h1.callout small {
  font-family: 'Nova Mono';
  color: skyblue;
  font-size: 60%;
  display: block;
  position: relative;
  top: -10px;
}

@font-palette-values --Grays {
    font-family: 'Kalnia Glaze'';
    override-colors:
    0 #c1cbed,
    1 #ff3a92;
  }
  .navbar-brand {
    font-family: 'Kalnia Glaze';
    font-palette: --Grays;
  }