@font-face {
	font-family: "Newzald Book";
	  src:
		url("fonts/Newzald-Book.woff2");
}

@font-face {
	font-family: "Newzald Black";
	  src:
		url("fonts/Newzald-Black.woff2");
}

@font-face {
	font-family: "Newzald Book Italic";
	  src:
		url("fonts/Newzald-BookItalic.woff2");
}

@font-face {
	font-family: "Newzald Black Italic";
	  src:
		url("fonts/Newzald-BlackItalic.woff2");
}

@font-face {
	font-family: "IBM Plex Regular";
	  src:
		url("fonts/IBMPlexSans-Regular.woff2");
}

@font-face {
	font-family: "IBM Plex Bold";
	  src:
		url("fonts/IBMPlexSans-Bold.woff2");
}


html {
  box-sizing: border-box;
  font-family: "Newzald Book";
  font-size: 10px;
}

*, *::before, *::after {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

div#toast {
	width: 37rem;
	position: fixed;
	bottom: 5rem;
	left: 0;
	right: 0;
	margin-inline: auto; 
	background: rgba(255, 255, 255, .8);
	border-radius: 3rem;
	box-shadow: 0 1rem 3rem 0 rgba(0,0,0,0.5);
	backdrop-filter: blur(1rem);
	padding: 1rem 1rem .6rem 1rem;
	z-index: 300;
}

div#toast img {
	width: 8rem;
	border-radius: 2rem;
}

div#toast button {
	background: #0A84FF;
	border-radius: 1rem;
	color: white;
	padding: 1rem;
	position: absolute;
	right: 1rem;
	top: 3.5rem;
	transition: .2s ease-in-out;
}

div#toast button:hover {
	scale: 1.1;
}

div#toast input {
	background: #ddd;
	padding: 1rem;
	border-radius: 1rem;
	margin: 0 1rem;
	border: 1px solid #c6c6c6;
	position: absolute;
	left: 9rem;
	top: 3.5rem;
}

div.halftone {
	height: 80rem;
	width: 100%;
	background: linear-gradient(0deg, rgba(25,137,167,1) 0%, rgba(118,93,225,1) 50%, rgba(168,48,48,1) 100%);
	position: absolute;
	top: 0;
	left:0;
	z-index: 1;
	mix-blend-mode: overlay;
	clip-path: url('#mask');
	opacity: .5;
}

div.halftone-royale {
	height: 155rem;
	width: 100%;
	background: linear-gradient(0deg, rgba(25,137,167,1) 0%, rgba(118,93,225,1) 50%, rgba(168,48,48,1) 100%);
	position: absolute;
	top: 0;
	left:0;
	z-index: 1;
	mix-blend-mode: overlay;
	clip-path: url('#mask');
	opacity: .5;
}

header {
	height: 80rem;
	color: white;
	padding: 5rem;
	background: linear-gradient(0deg, rgba(134,10,10,1) 0%, rgba(11,67,104,1) 100%);
	overflow: hidden;
	position: relative;
	top:0;
	left:0;
}

header img {
	display: block;
	margin: 0 auto;
	z-index: 100;
	position: relative;
}

header h1 {
	text-align: center;
	font-size: xxx-large;
	z-index: 101;
	position: relative;
	margin: 4rem 0 0 0;
}

span {
	display: block;
	height: 200vh;
	width: 200vh;
	border-radius: 50%;
	z-index: 1;
}

header ul {
	opacity: 0;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-duration: 3s;
	animation-delay: .5s;
	animation-fill-mode: forwards;
	position: relative;
	z-index: 1;
}
	
@keyframes fadeInOpacity {
		0% {
			opacity: 0;
			top: 10rem;
		}
		100% {
			opacity: 1;
			top: 0rem
		}
	}

