body{
  image-rendering: pixelated;
  background-image: url('teamenubg.png') !important;
  background-size: 100%;
  }

.centeredH {
  text-align: center;
  }

.centered{
  text-align: center;
  position: absolute; top: 25%;
}
h1{
  font-family: "Pixelify Sans";
  font-size: 60px
  }
h3{
  font-family: "Pixelify Sans";
}
h2{
  font-family: "Pixelify Sans";
}
.pixelify-sans {
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
p{
  font-family: "Pixelify Sans";
  font-size: 25px;
}
#navigation{
  background-color: orange;
  position: absolute;
    top: 0;
    left: 0;
  }
.container {
  display: grid;
  grid-template-columns: 20% 20% !important;
  place-content: center;
}
.container div {
  background-color: rgba(0,0,0,0) !important;
  border: 1px solid rgba(0,0,0,0) !important;
  font-size: 30px;
  text-align: center;
}
.container1 {
  display: grid;
  grid-template-columns: 0.5fr !important;
  place-content: center;
  gap: 50px;
}
.container1 div {
  background-color: rgba(0,0,0,0) !important;
  border: 1px solid rgba(0,0,0,0) !important;
  font-size: 30px;
  text-align: center;
}
img, svg, video{
    filter: contrast(200%) saturate(0.5);
    filter: saturate(1) url('data:image/svg+xml,\
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">\
        <filter id="px" x="0" y="0"> \
            <feFlood x="2" y="2" height="2" width="1" /> \
            <feComposite width="5" height="5" /> \
            <feTile result="t" /> \
            <feComposite in="SourceGraphic" in2="t" operator="in" /> \
            <feMorphology operator="dilate" radius="2" /> \
        </filter> \
        </svg>#px');
    &:focus, &:hover{
        filter: none;
    }
    &:focus-within{
        filter: none;
    }
}