body, html { margin: 0; }

body:not(.iframe) {
	background-color: var(--d-purple);
	background-image: url('/graphix/bg/rainbow-paw-stars.png');
	background-size: min(400px, 50vw, 50vh);
}

body .main-container {
	margin: 0 auto;
	font-size: 1.125rem;
	text-align: left;
	color: var(--l-blue);
	height: auto; 
}
body:not(.iframe) .main-container {
	width: min(1000px, 80%);
	background-color: var(--dd-purple);
	padding: 2em .75em .5em .5em;
	min-height: calc(100vh - 1rem);
}
@media screen and (max-width: 500px) {
	body:not(.iframe) .main-container {
		width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	}
}
/* when page is in iframe */
.iframe .main-container {
	width: auto;
	padding: .75em;
	min-height: 100%;
}

img { max-width: 100% }
img.tall { max-height: max(300px,min(90vh,500px)); }
img.mini { max-height: 1em; }

/* scrollbar */
::-webkit-scrollbar { width: 15px; } /* width */
::-webkit-scrollbar-track { /* Track */
	background-color: var(--dd-blue);
	box-shadow: inset 0 0 5px var(--dd-purple);
	border-radius: 0;
}
::-webkit-scrollbar-thumb { /* Handle */
	background: var(--green);
	box-shadow: inset 0 0 5px var(--green);
	border-radius: 0;
}

.title, .title:link, .title:visited { display: block; color: var(--pink); text-align: center; font-size: max(1em, min(10vw,2em)); text-transform: uppercase; }
.title img.block { display: block; margin: 0 auto; }
.title img:not(.block) { height: 1em; margin-bottom: -.1em; }
/* when page is in iframe */
.iframe  .title { font-size: 1em; }

.subtitle { display: block; text-align: center; }

div:has(> .all-tags) { text-align: center; margin: 0 auto 1em auto; }
.all-tags { margin-top: .5em; }
.all-tags button {
	padding: 0.1em 0.5em; margin: 0.25em;
	background: var(--d-purple); border: 2px var(--purple) solid; color: var(--pink);
}
.all-tags button.tag { width: 10em; margin-right: 0; border-right: 0; }
.all-tags button:hover { color: var(--yellow); }
.all-tags button.add-tag { background: var(--purple); color: var(--d-purple); margin-left: 0; border-left: 0; }

.all-tags button.add-tag.selected { background: var(--yellow); }

/* updates list styling */
.updatelist { padding: 0 5% 0 8%; list-style: none; }
/* when page is in iframe */
.iframe  .updatelist { padding: 0; }

.update { margin-bottom: 0.75em; }

.update:before { /* custom size image bullet points */
  content: '';
  display: inline-block;
  height: 1em;
  width: 1.5em;
  background-image: url('/graphix/deco/smiley-spin-green.gif');
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: -1.5em; /* should be negative same as width */
}
.iframe .update:before { margin-left: 0; }
/* alternate image bullet points */
.update:nth-child(2n+1):before { background-image: url('/graphix/deco/smiley-spin-yellow.gif'); }
.update:nth-child(3n+1):before { background-image: url('/graphix/deco/smiley-spin-pink.gif'); }

.update .date, .update .date a { display: inline-block; color: var(--yellow); }
.update .date a:hover { color: var(--l-green); }

.update .tag-area a { color: var(--pink); }
.update .tag-area a:hover { color: var(--yellow); }
/* when page is in iframe */
.iframe  .update .tag-area { display: none; }

.update .details { padding-left: 2em; margin-bottom: 3em; }
/* when page is in iframe */
.iframe  .update .details { display: none; }

.update .summary { color: var(--l-green); }
/* when page is in iframe */
.iframe  .update .summary { padding-left: 2em; color: var(--l-blue); }

.footer { margin-left: 1em; margin-bottom: 0.5em; }