/** GLOBAL VARIABLES **/
:root {
	--bg-main:#cdd8d8;
	--bg-nav:#f6e3c0;
	--bg-button:#4A90E2;
	--text-main:#222;
	--link-main:#ff6600;
	--link-hvr:#0000ff;
	--text-shadow:#404040;
}

h1,h2,h3,h4,h5,h6,pre,code {font-size:1em;font-weight:400;}
ul,dl,dt,dd,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {margin:0; padding:0}
a img,:link img,:visited img {border:none; text-decoration:none;}

/** GLOBAL SETS **/
.clear {clear:both;}
.hidden {display:none;}
html {background-color:var(--bg-main);}
body {margin:0 0 0 0;font-size:13px;color:var(--text-main);font-family:Handlee, cursive;background-color:var(--bg-main);height:100%;box-sizing:border-box;}
header a:link, header a:visited {font-family:marcellus,sans-serif;color:var(--link-main);text-decoration:none;}
header a:hover, header a:focus {font-family:marcellus,sans-serif;color:var(--link-hvr);text-decoration:none;}
.anchor {padding-top:100px;}

header {
	display:grid;
	grid-template-columns:2% max-content 1fr max-content max-content max-content;
	position:fixed;
	padding-top:10px;
	padding-bottom:10px;
	top:0;
	z-index:999;
	width:100%;
	background-color:var(--bg-nav);
}

nav {
	display:block;
	font-family:marcellus,sans-serif;
	color:var(--link-main);
	background-color:var(--bg-nav);
	position:fixed;
	top:84px;
	right:0;
	z-index:99;
	text-align:left;
	transform-origin:top;
	transform:scale(1,0);
}

a.ignav, a.rbnav {
	margin-block:auto;
	width:30px;
	height:30px;
	background-size:contain;
	background-repeat:no-repeat;
}
a.ignav {
	grid-column:4;
	background-image:url(Images/instagram_base.png);
}
a.rbnav {
	grid-column:5;
	margin-inline:1em;
	background-image:url(Images/RedBubblelogo.png);
}
a.ignav:hover,
a.ignav:focus {
		background-image:url(Images/instagram_hover.png);
}
a.rbnav:hover,
a.rbnav:focus {
	filter:hue-rotate(260deg);
}
nav ul {
	background-color:var(--bg-nav);
	margin: 0;
	padding:0;
	list-style:none;
	font-size:1.2rem;
}

nav li {
	padding:0.3em 1em;
	color:var(--link-main);
}

nav a {
	opacity:1;
	transition:opacity 150ms ease-in-out;
	text-decoration:none;
}

	nav a:link, nav a:visited {
		color:var(--link-main);
	}

button.nav-toggle {
	margin:auto 2em auto 0;
	grid-column:6;
	background:transparent;
	border:none;
}

svg {
	display:block;
}

/* nav toggle SVG animations */
.nav-toggle .line {
  transition: y 200ms ease-in 200ms, rotate 200ms ease-in, opacity 0ms 200ms;
  transform-origin: center;
}

.nav-toggle[aria-expanded="true"] .line {
  transition: y 200ms ease-in, rotate 200ms ease-in 200ms, opacity 0ms 200ms;
}

.nav-toggle[aria-expanded="true"] :is(.top, .bottom) {
  y: 44px;
}

.nav-toggle[aria-expanded="true"] .top {
  rotate: 45deg;
}

