Build a Confidential Email Page - Build a Confidential Email Page

HTML-CSS
1

Tell us what’s happening:

fix the bug of display: inline-block please even it is correct code it didnt pass

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geo:ital@0;1&family=Iceberg&display=swap" rel="stylesheet">
  <title>Confidential Email</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <main id="email">
    <div id="confidential">CONFIDENTIAL</div>
    <p>Dear <span class="blurred">Hon. Shiro Ryu</span></p>
    <p>We have an emergency.</p>
    <p>Following planetary settlement operations on Delta Pavonis, classified anomalies have been confirmed at <span class="blurred">specific surface locations previously designated as low-risk zones.</span></p>
    <p>The primary outbreak of the unidentified sickness originated within <span class="blurred">Landing Sector E-9, informally referred to as the “Glass Basin,” located along the southern twilight belt at approximately 18.4°S / 112.7°E.</span> Initial symptoms among personnel stationed there include cognitive drift, shared lucid dream states, and progressive psychological alteration inconsistent with known stress responses.</p>
  <p>Subsequent investigation revealed that exposure correlates with prolonged presence <span class="blurred">near subterranean formations beneath the Basin.</span>These formations extend deep below the surface and are accessible through naturally occurring sink apertures now sealed from public access. Their internal structure <span class="blurred">exhibits non-linear geometry and materials that appear bio-organic rather than mineral.</span></p>
<p>Secondary anomalies have been recorded <span class="blurred">along the Obsidian Ridge Corridor, roughly 40 kilometers north of the main colony perimeter.</span> This area contains partially exposed structures arranged in repeating fractal patterns, invisible to orbital scans yet unmistakable at ground level.</p>
  <p>
    It is within <span class="blurred">these two zones—the Glass Basin and the Obsidian Ridge—that</span> personnel have reported encounters with humanoid, feline-like entities. Sightings consistently describe intelligent, responsive beings with nekoid morphology, often appearing at the periphery of vision or during altered mental states. Despite their stylized, almost mythic appearance, environmental sensors confirm physical presence rather than hallucination.
  </p>
  <p>
    Notably, these entities do not appear hostile. However, their proximity coincides with accelerated psychological effects among humans, suggesting either intentional interaction or passive influence. Whether this phenomenon is mediated by the suspected native viral agent or by the structures themselves remains undetermined.
  </p>
  <p>All references to <span class="blurred">the Glass Basin, the Obsidian Ridge Corridor, and any associated sightings have been removed from civilian colony maps and reclassified as geological exclusion zones. </span>Official reports describe them only as unstable terrain.</p>
  <p>
    Public disclosure of the true nature of these locations—or <span class="blurred">the existence of the sickness, the structures, or the nekoid entities—would likely result in panic and uncontrolled contact scenarios.</span>
  </p>
  <p>
Your authorization is required to determine whether these zones will be permanently quarantined, covertly studied, or prepared for first-contact protocols under extreme secrecy
  </p>
  <p>Time-sensitive decisions are now unavoidable.</p>
  <div id="top-secret">TOP SECRET</div>
  </main>
</body>

</html>

/* file: styles.css */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 8px;
  padding-bottom: 5.5%;
  background: #090979;
}

#email {
  width: 500px;
  background: #f0f0f0;
  margin-top: 50px;
  padding: 50px;
  box-shadow: 10px 5px 5px #2020209b;
  border: 2px solid black;
  font-family: "Geo", sans-serif;
  position: relative;
  box-sizing: border-box;
}

.blurred {
  filter: blur(3px);
}

#confidential {
  display: inline-block;
  position: absolute;
  color: red;
  padding: 12px;
  border: 5.5px solid red;
  font-size: 3.5em;
  transform: rotate(-20deg);
  margin-left: 5px;
  top: 75px;
  right: 50px;
}

#top-secret {
  display: inline-block;
  position: absolute;
  color: red;
  padding: 12px;
  border: 5.5px solid red;
  bottom: 35px;
  font-size: 2.75em;
  transform: rotate(12deg);
  margin-left: 3.5px;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Challenge Information:

Build a Confidential Email Page - Build a Confidential Email Page

2

they are inside a flex container so they can’t be block elements