@charset "utf-8";
/* CSS Document */
/* Manny CSS mit FlexBox */
/* Stand 01.11.2022 , foto_7.1.css*/

* {
  box-sizing: border-box;
}

body {
    display: flex;
    flex-flow: row wrap;
    max-width: 1200px;   /* max Breite 1200 Pixel*/
    margin: auto;        /* Zusatz */
    background:#000000;         /* Hintergrund Farbe schwarz */
    background-image: url(../css/bg_foto_10x600.png); /* Hintergrund Bild */
    background-repeat: repeat-x;   /* Hintergrund Bild, Wiederholung in x Richtung */
    color:#C1DB9B;  /* Text Farbe  */
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font: normal 0.9em Verdana, Helvetica, Arial, sans-serif;
}

iframe {
  display:block;
  width:99%;
  height=99%
  min-width: 300px;
  min-height: 800px;
  margin: auto;
  border: none;
}

@font-face {
    font-family: 'Brush Script Std';
    src: url('BrushScriptStd.woff2') format('woff2'),
        url('BrushScriptStd.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}


h1 {
   color: #C1DB9B; /* Farbe  */
   font-size:3em;  /* Größe   */
   font-weight:100;    /*  font-weight:400; (entspricht normal) */
   font-family: Brush Script Std, fantasy; /* Schriftart */
   text-align: center;
 }

h2 {
   color: #C1DB9B; /* Farbe  */
   font-size:1.3em;  /* Größe   */
   font-weight:100;    /*  font-weight:400; (entspricht normal) */
   font-family: Brush Script Std, fantasy; /* Schriftart */
   text-align: center;

 }

h3 {
    color: #C1DB9B;
    font-size: 3vw; /* Größe der Schrift proportional verkleinern */
    font: bold 1.5em Verdana, Helvetica, Arial, sans-serif;
    text-align: center;
    font-style:italic;
}

h4 {
    color: #C1DB9B;
    font-size: 3vw;
    font: bold 1.5em Verdana, Helvetica, Arial, sans-serif;
    text-align: center;
    font-style:italic;
}


h5 {
   color: #C1DB9B;
   font-size: 3vw; /* Größe der Schrift proportional verkleinern */
   font-family: Kunstler Script, Brush Script MT, Verdana, Helvetica, Arial, sans-serif;
   font: bold 1.5em Verdana, Helvetica, Arial, sans-serif;
   text-align: center;
   font-style:italic;

}

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
header p{
  flex: 1 100%;
}

header, nav, article, footer {
  flex: 1 100%;
}

/* Grundeinstellung */
header,
nav,
nav a,
article,
section,
aside,
footer {
    padding: 10px;
    margin: 10px;
    border-radius: 0.8em;
    border: 1px solid;
    border-color: #8db243; /* Rahmen */
}

header {
    top: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    background: #1F2A10; /* ---- Hintergrundfarbe im Haupttabellen Bereich ---- */
    background-image: url("../css/manny_drache+txt_246x65.png"), url("../css/manny_drache_90x60.png");
    background-position: 6% 4%, 98% 4%;
    background-repeat: no-repeat;
    /* border: 1px solid #FF0000; */
}

nav,
nav ul,
nav li {
    border: none;
    list-style-type: none;
    margin-top: 5px ;
    margin-bottom: 5px ;
}

nav ul {
    display: flex;
    flex-direction: column;
    /*border: 1px solid #FF0000;*/
}

nav a {
    display: inline-block;
    width: 95%;
    background: #394D1D; /* Hintergrundfarbe um Oval standard  */
    text-decoration: none;
    text-align: center;
    color: #A4CB6B; /* Schriftfarbe */
    padding: 0.2em; /*  ab hier - meine kleinere Buttens */
    margin: 0.2em;  /*Abstand nach oben in li enthaltenen Elementen zuweisen */
    width: 12.0em;  /* Breite der Navi Butten zuweisen in Abhänigkeit der Anzahl*/
    border: 1px solid #176120;   /* RahmenFarbe um Oval dunkel grün */
    border-radius: 10px;
}

nav a:hover,
nav a:focus {
    border: 1px solid #07FB23;   /* RahmenFarbe um Oval hell grün */
    border-radius: 10px
    color: #C3DD9D;  /* Schriftfarbe */
    background-color: #445A24/* Hintergrundfarbe um Oval heller  */
}

/* ---- Einstellungen Link Farben ausserhalb der Navigation ---- */

a:link      { color:#A4CB6B; /* font-family: Verdana; font-size: 10pt;*/ }
a:visited   { color:#A4CB6B; /* font-family: Verdana; font-size: 10pt;*/ }
a:hover     { background-color: #394D1D; color: #C3DD9D; }
/* ------------------------------------------------------------- */

article,
aside,
footer
    {
    background: #1F2A10; /* ---- Hintergrundfarbe im Haupttabellen Bereich ---- */
}

footer {
    display: flex;
    flex-flow: row wrap;
    padding: 0px;
    font-size:.8em;
    font-style:italic;
    padding-bottom:5px;
    padding-top:0px;
    text-align:center;
    width: 100%;
}


/* Smart Phones und Tablets mit mittlerer Auflösung */
@media all and (min-width: 35em)
{

  header {
    display: flex;
    flex-flow: row wrap;
    top: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    background: #1F2A10; /* ---- Hintergrundfarbe im Haupttabellen Bereich ---- */
    background-image: url("../css/manny_drache+txt_246x65.png"), url("../css/manny_drache_90x60.png");
    background-position: 2% 10%, 98% 10%;
    background-repeat: no-repeat;

  }

  nav ul {
    flex-direction: row;
    /* Nav-Butten springen untereinander bei kleiner Bildschirm */
    /display: flex;
      flex-flow: row wrap;
    /* border: 1px solid #FF0000; */

  }
  nav li {      /* Einzel Nav-Butten */
     margin: .3em;      /* Abstand Oberlinie header zu Oberline Nav-Butten und Abstand Butten untereinander */
     margin-bottom: 0px ;    /* Abstand Grundlinie header zu Grundline Nav-Butten bei 0 beide gleich */
     flex: 1 1 0%;
     /* border: 1px solid #FF0000; */
  }

  h1 {
   font-size: 3em;  /* Größe   */
 }

 h2 {
   font-size: 2em
 }

  iframe {
   flex: 1 1 auto;
    order: 2;

  }

  aside {
    /* durch auto werden die beiden asides in eine Zeile gesetzt */
    flex: 1 1 auto;
    order: 3;
  }

  footer {
    order: 4;
  }
}


/* Large screens */
@media all and (min-width: 55em) {
    header {
    display: flex;
    flex-flow: row wrap;
    top: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    background: #1F2A10; /* ---- Hintergrundfarbe im Haupttabellen Bereich ---- */
    background-image: url("../css/manny_drache+txt_246x65.png"), url("../css/manny pictures_bush_410x70.png"), url("../css/manny_drache_90x60.png");
    background-position: 2% 10%, 65% 10%, 98% 10%;
    background-repeat: no-repeat;
  }

  h1 {
   font-size: 4em;  /* Größe   */
 }

 h2 {
   font-size: 2.5em
 }
  iframe {
    /* Der Article wird 2.5x so breit wie die beiden asides! */
    order: 2;
    flex: 5 1 0%; /* war   flex: 5 1 0%;  */
  }

  aside {
    flex: 1 1 8.0em;  /* war   flex: 2 1 0%;  */
  }
}

 /* ----------------------------------------------- */



.rahmen {
        border : #8db243 solid 1px;
        padding: 20px;
        border-radius: 0.8em;
}

.mini {
font-family : Verdana;
text-align : center;
font-size : 0.8em;
color : #C1DB9B;
}