/* FC Iconic Font */
@font-face {
   font-family: 'FC Iconic';
   src: url('../fonts/FC-Iconic/fc_iconic_bold.woff2') format('woff2'),
      url('../fonts/FC-Iconic/fc_iconic_bold.woff') format('woff');
   font-weight: 700;
   font-style: normal;
}

@font-face {
   font-family: 'FC Iconic';
   src: url('../fonts/FC-Iconic/fc_iconic_semibold.woff2') format('woff2'),
      url('../fonts/FC-Iconic/fc_iconic_semibold.woff') format('woff');
   font-weight: 600;
   font-style: normal;
}

@font-face {
   font-family: 'FC Iconic';
   src: url('../fonts/FC-Iconic/fc_iconic_medium.woff2') format('woff2'),
      url('../fonts/FC-Iconic/fc_iconic_medium.woff') format('woff');
   font-weight: 500;
   font-style: normal;
}

@font-face {
   font-family: 'FC Iconic';
   src: url('../fonts/FC-Iconic/fc_iconic_regular.woff2') format('woff2'),
      url('../fonts/FC-Iconic/fc_iconic_regular.woff') format('woff');
   font-weight: 400;
   font-style: normal;
}

@font-face {
   font-family: 'FC Iconic';
   src: url('../fonts/FC-Iconic/fc_iconic_light.woff2') format('woff2'),
      url('../fonts/FC-Iconic/fc_iconic_light.woff') format('woff');
   font-weight: 300;
   font-style: normal;
}

@font-face {
   font-family: 'FC Iconic';
   src: url('../fonts/FC-Iconic/fc_iconic_extralight.woff2') format('woff2'),
      url('../fonts/FC-Iconic/fc_iconic_extralight.woff') format('woff');
   font-weight: 200;
   font-style: normal;
}

:root {
   --theme-font-family: "FC Iconic", sans-serif;
}

html,
body {
   font-family: var(--theme-font-family);
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
}

/* Font Family */
.font-fc-iconic {
   font-family: "FC Iconic", sans-serif;
}

/* Font Weight */
.extra-light {
   font-weight: 200;
}

.light {
   font-weight: 300;
}

.regular {
   font-weight: 400;
}

.medium {
   font-weight: 500;
}

.semi-bold {
   font-weight: 600;
}

.bold {
   font-weight: 700;
}

/* Font Size */
.smaller {
   font-size: 0.675rem;
}

.small {
   font-size: 0.875rem;
}

.normal {
   font-size: 1.125rem;
}

.large {
   font-size: 1.6rem;
}

.larger {
   font-size: 2rem;
}