header ul li {
	width: 30rem;
	height: 65rem;
	display: block;
	margin: 0 auto;
	border-radius: 2rem;
	z-index: 101;
	position: absolute;
	left: 0; 
	right: 0; 
	margin-inline: auto;
	box-shadow: 0 1rem 3rem 0 rgba(0,0,0,0.5);
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-duration: 3s;
	animation-delay: .5s;
	animation-fill-mode: forwards;
}

div.footnotes {
	margin: 0 auto;
	width: fit-content;
	position: relative;
	left: 24rem;
	z-index: 2;
}

header sup {
	scale: .8;
	display: inline-block;
}

/* Base footnotes styles */
div.footnotes span {
    font-family: "IBM Plex Bold";
    width: initial;
    height: initial;
    opacity: 0;
    position: relative;
}

/* Header footnotes - with original animation */
header div.footnotes span {
    animation-name: footnoteFade;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

header div.footnotes span:first-child {font-size: 2rem;animation-delay: 4s;}
header div.footnotes span:nth-child(2) {font-size: 1.6rem;margin-left: 2rem;animation-delay: 6s;}
header div.footnotes span:nth-child(3) {font-size: 1.4rem;margin-left: 4rem;animation-delay: 8s;}
header div.footnotes span:nth-child(4) {font-size: 1.2rem;margin-left: 6rem;animation-delay: 10s;}
header div.footnotes span:nth-child(5) {margin-left: 8rem;animation-delay: 12.5s;}

@keyframes footnoteFade {
    0% {
        opacity: 0;
        top: 2rem;
    }
    100% {
        opacity: .5;
        top: 0;
    }
}

/* Meta footnotes - scroll triggered */
div#meta div.footnotes {
    position: relative;
    left: 17rem;
}

div#meta div.footnotes span {
    animation: none !important;
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    will-change: opacity, transform;
}

div#meta div.footnotes.animate-footnotes span {
    opacity: 0.5;
    transform: translateY(0);
}

div#meta div.footnotes.animate-footnotes span:nth-child(1) { transition-delay: 0s;}
div#meta div.footnotes.animate-footnotes span:nth-child(2) { transition-delay: 2s; margin-left: 2rem;}
div#meta div.footnotes.animate-footnotes span:nth-child(3) { transition-delay: 4s; margin-left: 4rem;}

div#meta div.footnotes span:first-child {font-size: 1.6rem;}
div#meta div.footnotes span:nth-child(2) {font-size: 1.4rem;}
div#meta div.footnotes span:nth-child(3) {font-size: 1.2rem;}

/* Royale footnotes - scroll triggered */
div#royale-contents div.footnotes {
    margin-bottom: 4rem;
    position: relative;
    left: 60rem;
}

div#royale-contents div.footnotes span {
    animation: none !important;
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    will-change: opacity, transform;
    font-family: "IBM Plex Bold";
}

div#royale-contents div.footnotes.animate-footnotes span {
    opacity: 0.5;
    transform: translateY(0);
}

div#royale-contents div.footnotes.animate-footnotes span:nth-child(1) { transition-delay: 0s; }
div#royale-contents div.footnotes.animate-footnotes span:nth-child(2) { transition-delay: 2s; margin-left: 2rem; }
div#royale-contents div.footnotes.animate-footnotes span:nth-child(3) { transition-delay: 4s; margin-left: 4rem; }

div#royale-contents div.footnotes span:first-child {font-size: 1.6rem;}
div#royale-contents div.footnotes span:nth-child(2) {font-size: 1.4rem;}
div#royale-contents div.footnotes span:nth-child(3) {font-size: 1.2rem;}

span#red-circle {
	background: radial-gradient(circle, rgba(226,18,56,1) 0%, rgba(226,18,56,0) 70%);
	position: absolute;
	bottom: -100vh;
	left: -100vh;
	opacity: 100%;
	animation: 2.7s linear 0s infinite normal both running pulse;
}

