@font-face {
  font-family: 'Kufam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Kufam.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html,body{height:100%;}
body {
  font: 20px/1.3 'Kufam', cursive;
  background-color: rgb(109, 194, 73);
  color: #212529;
}

a {
    color: #fff;
}

h1,h2,h3,h4,h5,h6 {
  word-break: break-all;
  word-wrap: break-word;
}

h2, h3 {
  margin-bottom: 1em;
}

span.line {
  display: block;
}

body > .container {
  margin-top: 4rem;
}

section {
  padding: 3em;
  margin-top: 3em;
  text-align: left
}

section:nth-child(2n+1) {
  background-color: rgb(64, 169, 64);
  color: #000000;
}

section:last-child {
  margin-bottom: 3em;
}

dt {
  color: #000000;
  margin-bottom: .5em;
}

.logo {
  height: inherit;
  position: relative;
}

.logo svg {
  margin: 2rem;
}

.headline {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 5rem;
  z-index: 10;
}

.highlight {
  padding: 1em 2em;
  background-color: rgb(230,230,230);
  color: rgb(64, 169, 64);
  height: 100%;
}

.eventdate {
  transform: rotate(270deg);
  transform-origin: left top 0;
  font-size: 1.5rem;
  color: #888;
  margin-bottom: -3rem;
}

.motto {
  margin-top: -8rem;
  font-size: 3rem;
  text-align: right;
}

.bg-dark {
  background-color: rgb(64, 169, 64) !important;
}

.bg-light {
  background-color: rgb(109, 194, 73) !important;
}

.fg-light {
  color: rgb(230,230,230) !important;
}

.fg-dark2 {
  color: rgb(109, 194, 73) !important;
}

footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background-color: rgb(64, 169, 64);
}

#svgArt {
  width:60%; 
}

.dropdown-item {
  text-align: center;
}

.text-columns {
  column-count: 3;
  column-gap: 2rem;
}

.keep-together {
  break-inside: avoid;
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
  #svgArt {
    width:100%; 
  }

  body > .container {
    margin-top: 2rem;
  }
  
  aside {
    margin-top: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  
  footer {
    position: initial;
  }
}

/* tablets, and similar size */
@media (max-width: 767.98px) {
  body > .container {
    margin-top: 0;
  }  

  section {
    padding: 2em;
  }
  
  .headline {
    margin-top: 1rem;
    font-size: 4rem;
    margin-bottom: -4rem;
  }
  
  .motto {
    margin-top: -4rem;
    font-size: 2rem;
  }
  
  .text-columns {
    column-count: 2;
    column-gap: 1rem;
  }  

}

/* phones, etc. */
@media (max-width: 575.98px) {
  span.line {
    display: inline;
  }
  
  section {
    padding: 1em;
    margin-top: 2em;
  }  
  
  .headline {
    font-size: 3rem;
    margin-bottom: -1rem;
  }
  
  .logo {
    width: 100%;
  }
  
  .eventdate {
    font-size: 1.2rem;
  }
  
  .motto {
    margin-top: -1rem;
    font-size: 1.5rem;
  }
  
  .text-columns {
    column-count: initial;
    column-gap: initial;
  }  
}