:root{--black:#000;--white:#fff}
*{box-sizing:border-box}
html,body{margin:0;font-family:"Segoe UI",Helvetica,Arial,sans-serif}
.page{background:var(--white);color:var(--black);width:100%;max-width:1100px;margin:auto;padding:40px;border-radius:14px;box-shadow:0 0 60px rgba(0,0,0,.35)}
header{margin-bottom:30px}
nav{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;font-weight:700;letter-spacing:2px;text-transform:uppercase}
nav a{color:var(--black);text-decoration:none;padding:10px 14px;border:2px solid var(--black);border-radius:30px;transition:.25s}
nav a:hover{background:var(--black);color:var(--white)}
.hero{text-align:center;margin-bottom:40px}
.hero h1{margin:0;font-size:42px;font-weight:900;letter-spacing:4px;text-transform:uppercase}
.content{max-width:850px;margin:auto;font-size:18px;line-height:1.75}
.content p{margin:18px 0}
.content a{color:var(--black);font-weight:700;word-break:break-word}
.content a:hover{opacity:.6}
.links{display:flex;flex-direction:column;gap:14px}
.links a{color:var(--black);text-decoration:none;border:2px solid var(--black);border-radius:30px;padding:12px 18px;text-align:center;font-weight:700;letter-spacing:1px;transition:.25s}
.links a:hover{background:var(--black);color:var(--white)}
figure{text-align:center;margin:30px 0}
figure img{max-width:95%;border:3px solid var(--black);border-radius:10px;transition:.3s}
figure img:hover{transform:scale(1.03)}
figcaption{margin-top:10px;font-size:15px;opacity:.75}
.author{text-align:center;margin-bottom:30px;line-height:1.6}
footer{text-align:center;margin-top:40px}
footer a{color:var(--black);text-decoration:none;opacity:.6}
footer a:hover{opacity:1}
@media(max-width:720px){figure img{max-width:90%}}