@import url('https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,500,600,700');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

:root {
  --color0: #ffffff;
  --color1: #003399; /* #173674 */
  --color2: #dcdcdc; /* #B5C4E2 */
  --color3: #d5cebc;
  --color4: #97A4BD; /* #97A4BD; */
  --color5: #D8A25F;
  --color6: #dcdcdc; /* #B5C4E2 */
  --color9: #000000;
}

html {
  box-sizing: border-box;
  font-size: 16px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  background-color: var(--color6);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin:0; font-size:16px;
  font-weight:200;
  color: var(--color9);
}
.wrapper {
  max-width:960px; 
  margin: 0 auto;
  padding: 0.5rem;
}	

.advertisement {
  border: 1px solid darkgrey;
  padding: 0 1rem 1rem 1rem;
  background-color: #f5f5f5;  
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.advertisement>h3{
  margin: 0;
  padding: 1rem 0 0 0;
}

header {
  border-top:1rem solid var(--color1);
  background-color: var(--color2); 
  color: var(--color9);
}
.intro {margin-bottom: 2rem;}

footer {
  background-color: var(--color6); 
  color: var(--color9);
}
main a {color: var(--color9);}
footer a { color:black; }
footer p {text-align: center;}

header span { display: block;}
header > div > h1 > span { font-size:1rem; font-weight:100; }
header > div > h1 > a {color: white; text-decoration:none;}
header > div > h1 > a > span { font-size:1rem; font-weight:100; }

nav {
  background-color: var(--color2); 
  width:100%;
  color:black;
  text-align:center;
}
nav p {margin:0; padding: 0.1rem 0 0 0;}
nav a {color:black;}
nav a:hover {text-decoration:none;}

nav > div > p { 
  margin-top: 0; 
  text-align: center;
}

main::before {
  display: block;
  content:'';
  background-image: linear-gradient(var(--color2) 85%, var(--color0));
  height: 0.5rem;
}

main::after {
  display: block;
  content:'';
  background-image: linear-gradient(var(--color0) 85%, var(--color2));
  height: 0.5rem;
}

p {
  letter-spacing: 1px;
  line-height: 1.5rem;
}

p.disclaimer {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0;
}

main {
  background-color: var(--color0); 
}

h1 {margin: 0; padding:0; font-weight:normal;}
h1 > span {font-size:1rem;}
h2 > span {font-size:1rem; font-weight:100; display: block; font-style: italic;}

h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 300;
}

h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 300;

}
h3::first-letter, h2::first-letter {  font-size:130%; font-weight:400; }

li {
  line-height: 1.5rem;
  padding: 0.25rem 0;
}

.columns { display: grid; grid-template-columns: 1fr; grid-gap: 1rem;}
.columns>a {
  text-decoration:none; 
  color: var(--color9);
  padding:0.5rem;
  border-radius: 0.5rem;
}
.columns>a:hover {
  background-color: var(--color3); 

}
.columns>a>div>h3 {margin-top:1rem; text-align:center;}

.videos, .photos {margin: 1rem 0;}

.photos {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  grid-gap: 1px;
  row-gap: 1px;
}

img { display:block; margin:0; padding:0; max-width:100%;}
.gallery>img { display:block; width:100%; margin:0; padding:0;}
footer img { display:block; width:100%; margin:0; padding:0;}

.gallery {
  margin: 1rem 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
}

h2 + p {
  margin-top: 0rem !important; /* Adjust as needed */
}
h4 + ol, h4 + ul {
  margin-top: 0.5rem !important; /* Adjust as needed */
}
h4 {margin-bottom: 0;}

.icon {
  font-size: 1.2rem !important;
  color: inherit;
  top: 3px;
  position: relative;
  padding-left: 0.2rem;
}

a:hover {text-decoration: none;}

a[target="_blank"]::after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
}


/* --------------------------------------------------------------------------------- min-width: 520px ---- */
@media only screen and (min-width: 520px) {
  
  nav { margin-top: -2rem; }

  nav > div > p { margin-top: 0; text-align: right;}

  footer img { display:block; width:auto; margin:auto; padding:0;}
  
}

/* --------------------------------------------------------------------------------- min-width: 768px ---- */
@media only screen and (min-width: 768px) {

  header span {display: inline-block;}

  .gallery {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 1rem;
  }
  .columns { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1rem;}

  .rezepte {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 1rem;
    grid-template-rows: auto auto; /* Set the grid to have two rows of auto height */
  }
  
  .rezepte div:nth-child(3) {
    grid-column: span 2; /* Make the third div span two columns */
  }

  .rezepte div:nth-child(4) {
    grid-column: span 2; /* Make the third div span two columns */
  }  
  
  .index {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 1rem;
  } 

  .recipe {
    display:grid;
    grid-template-columns: 2fr 3fr;
    grid-column-gap: 1rem;    
  }
  footer .wrapper { width: 50vw; }

  .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);;
  }
  
}








/* --------------------------------------------------------------------------------- min-width: 960px ---- */
@media only screen and (min-width: 960px) {

  .thumbnails {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap:1rem;  
  }

  figure.banner > picture::after { padding-bottom:25%; }

  .list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);;
  }



}


/* Color Theme Swatches in Hex */
.Winter-WonderLand-1-hex { color: #33628F; }
.Winter-WonderLand-2-hex { color: #8CB2D9; }
.Winter-WonderLand-3-hex { color: #012540; }
.Winter-WonderLand-4-hex { color: #4A82A9; }
.Winter-WonderLand-5-hex { color: #B3E2F4; }