@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  background-color: var(--bg-color);
  color: var(--font);
}

body {
  font-family: var(--font-family);
  line-height: var(--line-height);
  letter-spacing: 0;
  font-size: var(--font-size-regular);
}

.container {
  --bs-gutter-x: var(--space-500);
}

.attribution {
  font-size: 11px;
  text-align: center;
}
.attribution a {
  color: hsl(228, 45%, 44%);
}

:root {
  --grey-900: hsl(0, 0%, 8%);
  --grey-800: hsl(0, 0%, 12%);
  --grey-700: hsl(0, 0%, 20%);
  --green: hsl(75, 94%, 57%);
  --white: hsl(0, 0%, 100%);
  --bg-color: #f9f9f9;
  --card: #f2f2f2;
  --font: #404040;
  --button: #000;
  --space-500: 4rem;
  --space-300: 2.4rem;
  --space-200: 1.6rem;
  --space-150: 1.2rem;
  --space-100: 0.8rem;
  --space-50: 0.4rem;
  --font-family: "Inter", sans-serif;
  --weight-regular: 400;
  --weight-semi: 600;
  --weight-bold: 700;
  --font-size-large: 2.4rem;
  --font-size-regular: 1.4rem;
  --line-height: 1.5;
  --radius-regular: 0.8rem;
  --radius-large: 1.2rem;
}

.text-preset-1 {
  font-weight: var(--weight-bold);
  font-size: var(--font-size-large);
}

.text-preset-2 {
  font-weight: var(--weight-regular);
  font-size: var(--font-size-regular);
}

.text-preset-2-bold {
  font-weight: var(--weight-bold);
  font-size: var(--font-size-regular);
}

.green {
  color: var(--green);
}

.button {
  text-decoration: none;
  color: var(--button);
  border: 2px solid var(--button);
  padding: 1.5rem 3rem;
  border-radius: 0.4rem;
  position: relative;
  z-index: 0;
  text-align: center;
}
.button::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
.button::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: var(--button);
  transition: all 0.3s;
  z-index: -1;
}
.button:hover {
  color: var(--white);
}
.button:hover::before {
  width: 100%;
}

.social {
  display: flex;
  align-items: center;
  height: 100vh;
}
.social__wrapper {
  padding: var(--space-500);
  background-color: var(--card);
  border-radius: var(--radius-large);
}
.social__bio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-300);
  margin-bottom: var(--space-300);
}
.social__bio img {
  width: 8.8rem;
  height: 8.8rem;
  border-radius: 100%;
}
.social__name h1 {
  margin: 0 0 var(--space-50);
}
.social__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

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