@font-face {
  font-family: pixel;
  src: url("EightBitDragon-anqx.ttf");
}

html, body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 16px;
  background-color: #000000;
  background: linear-gradient(180deg, #000000 0% , #222222 100%);
  height: 100%;
}

h1 {
  color: #d3d3d3;
  text-align: center;
  font-size: 5rem;
  margin-bottom: 5rem;
  font-family: pixel, sans-serif;
}

#wrapper {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  gap: 1rem;
  flex-wrap: wrap;
}

article {
  overflow: hidden;
  min-width: 320px;
  margin-bottom: 4rem;
}

.viewport {
  width: 640px;
  height: 410px;
  display: inline-block;
  overflow: hidden;  
  transition: all 0.5s;
  background-position-y: 50%;
  border-radius: 4px;
}

.winter {
  background: url("talvi.jpg");
  background-position-y: 50%;
  background-size: 125%;
}

.summer {
  background: url("kesa.jpg");
  background-position-y: 50%;
  background-size: 125%;
}

.bunnies {
  background: url("puput.jpg");
  background-position-y: 50%;
  background-size: 125%;
}

.scotland {
  background: url("skotlanti.jpg");
  background-position-y: 50%;
  background-size: 125%;
}

.lapland {
  background: url("lappi.jpg");
  background-position-y: 50%;
  background-size: 125%;
}


.viewport:hover {
  background-position: 100% 50%;
  backdrop-filter: blur(0);
  transition: all 20s linear;
}

.filter {
  backdrop-filter: blur(2px) grayscale(100%);
  width: 100%;
  height: 100%;
  transition: all 0.5s;
}


.filter:hover {
  backdrop-filter: blur(0) grayscale(0);
  transition: all 0.5s linear;
}