style.css

* {
  margin: 0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
}

div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* set the height to 200% */
  height: 200vh;

  /* Stack up some background images 
  There are 4 images and a gradient */
  /* background-image: a, b, c, d, e */
  background-image: 
    url(images/avatars-material/avatars-material-woman-5.png),
    url(images/avatars-material/avatars-material-man-1.png),
    url(images/avatars-material/avatars-material-man-5.png),
    url(images/avatars-material/avatars-material-woman-2.png),
    linear-gradient(
      45deg, 
      rgb(255, 99, 71, 0.9), 
      rgba(255, 217, 0, 0.511)),
    url(images/patterns/stormy-sea.png);
    
  /* Set these properties for each image. The order matters! */
  background-size: 100px, 200px, 300px, 400px, auto, 30px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-position: 
    left 100px top 50px, 
    right top, 
    right bottom, 
    left bottom, 
    center, 
    center center;
  background-attachment: 
    fixed, 
    scroll, 
    scroll, 
    scroll, 
    scroll, 
    fixed;
}


h1 {
  /* position: fixed; */
  top: 25vh;
  font-size: 6rem;
  padding-left: 120px;
  background-image: url(images/icons/css-file.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100px;
}

p.drop-cap {
  font-size: 3rem;
  width: 400px;
}

/* Create a drop cap with ::first-letter */
p.drop-cap::first-letter {
  font-size: 6rem;
  font-family: cursive;
  margin-right: 0.5rem;
  float: left;
  line-height: 1.1;
}

.awesome-1, .awesome-2, .awesome-3, .awesome-4 {
  font-size: 3rem;
  margin: 2rem;
  padding: 1rem;
}

.awesome-1 {
  width: 100px;
  border: 3px solid;
}

.awesome-2 {
  width: 200px;
  border: 3px solid;
}

.awesome-3 {
  width: 150px;
  border: 3px solid;
  overflow: hidden;
}

.awesome-4 {
  width: 250px;
  border: 3px solid;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 

https://css-tricks.com/css-is-awesome/

https://blog.jim-nielsen.com/2021/css-is-in-fact-awesome/ */