
h1{
  color: #03011F;
}
h2{
  color: #03011F;
}
h3{
  color: #03011F;
}
h4{
  color: #03011F;
}

.cat-element {
  position: fixed;
  left: 200px;
  top: 120px;
   z-index: 1000; 
}
.grid-container {
  display: grid;
  grid-auto-columns: auto;
  grid-auto-rows: auto;
  gap: 1em;
  grid-template-areas: 
  "box-5 box-5 box-5 box-5"
  "box-1 box-2 box-2 box-3"
  "box-1 box-2 box-2 box-3"
  "box-4 box-4 box-4 box-4";
}

@media(max-width: 56em){
  .grid-container{

  grid-template-areas: 
  "box-5 box-5 box-5 box-5"
  "box-1 box-2 box-2 box-3"
  "box-1 box-2 box-2 box-3"
  "box-4 box-4 box-4 box-4";
  }
}
@media(max-width: 42em){
  .grid-container{

  grid-template-areas: 
  "box-5 box-5 box-5 box-5"
  "box-1 box-2 box-2 box-3"
  "box-1 box-2 box-2 box-3"
  "box-4 box-4 box-4 box-4";
  }
}

.item1 {
  padding: 1em;
  background-color: #ff020263;
  color: #FA1942;
  text-align:start;
  border-radius: 8px;
  font-size: 2rem;
}
.item2 {
  padding: 1em;
  background-color: #900A19;
  color: #03011F;
  text-align: justify;
  border-radius: 8px;
  font-size: 2rem;
}
.item3 {
  padding: 1em;
  background-color: #ff020263;
  color: #ff020263;
  text-align: justify;
  border-radius: 8px;
  font-size: 2rem;
}
.item4 {
  padding: 1em;
  background-color: #900A19;
  color: #03011F;
  text-align: justify;
  border-radius: 8px;
  font-size: 2rem;
}
.item5 {
  padding: 1em;
  background-color: #900A19;
  color: #03011F;
  text-align: justify;
  border-radius: 8px;
  font-size: 2rem;
}
.imgscroll{
  height: 50px;
}
.center {
  height: 150px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
}
.zoom {
  padding: 50px;
  transition: transform .2s; /* Animation */
  transform: scale(1.4);
  margin: 0 auto;
}
.header-img {
  height: 28px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
}
.since {
  padding: 1em;
  background-color: #900A19;
  color: #03011F;
  text-align: end;
  border-radius: 8px;
  font-size: 2rem;
}

.zoom:hover {
  transform: scale(1.9); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}