@font-face {
  font-family: 'Lato';
  src: url('/fonts/lato-normal-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('/fonts/lato-italic-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Lato";
  src: url('/fonts/lato-normal-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Lato";
  src: url('/fonts/lato-normal-900-latin.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
}

:root {
    --primary-colour: rgba(228, 0, 70);
    --secondary-colour: rgba(240, 219, 253);
    --sx-color-primary: var(--primary-colour);
    --sx-color-secondary: var(--secondary-colour);
    --font-main: "Lato", sans-serif;
}

.sx__event {
  cursor: pointer;
}

.sx__calendar {
  font-family: var(--font-main);
}

html {
    font-family: var(--font-main);
    font-size: 20px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.02em;
    /* background: linear-gradient(to left, var(--primary-colour) 5%, var(--secondary-colour) 70%, white); */

    margin: 0;
    min-height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  /* padding-bottom: calc(16px + env(safe-area-inset-bottom)); */
  background:  linear-gradient(
    295deg,
    hsl(342deg 100% 45%) 0%,
    hsl(342deg 85% 59%) 7%,
    hsl(337deg 86% 67%) 14%,
    hsl(329deg 82% 74%) 23%,
    hsl(317deg 72% 79%) 33%,
    hsl(299deg 59% 85%) 46%,
    hsl(277deg 89% 93%) 61%,
    hsl(277deg 90% 94%) 76%,
    transparent
  ),
linear-gradient(
    130deg,
    hsl(342deg 100% 45%) 0%,
    hsl(343deg 84% 57%) 8%,
    hsl(340deg 86% 64%) 17%,
    hsl(334deg 85% 70%) 24%,
    hsl(327deg 80% 75%) 32%,
    hsl(317deg 72% 79%) 39%,
    hsl(303deg 60% 83%) 46%,
    hsl(285deg 74% 90%) 54%,
    hsl(277deg 90% 93%) 60%,
    hsl(277deg 90% 94%) 67%,
    hsl(277deg 90% 95%) 74%,
    transparent
  );
    background-blend-mode: overlay;
}

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

h1 {
    font-weight: 900;
    line-height: 120%;
    border-bottom-color: var(--primary-colour);
    border-bottom: 4px solid var(--primary-colour);
    width: fit-content;
}

strong {
    color: var(--primary-colour);
    font-weight: 900;
}

#programm-container {
    width: 90%;
    margin-left: 5%;
}


#news-container {
  margin-left: auto;
  margin-right: margin-left: auto;
  margin-right: auto;
  max-width: 900px;
  padding: 0 20px;
  padding-bottom: 0px;
  padding-bottom: 0px;
  padding-bottom: 30px;
}

.news-article {
      width: 100%;
      font-weight: 900;
}

.news-article a {
  border-bottom: 4px solid var(--primary-colour);
  width: fit-content;
}

.news-article a:hover {
    border-bottom: 4px solid var(--secondary-colour);
    width: 100%;
    transition: border-color 1s;
    transition-timing-function: ease;
    transition-timing-function: ease-out;
}

.footer-link:hover {
    border-bottom: 4px solid var(--secondary-colour);
    width: 100%;
    transition: border-color 1s;
    transition-timing-function: ease;
    transition-timing-function: ease-out;
}

.footer-link {
    border-bottom: 4px solid var(--primary-colour);
    width: 100%;
}

#content-wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
    padding: 0 20px;
    padding-bottom: 0px;
    padding-bottom: 30px;
}

footer {
    line-height: 120%;
    display: block;
    width: 100%;
    position: relative;
    bottom: 0;
    padding: 7px 0px;
    text-align: center;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 3px solid rgba(0, 0, 0, 0.2);
    font-weight: 900;
}

#banner-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-container {
    background-image: url("/img/icon/favicon.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    content: "";
    display: block;
    width: 15rem;
    height: 15rem;
}

#navigation {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 50px;
    text-align: center;
    padding-bottom: 15px;
    font-weight: 900;
}

#navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.4); */
}

#navigation li {
    display: inline-block;
}

#navigation a {
    display: inline-block;
    /* font-family: Metropolisbold; */
    font-size: 20px;
    margin: 0;
    padding: 13px 15px;
    border-bottom: 4px solid transparent;
}

#navigation li.active a {
    border-bottom-color: var(--primary-colour);
}

#navigation li:not(.active):hover a {
    border-bottom-color: var(--secondary-colour);
    transition: border-color 1s;
    transition-timing-function: ease;
    transition-timing-function: ease-out;
}

#banner-wrapper {
    margin-bottom: 20px;
}