/* 
Punkt vor einem wort ist ein class-selector
# vor einem wort ist ein id-selector
*/

body,
html {
  margin: 0;
  padding: 0;
}
@font-face {
  font-family: Bricolage; /* set name */
  src: url(https://noahwidmer.ch/BricolageGrotesque-Medium.woff2); /* url of the font */
}
h1 {
  font-family: verdana;
  color: MediumSlateBlue;
  text-align: center;
  font-size: 300%;
}
p {
  font-family: Bricolage;
  text-align: center;
  font-size: 150%
}

header div.mycontainer {
  width: 100%;
  overflow: auto;
  display: flex;
}

.mycontainer img {
  width: 100%;
}
/* 
grid-template-columns: repeat(auto-fill ...etc
Das sagt: Fülle die gesamte Breite und das item ist mindestens min(400px, 100%)
*/
.grid-container {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(min(500px, 100%), 1fr));
  gap: 10px;
}
div.myproject {
  width: 100%;
  overflow: auto;
  display: flex;
}

.myproject img {
  width: 100%;
}

.grid-container-small {
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
}
.project-teaser img {
  width: 100%;
  max-width: 100%;
}

.project img {
  width: 100%;
  max-width: 100%;
}
.footer {
  color: white;
  background-color: mediumslateblue;
  font-family: Bricolage;
  font-size:75%
  text-align: center;
  padding: 10px 15px;
}

.masonry-container {
  width: 100%;
}

.grid-item {
  display: block;
  line-height: 0;
  width: 33.3%;
}
/* 
Mediaqueries definieren wann ein Breakpoint kommt.
max-width: 1250px heisst alle Bildschirmgrössen unterhalb von 1250px sind betroffen.
*/
@media (max-width: 900px) {
  .grid-item {
    width: 50%;
  }
}

@media (max-width: 450px) {
  .grid-item {
    width: 100%;
  }
}