/* Colors and fonts custom properties */
:root {
  --border-light-color: #ebebeb;
  --main-blue-color: #072ded;
  --background-blue: #ebf1fc;
  --border-input: #d2d2d2;
  --text-black: #001329;
  --text-grey: #565656;
  --text-blue: #12275d;
  --text-blue-highlight: #072ded;
  --base-font: "IBM Plex Sans";
  --title-font: "Inter";
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter/Inter-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter/Inter-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Condensed";
  src: url("../fonts/IBM_Plex_Sans_Condensed/IBMPlexSansCondensed-Regular.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Condensed";
  src: url("../fonts/IBM_Plex_Sans_Condensed/IBMPlexSansCondensed-Medium.ttf")
    format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBM_Plex_Sans/IBMPlexSans-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBM_Plex_Sans/IBMPlexSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Layout */
.no-scroll {
  overflow: hidden;
}

.section {
  padding: 2.5rem 2rem;
}

.section--no-top-padding {
  padding-top: initial;
}

.section--background-blue {
  background-color: var(--background-blue);
}

.section__description {
  margin-top: 1.5rem;
  max-width: 52rem;
}

img {
  vertical-align: top;
}

/* Typography */
h6,
p,
label,
input,
textarea,
li {
  font-family: var(--base-font), sans-serif;
}

h1,
h2,
.nav__item,
.filter {
  font-family: var(--title-font), sans-serif;
}

h1 {
  color: var(--text-blue);
  font-size: clamp(2rem, 1.5vw + 1.6rem, 2.5rem);
  font-weight: 800;
}

h2 {
  color: var(--text-blue);
  font-size: clamp(1.25rem, 0.75vw + 1.05rem, 1.5rem);
  font-weight: 600;
}

h6 {
  color: var(--text-grey);
  font-size: 0.75rem;
  font-weight: 400;
}

button:hover {
  cursor: pointer;
}

bold {
  font-weight: 500;
}

/* Media queries */
@media screen and (min-width: 60em) {
  .section {
    padding: 5rem 8rem;
  }

  .project-description {
    position: relative;
  }

  .section--no-top-padding {
    padding-top: initial;
  }
}