/* Self-hosted Poppins font (works fully offline).
   Download the .woff2 files into ../fonts/ */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-v24-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-v24-latin-700.woff2") format("woff2");
}

/* Reset default margins/padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Full-height background image, scaled proportionally to fill the window */
html,
body {
  height: 100%;
  background-color: #000000; /* fallback while image loads */
  background-image: url("../images/49221499373-fedf77bece-o.jpg");
  background-size: cover;       /* fill the window proportionally, no distortion */
  background-position: center;  /* keep the focal point centered */
  background-repeat: no-repeat; /* no tiling */
  background-attachment: fixed; /* image stays put while content scrolls */
}

/* Flexbox centers content both horizontally and vertically,
   remaining responsive on PC, tablet, and phone */
.container {
  display: flex;
  flex-direction: column;  /* stack title and icons vertically */
  justify-content: center; /* vertical centering (offset upward below) */
  align-items: center;     /* horizontal centering */
  min-height: 100vh;       /* full viewport height */
  text-align: center;
  /* Extra bottom padding pulls the block slightly above the true center.
     Because the title comes first, it stays anchored near the top of the
     group and remains visible even if a short window hides the icons. */
  padding: 1rem 1rem 12vh;
}

/* White text with fluid, responsive font size */
.title {
  color: #ffffff;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  /* clamp() scales the text smoothly between min and max sizes */
  font-size: clamp(1.85rem, 9.7vw, 4.85rem);
  font-weight: 700; /* Poppins Bold */
}

/* Row of social icons; gap and size use the same fluid unit as the title
   so the icons scale in proportion with the text on every device. */
.socials {
  display: flex;
  justify-content: center;
  gap: clamp(0.375rem, 2vw, 1rem); /* spacing between icons */
  margin-top: clamp(0.075rem, 0.45vw, 0.225rem); /* spacing below the text */
}

/* Each icon sits inside a thin circular outline.
   Font-size drives the whole circle, so 'em' units keep it perfectly scalable. */
.social {
  font-size: clamp(0.66rem, 3.3vw, 1.65rem); /* master size for each icon */
  width: 1.85em;                       /* circle diameter (between 1.7em and 2em) */
  height: 1.85em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background-color: transparent;
  border: 0.1em solid #ffffff;         /* outline, scales with size */
  border-radius: 50%;                  /* perfect circle */
  text-decoration: none;               /* remove the link underline */
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* The Font Awesome glyph itself, sized relative to its circle */
.social i {
  font-size: 1em;
  line-height: 1;
}

/* Invert on hover: circle fills white, logo turns black */
.social:hover {
  color: #000000;              /* logo inverts to black */
  background-color: #ffffff;   /* circle fills with white */
  border-color: #ffffff;
}