<div class="pseudo-blocks">
<h2> Styling the First Letter and First Line</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin suscipit, urna eget efficitur venenatis, libero justo sollicitudin justo, ut efficitur metus leo at eros.</p>
</div>
<div class="pseudo-blocks">
<h2> Custom Bullets for Lists</h2>
<ul class="custom-bullets">
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>
</div>

<div class="pseudo-blocks">
<h2> Multi-Level Custom Quotes</h2>
<blockquote>
  This is a custom blockquote example with multi-level quotes.
</blockquote>
</div>

<div class="pseudo-blocks">
<h2> Placeholder Shimmer Effect</h2>
<div class="loading-placeholder" style="height: 20px; width: 200px;"></div>

</div>

<div class="pseudo-blocks">
<h2> Styling Form Inputs with Icons</h2>
<div class="input-with-icon">
  <input type="text" placeholder="Search...">
</div>
</div>

<div class="pseudo-blocks">
<h2> Custom Underlines with Pseudo-Elements</h2>
<span class="custom-underline">Custom Underlined Text</span>
</div>

<div class="pseudo-blocks">
<h2> Ribbon Effect on a Box</h2>
<div class="ribbon-box">
  Box with Ribbon Effect
</div>

</div>

<div class="pseudo-blocks">
<h2> Responsive Background Image Overlay</h2>
<div class="background-overlay">
  <!-- Content goes here -->
</div>
</div>

.pseudo-blocks {
  border-bottom: 1px solid #e2e2e2;
  padding: 25px 0;
}

/* Styling the First Letter and First Line */
p::first-letter {
  font-size: 200%;
  font-weight: bold;
  float: left;
  margin-right: 5px;
  color: #ff6347;
}

p::first-line {
  font-variant: small-caps;
  color: #2e8b57;
}

/* Custom Bullets for Lists */
ul.custom-bullets  {
  list-style: none;
  padding: 0;
}
ul.custom-bullets li {
  line-height: 30px;
}
ul.custom-bullets li::before {
  content: "✓ ";
  color: green;
  font-weight: bold;
}
/*Multi-Level Custom Quotes */
blockquote {
  position: relative;
  padding: 20px;
  margin: 20px;
  border-left: 5px solid #ccc;
}

blockquote::before {
  content: "“";
  font-size: 4em;
  color: #ccc;
  position: absolute;
  top: 10px;
  left: 10px;
}

blockquote::after {
  content: "”";
  font-size: 4em;
  color: #ccc;
  position: absolute;
  bottom: 10px;
  right: 10px;
}
/*Placeholder Shimmer Effect */
.loading-placeholder {
  position: relative;
  background: #f0f0f0;
  overflow: hidden;
}

.loading-placeholder::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Styling Form Inputs with Icons */
.input-with-icon {
  position: relative;
}

.input-with-icon input {
  padding-left: 30px;
}

.input-with-icon::before {
  content: "🔍";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* Custom Underlines with Pseudo-Elements */
.custom-underline {
  position: relative;
  display: inline-block;
}

.custom-underline::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, red, yellow);
  bottom: -2px;
  left: 0;
}
/* Ribbon Effect on a Box */
.ribbon-box {
  position: relative;
  padding: 20px;
  background: #f4f4f4;
  border: 1px solid #ddd;
}

.ribbon-box::before, .ribbon-box::after {
  content: '';
  position: absolute;
  width: 50%;
  height: 20px;
  background: red;
  top: 10px;
}

.ribbon-box::before {
  left: 0;
  transform: skewX(-20deg);
}

.ribbon-box::after {
  right: 0;
  transform: skewX(20deg);
}
/* Responsive Background Image Overlay */
.background-overlay {
  position: relative;
  background: url('https://live.staticflickr.com/65535/53657396513_5da0b53f5b.jpg') center/cover no-repeat;
  height: 300px;
}

.background-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}