@font-face              { font-family: 'myfont'; src: url('Nunito-Regular.ttf'); }
body                    { background-color: #555;  font-family: 'myfont', Fallback, sans-serif;}
.schriftzug             { font-size: 128px; color: #CCC;}
.positioned            { position: fixed; bottom: 10%; left: 50%; transform: translate(-50%, -50%);}
.information            { font-size: 18px; color: #999;}
.alink                  { font-size: 18px; color: lightblue; text-decoration: none; cursor: pointer; }
.centered               { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.footer                 { position: fixed; bottom: 20px; right: 20px; }
.heart                  { width: 15px; height: 15px; }
.hinweis                { z-index: 10; }

.darken-bg              { position: absolute; top: 0; left: 0; width: 100%; height: 99%; background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)); z-index: 19; }
a                       { color: white; text-decoration: none; }

button                  { background-color: #000; color: lightgreen; font-family: 'myfont', Fallback, sans-serif; font-size: 16px; border-radius: 5px; border: none; padding: 10px; cursor: pointer;}

#cookie-popup           { color: #EEE; text-align: center; background: #333; z-index: 9999; width: 99%; height: 110px; font-size:18px; line-height:20px; padding: 20px; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); }
#cookie-popup.hidden    { display: none; }

.datenschutz             { background-color: #CCC; position: absolute; top: 100px; left: 33%; width: auto; right: 33%; border-radius: 3px; }
.datenschutz_header      { margin-left: 20px; margin-top: 20px; color: #000; font-size: 20px; }
.datenschutz_content     { margin: 20px; font-size: 16px; color: #111; }

.counter                { color: #AAA; font-size: 10px; }

.ext_link               { width: 15px; height: 15px; vertical-align: middle; margin-right: 10px;}

/* linkpage */

.linkpage_box           { position: absolute; left: 60px; top: 60px; width: 500px; height: 360px; color: white;}
.linkpage_screenshot    { width: 460px; height: 280px; box-shadow: 6px 6px 10px #111;}

/* rurseepegel */

.rurseepegel_box        { position: absolute; left: 620px; top: 60px; width: 320px; height: 110px; color: white;}
.rurseepegel_screenshot { width: 320px; height: 90px; box-shadow: 6px 6px 10px #111;}

/* mynewnumber */

.mynewnumber_box        { position: absolute; left: 620px; top: 244px; width: 320px; height: 120px; color: white;}
.mynewnumber_screenshot { width: 320px; height: 90px; box-shadow: 6px 6px 10px #111;}

/* music */

.music_box              { position: absolute; left: 60px; top: 424px; width: 320px; height: 380px; color: white;}
.music_screenshot       { width: 320px; height: 360px; box-shadow: 6px 6px 10px #111;}

/* sailboat */

.sailboat_box           { position: absolute; left: 620px; top: 424px; width: 320px; height: 430px; color: white;}
.sailboat_screenshot    { width: 320px; height: 430px; box-shadow: 6px 6px 10px #111;}

/* christine */

.christine_box          { position: absolute; left: 60px; top: 424px; width: 460px; height: 302px; color: white;}
.christine_screenshot   { width: 460px; height: 302px; box-shadow: 6px 6px 10px #111;}