.signika-negative-variant {
    font-family: "Signika Negative", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
  }

h1 {
    color: rgb(130, 202, 130);
    justify-content: center;
    text-align: center;
    display: block;
    font-size: 3em;
    margin-top: 60px;
    text-shadow: 3px 3px rgb(52, 75, 52);
}


h2 {
    color: rgb(124, 197, 124);
    justify-content: center;
    text-align: center;
    display: block;
    font-size: 1.6em;
    text-shadow: 1.8px 1.8px rgb(48, 71, 48);
}

body{
    font-family: "Signika Negative";
    background: 
        linear-gradient(rgba(187, 166, 129, 0.5), rgba(56, 51, 42, 0.8)),
        url('assets/rain.gif');
    background-size: cover;
    background-position: center;
    height: 100vh;
    margin: 0;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(assets/raindrop.gif);
  z-index: 2;
}

#container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    position: relative;
    padding-top: 40px;
}

.smiski {
    fill:rgb(104, 180, 104);
    height: 200px;
    width: 200px;
    padding: 10px;
    max-width: 100%;
    display: block;
    z-index: 5;
}

.smiski:hover {
  filter: brightness(1.4);
  transform: scale(1.3);

}


section {
    min-width: 220px;
    text-align: center;
    z-index: 4;
}

section p {
    color: rgb(152, 219, 152);
    justify-content: center;
    text-align: center;
    font-size: 1.5em;
    text-shadow: 2.2px 2.2px rgb(85, 124, 85);
}

#block {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  justify-items: center;
  padding-top: 80px;
  z-index: 3;
}

#cheerleader, #drummer, #lamp, #yoga, #yoga-pair {
  filter: brightness(0.4);
}

#cheerleader:hover, #drummer:hover, #lamp:hover, #yoga:hover, #yoga-pair:hover {
  filter: brightness(1) saturate(1.3);
}

#cheerleader {
  grid-row: 1fr;
}

#drummer {
  grid-column: 2fr;
}

#lamp {
  grid-column: 3fr;
}

#yoga {
  grid-column: 4fr;
}

#yoga-pair {
  grid-column: 5fr;

}