@import "reset.css";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root{
  --color-logo: #7b7979;
  --color-accent: #54A79A;
  --color-main: #ffffff;
  --background: #54A79A;
  --background-dark: #3b776d;
  --background-logo: #ffffff;
}

html {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--color-main);
}

body {
  margin: 0;
  padding: 0;
}

/* vcard */
.vcard {
  --border-radius: 8px;

  background: url('../img/pattern.svg');
  display: grid;
  width: 100svw;
  height: 100svh;
  grid-template-columns: 1fr 1fr;
  align-content: stretch;
  justify-content: center;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.vcard__logo {
  background-color: var(--background-logo);
  border-radius: 50%;
  width: 300px;
  max-width: 40%;
  aspect-ratio: 1;
  position: relative;
  box-shadow: 0 0 24px rgba(0,0,0,0.2);
  margin: auto;
  display: block;
  z-index: 1;
}
.vcard__logo > img {
  width: 60%;
  position: absolute;
  height: 60%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.vcard__content {
  color: var(--color-main);
  padding: 2rem;
  display: flex;
  flex-flow: column nowrap;
  gap: 2rem;
  justify-content: center;
  position: relative;
}

.vcard__content::before {
  content: '';
  background-color: var(--background);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 50% 0 auto 0;
  height: 100svh;
  transform: translate(0, -50%);
}

/* vcard-field */
.vcard-field {
  --height: 60px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}

.vcard-field > button {
  border-radius: calc(var(--height) / 2);
  color: var(--color-logo);
  border: 0 none;
  padding: 1rem;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(0,0,0,0.2);
  transition: all 400ms ease-in-out;
}

.vcard-field > button:hover {
  box-shadow: 4px 4px 12px rgba(0,0,0,0.2);
  transform: scale(1.03);
}

/* vCard (vertical) */
.vcard.vcard--vertical {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}

.vcard--vertical .vcard__content {
  margin: 0 auto;
}

.vcard--vertical .vcard__content::before {
  inset: 0 auto 0 50%;
  width: 100svw;
  transform: translate(-50%, 0);
}