span#purple-circle {
	background: radial-gradient(circle, rgba(108,14,206,1) 0%, rgba(108,14,206,0) 70%);
	position: absolute;
	bottom: -100vh;
	right: -100vh;
	opacity: 100%;
	animation: 2.7s linear 0s infinite normal both running pulse;
	animation-delay: 2s;
}
span#blue-circle {
	background: radial-gradient(circle, rgba(0,122,255,1) 0%, rgba(0,122,255,0) 70%);
	position: absolute;
	left: 0; 
	right: 0; 
	margin-inline: auto; 
	top: -100vh;
 	opacity: 100%;
	animation: 2.7s linear 0s infinite normal both running pulse;
	animation-delay: 1s;
}

@keyframes pulse {
	0%, 100% {
	}
	25% {
		opacity: 50%;
	}
}


li#spread-1 {
	z-index: 110;
	background: url('images/screenshot_1.webp');
	background-size: cover;
}

li#spread-2 {
	scale: 90%;
	background: url('images/screenshot_2.webp');
	background-size: cover;
	animation-name: spread-2-animation;

}
		
@keyframes spread-2-animation {
		0% {
			rotate: none;
			right: 0;
		}
		100% {
			rotate: -10deg;
			right: 28rem;
		}
}

li#spread-3 {
	scale: 90%;
	background: url('images/screenshot_3.webp');
	background-size: cover;
	animation-name: spread-3-animation;
}

@keyframes spread-3-animation {
		0% {
			rotate: none;
			right: 0;
		}
		100% {
			rotate: 10deg;
			left: 28rem;
		}
}

li#spread-4 {
	scale: 80%;
	z-index: 90;
	margin-top: 1rem;
	background: url('images/screenshot_4.webp');
	background-size: cover;
	animation-name: spread-4-animation;
}

@keyframes spread-4-animation {
		0% {
			rotate: none;
			right: 0;
		}
		100% {
			rotate: -20deg;
			right: 48rem;
		}
}

li#spread-5 {
	scale: 80%;
	z-index: 90;
	margin-top: 1rem;
	background: url('images/screenshot_5.webp');
	background-size: cover;
	animation-name: spread-5-animation;
}

@keyframes spread-5-animation {
		0% {
			rotate: none;
			right: 0;
		}
		100% {
			rotate: 20deg;
			left: 48rem;
		}
}

li#spread-6 {
	scale: 70%;
	z-index: 80;
	margin-top: 2.5rem;
	background: url('images/screenshot_6.webp');
	background-size: cover;
	animation-name: spread-6-animation;
}

@keyframes spread-6-animation {
		0% {
			rotate: none;
			right: 0;
		}
		100% {
			rotate: -30deg;
			right: 64rem;
		}
}

li#spread-7 {
	scale: 70%;
	z-index: 80;
	margin-top: 2.5rem;
	background: url('images/screenshot_7.webp');
	background-size: cover;
	animation-name: spread-7-animation;
}

@keyframes spread-7-animation {
		0% {
			rotate: none;
			right: 0;
		}
		100% {
			rotate: 30deg;
			left: 64rem;
		}
}

li#spread-8 {
	scale: 60%;
	z-index: 70;
	margin-top: 6rem;
	background: url('images/screenshot_8.webp');
	background-size: cover;
	animation-name: spread-8-animation;
}

@keyframes spread-8-animation {
		0% {
			rotate: none;
			right: 0;
		}
		100% {
			rotate: -40deg;
			right: 80rem;
		}
}

li#spread-9 {
	scale: 60%;
	z-index: 70;
	margin-top: 6rem;
	background: url('images/screenshot_9.webp');
	background-size: cover;
	animation-name: spread-9-animation;
}

@keyframes spread-9-animation {
		0% {
			rotate: none;
			right: 0;
		}
		100% {
			rotate: 40deg;
			left: 80rem;
		}
}

div#meta {
	margin: 5em auto 6rem auto;
	width: 122rem;
}