.nav-toggle[aria-expanded="true"] .middle {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .bottom {
  rotate: -45deg;
}

/* Transforms for the nav block when toggle changes */

nav[aria-expanded="true"] {
	transform:scale(1,1);
	transition:transform 400ms ease-in-out;
}
nav[aria-expanded="false"] {
	transform:scale(1,0);
	transition:transform 400ms ease-in-out;
}

nav[aria-expanded="false"] a {
	opacity:1;
	transition:opacity 250ms ease-in-out 200ms;
}

.logo {
	grid-column:2;
}
.page-text .twocol {
	columns: 400px;
	column-rule:1px solid gray;
	column-gap:2em;
}

.content {
	position:relative;
	width: min(1000px,90%);
	margin:90px auto 0 auto;
	background-color:inherit;
}

.content h1 {font-size:1.8rem;font-family:marcellus,sans-serif;color:#ff6600;letter-spacing:-1px;margin:0.5em 0 0.5em 0;}
.content h2 {font-size:1.5rem;font-family:marcellus,sans-serif;color:var(--link-main);line-height:3rem;margin:15px 0 10px 0;}
.content h3 {font-size:1.3rem;font-family:marcellus,sans-serif;color:var(--link-main);line-height:2.5rem;margin:15px 0 10px 0;}
.content h4, .card h4 {font-family:marcellus,sans-serif;font-size:1.2rem;color:var(--link-main);line-height:1.5rem;margin:0.5em 0 0.5em 0;}
.content h5 {font-family:marcellus,sans-serif;font-size:14px;color:#404040;margin:25px 0 10px 0;}
.content h6 {font-family:marcellus,sans-serif;font-size:10px;color:#404040;margin:25px 0 10px 0;}

.content h1 a, .content h2 a, .content h3 a, .content h4 a, .content h5 a, .content h6 a {
	color:var(--link-main);
}
.content a:link, .content a:visited {
	color:var(--link-main);
}

/* Link buttons on Instagram landing page */
a.iglink {
	text-decoration:none;
	color:white;
	font-family:arial,sans-serif;
	font-size:1.1rem;
	font-weight:bold;
	background-color:var(--bg-button);
	border-radius:10px;
	padding:15px 25px;
}


.content .page-content {
	width:100%;
	padding-top:0.5em;
}

.page-meta {
	line-height:1.5rem;
	color:var(--link-main);
	font-family: marcellus, sans-serif;
	font-size:0.9rem;
	padding-top:10px;
	margin-top:10px;
	text-align:center;
}

.content .page-text {
	color:black;
	font-size:1.2rem;
	line-height:1.6rem;
	margin-bottom:10px;
}
.card .page-text {
	color:black;
	font-size:1.2rem;
	line-height:1.6rem;
	margin-bottom:10px;
}
.card .close {
	position:absolute;
	top:0;
	right:0;
}

.page-text p, .page-text ul, .page-text ol {margin:0 0 22px 0;}
.content .page-text ul, .content .page-text ol {margin-left:25px;}
.content .page-text ul ul, .content .page-text ol ul, .content .page-text ul ol, .content .page-text ol ol {
	margin:0 0 0 25px;
}
.content .page-text blockquote {
	margin:0 0 22px 20px;
	line-height: 1.5rem;
	font-size:1.2rem;
	color:var(--text-main);
	padding:0 0 0 15px;
}
.content code {border:1px dotted #ececec;padding:2px;font-family: Consolas, Monaco, "Courier New", Courier, monospace;font-size: 12px;background:#f9f9f9;color:#000;}
.content pre code {line-height:17px;padding:15px;border:1px dotted #ececec;font-family: Consolas, Monaco, "Courier New", Courier, monospace;font-size: 12px;background:#f9f9f9;color:#000;margin-bottom:22px;display:block;}

/* floating component - only show on larger screens */
.card {
	display:block;
	background-color:var(--bg-nav);
	text-align:center;
	position:absolute;
	height:max-content;
	width:18em;
	top:30%;
	left:65vw;
	padding: 30px 30px;
	box-shadow:5px 5px 15px var(--text-shadow);
	transform:rotate(10deg);
	z-index:10;
}
@keyframes cardgone {
	from {opacity:1;}
	to {scale:0
	}
}

@media screen and (max-width:1100px) {

	.card {
		display:none;
	}
}

thead, tbody, tr, td {
	border:inherit;
}

.smalltext {
	font-size:12px;
	line-height:14px;
}

a.paylink {
	text-decoration:none;
	color:white;
	font-family:sans-serif;
	font-size:16px;
	font-weight:bold;
	border-radius:6px;
	background-color:var(--bg-button);
	padding:8px 15px;
}
a.paylink:hover {
	border:2px solid red;
}

div.square {
	position:relative;
	width:min(450px,90%);
	aspect-ratio: 1 / 1;
	margin:0 auto;
}

div.MAslideshow {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
img.MAslide {
	position:absolute;
	margin:0 auto 0 auto;
	max-width:100%;
	max-height:100%;
	border:none;
	box-shadow:5px 5px 15px var(--text-shadow);
	opacity:1;
	transition: opacity 3s;
}
img.MAslide.fade {
	opacity:0;
}

/* thumbbox for gallery pages */
div.thumbbox {
	display: flex;
	flex-direction: row;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}

/* Styling for flexible tables - small screens */
div.table-row {
	display:flex;
	flex-direction:column;
	justify-content:center;
}

div.table-row div {
	display:table-cell;
	width:100%;
}
div.table-row div div {
	text-align:center;
}

div.table-row p {
	padding:10px;
	margin-bottom:0;
}

div.table-row img {
	display:block;
	margin:0 auto;
	max-width:100%;
}

hr.text {
	color:lightgray;
	margin-top:10px;
	margin-bottom:10px;
}

/* Adjustments for wider sreens */
@media screen and (min-width:1100px) {
    div.table-row {
		flex-direction:row;
    }
	div.table-row div {
		width:50%;
	}
	div.table-row img {
		display:block;
		margin:0 auto;
	}
		
}

table.MAtable {
	border:none;border-collapse:collapse;
}

table.MAtable td {
	border:1px solid #a0a0a0;
	text-align:center;
	padding:6px;
}
table.MAtable th {
	border:1px solid #a0a0a0;
	text-align:center;
	padding:6px;
}

table.MAtable td img {
	max-width:100%;
}

.section {padding:30px 20px 20px 20px;text-align:left;}
.section p, .section ul, .section ol {line-height:20px;margin:0 0 20px 0;}
.section ul, .section ol {margin-left:20px;}
.section ul ul, .section ol ul, .section ul ol, .section ol ol {
	margin:0 0 0 20px;
}
.section h2 {color:#BA0000;font-size:22px;font-family:arial;line-height:22px;letter-spacing:-1px;margin:0 0 15px 0;padding:0;}
.section h3 {color:#BA0000;font-family:arial;font-size:19px;margin:0 0 10px 0;}
.section h4 {color:#BA0000;font-family:arial;font-size:15px;margin:0 0 10px 0;}
.section h5 {color:#BA0000;font-family:arial;font-size:13px;margin:0 0 10px 0;}
.section h6 {color:#BA0000;font-family:arial;font-size:10px;margin:0 0 10px 0;}

.section blockquote {
	margin:0 0 20px 20px;
	line-height: 19px;
	font-size:12px;
	color:#666;
	font-style:italic;
	border-left:2px solid #ccc;
	padding:0 0 0 15px;
	}
.section code {border:1px solid #ececec;padding:2px;font-family: Consolas, Monaco, "Courier New", Courier, monospace;font-size: 12px;background:#f9f9f9;color:#000;}
.section pre code {line-height:17px;padding:15px;border:1px solid #ececec;font-family: Consolas, Monaco, "Courier New", Courier, monospace;font-size: 12px;background:#f9f9f9;color:#000;margin-bottom:22px;display:block;}

.credits {font-size:11px;text-transform:uppercase;color:#666;padding-top:15px;margin-top:30px;border-top:1px dotted #ccc;}
.credits p {margin:0 0 0 0;line-height:16px;padding:5px 0 0 0;}
.credits a:link, .credits a:visited {color:#666;}
.credits a:hover {color:#333}