/* so sehen kommentare in css aus*/

@font-face{
font-family: myfont;
src:url("fonts/ChettaVisto.ttf")
}



/*Container for Gallery*/

#outer-grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr ;
  grid-gap: 35px;
}
#outer-grid > div {

  background-color: rgba(255, 255, 255, 0);
  color: white;
  font-size: 30px;
  padding: 0px;
}
#inner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr/* /delete for COM for 3 rows*/;
  grid-gap: 0px;
}
#inner-grid > div {
  background-color: rgba(255, 255, 255, 0);
  padding: 0px;
}

/*TODO!!! @media only screen and (max-width: 720px){ /*ausnahme sobald bildschirm schmaller ist als 720p / rearange grid / untereinander!!!*/
/*Container for Gallery END*/

/*container for video gallery side by side / portrait-landscape*/

.videocontainer-a {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 30px;
  padding: ;
}

.videocontainer-a > div {
  text-align: left;
  padding:;
  font-size: 30px;
}

.item1port {
  grid-area: 1 / 1 / span 1 / span 1;
}
.item2land {
  grid-area: 1 / 2 / span 1 / span 2;
}


/*Classes 4 Gallery*/
/*
div.gallery {
  border: 1px solid #ccc;
}
*/
div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 0px;
  text-align: center;
}

.responsive {
  /*padding: 0 6px;*/
  float: left;
  width: 33%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/*Classes 4 Gallery END*/


body{
display: grid;
grid-template-columns: 300px auto;
background-color: #000000;
background-image:url("assets/backimages/gabionen2.jpeg");

object-fit: cover;

font-family: Arial, Helvetica, sans-serif;
/* definiert fonts die clientside fuer den body aufgerufen werden sollen*/
margin: 2em; /*em ist ein groebere skala als px, beides geht*/
/*gap: 10px;*/

cursor: url('icons/instagram.svg'), auto;
}



.icon{ /* "." definiertvariable*/
width:53px;
height:53px;
float: center;
}

h1{
/*color: #1b1b1b; /*setzt h1 auf schwarzefarbe*/
font-variant: small-caps; /*setzt h1 auf all caps*/
text-align: center; /*setzt h1 auf center*/
font-size: 5em;
font-family:myfont;
}

p{
color: #ffffff;
}

img{
width: 100%;
height: auto:
}

figure{
margin: 0;
}

figcaption{
color: whitesmoke;
}

/* unvisited Link */
a:link { /*defines link decorations*/
  text-decoration: none;
  background-color: #666666;
  color: white;
}
/*link hover*/
a:hover {
  background-color: red;
  font-weight:bold;
}
/*visited link*/
a:visited {
color:white;
}


 
/*menue styles*/

.menu{
list-style-type:none;
margin:0;
/*display: inline;*/
padding: 20px;
text-align: center;
font-size: 35px;
}

.menu li{
display: inline;
text-align: center;
}
/*menue item color*/
span.ingredient {
color: whiteSmoke;
width:10px;
}
/*menu end*/


/*header as button*/
span.header {
color: #1b1b1b;
font-size: 50px;

}


.gallery{
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
}

div.gallery-item{
margin: 5px;
border: 1px solid #ccc;
width:300px;
}

div.gallery-item:hover {
border:1px solid #777;
}

div.gallery-item img{
width:100%;
height:auto;
}

/*Vita Table*/
table{
border-collapse: collaps;
width:100%;
}

td{
border:1px solid #ffffff;
text-align:left;
padding:8px;
vertical-align:top;
color: whitesmoke;
font-size:25px;
}

th{
border:1px solid #ffffff;
text-align:left;
padding:8px;
vertical-align:top;
color: whitesmoke;
font-size:35px;
}
/*Vita Table END*/

/* Vita Cells Backgrounds*/
tr:nth-child(even) {
background-color:;
}

tr:nth-child(odd) {
background-color: ;
}
/* Vita Cells Backgrounds END*/
header {
grid-column-start:1;
grid-column-end: 3; 
grid-row-start: 1;
grid-row-end: 1;
background-image:url("assets/backimages/header2.png")
}
/*
nav {
grid-column-start:1;
grid-column-end: 1; 
grid-row-start: 2;
grid-row-end: 2;
background-color: #1b1b1b;
}
*/


article {
grid-column-start:1;
grid-column-end: 3; 
grid-row-start: 2;
grid-row-end: 2;
padding: 35px;
font-size: 25px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image:url("assets/backimages/articleback.png");
}




footer {
grid-column-start:1;
grid-column-end: 3; 
grid-row-start: 3;
grid-row-end: 3;
background-color: ;
background-image:url("assets/backimages/footer2.png");
}

.audio-container{
display:flex;

justify-content:center;
align-items:center;
}



@media only screen and (max-width: 720px){ /*ausnahme sobald bildschirm schmaller ist als 720p*/

body{
display: grid;
grid-template-columns: auto;
grid-template-rows: 300px auto auto 200px;
}

header {
grid-column-start:1;
grid-column-end: 1; 
grid-row-start: 1;
grid-row-end: 1;
}

nav {
grid-column-start:1;
grid-column-end: 1; 
grid-row-start: 2;
grid-row-end: 2;
}

article {
grid-column-start:1;
grid-column-end: 1; 
grid-row-start: 3;
grid-row-end: 3;

}

footer {
grid-column-start:1;
grid-column-end: 1; 
grid-row-start: 4;
grid-row-end: 4;

}

h1{
font-size: 3em;
}

.menu li {
display:inline-block;
}

.menu{
font-size: 34px;
}


td{
border:2px solid #ffffff;
text-align:left;
padding:8px;
vertical-align:top;
color: whitesmoke;
font-size:15px;
}

th{
border:2px solid #ffffff;
text-align:left;
padding:8px;
vertical-align:top;
color: whitesmoke;
font-size:25px;
}

.item1port {
  grid-area: 1 / 1 / span 1 / span 1;
}
.item2land {
  grid-area: 2 / 1 / span 1 / span 2;
}


} /*@media end*/

@media only screen and (max-width: 720px){ /*for gallery images 3/2 ratio */
#inner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0px;
}