div#meta img {
	float: right;
	width: 30em;
	opacity: 0;
	transform: translateY(10rem);
	transition: opacity 3s ease-out, transform 2s ease-out;
	will-change: opacity, transform;
}

div#meta img.animate-in {
	opacity: 1;
	transform: translateY(0);
}

div#meta-content {
	display: flex;
	flex-wrap: wrap;
	padding-top: 5rem;
}

div#meta-content div {
	width: 38rem;
	margin: 0 0 4rem 8rem;
	padding-top: 5rem;
}

div#meta-content h4 {
	font-size: xx-large;
}

div#meta-content p {
	font-size: large;
}

div.gorgeous {background: url('images/gorgeous.svg') no-repeat;}
div.simple {background: url('images/simple.svg') no-repeat;}
div.pin {background: url('images/pin.svg') no-repeat;}
div.ios {background: url('images/ios.svg') no-repeat;}

div#royale {
	background: linear-gradient(0deg, rgba(0,36,65,1) 64%, rgba(159,128,70,1) 100%);
	color: white;
	padding: 5em 0;
	position: relative;
	top: 0;
	overflow: clip;

}

/* Store the gradient colors as CSS variables for easy access in JavaScript */
:root {
	--royale-default-start:  0,36,65;
	--royale-default-end: 159,128,70;
	
	--royale-1-start: 0,36,65;
	--royale-1-end: 159,128,70;
	
	--royale-2-start: 10,50,115;
	--royale-2-end: 210,80,70;
	
	--royale-3-start: 25,70,70;
	--royale-3-end: 125,115,95;
	
	--royale-4-start: 76,7,7;
	--royale-4-end: 152,26,26;
	
	--royale-5-start: 75,65,55;
	--royale-5-end: 137,179,170;
	
	--royale-6-start: 20,86,84;
	--royale-6-end: 35,186,47;
	
	--royale-7-start: 165,47,107;
	--royale-7-end: 28,47,125;
	
	--royale-8-start: 6,88,186;
	--royale-8-end: 40,50,62;
}

div#royale:has(#article1:checked) {
	background-image: linear-gradient(0deg, rgba(0,36,65,1) 64%, rgba(159,128,70,1) 100%);
}

div#royale:has(#article2:checked) {
	background-image: linear-gradient(0deg, rgba(9,31,102,1) 64%, rgba(34,97,183,1) 100%);
}

div#royale:has(#article3:checked) {
	background-image: linear-gradient(0deg, rgba(6,26,79,1) 64%, rgba(18,139,124,1) 100%);
}

div#royale:has(#article4:checked) {
	background-image: linear-gradient(0deg, rgba(76,7,7,1) 64%, rgba(152,26,26,1) 100%);
}

div#royale:has(#article5:checked) {
	background-image: linear-gradient(0deg, rgba(35,6,79,1) 64%, rgba(139,18,72,1) 100%);
}

div#royale:has(#article6:checked) {
	background-image: linear-gradient(0deg, rgba(1,76,21,1) 64%, rgba(18,139,50,1) 100%);
}

div#royale:has(#article7:checked) {
	background-image: linear-gradient(0deg, rgba(102,9,49,1) 64%, rgba(183,34,109,1) 100%);
}

div#royale:has(#article8:checked) {
	background-image: linear-gradient(0deg, rgba(96,39,10,1) 64%, rgba(184,77,25,1) 100%);
}

.background-transition {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: opacity 0.5s ease-in-out;
}

.background-base {
	background: linear-gradient(0deg, rgba(0,36,65,1) 64%, rgba(159,128,70,1) 100%);
	opacity: 1;
	z-index: -2;
}

.background-overlay {
	opacity: 0;
	z-index: -1;
}

div#royale-contents {
	position: relative;
	z-index: 2;
	max-width: 100rem;
	margin: 6rem auto 0 auto;
}

div#royale-contents h2,
div#royale-contents h3,
div#royale-contents p,
div#royale-contents .footnotes {
	max-width: 120rem;
	clear: right;
}

