/*  font definitions  */
@font-face {
	font-family: 'Red Hat Display';
	src: url('type/red-hat-display-v21-latin-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: fallback;
}
@font-face {
	font-family: 'Red Hat Display';
	src: url('type/red-hat-display-v21-latin-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: fallback;
}
@font-face {
	font-family: 'Red Hat Display';
	src: url('type/red-hat-display-v21-latin-700italic.woff2') format('woff2');
	font-weight: 700;
	font-style: italic;
	font-display: fallback;
}
@font-face {
	font-family: 'Red Hat Display';
	src: url('type/red-hat-display-v21-latin-900.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: fallback;
}
@font-face {
	font-family: 'Red Hat Display';
	src: url('type/red-hat-display-v21-latin-900italic.woff2') format('woff2');
	font-weight: 900;
	font-style: italic;
	font-display: fallback;
}
@font-face {
	font-family: 'Inter';
	src: url('type/inter-v20-latin-regular.woff2') format('woff2');
	font-style: normal;
	font-weight: 400;
	font-display: fallback;
}
@font-face {
	font-family: 'Inter';
	src: url('type/inter-v20-latin-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: fallback;
}
@font-face {
	font-family: 'Inter';
	src: url('type/inter-v20-latin-700italic.woff2') format('woff2');
	font-weight: 700;
	font-style: italic;
	font-display: fallback;
}



/*  root  */
:root {
	--color-white: #FFFFFF;
	--color-black: #050505;
	--color-light-pink: #FDD3CC;
	--color-neon-purple: #832EFC;
	--color-neon-green: #24DDA1;
	--color-neon-yellow: #EDED05;
	--color-neon-red: #FF0000;

	--color-primary: var(--color-neon-yellow);

	--color-text: var(--color-black);
	--color-link: inherit;
	--color-link-hover: var(--color-black);
	--color-link-focus: var(--color-neon-red);

	--color-selection: #0099C7;

	--font-family: 'Inter', Arial, Helvetica, sans-serif;
	--font-size: 1.25rem;

	--max-width: 50rem;
	--max-width-large: 72rem;
	--max-width-full: 120rem;
	--gutter-x: 3rem;
	--gutter-y: 5rem;
	--columns-gutter-x: 3rem;
	--columns-gutter-y: 4rem;

}



/*  attributes for all  */
body, h1, h2, h3, h4, h5, h6, p, div, img, a, address, b, i, u, sup, div, span, ul, ol, li, figure, figcaption, header, main, footer, section {
	margin: 0;
	padding: 0;
	border: 0;
}



/*  tags  */
html {
	font-size: 16px;
	-webkit-text-size-adjust: none;
	scroll-behavior: smooth;
	background: #050505;
}
body {
	position: relative;
	font-family: var(--font-family);
	background: var(--color-white);
	color: var(--color-text);
	font-size: var(--font-size);
	text-align: center;
	max-width: var(--max-width-full);
	margin: 0 auto;
}


a:not(.button) {
	color: inherit;
	text-decoration: rgba(255, 255, 255, .5) underline 2px;
	transition: color .2s ease, border .2s ease, background-color .2s ease, box-shadow .2s ease, text-decoration .2s ease;
}
a:not(.button):hover {
	text-decoration: var(--color-neon-yellow) underline 2px;
}

b, strong { font-weight: 700; }

a:focus-visible, button:focus-visible {
	outline: 2px solid var(--color-link-focus);
	outline-offset: 2px;
}

input[type=submit],
input[type=reset]
{
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}

input[type=button],
input[type=color],
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=file],
input[type=month],
input[type=number],
input[type=password],
input[type=phone],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
select,
textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	padding: .25rem 1rem;
	border: 1px solid var(--color-black);
	border-radius: 1rem;
	outline: none;
	font-family: inherit;
	transition: color .2s ease, background .2s ease, border .2s ease, box-shadow .2s ease;
}

input[type=button]:focus,
input[type=color]:focus,
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=email]:focus,
input[type=file]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=phone]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
select:focus,
textarea:focus {
	border: 1px solid var(--color-neon-purple);
}

input:focus-visible { outline: 2px solid var(--color-neon-red); outline-offset: 2px; }

