@font-face {
	font-family: "Ubuntu";
	src: url("./assets/fonts/Ubuntu/Ubuntu-Regular.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: "Ubuntu";
	src: url("./assets/fonts/Ubuntu/Ubuntu-Light.ttf") format("truetype");
	font-weight: 100;
	font-display: swap;
}

@font-face {
	font-family: "Ubuntu";
	src: url("./assets/fonts/Ubuntu/Ubuntu-Light.ttf") format("truetype");
	font-weight: 300;
	font-display: swap;
}

@font-face {
	font-family: "Ubuntu";
	src: url("./assets/fonts/Ubuntu/Ubuntu-Medium.ttf") format("truetype");
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: "Ubuntu";
	src: url("./assets/fonts/Ubuntu/Ubuntu-Bold.ttf") format("truetype");
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: "Source Sans Pro";
	src: url("./assets/fonts/Source_Sans_3/SourceSans3-VariableFont_wght.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: "Source Serif Pro";
	src: url("./assets/fonts/Source_Serife_Pro/SourceSerifPro-Regular.ttf") format("truetype");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif Pro";
	src: url("./assets/fonts/Source_Serife_Pro/SourceSerifPro-SemiBold.ttf") format("truetype");
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: "Give You Glory";
	src: url("./assets/fonts/Give_You_Glory/GiveYouGlory-Regular.ttf") format("truetype");
	font-display: swap;
}

@property --gradient-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@keyframes rotateGradient {
	0% {
		--gradient-angle: 0deg;
	}
	100% {
		--gradient-angle: 360deg;
	}
}

:root {
	--title-font: Ubuntu, system-ui, Avenir, Helvetica, Arial, sans-serif;
	--text-font: Source Sans Pro, system-ui, Avenir, Helvetica, Arial, sans-serif;
	--serif-font: Source Serif Pro, system-ui, Avenir, Helvetica, Arial, serif;
	--writing-font: Give You Glory, system-ui, Avenir, Helvetica, Arial, sans-serif;

	--title-font-size: 42px;
	--title-sub-font-size: 28px;
	--text-font-size: 24px;
	--text-sub-font-size: 18px;

	--text-line-height: 1.8em;
	--text-font-weight: 300;

	--read-primary-color: #ffffff;
	--read-secondary-color: #909090;
	--read-tertiary-color: #222222;

	--background-dark-color: #222222;
	--background-light-color: #ffffff;
	--disabled-color: #808080;
	--tnw-pink-color: #dd0099;
	--tnw-rainbow-color: linear-gradient(
		to right,
		rgb(221, 0, 153),
		rgb(136, 0, 136),
		rgb(0, 170, 255),
		rgb(102, 170, 34),
		rgb(255, 204, 0),
		rgb(255, 119, 0)
	);

	--menu-color-1: #ffcc00;
	--menu-color-2: #ff7700;
	--menu-color-3: #00aaff;
	--menu-color-4: #66aa22;
	--menu-color-5: #a233a2;
	--menu-color-6: #dd0099;

	--menu-fade-color-1: var(--menu-color-1), #fbff00, var(--menu-color-1);
	--menu-fade-color-2: var(--menu-color-2), #ffae00, var(--menu-color-2);
	--menu-fade-color-3: var(--menu-color-3), #006eff, var(--menu-color-3);
	--menu-fade-color-4: var(--menu-color-4), #008a00, var(--menu-color-4);
	--menu-fade-color-5: var(--menu-color-5), #7933a2, var(--menu-color-5);
	--menu-fade-color-6: var(--menu-color-6), #ff4cc9, var(--menu-color-6);

	--menu-gradient-color-1: #ffaa00, var(--menu-color-1), #ffee00;
	--menu-gradient-color-2: #ff5500, var(--menu-color-2), #ff9900;
	--menu-gradient-color-3: #0088ff, var(--menu-color-3), #00ccff;
	--menu-gradient-color-4: #668822, var(--menu-color-4), #66cc22;
	--menu-gradient-color-5: #a211a2, var(--menu-color-5), #a255a2;
	--menu-gradient-color-6: #b41986, var(--menu-color-6), #ff53cb;

	--layout-horizontal-padding: 12%;
	--layout-vertical-padding: 125px;
	--skew-degree: 2deg;

	--m-scrollbar-size: 1.5vh;
	--s-scrollbar-size: 1vh;

	--dark-scrollbar-background-color: rgba(255, 255, 255, 0.03);
	--dark-scrollbar-border-color: rgba(255, 255, 255, 0.04);
	--dark-scrollbar-background-color-hover: rgba(255, 255, 255, 0.07);
	--dark-scrollbar-border-color-hover: rgba(255, 255, 255, 0.08);

	--light-scrollbar-background-color: rgba(0, 0, 0, 0.1);
	--light-scrollbar-border-color: rgba(0, 0, 0, 0.1);
	--light-scrollbar-background-color-hover: rgba(0, 0, 0, 0.1);
	--light-scrollbar-border-color-hover: rgba(0, 0, 0, 0.1);

	--rotate-gradient-animation: rotateGradient linear infinte;
}

@media screen and (max-width: 1400px) {
	:root {
		--title-font-size: 37px;
		--title-sub-font-size: 25px;
		--text-font-size: 21px;
		--text-sub-font-size: 16px;

		--text-line-height: 1.7em;
		--text-font-weight: 300;

		--layout-horizontal-padding: 12%;
		--layout-vertical-padding: 120px;
		--skew-degree: 2deg;
	}
}

@media screen and (max-width: 1000px) {
	:root {
		--title-font-size: 33px;
		--title-sub-font-size: 22px;
		--text-font-size: 19px;
		--text-sub-font-size: 14px;

		--text-line-height: 1.6em;
		--text-font-weight: 300;

		--layout-horizontal-padding: 12%;
		--layout-vertical-padding: 110px;
		--skew-degree: 2deg;
	}
}

@media screen and (max-width: 700px) {
	:root {
		--title-font-size: 28px;
		--title-sub-font-size: 19px;
		--text-font-size: 16px;
		--text-sub-font-size: 12px;

		--text-line-height: 1.5em;
		--text-font-weight: 300;

		--layout-horizontal-padding: 5%;
		--layout-vertical-padding: 100px;
		--skew-degree: 2deg;
	}
}

@media screen and (min-width: 1921px) {
	:root {
		--layout-horizontal-padding: 20%;
		--skew-degree: 2deg;
	}
}

body {
	width: 100dvw;
	height: 100dvh;
	margin: 0;
	padding: 0;
	background-color: var(--background-dark-color);
	color: var(--read-primary-color);
	font-family: var(--text-font);
}