div#royale-contents .accordion {
	max-width: 63rem;
	text-align: left;
}

div#royale-contents > :not(div#royale-app) {
	width: 100%;
}

img#badge {
	margin: 0 auto;
	position: relative;
	top: 5.5rem;
	display: block;
	z-index: 1;
	scale: 1.5;
}

div#royale h2, div#meta h2 {
	font-size: xx-large;
	text-align: center;
}

div#royale h3, div#meta h3 {
	font-size: large;
	text-align: center;
	font-family: "IBM Plex Bold";
	opacity: .5;
}

div#royale h4 {
	font-size: xx-large;
	padding: 0 0 1rem 3.6rem;
	background-position-y: .4rem;
}

div#royale sub {
	font-family: "IBM Plex Bold";
	font-size: x-large;
	opacity: .5;
}

div#royale p {
	font-size: large;
	padding-top: 2rem;
}

div#royale-app {
	float: right;
	width: 34em;
	height: 74rem;
	border-radius: 2rem;
	box-shadow: 0 1rem 3rem 0 rgba(0,0,0,0.5);
	margin: 1rem 0 0 8rem;
	position: sticky;
	top: 2rem;
	overflow: hidden;
	-webkit-mask-image: none;
	mask-image: none;
}

.app-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	transition: opacity 0.5s ease-in-out;
}

.app-background.current {
	opacity: 1;
	z-index: 1;
}

.app-background.next {
	opacity: 0;
	z-index: 2;
}

/* Remove the old background-image rules */
#royale:has(#article1:checked) #royale-app .app-background.next {background-image: url('images/royale_screenshot_1.webp');}
#royale:has(#article2:checked) #royale-app .app-background.next {background-image: url('images/royale_screenshot_2.webp');}
#royale:has(#article3:checked) #royale-app .app-background.next {background-image: url('images/royale_screenshot_3.webp');}
#royale:has(#article4:checked) #royale-app .app-background.next {background-image: url('images/royale_screenshot_4.webp');}
#royale:has(#article5:checked) #royale-app .app-background.next {background-image: url('images/royale_screenshot_5.webp');}
#royale:has(#article6:checked) #royale-app .app-background.next {background-image: url('images/royale_screenshot_6.webp');}
#royale:has(#article7:checked) #royale-app .app-background.next {background-image: url('images/royale_screenshot_7.webp');}
#royale:has(#article8:checked) #royale-app .app-background.next {background-image: url('images/royale_screenshot_8.webp');}

.accordion {
	max-width: 70rem;
	text-align: left;
}

article {
	background: rgba(255, 255, 255, 0.1);
    padding: 2rem 2rem .5rem 2rem;
    margin: 1rem auto;
	border-radius: 2rem;
	transition: background-color 0.5s ease-in-out;
}

article:has(input[type="radio"]:checked) {
	background: rgba(255, 255, 255, 0.2);
}

input[type="radio"] {
  appearance: none;
  position: fixed;
  top: -100vh; left: -100vh;

  & ~ ul {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.5s;
  }

  &:checked ~ ul {
	max-height: fit-content;
  }
}

input[type="radio"]:checked ~ article {
	background: rgba(255, 255, 255, 0.3);
}

input[type="radio"]:not(:checked) ~ article {
	background: rgba(255, 255, 255, 0.1);
}

article li {
	list-style: none;
	background: url('images/royale_badge.svg') no-repeat;
	font-size: large;
	padding: 0 0 2rem 3rem;
	display: inline-grid;
	width: 34rem;
	margin-right: 2rem;
}

#entertainers h4 {background: url('images/entertainers.svg') no-repeat;}
#politicians h4 {background: url('images/politicians.svg') no-repeat;}
#movies h4 {background: url('images/movies.svg') no-repeat;}
#albums h4 {background: url('images/albums.svg') no-repeat;}
#tv h4 {background: url('images/tv.svg') no-repeat;}
#countries h4 {background: url('images/countries.svg') no-repeat;}
#athletes h4 {background: url('images/athletes.svg') no-repeat;}
#events h4 {background: url('images/events.svg') no-repeat;}

