@font-face {
  font-family: Inter-Thin;
  src: url("../fonts/Inter-Thin.ttf");
}
@font-face {
  font-family: Inter-ExtraLight;
  src: url("../fonts/Inter-ExtraLight.ttf");
}
@font-face {
  font-family: Inter-Light;
  src: url("../fonts/Inter-Light.ttf");
}
@font-face {
  font-family: Inter-Regular;
  src: url("../fonts/Inter-Regular.ttf");
}
@font-face {
  font-family: Inter-Medium;
  src: url("../fonts/Inter-Medium.ttf");
}
@font-face {
  font-family: Inter-SemiBold;
  src: url("../fonts/Inter-SemiBold.ttf");
}
.colors {
  position: relative;
  display: flex;
  height: 50vh;
  background-color: #333333;
}

.color {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  height: 100%;
  width: 20vw;
  text-align: center;
}
.color h2 {
  font-size: 4.5rem;
  color: #fdfdfd;
}
.color h4 {
  font-size: 2.75rem;
  color: #fdfdfd;
}

.color-1 {
  background-color: rgb(14, 14, 16);
}

.color-2 {
  background-color: rgb(56, 62, 66);
}

.color-3 {
  background-color: rgb(140, 150, 157);
}

.color-4 {
  background-color: rgb(135, 133, 129);
}

.color-5 {
  background-color: rgb(255, 255, 255);
}
.color-5 h2,
.color-5 h4 {
  color: #333333;
}

@media screen and (max-width: 1526px) {
  .colors {
    flex-direction: column;
    height: 75vh;
  }
  .color {
    width: 100%;
    gap: 0;
  }
  .color h2 {
    font-size: 5rem;
  }
}
@media screen and (max-width: 720px) {
  .colors {
    height: 50vh;
  }
  .color h2 {
    font-size: 2.5rem;
  }
}/*# sourceMappingURL=colors.css.map */