/* HTML und CSS */
/* Dora Cohnen */
/* Generelles*/

html, body {
  height:100%;
  margin: 0;
}

@font-face {
font-family: 'Cousine Regular';
font-style: normal;
font-weight: normal;
src: local('Cousine Regular'), url('Cousine-Regular.woff') format('woff');
}

* {box-sizing: border-box;}

header {
  font-family: 'Cousine Regular', sans-serif; font-size: 10pt; font-style: normal;
  font-variant: normal; font-weight: 400; line-height: 10px;
  color: grey;
  width: 100%;
  text-align: left;
  padding: 20px 0 0 15px;
  margin-bottom: 10px;
}

.grid-container {
  display:flex;
  flex-direction: column;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  text-align: left;
  grid-gap: 5px;
  padding: 5px;
}

.grid-item {
  max-width: 100%;
  min-width: 65%;
  min-height: 10px;
  display: grid;
  padding: 10px;
  border: 2px solid grey;
  border-style: dotted;
  align-content: left;
  justify-content: left;
  font-family: 'Cousine Regular', sans-serif; font-size: 10pt; font-style: normal;
  font-variant: normal; font-weight: 400; line-height: 26px; color: grey;
}

.grid-item a {
  color: grey;
  background-color: white;
}

.grid-item:hover a {
    color: grey;
  background-color: yellow;
}

.grid-item-5:hover a {
    color: grey;
  background-color: white;
}
/*.grid-item-1 a {
  background-color: red;
}

.grid-item-1:hover a {
    color: grey;
  background-color: red;
} */

.grid-item:nth-child(5){
order:1;
}

.grid-item img {
display: none;
}

.grid-item-1:hover img {
display: flex;
position: absolute;
margin-left: 400px;
width: 20%;
}

.grid-item-2:hover img {
display: flex;
position: absolute;
margin-left: 200px;
width: 20%;
}

.grid-item-3:hover img {
display: flex;
position: absolute;
margin-left: 400px;
width: 20%;
}

.grid-item-4:hover img {
display: flex;
position: absolute;
margin-left: 500px;
width: 20%;
}

.grid-item-5{
  border-style: none;
}

a:link {
text-decoration:none;
cursor: pointer;
}

/* selected link */
a:active {
}

/* visited link */
a:visited {
  color: lightgrey;
}

grid-item-5 a:visited {
  color: grey;
}

html, body {
  cursor: auto;
}

.static:hover {
  opacity:0;
}

.active:hover {
  height: auto;
  width: 40%;
}

.em-email {
  margin-bottom: 2pt;
}

 @media only screen and (max-width:800px) {

   header {
     font-size: 11pt; line-height: 11px;
   }

   .grid-item {
    font-size: 11pt;
    line-height: 26px;
   }

   .grid-item img {
   display: none;
   }

   .grid-item:hover img {
   display: none;
   }

.info a {
  background-color: yellow;
}
   .grid-item:hover a {
     background-color: white;
   }

   .grid-item a {
     color: grey;
     background-color: white;
   }

}