div#believe {
	position: relative;
	background: url('images/skeet.svg') no-repeat;
	background-size: cover;
	background-position-y: center;
	overflow: clip;
	padding: 5rem 0 2rem 0;
}

div#believe div.blur {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 120rem;
	background: rgba(255,255,255,.8);
	filter: blur(1.5rem);
	height: 100%;
	z-index: 1;
}

div#believe div.wiki-content {
	position: relative;
	margin: 0 auto 6rem auto;
	width: 100rem;
	background: transparent;
	padding-top: 5rem;
	z-index: 2;
}

div#believe b{
	font-family: "Newzald Black";
}

div#believe p {
	font-size: large;
	margin-top: 2rem;
}

div#believe h2 {
	font-size: xxx-large;
	font-family: "Newzald Black Italic";
	text-align: center;
	font-style: italic;
	background: url('images/ornate.svg') no-repeat;
	background-position-x: center;
	background-position-y: bottom;
	padding-bottom: 7rem;
}

div#believe a {
	color: black;
}

div#believe p#plea {
	background: #eee url('images/w_heart.svg') no-repeat;
	border-radius: 2rem;
	padding: 3rem;
	font-family: "Newzald Book Italic";
	background-position-y: center;
	background-position-x: 3rem;
	padding-left: 16rem;
}

div#believe p#plea b {
	font-family: "Newzald Black Italic";
}

footer {
	padding: 4rem 0 15rem 0;
	font-size: large;
	font-family: "IBM Plex Regular"
}

footer p {
	text-align: center;
	margin-bottom: 2rem;
}

footer img {
	display: block;
	margin: 0 auto;
	transition: .2s ease-in-out;
}

footer img:hover {
	scale: 1.2;
}

footer img#uhoh-logo {
	position: relative;
	right: .8rem
}

footer li {
	display: inline-block;
	margin: 1rem;
}

footer ul {
	margin: 2rem auto;
	display: block;
	width: fit-content;
}

@media (max-width: 1200px) {

	header ul li {
		width: 21rem;
		height: 45.5rem; 
	}
	
	@keyframes spread-2-animation {0% {right: 0;rotate:none} 100% {right: 19.6rem;rotate:-10deg;}}
	@keyframes spread-3-animation {0% {right: 0;rotate:none} 100% {left: 19.6rem;rotate: 10deg;}}
	@keyframes spread-4-animation {0% {right: 0;rotate:none} 100% {right: 33.6rem;rotate:-20deg;}}
	@keyframes spread-5-animation {0% {right: 0;rotate:none} 100% {left: 33.6rem;rotate: 20deg;}}
	@keyframes spread-6-animation {0% {right: 0;rotate:none} 100% {right: 44.8rem;rotate:-30deg;}}
	@keyframes spread-7-animation {0% {right: 0;rotate:none} 100% {left: 44.8rem;rotate: 30deg;}}
	@keyframes spread-8-animation {0% {right: 0;rotate:none} 100% {right: 56rem;rotate:-40deg;}}
	@keyframes spread-9-animation {0% {right: 0;rotate:none} 100% {left: 56rem;rotate: 40deg;}}
	
	header, div.halftone {
		height: 77rem;
	}
	
	div#meta, div#royale-contents, 	div#believe div.wiki-content {
		width: 86rem;
	}
	
	div#believe div.blur {
		width: 100rem;
	}
	
	div#meta-content div {
		width: 25rem;
		margin: 0 0 4rem 3rem;
	}
	
	div#royale-contents .accordion {
		max-width: 54rem;
	}
	
	div#royale-app {
		width: 30rem;
		height: 65rem;
	}
	


