styles.css

body {
  margin: 0;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23ac9299' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  background-attachment: fixed;
}

.niceImage {
  filter: grayscale(0);
  transition: 0.5s ease-in-out filter;
}

.niceImage:hover,
.niceImage:focus {
  /* filter: grayscale(0.5); */
}

.mainImage {
  filter: grayscale(0.5);
  transition: 0.5s ease-in-out filter;
}

.mainImage:hover,
.mainImage:focus {
  filter: grayscale(0);
}

.header-logo {
  width: 80px;
  height: 14px;
  background: url('/cocoso-logo-small.png');
  background-size: contain;
  filter: grayscale(0.5);
  transition: 0.2s ease-in-out all;
}
.header-logo-container:hover .header-logo {
  /* background: url('/cocoso-logo-small.png'); */
  filter: grayscale(0);
  background-size: contain;
}