/* load local custom font */
/* normal */
@font-face {
  font-family: Rubik;
  src: url(rubik-light.woff2);
}
/* bold */
@font-face {
  font-family: Rubik;
  src: url(rubik-bold.woff2);
  font-weight: bold;
}
/* italic */
@font-face {
  font-family: Rubik;
  src: url(rubik-lightItalic.woff2);
  font-style: italic;
}

/* defining body */
body {	
    font-family: Rubik, officina, calibri, helvetica, sans-serif;
    line-height: 1.6;
	background-color:#1f260a;
    font-size: 18px;
    font-weight: normal;
	color:white;
    text-shadow: 0px 0px 5px black;
    overflow-x:hidden
}

/* media queries to responsive font size */
@media all and (max-device-width: 720px){
    body {
        font-size: 18px;
    }
}

@media all and (max-device-width: 640px){
    body {
        font-size: 16px;
    }
}

@media all and (max-device-width: 320px){
    body {
        font-family: 'Rubik';   
        font-size: 14px;
    }
}

/* defining headings */
h1 {
    font-size: 30px;
    font-weight: bold;
    font-style: normal;
    text-shadow: 0px 0px 5px black;
}

h2 {
    font-size: 20px;
    font-weight: bold;
    font-style: normal;
    padding-top: 1.5em;
}

h3 {
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0px 0px 5px black;
        padding-top: 1em;
}



h6 {
    font-size: 12px;
    line-height: 1;
    font-weight: normal;
    font-style: normal;
}

/* link defination */
a:link {color:white;text-decoration:none;}
a:visited {color:white;text-decoration:none;}
a:hover {color:#bfea3f}

/* ALL PAGES */
/* defining the upper top */
.top {
position: block;
width: 100%;
left: 0;
top: 0;
color: white;
font-size: 16px;
font-weight: normal;
text-align: left;
background-color: #1f260a;
}

/* defining the fixed footer */
.footer {
position: fixed;
width: 100%;
padding-left: 2em;
left: 0;
bottom: 0;
color: white;
font-size: 12px;
line-height: 1;
font-weight: normal;
font-style: normal;
text-align: left;
border-top: 1px;
border-style: solid;
border-top-color: dimgrey;
border-left: none;
border-right: none;
border-bottom: none;
background-color: #1f260a;
}


/* MUNAJAGA */
.munajaga-intro {
position: block;
width: 100%;
box-sizing: border-box;
padding: 1%;
text-align: left;    
color: white;
}
.munajaga-quote {
position: block;
width: 100%;
box-sizing: border-box;
padding: 10%;
font-style: italic;
text-shadow: 0px 0px 5px black;
color: white;
text-align: left;
background-image: url(revier.jpeg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;   
}
.munajaga-content {
position: block;
width: 100%;
box-sizing: border-box;
padding-top: 1%;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 20%;
text-align: left;    
color: white;
}


/* WILDBRET */
.wildbret-intro {
position: block;
width: 100%;
box-sizing: border-box;
padding: 1%;
text-align: left;    
color: white;
}
.wildbret-quote {
position: block;
width: 100%;
box-sizing: border-box;
padding: 10%;
font-style: italic;
text-shadow: 0px 0px 5px black;
color: white;
text-align: left;
background-image: url(dersepp1920.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;   
}
.wildbret-content {
position: block;
width: 100%;
box-sizing: border-box;
padding-top: 1%;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 20%;
text-align: left;    
color: white;
}

/* KONTAKT */
.kontakt-intro {
position: block;
width: 100%;
box-sizing: border-box;
padding: 1%;
text-align: left;    
color: white;
}
.kontakt-content {
position: block;
width: 100%;
box-sizing: border-box;
padding-top: 1%;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 20%;
text-align: left;    
color: white;
}

/* IMPRESSUM & DATENSCHUTZ */
.impress-intro {
position: block;
width: 100%;
box-sizing: border-box;
padding: 1%;
text-align: left;    
color: white;
}
.impress-quote {
position: block;
width: 100%;
box-sizing: border-box;
padding: 10%;
font-style: italic;
text-shadow: 0px 0px 5px black;
color: white;
text-align: left;
//background-image: url(platinedark.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;   
}
.impress-content {
position: block;
width: 100%;
box-sizing: border-box;
padding-top: 1%;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 20%;
text-align: left;    
color: white;
}



/* the devils albatros - dynamic responsive logo & navigation */
:root {
  /* ↓ Use these variables to customise the albatross. */
  //--centerflex-gap: 3rem;
  //--centerflex-threshold: 45rem;
}

.centerflex {
    /* ↓ Save the large negative or large positive value to a variable */
    --multiplier: calc((var(--centerflex-threshold, 38rem) - 100%) * 666);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-weight: normal;
    font-style: normal;
    /* ↓ Multiply by -1 to make negative */
    margin: calc(var(--centerflex-gap, 1rem) / 2 * -1) 0;

    &:before {
        content: "";
        flex-grow: 666;
        margin: 0;
        /* ↓ If --multiplier is negative, use 0px instead */
        flex-basis: Max(0px, var(--multiplier));
    }

    > * {
        /* ↓ Half the value to each element, combining to make the whole */
        margin: calc(var(--centerflex-gap, 1rem) / 2) auto;
        &:first-child {
            order: -1;
        }
    }
}

// Additional CSS Stuff. Not needed for the albatross

*, *:before, *:after {
  box-sizing: border-box;
}


ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: -0.5em;
}

li {
  margin: 0.5em;
}
/* end of the devils albatros - dynamic responsive logo & navigation */