@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  line-height: 1.5;
  /* --- */
  font-family: "Roboto", sans-serif;
  /* center everything */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

h1, h2, h3 {
  line-height: 1.1;
}
header {
  min-height: 100px;
}
footer {
  min-height: 300px;
}
section {
  padding: 3rem;
  max-width: 90vw;
  box-shadow: 4px 8px 16px rgba(0,0,0,0.1);
}
section ~ section {
  margin-top: 5rem;
}
section h2 {
  margin-bottom: 3rem;
}
.description {
  margin-top: 3rem;
  max-width: 400px;
  line-height: 1.5;
}

/* background-blend-mode */
section.bbm .container {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

section.bbm.color_and_image .container div {
  background-image: url(./images/hiking.jpeg);
  background-position: center;
  background-size: cover;
  background-color: yellowgreen;
  height: 300px;
  width: 200px;
  position: relative;
}
section.bbm .container div::after {
  content: attr(bbmvalue);
  position: absolute;
  left: 1rem;
  top: .5rem;
}
section.bbm._2images .container div {
  background-image: url(./images/small_face.jpeg), url(./images/tree_cut.jpeg);
  background-position: center;
  background-size: cover;
  height: 300px;
  width: 200px;
  position: relative;
  color: white;
}
section.bbm._2x1image .container div {
  background-image: url(./images/turtle.jpeg), url(./images/turtle.jpeg);
  background-position: center;
  background-size: cover;
  height: 200px;
  width: 300px;
  position: relative;
  color: white;
}

.bbm .normal {
  background-blend-mode: normal;
}
.bbm .multiply{
  background-blend-mode: multiply;
}
.bbm .screen {
  background-blend-mode: screen;
}
.bbm .overlay {
  background-blend-mode: overlay;
}
.bbm .darken {
  background-blend-mode: darken;
}
.bbm .lighten {
  background-blend-mode: lighten;
}
.bbm .color-dodge {
  background-blend-mode: color-dodge;
}
.bbm .color-burn {
  background-blend-mode: color-burn;
}
.bbm .hard-light {
  background-blend-mode: hard-light;
}
.bbm .soft-light {
  background-blend-mode: soft-light;
}
.bbm .difference {
  background-blend-mode: difference;
}
.bbm .exclusion {
  background-blend-mode: exclusion;
}
.bbm .hue {
  background-blend-mode: hue;
}
.bbm .saturation {
  background-blend-mode: saturation;
}
.bbm .color {
  background-blend-mode: color;
}
.bbm .luminosity {
  background-blend-mode: luminosity;
}



/* * { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue } */