:root {
    /* basic color definition */
     --dark-gray: #5a5a5a;
     --darker-gray: #323232;
     --light-gray: #DDDDD;
     --white: #fafafa;
     --black: #000000;
     --lilac: #6355a0;

    /* default : light scheme */
     --main-color: var(--lilac);
     --contrast-color: var(--lilac);
     --text-color: var(--white);
     --text-color-heading: var(--white);;
     --text-color-inverse: var(--darker-gray);
     --background-color: var(--black);
    /* font sizes */
     --font-size-small: 10px;
     --font-size-normal: 14px;
     --font-size-large: 18px;
     --font-size-extra-large: 24px;
     --shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
     --gallery-picture-height: 400px;
     --gallery-picture-width: 300px;
}

/* fonts */
 @font-face {
     font-family: Arial, Helvetica, sans-serif;
}
 @font-face {
     font-family: the-sans;
     src: url(../fonts/DIN-Light.odf);
}
 @font-face {
     font-family: the-sans-bold;
     src: url(../fonts/DIN-Light.odf);
}
/* ensure border-box */
 * {
     box-sizing: border-box;
     font-family: the-sans;
}
/* define columns and rows */
/* for small witdh: */
 [class*="col-"] {
     width: 100%;å
     float: left;
     padding-top: 1vmax;
     padding-bottom: 0vmax;
     padding-left: 0vmax;
     padding-right: 0vmax;
}
 .row::after {
     content: "";
     clear: both;
     display: table;
}
 .centered {
     display: flex;
     justify-content: center;
}
/* styling */
 html {
     background-color: var(--background-color);
     color: var(--text-color);
}
 .content {
     padding: 1vmax;
     font-size: var(--font-size-normal);
     font-size: var(--font-size-large);
     text-align: center;
}
 .footer {
     align-content: center;
     text-align: center;
     font-size: var(--font-size-small);
}
 .heading {
     padding: 0.6em;
     margin-bottom: 1vmax;
     margin-top: 1vmax;
     color: var(--text-color-heading);
     font-color: var(--text-color-heading);
     font-size: var(--font-size-large);
     background-color: var(--main-color);
     box-shadow: var(--shadow);
}
 h1 {
     font-size: var(--font-size-large);
      text-align: left;
}
 h2 {
     font-size: var(--font-size-large);
}
 h3 {
     font-size: var(--font-size-normal);
}
 img {
     max-width: 100%;
     height: auto;
}
 .external-links {
     justify-content: center;
     text-decoration: none;
     text-align: center;
}
 a.external-links {
     text-decoration: none;
}
a:link {
    color: var(--text-color);
    text-decoration: none;
}
a:visited {
    color: var(--contrast-color);
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
.position_bottom{
    position: absolute;
    bottom: 5%;
}
.background_image {
  background-image: url("../images/index_hg.png");
    height: 700px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
 .gallery {
     display: grid;
     padding: 0.5vmax;
     grid-gap: 0.5vmax;
     grid-template-columns: repeat( auto-fit, minmax(var(--gallery-picture-width), 1fr) );
}
 img.gallery-img {
     max-height: var(--gallery-picture-height);
     max-width: var(--gallery-picture-width);
}
 .gallery-img > div {
     text-align: center;
     grid-row: auto;
     display: flex;
     justify-content: center;
}

/* for wide screens: */
 @media only screen and (min-width: 630px) {
     .col-10 {
         width: 83.33vw;
    }
}
/* for wider screens: */
 @media only screen and (min-width: 1800px) {
     .col-10 {
         width: 1500px;
    }
}