@font-face {
  font-family: "MADE TOMMY";
  src: url("https://personnelservice.pl/wp-content/themes/pssa/fonts/made-tommy.ttf");
  font-weight: 400;
}

@font-face {
  font-family: "MADE TOMMY";
  src: url("https://personnelservice.pl/wp-content/themes/pssa/fonts/made-tommy-light.ttf");
  font-weight: 300;
}

@font-face {
  font-family: "MADE TOMMY";
  src: url("https://personnelservice.pl/wp-content/themes/pssa/fonts/made-tommy-medium.ttf");
  font-weight: 500;
}

@font-face {
  font-family: "MADE TOMMY";
  src: url("https://personnelservice.pl/wp-content/themes/pssa/fonts/made-tommy-bold.ttf");
  font-weight: 700;
}

:root {
  --ASPECT-H: 16;
  --ASPECT-V: 9;
  --SCALE: 1;

  --container-height: calc(var(--container-width) * var(--ASPECT-V) / var(--ASPECT-H) * var(--SCALE));
  --container-width: 1440px;
  --container-z-index: 100;

  --theme-black: #1A1A1A;
  --theme-gray: #D7D7D7;
  --theme-green: #9DFAC1;
  --theme-red: #FF173D;
  --theme-white: #FFFFFF;
}

@media screen and (max-width: 767px) {
  :root {
    --container-height: 100vh;
    --container-width: 88vw;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  :root {
    --container-width: 688px;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1359px) {
  :root {
    --container-width: 924px;
  }
}

@media screen and (min-width: 1360px) and (max-width: 1679px) {
  :root {
    --container-width: 1280px;
  }
}

@media screen and (min-width: 1680px) {
  :root {
    --container-width: 1440px;
  }
}