@font-face {
  font-family: coolvetica;
  src: url(images/coolvetica.otf);
}
            @font-face {
  font-family: gothic;
  src: url(images/gothic.otf);
}


.parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 8px;
    width: 1000px;
    padding: 7px;
    margin-left: 354px;
}
    
.div1 {
    grid-column: span 2 / span 2;
    grid-row: span 5 / span 5;
}

.div2 {
    grid-column: span 2 / span 2;
    grid-row: span 5 / span 5;
    grid-column-start: 3;
}
        
        
            body{
                background-color: #282828;
                cursor: crosshair;
            }

            h1{
                font-family: "gothic";
                font-size: 115px;
                color: #ffffff;
                font-weight: 100;
                text-shadow: 9px 15px 3px #727272;
                animation: decayShift 8s ease-in-out infinite;
            }
            h2{
                font-family: arial;
                font-style: italic;
                font-weight: 100;
                font-size: 23px;
                padding: 5px;
                color: #cdcdcd;
            }
            
            
            a{
                font-family: arial;
                font-weight: 100;
                color: white;
            }
            a:hover{
                font-style: italic;
                cursor: crosshair;
            }
            
            b{
                color: white;
                font-family: arial;
                font-style: italic;
                font-weight: 100;
            }
            
            p{
                font-family: arial;
                font-style: italic;
                font-weight: 100;
                color: #cdcdcd;
            }
            
            .heading{
              padding: 7px;
            }
.digicam{
    width: 413px;
    border: solid white;
    margin-bottom: 7px;
    
}

.filters {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 20px 0;
}

.filters button {
  background: none;
  border: 1px solid white;
  color: white;
  font-family: arial;
  font-style: italic;
  font-weight: 100;
  padding: 6px 16px;
  cursor: crosshair;
  transition: background 0.3s;
}

.filters button:hover,
.filters button.active {
  background-color: white;
  color: #282828;
}
        
            @keyframes decayShift {
  0%   { filter: grayscale(100%) brightness(0.8); transform: rotate(0deg); }
  50%  { filter: grayscale(30%) brightness(0.7) sepia(37%) hue-rotate(75deg); transform: rotate(-3deg); }
  100% { filter: grayscale(100%) brightness(0.8); transform: rotate(0deg); }
}
            @keyframes decayShift2 {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
            @keyframes decayShift3 {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
            @keyframes decayText {
  0%   { filter: grayscale(100%) brightness(0.8); }
  50%  { filter: grayscale(30%) brightness(0.7) sepia(37%) hue-rotate(75deg); }
  100% { filter: grayscale(100%) brightness(0.8); }
}