@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,600'); /* Als Avenir Ersatz */
/* COLOURS: #BEE3C5 Main Green | #FFF White | #BDC3C7 Light GREY | #2A2C2B Dark Grey | #e3bedc complemantary
*/
/* Font Awesome Icons in use XING:f168 | Spotify:f1bc | Twitter:f099 | Instagram:f16d | LinkedIn: f0e1 */

    ::selection{background: rgba(203, 227, 195, 0.9); color: #2A2C2B;}
    ::-moz-selection{background: rgba(203, 227, 195, 0.9); color: #2A2C2B;}
/* Variables for color */
:root {
    --MBgreen: rgba(192, 221, 196, 1); /* #BFDDC4 */
    --dark: #2A2C2C;
    --darkgrey: #636e72;
    --grey: #f1f2f6;
    --white: #FFF;
    --complement: #e3bedc;
    --lightgreen: #d2ffd6;
    --shadowgreen: #9DC2B7;
    --oldegg: #F8F6EB;
    --shandy: #FFE072;
}
* {
    padding: 0; 
    margin: 0px auto;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* general font niceness  :) */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* very important for mobile performance */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
/*  =====  GENERAL ===== */
html, body {
    height: 100%;
    width: 100%;
    background: var(--dark);
    font-family: 'Nunito', Nunito;
    overflow: hidden;
}
#back{
    position: absolute;
    opacity: 0.7;
}
#overlay{
    height: 100%;
    width: 100%;
    opacity: 1;
}
/*  =====  FONTS / Styles / Links ===== */
h1{
    font-size: 2.8em;
    font-weight: 300;
    letter-spacing: 2px;
    color: var(--oldegg);
    text-transform: uppercase;
}
h2{
    font-size: 1.7555em;
    font-weight: 400;
    color: var(--oldegg);
    text-transform: uppercase;
}
p{   
    font-size: 0.96em;
    font-weight: 600;
    color: var(--grey);
}
p.contact{   
    font-size: 1.2em;
    font-weight: 400;
    color: var(--grey);
}

a{text-decoration: none; color: var(--grey)}
a:hover, a:focus, a:active {color: var(--MBgreen);}

/* ===== CONTENT BOXES  ===== */
#bannerbox{
    position: fixed;
    top: 10%;
    left: 8%;
}
/* Adress Info Box */
#addressbox{
    position: fixed;
    top: 55%;
    left: 8%; 
}
#addressbox a.maillink:hover{
    color: var(--oldegg);
    text-decoration: line-through;
}
#addressbox a.creditlink{
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-right: 5px;
    padding-left: 5px;
} 
#addressbox a.creditlink:hover{
    color: var(--oldegg);
    background: rgba(203, 227, 195, 0.9)
}
/* Social Media Box Top */
#socialbox{
    position: fixed;
    top: 1.75%;
    right: 3%;
    padding: 10px;
}
/* ===== Font Awesomes ===== */
  i.fas,
  i.fab {
    font-size: 1.22em;
    opacity: 0.77;
    color: var(--oldegg);
  }
  i.fas:hover,
  i.fab:hover{
    opacity: 1;
    cursor: crosshair;
    color: var(--MBgreen);
}
/* Credits Page Box */
#creditbox{
    max-width: 77%;
    margin-top: 10%;
    overflow: scroll;
}
#creditbox ul{
    color: var(--grey);
    list-style-position: inside;
    list-style-type: circle;
}
/* Table Creditbox */
td {
    width: 50%;
    min-height: 33%;
    text-align: left;}
.left{
    padding: 6px 26px 6px 6px;
    border-right: 1px solid var(--oldegg);
}
.right{
    margin-left: 25px;
    padding: 6px;
}
/* Cookie Page Box */
#cookiebox{
    max-width: 77%;
    margin-top: 8%;
    max-height: 600px;
    overflow: scroll;
}
#cookiebox p{
    font-size: 0.8em;
    font-weight: 600;
    color: var(--grey);
}

/* ==== LOGO ==== */
.logo{
    position: fixed;
    bottom: 3%;
    right: 2.5%;   
    max-width: 35px;
}
/* ===== Screen Fixes ===== */
@media screen and (min-width:1800px) {
#back img{width: 150%}
}
@media screen and (min-width:1200px) {
#back img{width: 108%}
}
@media screen and (max-width:1200px) /* iphone 12 */ {
#back img{width: 155%}
    h1 {
        font-size: 3em;}
    h2{
        font-size: 1.55em;
   letter-spacing: 2px;}
        p.contact{   
        font-size: 1.333em;
    }
}
@media screen and (max-width:900px) /*iphone XR/11 */ {
    #back img{
        width: 245%}
    h1 {
        font-size: 3.1em;}
    h2{
        font-size: 1.6em;
   letter-spacing: 2px;}
    p.contact{   
        font-size: 1.3em;
    }
    #addressbox a.creditlink{
        font-size: 1em;
        padding-right: 2px;
        padding-left: 2px;}
}
/* ===== Privacy Link ===== */
#privacy { 
position: fixed;
bottom: 10px;
left:  22px;
font-size: 11px;
text-decoration: none;
color: var(--oldegg);
}
.privacy{
 color: var(--oldegg);
}

/* -+-+- ERROR PAGE STYLES -+-+- */
#bannerbox-error{
    position: fixed;
    top: 10%;
    left: 8%;
}
#bannerbox-error h1{
    font-size: 4em;
    font-weight: 300;
    letter-spacing: 5px;
    color: var(--oldegg);
    text-transform: uppercase;
}
#errorbox{
    position: fixed;
    top: 50%;
    left: 8%; 
}
#errorbox p {
    font-size: 1.2em;
    font-weight: 400;
    color: var(--grey);
    line-height: 2em;
}