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

body, html { width: 100%; height: 100%; display: block; }

/** Mobile first */
body { font-family: 'Noto Sans Mono', monospace; background: var(--bg-color, #000); }

main { width: 100%; padding: 1em 1em; }

.bg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; }

.bg svg { width: 100%; height: 100%; }

.social_media { margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space, 10px); width: 100%; }

.social_media > a { display: flex; gap: var(--space, 1em); color: var(--link-text-color, var(--text-color, #FFFFFF)); background: var(--link-bg-color, transparent); text-decoration: none; justify-content: center; align-items: center; flex: 1 1 100%; }

.social_media > a i { color: var(--link-icon-color, var(--text-color, #FFFFFF)); font-size: 1.5em; }

.social_media.even > a { flex: 1 1 calc(50% - var(--space, 10px)); }

.social_media > a > img { height: 22px; }

.cta.add_contact { background: var(--btn-bg-color, #FFFFFF); color: var(--btn-text-color, #cc6633); display: block; text-align: center; text-decoration: none; font-weight: 600; }

.social_media > a, .cta.add_contact { margin: 0 auto; padding: 1em; border: solid var(--border-width, 2px) var(--border-color, #FFFFFF); border-radius: 10px; }

body { display: flex; }

main { position: relative; max-width: 1000px; display: grid; grid-template-columns: 1fr; grid-template-areas: "logo"
 "header"
 "contact"
 "social"
 "footer"; margin: auto; width: 98%; border-radius: 10px; }

.section.img { grid-area: logo; }

.section.header { grid-area: header; }

.section.contact { grid-area: contact; }

.section.social_media { grid-area: social; }

.section.footer { grid-area: footer; }

.section.img { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }

.section.img img { width: 100%; max-width: 180px; border-radius: 50%; }

.section.header { padding: 1em; display: flex; justify-content: center; align-items: center; flex-direction: column; color: var(--text-color, #FFFFFF); }

.section.header a { color: var(--text-color, #FFFFFF); text-align: center; }

.section.header h1 { text-align: center; }

.section.social_media { padding: 1em 0; }

.section.footer { display: flex; align-items: center; justify-content: center; }

.section.footer a { color: var(--text-color, #FFFFFF); }

@media (min-width: 900px) { main { position: relative; max-width: 1000px; display: grid; grid-template-columns: 1fr 2fr 2fr; grid-template-rows: 2fr 1fr; grid-template-areas: "logo header header"
 "logo header header"
 "social social social"
 "contact contact footer"; }
  .social_media > a, .social_media.even > a { flex: 1; }
  .section.footer { justify-content: flex-end; }
  .section.header { align-items: flex-start; }
  .cta.add_contact { display: inline-block; } }

/*# sourceMappingURL=vcard.css.map */