/* Tiny5 (Google Fonts, SIL OFL) */
@font-face {
  font-family: "Tiny5";
  font-display: swap;
  src: url("fonts/tiny5-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Tiny5";
  font-display: swap;
  src: url("fonts/tiny5-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --pink: #de5785;
  --plum: #7f107c;

  /* top/bottom paddings include the spacing of the original Carrd layout */
  --pad-top: 4.5rem;
  --pad-bottom: calc(2.5rem + 24px);
  --pad-x: .875rem;
  --logo-h: 1.875rem;
  --button-h: 2.75rem;
  --icon-size: 3.125rem;
  --icons-pad: 2.875rem;
  --icons-gap: .25rem;
}

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

html {
  font-size: 20pt;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  background: #fff;
}

/* Fixed background: pseudo-element instead of background-attachment, which iOS ignores */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  height: 100vh;
  height: 100lvh;
  background:
    url("images/grid.svg") center / 77px,
    url("images/bg.jpg") center / 96rem;
}

img {
  display: block;
  max-width: 100%;
  margin-inline: auto;
}

.card {
  width: 20rem;
  max-width: 100%;
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
  text-align: center;
}

.avatar {
  width: 7.875rem;
  height: auto;
  border: 5px dotted var(--plum);
  border-radius: 50%;
}

.logo {
  width: 9rem;
  height: var(--logo-h);
  margin-top: .75rem;
  object-fit: cover;
}

.caption {
  color: var(--pink);
  font: 400 .75rem / .875 "Tiny5", monospace;
  text-transform: uppercase;
}

h1 {
  margin-top: .25rem;
}

.button {
  display: block;
  width: 18rem;
  max-width: 100%;
  margin-inline: auto;
}

.button img {
  width: 100%;
  height: var(--button-h);
  object-fit: cover;
}

.vgen {
  margin-top: 1.5rem;
}

.vgen + .caption {
  margin-top: .125rem;
}

.socials {
  margin-top: 2.5rem;
}

.button + .button {
  margin-top: .25rem;
}

.icons {
  display: flex;
  justify-content: center;
  gap: var(--icons-gap);
  margin-top: .375rem;
  padding-inline: var(--icons-pad);
}

.icons a {
  flex: 1;
}

.icons img {
  width: 100%;
  max-width: var(--icon-size);
  height: auto;
}

@media (max-width: 1680px) {
  html {
    font-size: 15pt;
  }
}

@media (max-width: 980px) {
  html {
    font-size: 13pt;
  }
}

@media (max-width: 736px) {
  :root {
    --pad-top: 6.625rem;
    --pad-bottom: calc(2rem + 24px);
    --pad-x: 2.125rem;
    --logo-h: 2.34375rem;
    --button-h: 3.4375rem;
    --icon-size: 2.34375rem;
    --icons-pad: 2rem;
  }

  .logo {
    margin-top: .5625rem;
  }

  h1 {
    margin-top: .1875rem;
  }

  .vgen + .caption {
    margin-top: .09375rem;
  }

  .button + .button {
    margin-top: .1875rem;
  }
}

@media (max-width: 480px) {
  :root {
    --logo-h: 1.875rem;
    --button-h: 2.75rem;
  }
}

@media (max-width: 360px) {
  :root {
    --pad-top: 6.4375rem;
    --pad-bottom: calc(1.8125rem + 24px);
    --pad-x: 1.59375rem;
    --logo-h: 1.640625rem;
    --button-h: 2.40625rem;
    --icons-pad: 1.5rem;
    --icons-gap: .1875rem;
  }
}