body {
     background-color: rgb(1, 0, 27);
}

h1 {
  text-shadow: rgba(255, 255, 255, 0.8) 0px 0px 20px;
  color: rgb(121, 237, 255);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
  transition: color 2s ease-out;
  transition: font-size 4s ease-in;
}

h1:hover{
    font-size: 10rem;
    color:rgb(255, 242, 0);
}


.header {
  color: white;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 50px;
  margin-bottom: 8px;
}
.post {
  background-color: black;
  color: rgb(255, 255, 255);
}

.post h2 {
  font-size: 10px;
text-shadow: rgba(255, 255, 255, 0.8) 0px 0px 20px;
  color: rgb(121, 237, 255);
}

.post img {
  object-fit: contain;
  width: 20vw;
  filter: saturate(500%);
  filter: invert(100%);
  transition: filter 10s;
}

.post img:hover{
      filter: saturate(10000%);
}


#post1 {
}

.beschriftung {
  font-size: 0.72rem;
  color: rgb(136, 136, 136);
  margin-top: 8px;
  margin-bottom: 24px;
  line-height: 1.6;
  display: block;
}
.grid-gleich {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}
.grid-gleich div {
  background-color: rgb(26, 26, 26);
  color: rgb(255, 255, 255);
  padding: 20px;
  text-align: center;
  font-size: 0.8rem;
  border-radius: 4px;
}
.grid-asymmetrisch {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  margin-top: 24px;
}
.grid-asymmetrisch div {
  background-color: rgb(26, 26, 26);
  color: rgb(255, 255, 255);
  padding: 20px;
  text-align: center;
  font-size: 0.8rem;
  border-radius: 4px;
}