@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url('../fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2') format('woff2');
}
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  src: url('../fonts/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2') format('woff2');
}

@font-face {
  font-family: 'Material Symbols Sharp';
  font-style: normal;
  src: url('../fonts/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations'); 
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}


.material-symbols-outlined {
 font-family: 'Material Symbols Outlined';
 font-weight: normal;
 font-style: normal;
 font-size: 24px;
 line-height: 1;
 letter-spacing: normal;
 text-transform: none;
 display: inline-block;
 white-space: nowrap;
 word-wrap: normal;
 direction: ltr;
 font-variation-settings: 'FILL' 0,
                         'wght' 400,
                         'GRAD' 0,
                         'opsz' 24;
}

.large-icon {
  font-size: 10rem;
  color: var(--main-color);
}

.filled-icon {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 1;
}