:root { --sea: #207eb6; --night: #06283f; --current: #60dcf4; --brass: #e8ab47; --shell: #f7e8ca; --text: #f8fdff; --card-text: #073b5c; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: linear-gradient(#0b4a72, var(--night) 420px);
  color: var(--text);
  font: 400 18px/1.55 "Nunito", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--current); outline-offset: 3px; border-radius: 8px; }
.wrap { width: min(820px, 100% - 32px); margin-inline: auto; }

header { padding: 28px 0 0; }
header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brand { margin: 0; font: 400 34px/1 "Lilita One", sans-serif; letter-spacing: .5px; }
header nav { display: flex; gap: 20px; font-weight: 800; }
header nav a { text-decoration: none; }
header nav a:hover { color: var(--current); }

main { padding-block: 32px 64px; }
article { padding: 44px 48px; border-radius: 30px; background: var(--shell); border: 3px solid var(--brass); color: var(--card-text); }
article + article { margin-top: 40px; }
h1 { margin: 0 0 4px; font: 400 40px/1.15 "Lilita One", sans-serif; }
h2 { margin: 32px 0 8px; font: 800 24px/1.2 "Baloo 2", sans-serif; }
p, li { font-size: 17px; }
ul { padding-left: 22px; }
article a { color: var(--sea); overflow-wrap: anywhere; }

footer { padding: 0 0 40px; font-size: 15px; color: #bde6ee; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 600px) {
  article { padding: 28px 22px; }
  h1 { font-size: 30px; }
  .brand { font-size: 28px; }
}

details { margin: 14px 0; }
summary { cursor: pointer; font-weight: 800; }
details p { margin: 8px 0 0; }