/* GLOBAL ------------------------------------------------------------------------------------------------------------- */
:root {
  box-sizing: border-box; /* Prevent overflow */
  scroll-behavior: smooth;

  /* GAPS */
  --xsGap: 0rem;
  --sGap: 0rem;
  --mGap: 0rem;
  --lGap: 0rem;
  --xlGap: 0rem;

  /* MARGINS */
  --sideMargin: 0vw;

  /* FONTS */
  --h1FontSize: 3.5rem;
  --h1LineHeight: 3.75rem;
  --h2FontSize: 2rem;
  --h2LineHeight: 2rem;

  --textFontSize: 1.2rem;
  --textLineHeight: 1.4rem;

  /* COLORS */
  --gruenerMorgen: #14f573;
  --blauerMittag: #14054b;
  --lilaNachmittag: #a5a5f5;
  --orangerAbend: #ff9141;
  --weisseNacht: #e1fafa;
}

@font-face {
  font-family: "Mona-Sans-Regular";
  src:
    url(/assets/fonts/MonaSans/ttf/MonaSans-VariableFont_wdth-wght.ttf)
      format("truetype"),
    url(/assets/fonts/MonaSans/woff2/MonaSans-VariableFont_wdth-wght.woff2)
      format("woff2"),
    url(/assets/fonts/MonaSans/woff/MonaSans-VariableFont_wdth-wght.woff)
      format("woff");
  font-variation-settings:
    "wght" 450,
    "wdth" 100;
  font-style: normal;
}

@font-face {
  font-family: "Mona-Sans-Extended";
  src:
    url(/assets/fonts/MonaSans/ttf/MonaSans-VariableFont_wdth-wght.ttf)
      format("truetype"),
    url(/assets/fonts/MonaSans/woff2/MonaSans-VariableFont_wdth-wght.woff2)
      format("woff2"),
    url(/assets/fonts/MonaSans/woff/MonaSans-VariableFont_wdth-wght.woff)
      format("woff");
  font-variation-settings:
    "wght" 850,
    "wdth" 120;
  font-style: normal;
}

@font-face {
  font-family: "Mona-Sans-Bold";
  src:
    url(/assets/fonts/MonaSans/ttf/MonaSans-VariableFont_wdth-wght.ttf)
      format("truetype"),
    url(/assets/fonts/MonaSans/woff2/MonaSans-VariableFont_wdth-wght.woff2)
      format("woff2"),
    url(/assets/fonts/MonaSans/woff/MonaSans-VariableFont_wdth-wght.woff)
      format("woff");
  font-variation-settings:
    "wght" 750,
    "wdth" 100;
  font-style: normal;
}

@font-face {
  font-family: "Mona-Sans-Regular-Italic";
  src:
    url(/assets/fonts/MonaSans/ttf/MonaSans-Italic-VariableFont_wdth-wght.ttf)
      format("truetype"),
    url(/assets/fonts/MonaSans/woff2/MonaSans-Italic-VariableFont_wdth-wght.woff2)
      format("woff2"),
    url(/assets/fonts/MonaSans/woff/MonaSans-Italic-VariableFont_wdth-wght.woff)
      format("woff");
  font-variation-settings:
    "wght" 450,
    "wdth" 100;
  font-style: italic;
}

* {
  margin: 0px;
  padding: 0px;
  font-family: "Mona-Sans-Regular", sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  text-decoration: none;
  color: var(--weisseNacht);
  scroll-behavior: smooth;
}

html {
  height: 100%; /* Force footer to end of page */
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Force footer to end of page */
  padding: 0px 25%;
  background-color: var(--blauerMittag);
}

header {
  display: flex;
  flex-direction: row;
  align-items: end;
  width: 100%;
  height: auto;
  margin: 50px 0px 75px 0px;
}

main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  flex: 1; /* Force footer to end of page */
}

footer {
  display: flex;
  flex-direction: row;
  align-items: top;
  justify-content: space-between;
  width: 100%;
  height: auto;
  margin: 75px 0px 50px 0px;
}

/* FONTS -------------------------------------------------------------------------------------------------------------- */
h1 {
  font-family: "Mona-Sans-Extended", sans-serif;
  font-size: var(--h1FontSize);
  line-height: var(--h1LineHeight);
  color: var(--weisseNacht);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

h2 {
  font-family: "Mona-Sans-Bold", sans-serif;
  font-size: var(--h2FontSize);
  line-height: var(--h2LineHeight);
  color: var(--weisseNacht);
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

p {
  font-family: "Mona-Sans-Regular", sans-serif;
  font-size: var(--textFontSize);
  line-height: var(--textLineHeight);
  color: var(--weisseNacht);
  margin-bottom: 1rem;
}

a {
  font-family: "Mona-Sans-Bold", sans-serif;
  font-size: var(--textFontSize);
  line-height: var(--textLineHeight);
  color: var(--weisseNacht);
  cursor: pointer;
}

/* KTI ---------------------------------------------------------------------------------------------------------------- */
strong {
  font-family: "Mona-Sans-Bold", sans-serif;
}

em {
  font-family: "Mona-Sans-Regular-Italic", sans-serif;
}

u {
  text-decoration: underline;
}

s {
  text-decoration: line-through;
}

/* HEADER ------------------------------------------------------------------------------------------------------------- */
#logo svg {
  display: flex;
  align-items: center;
  width: 50px;
  height: auto;
}

/* MEDIA QUERIES ------------------------------------------------------------------------------------------------------ */
@media (max-width: 800px) {
  /* GLOBAL ------------------------------------------------------------------------------------------------------------- */
  :root {
    /* FONTS */
    --h1FontSize: 2rem;
    --h1LineHeight: 2.25rem;
    --h2FontSize: 1.5rem;
    --h2LineHeight: 1.75rem;

    --textFontSize: 1rem;
    --textLineHeight: 1.2rem;
  }

  body {
    padding: 0px 10%;
  }

  header {
    margin: 40px 0px 60px 0px;
  }

  footer {
    margin: 60px 0px 40px 0px;
  }

  /* FONTS -------------------------------------------------------------------------------------------------------------- */
  h1 {
    margin-bottom: 1rem;
  }

  h2 {
    margin-bottom: 0.5rem;
  }

  p {
    margin-bottom: 0.75rem;
  }
  /* HEADER ------------------------------------------------------------------------------------------------------------- */
  #logo {
    width: 40px;
  }
}