/* Fonts 
   Nunito; 300, 300 italic, 400, 400 italic, 700
   @import url('https://fonts.bunny.net/css?family=nunito:300,300i,400,400i,700');
 */
/* Variables */
:root {
	/* colors */
	/* primary hue: 210 */
	--color-primary: rgb(59,157,255); /* 3b9dff , accent/lines, touch ring */
	--color-primary-white: rgb(249,252,255); /* f9fcff , text/button text, logo/icon */
	--color-primary-medium: rgb(1,62,125); /* 013e7d , button background, inner ring */
	--color-primary-dark: rgb(0,43,87); /* 002b57 , background offset, display */
	--color-primary-black: rgb(0,10,20); /* 000a14 , background */
	--color-secondary: rgb(224,30,224); /* e01ee0 */
	/* font */
	--font-primary: 'Nunito', sans-serif;
	/* theme */
	--theme-color-text: var(--color-primary-white);
	--theme-color-bg: var(--color-primary-black);
	--theme-color-text-offset: var(--color-primary);
	--theme-color-bg-offset: var(--color-primary-dark);
	--theme-color-link: var(--color-primary);
	--theme-color-accent: var(--color-primary);
	--theme-color-btn-bg: var(--color-primary-medium);
	--theme-color-btn-text: var(--color-primary-white);
	--theme-color-btn-hover: var(--color-primary);
	/* margin, border, padding, gaps */
	--stroke: calc((100vw - 25px) / 100);
	--pad-gap: 12.5px;
}
/* Tags */
html {
	font-size: 125%;
}
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
	position: relative;
	background: var(--theme-color-bg);
	color: var(--theme-color-text);
	font-family: var(--font-primary);
	font-weight: 300;
}
section {
	box-sizing: border-box;
	padding: 0;
}
section h2:first-of-type {
	margin-top: 0;
}
a {
	position: relative;
	color: var(--theme-color-link);
	font-weight: 400;
	text-decoration: none;
	transition: 0.25s;
}
a:hover {
	color: var(--theme-color-text);
	cursor: pointer;
}
a::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 2px;
	background-color: var(--theme-color-link);
	opacity: 0;
	transform: translate(-50%);
	transition: 0.25s;
}
a:hover::after {
	width: 100%;
	opacity: 1;
}
strong {
	font-weight: 700;
}
img {
	display: block;
	max-width: 100%;
	height: auto;
}
h1, h2, h3, h4, h5, h6 {
	clear: both;
	display: block;
	line-height: 1;
}
h1, h2 {
	text-align: center;
}
h1, h2, h3 {
	margin: 1em 0;
	font-weight: 400;
	text-transform: lowercase;
}
h1 {
	font-size: 4rem;
}
h2 {
	font-size: 3rem;
}
h3 {
	border-left: var(--stroke) solid var(--theme-color-accent);
	padding-left: 0.75rem;
	font-size: 2rem;
}
h4, h5, h6 {
	margin: 1.5rem 0;
	font-weight: 700;
	text-transform: uppercase;
}
h4 {
	font-size: 1.25rem;
}
h5 {
	font-size: 1rem;
}
h6 {
	font-size: 0.75rem;
}
p {
	margin: 0 0 2rem;
	line-height: 1.5;
}
ul, 
ol {
	margin: 2rem 0;
	padding-left: 1rem;
}
li {
	clear: both;
	margin: 0.5rem 0;
}
li ul, 
li ol {
	margin: 0;
}
ol li:last-child, 
ul li:last-child {
	margin-bottom: 0;
}
s {
	opacity: 0.67;
}
hr {
	clear: both;
	position: relative;
	max-width: 600px;
	height: var(--stroke);
	margin: 4rem auto;
	border: 0;
	background-color: var(--theme-color-accent);
	overflow: visible;
}
hr::after {
	content: '';
	display: block;
	position: absolute;
	top: calc(var(--stroke) * 2);
	right: 0;
	width: 37.1667%;
	height: var(--stroke);
	background-color: var(--theme-color-accent);
}
table {
	width: 100%;
	margin: 1rem 0;
}
thead th, 
tbody th, 
tbody td, 
tfoot td {
	margin: 1px;
	padding: 0.75rem;
	font-size: 0.75rem;
}
thead th {
	border-bottom: 2px solid var(--theme-color-accent);
}
tbody th {
	text-align: left;
}
tbody td, 
tfoot td {
	background-color: var(--theme-color-bg-offset);
}
/* Common */
ul.inline {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.inline li {
	display: inline-block;
	margin: 0;
}
.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.more {
	margin-top: 2rem;
	font-size: 1.5rem;
	text-transform: lowercase;
}
a.logo svg path {
	fill: var(--theme-color-link);
}
a.logo:hover svg path {
	fill: var(--theme-color-text);
}
a.button, 
button.button,
.buttons a {
	margin-bottom: 0.5em;
	border: none;
	border-radius: 1em;
	padding: 0.25em 0.75em;
	background-color: var(--theme-color-btn-bg);
	color: var(--theme-color-btn-text);
	font-size: 0.75em;
	text-decoration: none;
	text-transform: uppercase;
	line-height: 2.5;
}
a.button:hover,
button.button:hover,
.buttons a:hover {
	background-color: var(--theme-color-btn-hover);
	color: var(--theme-color-btn-text);
	text-decoration: none;
	cursor: pointer;
}
a.button::after, 
button.button::after, 
.buttons a::after {
	display: none;
}
.container {
	max-width: 600px;
	margin: auto;
	padding: 0 var(--pad-gap);
}
.container-aside {
	display: none;
}
.container-aside img {
	object-fit: cover;
	height: 100%;
	width: 100%;
	border-radius: 2rem;
}
.container.thumbnails-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(141.25px, 1fr));
	gap: var(--pad-gap);
	margin-bottom: 2rem;
}
.container.thumbnails-group.thumbnails-group-fill {
	grid-template-columns: repeat(2, 1fr);
}
.container.thumbnails-group img {
	aspect-ratio: 1;
	object-fit: cover;
	object-position: top;
}
.nowrap {
	white-space: nowrap;
}
.social-rel {
	display: none;
}
.note {
	border-radius: 1rem;
	padding: 0.75rem;
	background-color: var(--theme-color-bg-offset);
	color: var(--theme-color-text-offset);
	font-size: 0.75rem;
	text-align: center;
}
.callout {
	margin: 0 0 2rem;
	border-left: var(--stroke) solid var(--theme-color-accent);
	padding-left: 0.75rem;
	font-size: 1.25rem;
}
.framed {
	position: relative;
	box-sizing: border-box;
	border: 2px solid var(--theme-color-accent);
	border-radius: 1rem;
	padding: 4px;
}
.framed button, 
.framed iframe, 
.framed img {
	display: block;
	width: 100%;
	margin: 0;
	border-radius: calc(1rem - 6px);
	padding: 0;
}
.framed.modal-link:hover, 
a.framed:hover {
	border-color: var(--theme-color-text);
}
a.framed::after {
	display: none;
}
.bubble-list {
	border-radius: 1rem;
	padding: 0.75rem;
	background-color: var(--theme-color-bg-offset);
}
.bubble-list li {
	margin: 0.75rem 0;
	list-style: none;
	font-size: 0.8rem;
}
.bubble-list li:hover {
}
.bubble-list a::after {
	display: none;
}
.bubble-list li:first-child {
	margin-top: 0;
}
.clear {
	clear: both;
}
.page-home section,
.page-gunpla section,
.page-gunpla-backlog section {
	padding: 4rem 0;
}
section.intro {
	padding-top: 0;
	font-size: 1.5rem;
}
.page-home hr,
.page-gunpla hr,
.page-gunpla-backlog hr {
	margin: 0;
}
.page-home .main, 
.page-gunpla .main, 
.page-gunpla-backlog .main, 
.page-gunpla-next .main, 
.page-wish .main {
	max-width: 100%;
	padding: 0;
}
/* Logo */
.scotymax,
.sctmxdj-s,
.sctmxdj-inner-ring,
.sctmxdj-touch-ring, {
	fill-rule: evenodd;
}
.scotymax {
	fill: var(--theme-color-text);
}
.sctmxdj-s {
	fill: var(--color-primary-white);
}
.sctmxdj-inner-ring {
	fill: var(--color-primary-medium);
}
.sctmxdj-touch-ring {
	fill: var(--color-primary);
}
.sctmxdj-display {
	fill: var(--color-primary-dark);
}
/* Primary Blocks */
.header {
	margin-bottom: 4rem;
	padding-top: 4rem;
}
.main {
	display: block;
	max-width: 600px;
	margin: auto;
	padding: 0 var(--pad-gap);
}
.footer {
	display: block;
	margin-top: 4rem;
	padding-bottom: 4rem;
}
/* Component: Navigation */
.nav {
	display: block;
}
.nav .nav-wrap {
	position: fixed;
	left: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	background: var(--theme-color-bg-offset);
	transition: all 0.2s ease-in-out 0s;
	transform: translateX(-100%);
	z-index: 1;
}
.nav h3.nav-jump {
	display: none;
	position: relative;
	left: 4px;
	margin-bottom: 12px;
	border: none;
	padding: 0;
	font-size: 0.65rem;
	letter-spacing: 4px;
	text-align: center;
	text-transform: uppercase;
}
.page-home .nav h3.nav-jump,
.page-home .nav .nav-divider,
.page-gunpla .nav h3.nav-jump,
.page-gunpla .nav .nav-divider,
.page-gunpla-backlog .nav h3.nav-jump,
.page-gunpla-backlog .nav .nav-divider {
	display: block;
}
.nav ul.nav-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0;
	font-size: 1.5rem;
	list-style: none;
	text-transform: lowercase;
}
.nav ul.nav-list.nav-home, 
.nav ul.nav-list.nav-gunpla, 
.nav ul.nav-list.nav-gunpla-backlog {
	display: none;
	font-size: 1.125rem;
}
.nav ul.nav-list li {
	margin: 0;
}
.nav .nav-divider {
	display: none;
	width: 40px;
	height: 2px;
	margin: 18px auto 12px;
	background-color: var(--theme-color-text);
}
.nav .nav-toggle {
	position: fixed;
	bottom: 40px;
	left: 0;
	width: 80px;
	height: 60px;
	border-radius: 0 1rem 1rem 0;
	background-color: var(--theme-color-btn-bg);
	z-index: 2;
}
.nav .nav-toggle button {
	position: absolute;
	top: 8px;
	left: 18px;
	width: 44px;
	height: 44px;
	margin: 0;
	border: none;
	border-radius: 0;
	padding: 0;
	background-color: transparent;
	z-index: 3;
}
.nav .nav-toggle button:hover {
	cursor: pointer;
}
.nav .nav-toggle:has(button:hover) {
	/*background-color: var(--theme-color-btn-hover);*/
}
.nav .nav-toggle button i {
	position: relative;
	left: 2px;
	display: block;
	width: 40px;
	height: 4px;
	background-color: var(--color-primary);
	transition: background-color .2s .2s ease-in-out;
}
.nav .nav-toggle button::before,
.nav .nav-toggle button::after {
	content: '';
	position: absolute;
	height: 4px;
	background-color: var(--color-primary);
	transform-origin: 50% 50%;
	transition: 
		background-color .1s .1s ease-in-out, 
		top .1s .3s ease-in-out, 
		left .1s .1s ease-in-out, 
		right .1s .1s ease-in-out, 
		width .1s .1s ease-in-out, 
		transform .1s ease-in-out;
}
.nav .nav-toggle button::before {
	top: 10px;
	left: 2px;
	width: 40px;
}
.nav .nav-toggle button::after {
	top: 30px;
	left: 22px;
	width: 20px;
}
.page-home .nav ul.nav-home {
	display: flex;
}
.page-gunpla .nav ul.nav-gunpla {
	display: flex;
}
.page-gunpla-backlog .nav ul.nav-gunpla-backlog {
	display: flex;
}
.nav.open .nav-wrap {
	transform: translateX(0);
}
.nav.open .nav-toggle button::before,
.nav.open .nav-toggle button::after {
	top: 20px;
	left: 2px;
	width: 40px;
	transition: 
		top .1s ease-in-out, 
		left .1s .1s ease-in-out, 
		right .1s .1s ease-in-out, 
		width .1s .1s ease-in-out, 
		transform .1s .3s ease-in-out;
}
.nav.open .nav-toggle button::before {
	transform: rotate3d(0, 0, 1, 45deg);
}
.nav.open .nav-toggle button i {
	transition: background-color .1s 0s ease-in-out;
	background-color: transparent;
}
.nav.open .nav-toggle button::after {
	transform: rotate3d(0, 0, 1, -45deg);
}
/* Component: Carousel */
.carousel {
	margin: 3rem 0 0;
}
.carousel-cell {
	width: calc(100vw - 25px);
	max-width: 600px;
	margin: 0 var(--pad-gap);
}
.carousel-item {
	position: relative;
	border: 2px solid var(--theme-color-accent);
	border-radius: 2rem;
	padding: 4px;
	background-color: var(--theme-color-bg);
}
.carousel-item img {
	border-radius: calc(2rem - 6px);
}
.carousel-caption {
	padding: 1em;
	font-size: 0.75em;
	text-align: center;
	transition: 0.5s;
	opacity: 0;
}
.is-selected .carousel-caption {
	opacity: 1;
}
.carousel-caption-title {
	font-style: italic;
	font-weight: 400;
}
.flickity-page-dots {
	bottom: -1.4rem;
	height: 1.4rem;
}
.flickity-page-dots .dot {
	width: calc(var(--stroke)*4);
	height: var(--stroke);
	margin: 0 var(--stroke);
	border-radius: 0;
	background: var(--theme-color-text);
	opacity: 1;
}
.flickity-page-dots .dot.is-selected {
	background: var(--theme-color-accent);
}
/* Component: Accordion */
.accordion-toggle {
	cursor: pointer;
	text-align: center;
	font-size: 2.25rem;
	font-weight: 700;
}
.accordion-icon {
	color: var(--theme-color-link);
	display: block;
}
.accordion-content {
	display: none;
}
/* Component: Modal */
.modal-link {
	cursor: pointer;
}
.modal {}
.modal-sheet {
	position: fixed;
	top: 12.5px;
	left: 0;
	right: 0;
	box-sizing: border-box;
	min-width: 320px;
	width: 100vw;
	max-width: 600px;
	height: calc(100vh - 12.5px);
	margin-left: auto;
	margin-right: auto;
	border-radius: 25px 25px 0 0;
	padding: 0.5rem;
	background-color: var(--theme-color-bg-offset);
	transition: all .5s;
	transition-timing-function: cubic-bezier(.5,0,.5,1);
	z-index: 4;
}
.modal.closed .modal-sheet {
	top: 100%;
	height: 0;
	overflow: hidden;
}
.modal-content {
	position: relative;
	height: calc(100vh - 37.5px);
	overflow-y: scroll;
}
.modal-content img {
	width: 100%;
	height: auto;
}
.modal-close {
	position: absolute;
	top: 3px;
	right: 3px;
}
.modal-close .button {
	width: 44px;
	height: 44px;
	margin-bottom: 0;
	border-radius: 22px;
	font-size: 16px;
	line-height: 16px;
}
.modal-background {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--theme-color-bg);
	opacity: 0.67;
	transition: all 1s;
	z-index: 3;
}
.modal.closed .modal-background {
	position: unset;
	opacity: 0;
}
/* Header */
.header-logo {
	position: relative;
	display: block;
}
.header-logo-border {
	position: relative;
	display: block;
	width: 100%;
	height: var(--stroke);
	top: var(--stroke);
	background-color: var(--theme-color-accent);
}
.header-logo::after {
	content: '';
	position: absolute;
	left: auto;
	right: 0;
	bottom: var(--stroke);
	width: 0;
	height: var(--stroke);
	background-color: var(--theme-color-accent);
	transform: translate(0);
	transition: 0.25s;
	opacity: 0;
}
.header-logo:hover::after {
	width: 37.1667%;
	opacity: 1;
}
.header-logo svg {
	width: 100%;
	height: auto;
}
/* Footer */
.footer-logo {
	position: relative;
	display: block;
	width: 104px;
	height: 104px;
	margin: auto;
}
.footer-logo::after {
	display: none;
}
.footer-logo svg {
	padding: 2px;
}
.half-clip {
	position: absolute;
	right: 0px;
	display: block;
	width: 50%;
	height: 100%;
	overflow: hidden;
	transform-origin: left center;
}
.footer-logo:hover .half-clip {
	animation: cliprotate 0.25s 1;
	transform: rotate(180deg);
}
@keyframes cliprotate {
	0% {transform: rotate(0deg);}
	50% {transform: rotate(0deg);}
	50.0001% {transform: rotate(180deg);}
	100% {transform: rotate(180deg);}
}
.half-circle {
	position: absolute;
	right: 0px;
	display: block;
	box-sizing: border-box;
	height: 100%;
	border: solid 2px transparent;
	border-top-color: var(--theme-color-accent);
	border-left-color: var(--theme-color-accent);
	border-radius: 50%;
}
.clipped {
	display: block;
	width: 200%;
	transform: rotate(-45deg);
}
.footer-logo:hover .clipped {
	animation: rotate 0.125s linear 2;
	transform: rotate(135deg);
}
@keyframes rotate {
	0% {transform: rotate(-45deg);}
	100% {transform: rotate(135deg);}
}
.fixed {
	display: block;
	width: 100%;
	transform: rotate(135deg);  
	opacity: 0;
}
.footer-logo:hover .fixed {
	animation: showfixed 0.25s 1;
	opacity: 1;
}
@keyframes showfixed {
	0% {opacity: 0;}
	49.9999% {opacity: 0;}
	50% {opacity: 1;}
	100% {opacity: 1;}
}
/* Page: Home */
.intro .container > :last-child {
	margin-bottom: 0;
}
/* Section: DJ and Page: Mixes */
.mixcloud-logo {
	width: auto; /* 136px */
	height: 16px;
	margin: 0 3px;
	vertical-align: -0.5px;
}
.mix-logo {
	width: 44px;
	height: auto; /* 12.43px */
}
.mixcloud-widget {
	margin: 2rem 0;
}
.mixcloud-placeholder button {
	height: 60px;
	border: none;
	background-color: var(--theme-color-btn-bg);
	color: var(--theme-color-btn-text);
	font-size: 15px;
	text-transform: uppercase;
	transition: 0.25s;
}
.mixcloud-placeholder button .mixcloud-logo {
	width: auto; /* 102px */
	height: 12px;
}
.mixcloud-placeholder button .mixcloud-logo path {
	fill: var(--theme-color-btn-text);
}
.mixcloud-placeholder button:hover {
	background-color: var(--theme-color-btn-hover);
	cursor: pointer;
}
.mixcloud-placeholder button:hover .mixcloud-logo path {
	fill: var(--theme-color-btn-text);
}
.mixcloud-widget iframe {
	height: 60px;
}
table.mix-downloads tbody tr td {
	text-align: center;
}
table.mix-downloads tbody tr td:first-of-type {
	text-align: left;
}
table.mix-downloads tfoot tr td {
	text-align: center;
}
.mix-metadata {
	display: inline-block;
	margin-bottom: 0.2rem;
	border-bottom: 2px solid var(--theme-color-accent);
}
.mix-description {
	display: block;
}
.mix-downloads a.button {
	font-size: 0.9rem;
}
.mix-downloads a.button span {
	vertical-align: middle;
}
.mix-downloads .logo {
	display: block;
	margin-bottom: 0.25rem;
}
/* Section: Design */
.design-platform {
	text-align: center;
	clear: both;
}
.dribbble-logo {
	width: auto; /* 105px */
	height: 29.5px;
}
/* Section: Hockey */
.hockey-next {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}
.hockey-next-event {
	position: relative;
	text-align: center;
}
.hockey-next-event a {
	color: var(--theme-color-text);
}
.hockey-next-event a::after {
	display: none;
}
.hockey-next-date {
	display: block;
	font-weight: 700;
}
.hockey-next-time {
	display: block;
	font-size: 0.75em;
}
.hockey-next-none {
	font-style: italic;
	text-align: center;
}
/* Section: Connect */
.connect {}
.connect-list {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin: 0;
	padding: 0;
}
.connect-list li {
	margin: 0;
	list-style: none;
	text-align: center;
}
.connect-list li a {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}
.connect-icon {
	width: 50px;
}
.connect-handle {}
/* Page: 404 */
.page-404 h1 {
	margin-bottom: 2rem;
	text-align: center;
} 
.page-404 p {
	text-align: center;
}
/* Page: Gunpla */
/*
.building img {
	filter: sepia(100%) saturate(80%) hue-rotate(165deg);
}
*/
.gunpla-chart {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	vertical-align: middle;
}
.gunpla-chart span {
	display: block;
	position: relative;
	top: 6px;
	left: 6px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--color-primary-dark);
	color: var(--color-primary);
	font-size: 12px;
	line-height: 32px;
	text-align: center;
}
.gunpla-info {
	padding: 0.5rem 1.75rem;
	line-height: 1.1;
	text-align: center;
}
.gunpla-number {
	font-size: 0.8rem;
}
.gunpla-name {
	display: block;
	font-weight: 700;
}
.gunpla-info .gunpla-grade, 
.gunpla-info .gunpla-universe {
	font-size: 0.7rem;
	line-height: 1.25;
}
.gunpla-universe::before {
	content: ' / ';
}
.gunpla-photos {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.gunpla-alt-photos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
}
.gunpla-description {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1rem;
	padding: 0 1.5rem;
}
.gunpla-notes {
	font-size: 0.8rem;
	line-height: 1.25;
}
.gunpla-customization {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.25;
}
.gunpla-customization li {
	margin: 0.25rem 0;
}
.gunpla-date {
	margin: 0;
	font-size: 0.7rem;
	text-align: center;
	text-transform: uppercase;
}
.note-flag {
	position: absolute;
	bottom: 4px;
	right: 4px;
	border-bottom-right-radius: calc(1rem - 6px);
	padding: 0.25em 0.75em;
	color: var(--theme-color-text);
	font-size: 0.75em;
	line-height: 1.25;
	background-color: var(--color-primary-medium);
}
/*
.gunpla-next .framed .note-flag::before {
	content: '\F586';
	padding-right: 0.5rem;
	color: var(--color-secondary);
	font-family: bootstrap-icons;
	font-size: 0.5rem;
}
*/
.gunpla-next-thumbnails {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
/* Page: Profiles */
.page-profiles .bi {
	color: var(--color-primary);
}
.page-profiles .bi.bi-star {
	color: var(--color-secondary);
}
.page-profiles h2 .bi {
	color: var(--theme-color-text);
}
/* Page: Posts */
.post-list {}
.post-item {}
.post-date {
	margin-top: 2rem;
	font-size: 0.75rem;
	text-transform: uppercase;
}
h2.post-date  {
	margin: 0;
	text-align: center;
}
.post {}
.post-content {
	margin: 2rem 0 2rem;
}
.post-content img {
	padding: 4px;
	border: 2px solid var(--theme-color-accent);
	border-radius: 1rem;
	box-sizing: border-box;
}
.post-item .post-date {
	text-align: center;
}
ul.posts-footer-links {
	margin: 0 auto 1.5rem;
	padding: 0;
	list-style: none;
	text-align: center;
}
ul.posts-footer-links li {
	display: inline-block;
	margin: 0 0.5rem;
	font-size: 0.75rem;
}
/* Page: Admin */
.page-admin label {
	display: block;
	margin: 1rem 0 0.25rem;
	padding-left: 0.75rem;
	font-size: 0.75rem;
	text-transform: uppercase;
}
.page-admin select, 
.page-admin input,
.page-admin textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--theme-color-bg-offset);
	border-radius: 1rem;
	background-color: var(--theme-color-bg-offset);
	color: var(--theme-color-text);
	font-family: monospace;
	font-size: 0.75rem;
	outline: none;
}
.page-admin select, 
.page-admin input {
	height: 44px;
}
.page-admin select {
	background-image: url('/include/img/bootstrap-icons/chevron-down-white.svg');
	background-repeat: no-repeat;
	background-size: 16px auto;
	background-position: right 19px center;
	appearance: none;
}
.page-admin textarea {
	line-height: 1.5rem;
}
.page-admin select:focus-visible, 
.page-admin input:focus-visible,
.page-admin textare:focus-visible {
	border-color: var(--color-primary);
}
.page-admin .button-row {
	margin-top: 2rem;
	text-align: center;
}
.page-admin table tbody tr td {
	text-align: center;
}
.page-admin table tbody tr td:first-of-type {
	text-align: left;
}
.page-admin table tbody tr td.table-break {
	font-weight: 700;
	text-align: center;
}
/* Adjustments for larger screens */
@media screen and (min-width:480px) {
	.hockey-next-event a img {
		height: 100px;
	}
}
/* Mobile landscape and Tablet portrait */
@media screen and (min-width:625px) {
	:root {
		--stroke: 6px;
	}
	.hockey-next {
		flex-direction: row;
		justify-content: space-evenly;
	}
}
@media screen and (min-width:640px) {
	:root {
		--pad-gap: 20px;
	}
	a {
		white-space: nowrap;
	}
	.container.thumbnails-group {
		grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	}
	.container.container-wide.thumbnails-group {
		grid-template-columns: repeat(3, 1fr);
		max-width: 910px;
	}
	.gunpla-stats {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--pad-gap);
	}
	.connect-list {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
	}
	.connect-list li {
		width: calc(50% - 1rem);
	}
	.page-admin .list-columns {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0 0.5rem;
	}
	.page-admin .list-columns h2 {
		grid-column: 1 / span 2;
	}
	.post-content img {
		border-radius: 2rem;
	}
}
/* Mobile landscape */
@media screen and (orientation:landscape) and (max-width:960px) {
	.carousel-cell {
		width: calc(100vh - 80px);
	}
	.modal-sheet {
		top: 12.5px;
		height: calc(100vh - 12.5px);
	}
	.modal-content {
		height: calc(100vh - 37.5px);
	}
	.gunpla-modals .modal-content {
		display: grid;
		grid-template-columns: 200px 1fr;
		grid-template-rows: auto 1fr;
		gap: 1rem;
	}
	.gunpla-modals .modal-content .gunpla-info {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
	}
	.gunpla-modals .modal-content img {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
	.gunpla-modals .modal-content .gunpla-description {
		grid-column: 2;
		grid-row: 2;
		margin: 0;
		padding: 0 1rem;
	}
}
/* Tablet */
@media screen and (min-width:800px) {
	.nav .nav-toggle {
		top: 80px;
		bottom: auto;
	}
}
/* Desktop */
@media screen and (min-width:1280px) {
	.nav .nav-wrap {
		width: 320px;
		border-radius: 0 1rem 1rem 0;
	}
	.nav ul.nav-list {
		font-size: 1.75rem;
	}
	.nav ul.nav-list.nav-home, 
	.nav ul.nav-list.nav-gunpla, 
	.nav ul.nav-list.nav-gunpla-backlog {
		font-size: 1.25rem;
	}
	.container.container-w-aside {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
		max-width: 1240px;
	}
	.container.container-wide.thumbnails-group {
		grid-template-columns: repeat(4, 1fr);
		max-width: 1220px;
	}
	.container-aside {
		display: block;
	}
}
@media screen and (min-height:900px) {
	.gunpla-modals .modal-sheet {
		top: calc((100vh - 850px)/2);
		height: calc(100vh - ((100vh - 850px)/2));
	}
	.gunpla-modals .modal-content {
		height: calc(100vh - 25px - ((100vh - 850px)/2));
	}
}
/* light theme - by choice */
body.light-theme {
	/* theme */
	--theme-color-text: var(--color-primary-black);
	--theme-color-bg: var(--color-primary-white);
	--theme-color-text-offset: rgb(0,84,173); /* 0054ad */
	--theme-color-bg-offset: rgb(214,235,255); /* d6ebff */
	--theme-color-link: rgb(0,84,173); /* 0054ad */
}
button.toggle-theme {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	border: none;
	background: none;
	color: var(--theme-color-link);
	line-height: 42px;
	cursor: pointer;
}
button.toggle-theme:hover {
	color: var(--theme-color-text);
}
button.toggle-theme .bi-moon {
	display: none;
}
button.toggle-theme .bi-brightness-high {
	display: inline-block;
}
body.light-theme button.toggle-theme .bi-moon {
	display: inline-block;
}
body.light-theme button.toggle-theme .bi-brightness-high {
	display: none;
}