@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  src: url('../../fonts/inter/inter-v19-latin_latin-ext-100.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  src: url('../../fonts/inter/inter-v19-latin_latin-ext-200.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('../../fonts/inter/inter-v19-latin_latin-ext-300.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/inter/inter-v19-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../../fonts/inter/inter-v19-latin_latin-ext-500.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../../fonts/inter/inter-v19-latin_latin-ext-600.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../../fonts/inter/inter-v19-latin_latin-ext-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('../../fonts/inter/inter-v19-latin_latin-ext-800.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url('../../fonts/inter/inter-v19-latin_latin-ext-900.woff2') format('woff2');
}

html {
  font-size: 62.5%;
}

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--font-color-2);
}

h1, .title-1,
h2, .title-2,
h3, .title-3,
h4, .title-4,
h5, .title-5,
h6, .title-6 {
	font-weight: 700;
	line-height: 1.2;
	color: var(--font-color-1);
}

h1, .title-1 { font-size: 5.4rem; }
h2, .title-2 { font-size: 4.5rem; }
h3, .title-3 { font-size: 3.7rem; }
h4, .title-4 { font-size: 3.1rem; }
h5, .title-5 { font-size: 2.6rem; }
h6, .title-6 { font-size: 2.2rem; }

small, .text-s { font-size: 1.5rem; }
.text-ss { font-size: 1.2rem; }

a {
	text-decoration: none;
	transition: color 0.2s ease-in-out;
	color: var(--color-1);
}

h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
  margin: 0;
}

h1, h2, h3, h4, h5, h6,
p, a, ul, ol, li,
span, small, strong, em, b, i,
th, td, dt, dd, blockquote {
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	overflow-wrap: break-word;
	word-wrap: break-word; 
	text-wrap: pretty;
}

pre, code {
	white-space: pre-wrap;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.font-thin       { font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light      { font-weight: 300; }
.font-regular    { font-weight: 400; }
.font-medium     { font-weight: 500; }
.font-semibold   { font-weight: 600; }
.font-bold       { font-weight: 700; }
.font-extrabold  { font-weight: 800; }
.font-black      { font-weight: 900; }

.light      { font-weight: 300; }
.regular    { font-weight: 400; }
.semibold   { font-weight: 600; }
.bold       { font-weight: 700; }

@media screen and (max-width: 992px) {
	html {
		font-size: 59%;
	}
	
	h1, .title-1 { font-size: 5.0rem; }
    h2, .title-2 { font-size: 4.2rem; }
}

@media screen and (max-width: 768px) {
	html {
		font-size: 56%;
	}
	
	h1, .title-1 { font-size: 4.2rem; }
    h2, .title-2 { font-size: 3.6rem; }
    h3, .title-3 { font-size: 3.2rem; }
}

@media screen and (max-width: 576px) {
	html {
		font-size: 52%;
	}
	
	h1, .title-1 { font-size: 3.4rem; }
    h2, .title-2 { font-size: 3.0rem; }
    h3, .title-3 { font-size: 2.7rem; }
    h4, .title-4 { font-size: 2.4rem; }
}