/* Inter – Local */
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter/Inter-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Material Symbols Outlined */
@font-face {
  font-family: "Material Symbols Outlined";
  src: url("/fonts/material-symbols/MaterialSymbolsOutlined.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* Google Material Symbols */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Main Settings */
:root {
  --main-light-blue: #01acef;
  --main-dark-blue: #004689;
  --color-grey: #6c6e70;
  --inter-font: Inter;
}

body {
  font-family: var(--inter-font);
}

.bg-primary-light-20 {
  background-color: rgba(1, 172, 239, 0.2);
}

.color-primary-light {
  color: var(--main-light-blue);
}

.same-width-height {
  width: 50px;
  height: 50px;
}