@media (max-width: 900px) {
	header ul li {
		width: 17rem;
		height: 36.83333333rem;
	}
	
	@keyframes spread-2-animation {0% {right: 0;rotate:none} 100% {right: 15.876rem;rotate:-10deg;}}
	@keyframes spread-3-animation {0% {right: 0;rotate:none} 100% {left: 15.876rem;rotate: 10deg;}}
	@keyframes spread-4-animation {0% {right: 0;rotate:none} 100% {right: 27.216rem;rotate:-20deg;}}
	@keyframes spread-5-animation {0% {right: 0;rotate:none} 100% {left: 27.216rem;rotate: 20deg;}}
	@keyframes spread-6-animation {0% {right: 0;rotate:none} 100% {right: 36.288rem;rotate:-30deg;}}
	@keyframes spread-7-animation {0% {right: 0;rotate:none} 100% {left: 36.288rem;rotate: 30deg;}}
	@keyframes spread-8-animation {0% {right: 0;rotate:none} 100% {right: 45.36rem;rotate:-40deg;}}
	@keyframes spread-9-animation {0% {right: 0;rotate:none} 100% {left: 45.36rem;rotate: 40deg;}}
	
	div#meta div.footnotes {
		left: 17rem;
	}
	
	div#meta, div#royale-contents, div#believe div.wiki-content {
		width: 73rem;
		padding: 2rem;
	}
	
	div#believe div.blur {
		width: 86rem;
	}
	
	div#meta-content {
		padding-top: 2rem;
	}
	
	div#meta img {
		width: 40rem;
	}
	
	div#royale-app {
		width: 26rem;
		height: 56rem;
	}
	
	div#royale-contents .accordion {
		max-width: 40rem;
	}
	
	div#royale-contents div.footnotes {
		margin-bottom: 4rem;
		left: 40rem;
	}
}

@media (max-width: 740px) {

	header ul li {
		width: 12rem;
		height: 26rem;
		border-radius: 1.4rem;
	}
	
	@keyframes spread-2-animation {0% {right: 0;rotate:none} 100% {right: 11.2rem;rotate:-10deg;}}
	@keyframes spread-3-animation {0% {right: 0;rotate:none} 100% {left: 11.2rem;rotate: 10deg;}}
	@keyframes spread-4-animation {0% {right: 0;rotate:none} 100% {right: 19.207rem;rotate:-20deg;}}
	@keyframes spread-5-animation {0% {right: 0;rotate:none} 100% {left: 19.207rem;rotate: 20deg;}}
	@keyframes spread-6-animation {0% {right: 0;rotate:none} 100% {right: 26.61rem;rotate:-30deg;}}
	@keyframes spread-7-animation {0% {right: 0;rotate:none} 100% {left: 26.61rem;rotate: 30deg;}}
	@keyframes spread-8-animation {0% {right: 0;rotate:none} 100% {right: 32.0116rem;rotate:-40deg;}}
	@keyframes spread-9-animation {0% {right: 0;rotate:none} 100% {left: 32.0116rem;rotate: 40deg;}}
	
	header, div.halftone {
		height: 66rem;
	}
	
	div.footnotes {
		left: 18rem;
	}
	
	div#meta, div#royale-contents, div#believe div.wiki-content {
		width: 56rem;
	}
	
	div#believe div.blur {
		width: 70rem;
	}
	
	div#meta {
		margin-bottom: 0;
	}
	
	div#meta img {
		width: 22rem;
		float: none;
		margin: 2rem auto;
		display: block;
	}
	
	div#meta-content div {
		width: 23rem;
	}
	
	div#meta div.footnotes {
		left: 0rem;
		top: 2rem;
	}
	
	div#royale-contents .accordion {
		max-width: 28rem;
	}
	
	div#royale-app {
		width: 22rem;
		height: 47.38rem;
		-webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 80%);
		mask-image: linear-gradient(to bottom, black 70%, transparent 80%);
	}
	
	div#royale-contents div.footnotes {
		left: 26rem;
	}
}
	
