body {
  margin: 0;
  line-height: normal;
}

:root {
  /* fonts */
  --text-md-medium: Inter;

  /* font sizes */
  --text-md-medium-size: 16px;
  --text-lg-semibold-size: 18px;
  --display-sm-semibold-size: 30px;
  --font-size-5xl: 24px;
  --display-md-medium-size: 36px;
  --font-size-3xl: 22px;
  --text-sm-regular-size: 14px;
  --font-size-lgi: 19px;
  --font-size-smi: 13px;
 /* --font-size-13xl: 32px; */
  --font-size-7xl: 26px;
  --font-size-xs: 12px;
  --text-xl-semibold-size: 20px;

  /* Colors */
  --colors-background-bg-primary: #fff;
  --colors-text-text-primary-900: #101828;
  --color-gray-100: rgba(0, 0, 0, 0.01);
  --component-colors-components-avatars-avatar-contrast-border: rgba(
    0,
    0,
    0,
    0.08
  );
  --gradient-skeuemorphic-gradient-border: rgba(255, 255, 255, 0.12);
  --color-gray-200: rgba(255, 255, 255, 0.5);
  --colors-text-text-tertiary-600: #475467;
  --color-darkslategray-100: #34495e;
  --colors-text-text-secondary-700: #344054;
  --component-colors-components-buttons-tertiary-color-button-tertiary-color-fg: #6941c6;
  --colors-border-border-primary: #d0d5dd;
  --component-colors-components-buttons-primary-button-primary-bg: #7e56d9;
  --color-slategray: #667085;
  --color-gainsboro-100: #e6e8eb;
  --colors-background-bg-quaternary: #e4e7ec;
  --color-gainsboro-200: #dedede;
  --colors-background-bg-secondary: #f9fafb;
  --color-whitesmoke-100: #ecf0f1;
  --color-whitesmoke-200: #ededed;
  --color-mediumseagreen-100: #3db070;
  --colors-foreground-fg-success-secondary: #17b26a;
  --color-black: #000;
  --color-dimgray: #6b6b6b;
  --color-silver: #bdc3c7;
  --component-colors-utility-pink-utility-pink-50: #fdf2fa;
  --component-colors-utility-brand-utility-brand-200: #e9d7fe;
  --component-colors-utility-pink-utility-pink-200: #fcceee;
  --component-colors-utility-pink-utility-pink-700: #c11574;
  --component-colors-utility-indigo-utility-indigo-50: #eef4ff;
  --component-colors-utility-indigo-utility-indigo-200: #c7d7fe;
  --component-colors-utility-indigo-utility-indigo-700: #3538cd;
  --component-colors-utility-brand-utility-brand-50: #f9f5ff;

  /* Spacing */
  --spacing-8xl: 80px;
  --spacing-3xl: 24px;
  --spacing-lg: 12px;
  --spacing-4xl: 32px;
  --radius-full: 9999px;
  --spacing-xxs: 2px;
  --width-lg: 640px;
  --width-sm: 480px;
  --spacing-sm: 6px;
  --spacing-xl: 16px;
  --radius-md: 8px;
  --spacing-md: 8px;
  --spacing-2xl: 20px;
  --spacing-xs: 4px;
  --radius-lg: 10px;

  /* Gaps */
  --gap-5xl: 24px;
  --gap-xs: 12px;
  --gap-xl: 20px;
  --gap-11xs: 2px;
  --gap-13xl: 32px;
  --gap-base: 16px;
  --gap-7xs: 6px;
  --gap-2xs: 11px;
  --gap-5xs: 8px;
  --gap-3xs: 10px;
  --gap-61xl: 80px;
  --gap-21xl: 40px;
  --gap-9xs: 4px;
  --gap-32xl: 51px;
  --gap-8xs: 5px;
  --gap-11xl: 30px;
  --gap-mini: 15px;
  --gap-mid: 17px;
  --gap-12xs: 1px;
  --gap-0: 0px;

  /* Paddings */
  --padding-37xl: 56px;
  --padding-17xl: 36px;
  --padding-9xl: 28px;
  --padding-base: 16px;
  --padding-mini: 15px;
  --padding-13xl: 32px;
  --padding-xl: 20px;
  --padding-2xl: 21px;
  --padding-5xs: 8px;
  --padding-6xs: 7px;
  --padding-11xs: 2px;
  --padding-smi: 13px;
  --padding-3xs: 10px;
  --padding-25xl: 44px;
  --padding-9xs: 4px;
  --padding-4xl: 23px;
  --padding-5xl: 24px;
  --padding-xs: 12px;
  --padding-base-2: 16.2px;
  --padding-2xs: 11px;
  --padding-110xl: 129px;
  --padding-mid: 17px;
  --padding-112xl: 131px;
  --padding-46xl: 65px;
  --padding-7xs-5: 5.5px;
  --padding-sm: 14px;
  --padding-3xs-5: 9.5px;
  --padding-23xl: 42px;
  --padding-29xl: 48px;
  --padding-63xl: 82px;
  --padding-34xl: 53px;
  --padding-lgi: 19px;
  --padding-39xl: 58px;
  --padding-44xl: 63px;
  --padding-19xl: 38px;
  --padding-6xl-5: 25.5px;
  --padding-smi-5: 12.5px;
  --padding-3xl: 22px;
  --padding-6xl: 25px;
  --padding-12xs: 1px;
  --padding-244xl: 263px;
  --padding-240xl: 259px;
  --padding-11xl: 30px;
  --padding-7xs: 6px;
  --padding-4xs: 9px;
  --padding-62xl: 81px;

  /* Border radiuses */
  --br-61xl: 80px;
  --br-9980xl: 9999px;
  --br-xs: 12px;
  --br-5xs: 8px;
  --br-11xs: 2px;
  --br-3xs: 10px;
  --br-9xl: 28px;
  --br-9xs: 4px;
  --br-base: 16px;

  /* Effects */
  --shadows-shadow-xs-skeuomorphic: 0px 0px 0px 1px rgba(16, 24, 40, 0.18) inset,
    0px -2px 0px rgba(16, 24, 40, 0.05) inset,
    0px 1px 2px rgba(16, 24, 40, 0.05);
  --shadows-shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
}




.profile-photo img {
    width: 25%;
    height: auto;
    object-fit: cover;
    /* border-radius: 50%; */
    border: 2px solid #ced4da;
}