/* Nord Palette */
:root {
  --nord0: #2e3440; /* Dark background */
  --nord3: #434c5e; /* Dark grey */
  --nord6: #d8dee9; /* Light grey */
  --nord7: #e5e9f0; /* Lighter grey */
  --accent: #88c0d0; /* Soft cyan */
  --bg-color: var(--nord7);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: var(--nord0);
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Inter, sans-serif;
  background-color: var(--bg-color);
  transition: background-color 0.3s ease;
  background-image: url("images/designing-components.svg");
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 500px;
  color: var(--nord6);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 3rem;
}

main {
  max-width: 480px;
  width: 100%;
  background-color: var(--nord3);
  border-radius: 12px;
  padding: 3rem 2.5rem;
  box-shadow: 0 8px 24px rgb(0 0 0 / 30%);
  text-align: center;
}

h1 {
  font-weight: 700;
  font-size: 2.75rem;
  color: var(--accent);
  margin-bottom: 1rem;
}

p {
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--nord6);
  margin-bottom: 2rem;
}

.contact p {
  margin-bottom: 1.25rem;
  font-size: 1.125rem;
}

.contact a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact a:hover {
  color: #81a1c1;
}

#contact-number {
  display: none;
}

.hero {
  background: transparent;
  text-shadow: 0 2px 4px rgb(0 0 0 / 30%);
}

.hero-content {
  position: relative;
  z-index: 1; /* above bg */
  text-align: center;
}

.foreground-image {
  max-width: 180px;
  margin: 2rem auto;
  display: block;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 15%));
  transition: transform 0.3s ease;
}

.foreground-image:hover {
  transform: scale(1.05);
}

small {
  display: block;
  margin: 1rem;
  font-size: 0.85rem;
  color: var(--nord5);
}