@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

@font-face {
  font-family: "SF Pro Rounded-Heavy";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/SF-Pro-Rounded-Heavy.otf") format("opentype");
}
@font-face {
  font-family: "SF Pro Rounded-Semibold";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/SF-Pro-Rounded-Semibold.otf") format("opentype");
}
@font-face {
  font-family: "SF Pro Rounded-Medium";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/SF-Pro-Rounded-Medium.otf") format("opentype");
}
@font-face {
  font-family: "SF Pro Rounded-Bold";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/SF-Pro-Rounded-Bold.otf") format("opentype");
}
@font-face {
  font-family: "SF Pro Rounded-Regular";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/SF-Pro-Rounded-Regular.otf") format("opentype");
}
@font-face {
  font-family: "SF Pro Rounded-Black";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/SF-Pro-Rounded-Black.otf") format("opentype");
}

:root { 
  --azure-radiance: #007aff;
  --black: #000000;
  --gray: #98948a;
  --gray-nurse: #e9e8e6;
  --mercury: #e5e5ea;
  --white: #ffffff;
  --white---dirty: #f9f9f8;
 
  --font-size-s: 14px;
  --font-size-m: 16px;
  --font-size-xl: 20px;
  --font-size-xxl: 32px;
  --font-size-xxxl: 48px;
 
  --font-family-sf_pro_rounded-black: "SF Pro Rounded-Black", Helvetica;
  --font-family-sf_pro_rounded-bold: "SF Pro Rounded-Bold", Helvetica;
  --font-family-sf_pro_rounded-heavy: "SF Pro Rounded-Heavy", Helvetica;
  --font-family-sf_pro_rounded-medium: "SF Pro Rounded-Medium", Helvetica;
  --font-family-sf_pro_rounded-regular: "SF Pro Rounded-Regular", Helvetica;
  --font-family-sf_pro_rounded-semibold: "SF Pro Rounded-Semibold", Helvetica;
}

/* S */

.sfprorounded-heavy-normal-black-14px {
  color: var(--black);
  font-family: var(--font-family-sf_pro_rounded-heavy);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.sfprorounded-regular-normal-black-14px {
  color: var(--black);
  font-family: var(--font-family-sf_pro_rounded-regular);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

/* M */

.sfprorounded-normal-gray-16px {
  color: var(--gray);
  font-family: var(--font-family-sf_pro_rounded-semibold);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.sfprorounded-regular-normal-black-16px {
  color: var(--black);
  font-family: var(--font-family-sf_pro_rounded-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
}

.sfprorounded-bold-black-16px {
  color: var(--black);
  font-family: var(--font-family-sf_pro_rounded-bold);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 700;
}

.sfprorounded-medium-black-16px {
  color: var(--black);
  font-family: var(--font-family-sf_pro_rounded-medium);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
}

/* XL */

.sfprorounded-heavy-normal-black-20px {
  color: var(--black);
  font-family: var(--font-family-sf_pro_rounded-heavy);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 400;
}

.sfprorounded-regular-normal-black-20px {
  color: var(--black);
  font-family: var(--font-family-sf_pro_rounded-regular);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 400;
}

/* XLL */

.sfprorounded-regular-normal-black-32px {
  color: var(--black);
  font-family: var(--font-family-sf_pro_rounded-regular);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 400;
}

.sfprorounded-heavy-normal-black-32px {
  color: var(--black);
  font-family: var(--font-family-sf_pro_rounded-heavy);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 400;
}

.sfprorounded-heavy-normal-white-32px {
  color: var(--white);
  font-family: var(--font-family-sf_pro_rounded-heavy);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 400;
}

/* XLLL */

.sfprorounded-heavy-normal-black-48px {
  color: var(--black);
  font-family: var(--font-family-sf_pro_rounded-heavy);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
}

.sfprorounded-black-black-48px {
  color: var(--black);
  font-family: var(--font-family-sf_pro_rounded-black);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 900;
}

:root { }