Top Secret Documents</ <style> * { box-sizing: border-box; } body { background-color: #f0f0f0; font-family: 'Press Start', cursive; font-size: 18px; color: #000; } .container { width: 80%; margin: 0 auto; padding: 20px; border: 4px solid #000; border-radius: 0 0 4px 4px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .header { background-color: #f0f0f0; padding: 20px; border-bottom: 1px solid #000; } .content { padding: 20px; border-bottom: 4px solid #000; } .subpage { margin-top: 20px; padding: 20px; background-color: #f7d9b6; border: 4px solid #000; border-radius: 4px 4px 4px 4px; } a { text-decoration: none; color: #000; } </style> </head> <body> <div class="container"> <div class="header"> <h1>Confidential Information</h1> <h2>Classified Documents</h2> </div> <div class="content"> <h2>Secretly-Fine Print</h2> <p>For your eyes only, agent. The following documents contain top-secret information that could change the course of human history. Or not.</p> <ul> <li><a href="/secrets/secretly-fine-print/everything-is-okay">Everything is okay</a></li> <li><a href="/secrets/secretly-fine-print/what-happens-next">What happens next</a></li> <li><a href="/secrets/secretly-fine-print/what-we-actually-know">What we actually know</a></li> </ul> </div> <div class="subpage"> <h2>Everything is okay</h2> <p>We've got this under control, agent. Everything is fine. Don't worry about the impending robot uprising or the alien invasion. It's all just a minor setback.</p> <a href="/secrets/secretly-fine-print/everything-is-okay/second-opinion">Second Opinion</a> </div> <div class="subsubpage"> <h2>Second Opinion</h2> <p>Don't believe us, agent. We're just saying that to make you feel better. In reality, the robot uprising is imminent and we're all doomed.</p> </div> <p>Remember, this message will self-destruct in 5... 4...</p> </div> </body> </html>