select { padding-right: 32px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 8.467 4.233'%3E%3Cpath d='M2.381 1.32l1.852 1.852L6.085 1.32' fill='none' stroke='%23142C6C' stroke-width='.529'/%3E%3C/svg%3E") right center no-repeat; }

p { font-size: var(--font-size); line-height: 1.45; }
p:not(:last-child) { margin-bottom: 1em; }

ul { display: flex; flex-flow: column nowrap; list-style-type: none; line-height: 1.45; gap: .5em; }
li { margin-left: 1.5em; }
li:before { content: ''; position: absolute; display: inline-block; width: 1em; aspect-ratio: 26/25; margin: .33em 0 0 -1.5em; background: url(../files/design/arrow-list-item-black.svg) left center no-repeat; background-size: contain; }
ol:not(:last-child), ul:not(:last-child) { margin-bottom: 1rem; }

h1, h2, h3, h4, h5, h6 { line-height: 1.25; word-wrap: break-word; overflow-wrap: break-word; /*-webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;*/ }

h1 { font-size: 2.5em; font-weight: 700; }
h1:not(:last-child) { padding-bottom: .5em; }

h2 { font-size: 1.25em; font-weight: 700; text-transform: uppercase; text-decoration: underline; }
h2:not(:first-child) { padding-top: 1em; }
h2:not(:last-child) { padding-bottom: 1em; }

h3 { font-size: 1.25em; font-weight: 700; }
h3:not(:first-child) { padding-top: .5em; }
h3:not(:last-child) { padding-bottom: .5em; }

h4 { font-size: 1.125em; font-weight: 700; }
h4:not(:first-child) { padding-top: .5em; }
h4:not(:last-child) { padding-bottom: .5em; }

picture, img { max-width: 100%; height: auto; }
picture > img { display: block; }
svg { overflow: hidden; }
main { text-align: left; }



/*  header  */
header { position: absolute; display: block; width: min(100%, var(--max-width-full)); z-index: 1; isolation: isolate; text-align: center; }
header .center { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; max-width: 120rem; margin: 0 auto; padding: 0; }
header .center::after { display: none; }
header .logo { display: block; width: 20rem; padding: 2rem; }
header .logo a { display: block; }
header .network { display: flex; justify-content: center; align-items: center; text-align: center; }
header .network a { display: block; color: var(--color-neon-yellow); font-family: 'Red Hat Display', sans-serif; font-weight: 700; font-style: italic; text-decoration: none; text-transform: uppercase; }
header .network a:hover { color: var(--color-black); }
header .network img { display: block; float: left; }
@media (min-width: 74.01rem) {
	header { background: linear-gradient(to bottom, rgb(255 255 255 / .3) 30%, rgb(255 255 255 / 0) 100%); }
}



/*  footer  */
footer { position: relative; background: var(--color-black, #050505); color: var(--color-white); text-align: left; isolation: isolate; }
footer:before { content: ''; position: absolute; display: block; right: 3rem; bottom: 0; width: min(100%, calc((100% / 2 + var(--max-width) / 2))); height: 100%; background: url(../files/design/rrr/rrr-purple.svg) no-repeat bottom right; background-size: contain; aspect-ratio: 1223 / 472; user-select: none; opacity: .5; z-index: -1; }
footer a:not(.button) { color: inherit; }
footer a:not(.button):hover { color: inherit; }
footer .center { max-width: var(--max-width-large); padding-top: var(--gutter-y, 2rem); }
footer .logo { display: block; width: 26rem; max-width: 100%; padding: 2rem; margin-left: -2rem; box-sizing: border-box; }
footer a img { display: block; }
footer h2 { font-size: 1.5em; text-decoration: none; text-transform: none; }
footer .network { display: flex; flex-flow: row wrap; justify-content: flex-end; gap: 2rem 0; }
#footermenu { display: flex; flex-flow: row wrap; justify-content: flex-end; align-items: center; margin: 0 2rem; gap: .5rem 2rem; }
#footermenu li { margin: 0; }
#footermenu li:before { display: none; }



/*  classes  */
.hidden-accessibility-links, .hidden-accessibility-links:focus-visible { position: fixed; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; top: 0; left: 0; width: 100%; padding: 2rem 2rem; gap: 1rem 2rem; box-sizing: border-box; z-index: 9999; transform: translate(0, -100%); transition: transform .3s ease, box-shadow .3s ease; background: var(--color-primary); }
.hidden-accessibility-links:focus-within { transform: translate(0, 0); box-shadow: 0 0 .5rem rgba(0, 0, 0, .5); }
.hidden-accessibility-links a { padding: .5rem 1.5rem; text-decoration: none; border-radius: 2em; background: var(--color-neon-green); color: var(--color-black); font-family: 'Red Hat Display', sans-serif; font-weight: 700; font-size: var(--font-size); }
.hidden-accessibility-links a:hover { background: var(--color-black); color: var(--color-neon-green); text-decoration: none; }

.center { position: relative; max-width: calc(var(--max-width, none) + (var(--gutter-x, 1rem) * 2)); margin: 0 auto; padding: 0 var(--gutter-x); box-sizing: border-box; text-align: left; }
.center:after { content: ''; display: block; clear: both; height: 0; }

.audience {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	width: calc(100% + 2 * var(--gutter-x, 2rem));
	height: calc(100% + 2 * var(--gutter-y, 2rem));
	z-index: 0;
	margin: calc(-1 * var(--gutter-y, 2rem)) 0 0 calc(-1 * var(--gutter-x, 2rem));
	user-select: none;
	pointer-events: none;
	--gap: 1rem;
}
.audience ul { position: relative; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; list-style-type: none; text-align: center; margin: 0; padding: 0; gap: var(--gap, 1rem); }
.audience li {
	margin: 0;
	padding: 0;
	font-family: 'Red Hat Display', sans-serif;
	font-style: italic;
	font-size: 10vw;
	color: var(--color-neon-purple, #832EFC);
	line-height: .8;
	/*white-space: nowrap;*/
	font-weight: 900;
	-webkit-text-stroke: max(1px, min(2px, .15vw));
	text-stroke: max(1px, min(2px, .15vw));
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	paint-order: stroke;
	text-transform: uppercase;
	text-align: center;
}

.audience.animated ul { animation: keyframes-audience 30s infinite linear; }
@keyframes keyframes-audience {
	0% { transform: translateY(0); }
	100% { transform: translateY(calc((-100% - var(--gap, 0rem)) / 2)); }
}

a.application-ad, a.application-ad:hover { position: absolute; display: inline-flex; isolation: isolate; flex-flow: column nowrap; right: 5rem; top: 10rem; text-decoration: none; text-align: center; z-index: 1; cursor: pointer; font-size: 1.5rem; pointer-events: none; }
.page-4 a.application-ad { display: none; }
.application-ad .head { display: flex; margin: 0 auto; border-radius: 50%; aspect-ratio: 1; align-items: center; justify-content: center; padding: .75em; background: var(--color-white); color: var(--color-neon-purple); font-size: inherit; text-transform: uppercase; font-weight: bold; animation: var(--animation-pulsate); line-height: 1.25; z-index: 0; pointer-events: visible; box-shadow: .33rem .25rem 1rem rgb(0 0 0 / .25); }
.application-ad .pill { display: inline-block; padding: .5em 1em; border-radius: 999em; font-size: inherit; font-weight: bold; text-align: center; text-transform: none; background: var(--color-black); color: var(--color-neon-green); margin-top: -1em; z-index: 1; pointer-events: visible; }
a.application-ad:hover .pill { background: var(--color-neon-green); color: var(--color-black); }
@media (max-width: 70rem) { a.application-ad { display: none; } }
:root
{
	--ease: cubic-bezier(.25, 0, .3, 1);
	--animation-pulsate: pulsate 7s var(--ease) infinite;
}
@media (prefers-reduced-motion: reduce) {
	:root {
		--animation-pulsate: none;
	}
}
.animation-pulsate { animation: var(--animation-pulsate); }
@keyframes pulsate
{
	0% { transform: scale(1); }
	10% { transform: scale(1.1); }
	20%,100% { transform: scale(1); }
}

/*  selection  */
::selection { text-shadow: none; background: var(--color-selection); color: var(--color-white); -webkit-background-clip: unset; -webkit-text-fill-color: var(--color-white); }