/* -------------------------------------------------------------------------- */
/*                                    FONTS                                   */
/* -------------------------------------------------------------------------- */

/* barlow-regular - latin */
@font-face {
	font-display: swap;
	font-family: "Barlow";
	font-style: normal;
	font-weight: 400;
	src: url("./assets/fonts/barlow-v12-latin-regular.woff2") format("woff2");
}

/* barlow-italic - latin */
@font-face {
	font-display: swap;
	font-family: "Barlow";
	font-style: italic;
	font-weight: 400;
	src: url("./assets/fonts/barlow-v12-latin-italic.woff2") format("woff2");
}

/* barlow-600 - latin */
@font-face {
	font-display: swap;
	font-family: "Barlow";
	font-style: normal;
	font-weight: 600;
	src: url("./assets/fonts/barlow-v12-latin-600.woff2") format("woff2");
}

/* TANKER */
@font-face {
	font-display: swap;
	font-family: "TANKER";
	font-style: normal;
	src: url("./assets/fonts/Tanker-Regular.woff2") format("woff2");
}

:root {
	--color--bg: #f3eee3;
	--color--red: #d40d11;
	--color--black: #1e1d1a;

	--border-width: 10px;
}

/* -------------------------------------------------------------------------- */
/*                                  DEFAULTS                                  */
/* -------------------------------------------------------------------------- */

body {
	background: var(--color--bg);
	height: 100%;
	margin: 0;
	color: var(--color--red);
	font-family: "Barlow", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.site-inner {
	margin: 55px auto;
	max-width: 640px;
	width: calc(100% - 50px);
}

/* -------------------------------------------------------------------------- */
/*                                 HERO HEADER                                */
/* -------------------------------------------------------------------------- */
.hero-container {
	border: var(--border-width) solid var(--color--red);
	padding: 55px 35px;

	.hero-container__hand {
		transform: scale(1.2) translateX(-50px);
	}

	.hero-container__title {
		transform: translateX(-5px);
		margin-top: 55px;
	}
}

/* -------------------------------------------------------------------------- */
/*                                    MAIN                                    */
/* -------------------------------------------------------------------------- */
.site-content {
	margin: 75px 0 55px 0;
	p,
	a {
		font-size: clamp(1rem, 0.45vi + 0.9rem, 1.25rem);
		line-height: 1.3;
    /* text-align: justify;
    hyphens: auto;
    hyphenate-limit-chars: auto 3;
    hyphenate-limit-lines: 4; */
	}

	b {
		font-weight: 600;
	}

	h1 {
		font-family: "Tanker", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
		font-weight: normal;
		line-height: 1.1;
		text-align: center;
		font-size: clamp(1.63rem, 1.82vi + 1.17rem, 2.63rem);
	}
}

/* -------------------------------------------------------------------------- */
/*                                   FOOTER                                   */
/* -------------------------------------------------------------------------- */
footer {
	.decoration {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 15px;
		.spacer-line {
			display: block;
			height: var(--border-width);
			background: var(--color--red);
			width: 100%;
		}
		.antifa-logo {
			max-width: 100px;
		}
	}

	.previous-block {
		margin-top: 75px;
		background-color: var(--color--red);
		padding: 55px;
		color: var(--color--bg);

		h4 {
			text-align: center;
			margin-top: 0;
			font-size: clamp(1.38rem, 0.45vi + 1.26rem, 1.63rem);
		}

		.previous-block__links {
			display: flex;
			gap: 15px;
			flex-wrap: wrap;
			justify-content: center;
			a {
				color: var(--color--bg);
			}
		}
	}
}

/* -------------------------------------------------------------------------- */
/*                                MEDIA QUERIES                               */
/* -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	:root {
		--border-width: 5px;
	}
	.hero-container {
		padding: 35px 20px;

		.hero-container__hand {
			transform: scale(1.2) translateX(-15px);
		}

		.hero-container__title {
			margin-top: 25px;
		}
	}
	footer {
		.decoration {
			.antifa-logo {
				max-width: 50px;
			}
		}
	}
}