@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: 900;
	line-height: 1.2;
	color: var(--font-color-1);
	text-transform: uppercase;
}

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 {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

p, li, blockquote, dd {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

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; }

.title-cool {
	position: relative;
}
.title-cool:before {
	position: absolute;
	content: "";
	left: 0;
	bottom: 0;
	width: calc(100% + 10vw);
	border: 1px solid var(--bg-2);
}
.title-cool.left {
	display: inline-block;
}
.title-cool.left:before {
	right: 0;
	left: unset;
}

	.title-cool span {
		position: relative;
		display: inline-block;
		font-size: 2.2rem;
		letter-spacing: .2rem;
		font-weight: 400;
		padding-bottom: 1rem;
	}
	.title-cool span:before {
		position: absolute;
		content: "";
		z-index: 1;
		left: 0;
		bottom: 0;
		width: 100%;
		border: 1px solid var(--color-1);
	}

@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; }
}