/******************************************************************
 * MOVIE RECORDS — GLOBAL BACKGROUND
 ******************************************************************/

html {
	min-height: 100%;
	background: #03060c;
}

body {
	min-height: 100vh;
	margin: 0;
	background:
		radial-gradient(
			ellipse at 50% 0%,
			rgba(20, 40, 80, 0.42) 0%,
			rgba(12, 24, 48, 0.26) 28%,
			rgba(5, 10, 20, 0.16) 52%,
			rgba(0, 0, 0, 0) 74%
		),
		linear-gradient(
			180deg,
			#000000 0%,
			#03060c 24%,
			#071020 58%,
			#0d1b36 82%,
			#142850 100%
		);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	color: #ffffff;
}

/******************************************************************
 * WORDPRESS BLOCK WRAPPERS
 ******************************************************************/

.wp-site-blocks,
.wp-block-post-content,
main,
main.wp-block-group {
	background: transparent !important;
}

/******************************************************************
 * DEFAULT TEXT
 ******************************************************************/

body,
body p,
body li,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
	color: inherit;
}

/******************************************************************
 * LINKS
 ******************************************************************/

body a {
	color: inherit;
}

/******************************************************************
 * SELECTION
 ******************************************************************/

::selection {
	background: rgba(120, 75, 160, 0.72);
	color: #ffffff;
}

/******************************************************************
 * SCROLLBAR
 ******************************************************************/

html {
	scrollbar-color: #142850 #03060c;
	scrollbar-width: thin;
}

::-webkit-scrollbar {
	width: 11px;
	height: 11px;
}

::-webkit-scrollbar-track {
	background: #03060c;
}

::-webkit-scrollbar-thumb {
	border: 3px solid #03060c;
	border-radius: 999px;
	background: #142850;
}

::-webkit-scrollbar-thumb:hover {
	background: #1c3972;
}

/******************************************************************
 * MOVIE RECORDS — GLOBAL TYPOGRAPHY
 ******************************************************************/

:root {
	--mr-font-family:
		"Avenir Next",
		Avenir,
		"Segoe UI",
		Helvetica,
		Arial,
		sans-serif;

	--mr-font-size-h1: clamp(40px, 4vw, 60px);
	--mr-font-size-h2: clamp(28px, 2.5vw, 36px);
	--mr-font-size-h3: clamp(24px, 2vw, 30px);

	--mr-font-size-body: 18px;
	--mr-font-size-small: 14px;

	--mr-line-height-heading: 1.12;
	--mr-line-height-body: 1.5;
}


/******************************************************************
 * GLOBAL FONT FAMILY
 ******************************************************************/

html,
body,
button,
input,
select,
textarea {
	font-family: var(--mr-font-family);
}

body {
	font-size: var(--mr-font-size-body);
	line-height: var(--mr-line-height-body);
}


/******************************************************************
 * HEADINGS
 ******************************************************************/

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	color: #ffffff;
	font-family: var(--mr-font-family);
	font-weight: 600;
	line-height: var(--mr-line-height-heading);
	letter-spacing: -0.025em;
}

h1 {
	font-size: var(--mr-font-size-h1);
}

h2 {
	font-size: var(--mr-font-size-h2);
}

h3 {
	font-size: var(--mr-font-size-h3);
}


/******************************************************************
 * REUSABLE TITLE CLASSES
 ******************************************************************/

.mr-title-xl {
	font-size: var(--mr-font-size-h1);
	font-weight: 600;
	line-height: var(--mr-line-height-heading);
	letter-spacing: -0.025em;
}

.mr-title-lg {
	font-size: var(--mr-font-size-h2);
	font-weight: 600;
	line-height: var(--mr-line-height-heading);
	letter-spacing: -0.025em;
}

.mr-title-md {
	font-size: var(--mr-font-size-h3);
	font-weight: 600;
	line-height: var(--mr-line-height-heading);
	letter-spacing: -0.02em;
}

.mr-title-sm {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
}


/******************************************************************
 * BODY TEXT
 ******************************************************************/

p,
li,
dd,
dt,
label,
input,
button,
select,
textarea {
	font-family: var(--mr-font-family);
}

small,
.mr-text-small {
	font-size: var(--mr-font-size-small);
}


/******************************************************************
 * RESPONSIVE
 ******************************************************************/

@media (max-width: 900px) {
	:root {
		--mr-font-size-body: 17px;
		--mr-font-size-small: 13px;
	}
}

@media (max-width: 620px) {
	:root {
		--mr-font-size-body: 16px;
		--mr-font-size-small: 12px;
	}

	.mr-title-sm {
		font-size: 18px;
	}
}