/* CSS-Datei style.css */
* {
    margin: 0;
}

header, section, footer {
    display: block;
}



header {

    position: relative;
    background-color: red;
    border-style: solid;
    border-width: 5px;
    border-color: red;
    height: 77px;
}

.left_header {
    position: absolute;
    top:         0px;
    left:        100px;
    color:       black;
    font-family: verdana;
    font-size:   200%;
    font-weight: bold;
      <!-- text-align:  left;     -->

}
.right_header {
    position: absolute;
    bottom:      6px;
    right:       6px;
    color:       white;
    font-family: verdana;
    font-size:   160;
    font-weight: bold;
      <!-- text-align:  right;  -->

}
.topnav {
    background-color: yellowgreen;
    overflow: hidden;
}
/* Style the nav links */
.topnav a {
    float:           left;
    display:         block;
    color:           yellowgreen;
    text-align:      center;
    padding:         14px 16px;
    text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}


/* Style the top navigation bar */
.topnav2 {
    overflow: hidden;
    background-color: yellowgreen;

}

/* Style the topnav links */
.topnav2 a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change color on hover */
.topnav2 a:hover {
    background-color: #ddd;
    color: black;
}

section {
    background-color: honeydew;
}
.menu {
  box-sizing: border-box;
  float:left;
  width:20%;
  text-align:center;
}
.menu a {
  box-sizing: border-box;
  background-color:#honeydew;
  padding:8px;
  margin-top:7px;
  display:block;
  width:100%;
  color:black;
}
.main {


  box-sizing: border-box;
  float:left;
  width:60%;
  padding:0 20px;
}
.Bild {

  margin-top: 10px;
    border: 3px solid yellowgreen;
  background-color:honeydew;
}






/* Style the memo button */
.memo {
    overflow: hidden;
}

/* Style the topnav links */
.memo a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    <-- border ->>
    margin-top: 10px;
    border: 1px solid yellowgreen;
    box-shadow: 0px 00px 10px grey;
}


/* Change color on hover */
.memo a:hover {
    background-color: #ddd;
    color: black;
}


.memo2Box {
    overflow: hidden;


}
/*  */
.memo2 {
    width: 20%;
    float: left;
    display: block;
    color: black;
    text-align: center;
    text-decoration: none;

    padding: 10px 17px 10px 10px;
    margin: 5px;
    border: 1px solid yellowgreen;
    box-shadow: 0px 0px 10px grey;

}

/* Bild  */
.memo2 img {
    width: 100%;
    height: 100%;
    border: 3px solid white;
}

/* Hover */
.memo2 img:hover {
    background-color: #ddd;
    color: black;
    border: 3px solid yellowgreen;
}






.left_Text {
    top:         0px;
    left:        1px;
    color:       black;
    font-family: verdana;
    font-size:   100%;
      <!-- text-align:  left;     -->

}


.right_Text {
    top:         0px;
    left:        1px;
    color:       black;
    font-family: verdana;
    font-size:   100%;
    text-align:  right;  
}



.right {
  box-sizing: border-box;
  background-color:honeydew;
  float:left;
  width:20%;

  text-align:center;
}


footer {
    background-color: yellowgreen;
    text-align: center
}


@media only screen and (max-width:620px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width:100%;
  }