@media (max-width: 560px) {

	header ul li {
		width: 15rem;
		height: 32.5rem;
		border-radius: .8rem;
	}
	
	@keyframes spread-2-animation {0% {right: 0;rotate:none} 100% {right: 7rem;rotate:-10deg;}}
	@keyframes spread-3-animation {0% {right: 0;rotate:none} 100% {left: 7rem;rotate: 10deg;}}
	@keyframes spread-4-animation {0% {right: 0;rotate:none} 100% {right: 12rem;rotate:-20deg;}}
	@keyframes spread-5-animation {0% {right: 0;rotate:none} 100% {left: 12rem;rotate: 20deg;}}
	@keyframes spread-6-animation {0% {right: 0;rotate:none} 100% {right: 16.63125rem;rotate:-30deg;}}
	@keyframes spread-7-animation {0% {right: 0;rotate:none} 100% {left: 16.63125rem;rotate: 30deg;}}
	@keyframes spread-8-animation {0% {right: 0;rotate:none} 100% {right: 20rem;rotate:-40deg;}}
	@keyframes spread-9-animation {0% {right: 0;rotate:none} 100% {left: 20rem;rotate: 40deg;}}
	
	header h1 {
		font-size: xx-large;
		margin: 4rem 1.5rem 0 1.5rem;
	}
	
	header img {
		width: 10rem;
	}
	
	div#toast {
		bottom: 2rem;
	}
	
	div#toast img {
		width: 6rem;
	}
	
	div#toast input {
		top: 2.1rem;
	}
	
	div#toast button {
		top: 2.2rem;
	}
	
	li#spread-8, li#spread-9 {
		display: none;
	}
	
	div.footnotes {
		left: 8rem;
	}
	
	header, div.halftone {
		height: 58rem;
	}
	
	header {
		padding: 3rem 0;
	}
	
	header div.footnotes span:first-child {font-size: 1.6rem;}
	header div.footnotes span:nth-child(2) {font-size: 1.4rem;}
	header div.footnotes span:nth-child(3) {font-size: 1.2rem;}
	header div.footnotes span:nth-child(4) {font-size: 1rem;}
	header div.footnotes span:nth-child(5) {font-size: .8rem;}
	
	div#meta {
		margin-top: 3rem;
	}
	
	div#meta, div#royale-contents, div#believe div.wiki-content {
		width: 39rem;
	}
	
	div#believe div.blur {
		width: 48rem;
	}
	
	div#meta div.footnotes span:first-child {font-size: 1.4rem;}
	div#meta div.footnotes span:nth-child(2) {font-size: 1.2rem;}
	div#meta div.footnotes span:nth-child(3) {font-size: 1rem;}
	
	div#meta-content div {
		width: 100%;
		margin-left: 0;
		background-position-x: center;
	}
	
	div#meta-content h4 {
		text-align: center;
	}
	
	div#royale-app {
		width: 17rem;
		height: 30rem;
		margin-left: 0;
		-webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
		mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
		float: none;
		margin: 1rem auto 0 auto;
	}
	
	div#royale-contents .accordion {
		max-width: 100%;
	}
	
	div#royale h4 {
		font-size: x-large;
		background-position-y: 0;
	}
	
	div#believe p#plea {
		padding: 13rem 3rem 3rem 3rem;
		background-position-y: 2rem;
		background-position-x: center;
	}
	
	article li {
		font-size: medium;
		width: 100%;
		margin-right: 0;
	}
	
	div#royale-contents div.footnotes {
		left: 6rem;
	}
	
	input[type="radio"] ~ ul {
		max-height: fit-content !important;
		overflow: visible !important;
	}
	
	article {
		background: rgba(255, 255, 255, 0.1);
		padding: 2rem 2rem .5rem 2rem;
		margin: 1rem auto 4rem;
		border-radius: 2rem;
		transition: background-color 0.5s ease-in-out;
	}
}