/*!****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/css-loader/dist/cjs.js!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!../node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[2].use[4]!./assets/scss/app.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************/
:root {
  --dark: #ffdef8;
  --darkgrey: #54314a;
  --light: #f5b5ea;
  --bezier: cubic-bezier(0.17, 0.67, 0, 1);
  --font-weight: 900;
}

.sr-only {
  position: absolute;
  text-indent: -9999px;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============== */
/* typography */
/* ============== */

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li {
  color: inherit;
}

h1 span,
h1 a,
h2 span,
h2 a,
h3 span,
h3 a,
h4 span,
h4 a,
h5 span,
h5 a,
h6 span,
h6 a,
p span,
p a,
a span,
a a,
li span,
li a {
  font-family: inherit;
  color: inherit;
}

.large-heading {
  font-size: clamp(9.5rem, 16.6666666667vw, 20rem);
  line-height: 0.8;
  letter-spacing: -0.011em;
  font-variation-settings: "wght"900;
}


.medium-body {
  font-size: clamp(1rem, 1.25vw, 1.5rem);
  letter-spacing: -0.011em;
  font-weight: 500;
  font-variation-settings: "wght"500;
  line-height: 1.5;
}

.small-body {
  font-size: clamp(0.875rem, 1.0833333333vw, 1.25rem);
  letter-spacing: -0.011em;
  font-weight: 500;
  font-variation-settings: "wght"500;
  line-height: 1.5;
}

.xsmall-body {
  font-size: clamp(0.625rem, 1vw, 0.75rem);
  letter-spacing: -0.011em;
  font-weight: 500;
  font-variation-settings: "wght" 500;
}

.medium-body span,
.small-body span,
.xsmall-body span {
  font-variation-settings: "wght"600;
}

.caps {
  text-transform: uppercase;
}

@font-face {
  src: url(../assets/fonts/Inter-Variable.woff2) format('woff2');
  font-weight: "normal";
  font-family: Inter-Variable;
  font-style: normal;
  font-display: swap;
}

*,
body {
  font-family: Inter-Variable, sans-serif;
}

/* ============== */
/* Business card: */
/* ============== */

main {
  perspective: 800px;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  width: 100%;
  margin: auto;
}

.gradient {
  position: absolute;
  z-index: 0;
  inset: -20% 0 0 -10%;
  opacity: 0.8;
}

.gradient svg {
  width: 200vh;
  height: auto;
}

@media (max-width: 1024px) {
  main {
    width: 100%;
  }
}

.clippie {
  position: absolute;
  top: -100px;
  left: -100px;
  width: 1px;
  height: 1px;

}

.clippie clipPath {
  --scale: 0.00139;
  --ratio: 720/400;
  transform: scale(var(--scale), calc(var(--scale) * var(--ratio)));
}

.business-card-full {
  --x: 0deg;
  --y: 0.65;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 100vh;
  transform: rotateY(calc(var(--y) * 300deg - 150deg)) rotateX(var(--x));
  transform-style: preserve-3d;
  width: clamp(22.5rem, 37.5vw, 45rem);
  margin: auto;
}

.business-card {
  --z-axis: 0px;
  --scale-x: 1;
  position: absolute;
  background-color: var(--light);
  color: var(--dark);
  padding: clamp(1rem, 1vw, 2rem);
  width: 100%;
  height: clamp(12.5rem, 20.8333333333vw, 25rem);
  border-radius: 0 0 0.25rem 0.25rem;
  display: flex;
  flex-wrap: wrap;
  transform-style: preserve-3d;
  overflow: hidden;
  transform: rotateX(var(--rotation)) translateZ(var(--z-axis)) scaleX(var(--scale-x));
  transform-origin: center top;
}

.business-card--back-front {
  color: var(--light);
  background: var(--darkgrey);
}

.business-card--front-front,
.business-card--back-back {
  clip-path: url('#clippie');
}

.business-card--front-back,
.business-card--back-front {
  clip-path: url('#clippie-mirror');
}

.business-card--front-back,
.business-card--back-back {
  --z-axis: -1px;
  --scale-x: -1;
}

.business-card__rotate {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  height: 100%;
  transform: scale(-1, -1);
}

.business-card__main {
  display: flex;
  gap: 2rem;
  height: 100%;
}

.business-card .left {
  display: flex;
}
.business-card .text {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.business-card .content {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  flex-grow: 1;
}
.business-card .content p {
  max-width: 300px;
}


.business-card--back-back p {
  margin-left: auto;
  margin-top: auto;
  text-align: right;
}

.business-card svg {
  margin-left: auto;
}

.business-card__name span {
  font-variation-settings: "wght"var(--font-weight);
  position: absolute;
}

.business-card__name span:first-of-type {
  bottom: -0.75rem;
  left: calc(-100% + 5rem);
}

.business-card__name span:nth-of-type(2) {
  bottom: -0.75rem;
  right: -2.5rem;
}

.business-card__image {
  flex-shrink: 0;
  width: clamp(1.5rem, 4vw, 4rem);
  height: clamp(1.5rem, 4vw, 4rem);
  margin-right: 1em;
}

.business-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.business-card__text {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 60%;
  flex-grow: 1;
  height: 100%;
}

.business-card__job-title {
  margin-top: 0.15em;
  width: 47%;
}

.business-card__email {
  margin-top: 0.15em;
  width: 40%;
  flex-grow: 1;
  
}
  .business-card__question {
    margin-top: 0.5em;
  }

.business-card__socials {
  align-self: flex-end;
  justify-content: space-between;
}

/* ============== */
/* basic styling */
/* ============== */

*,
body {
  margin: 0;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.row.center {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

body {
  color: var(--light);
  background: var(--dark);
}

::selection {
  color: var(--light);
  background: var(--dark);
}

.color--hotpink {
  color: hotpink;
}