body{
	background: var(--rp-base);
	color: var(--rp-text);
	/* font-family: "Lekton", monospace; */
	font-family: "PT Serif", monospace;
	text-align: center;
	font-size: 14pt;
	margin: 50px;
}
h2{
	text-align: center;
}
h3{
	color: var(--rp-iris);
	text-align: left;
}
p{
	text-align: left;
}

a:link { color: var(--rp-foam); }
a:visited { color: var(--rp-iris); }
a:hover { color: var(--rp-gold); }
a:active { color: var(--rp-gold); }

img {
	max-width: 100%;
	height: auto;
}

svg {
	max-width: 100%;
	height: auto;
}

.gallifrey-parent {
    display: flex;
	justify-content: safe center;
	align-items: center;
    gap: 10px;
	max-width: 100%;
}

.gallifrey-child {
	flex-basis: 200px;
	flex-shrink: 0;
}

.pig-parent {
    display: flex;
	justify-content: safe center;
	align-items: center;
    gap: 20px;
	max-width: 100%;
}

.pig-child {
	flex-basis: 100px;
	flex-shrink: 0;
}

.fancy-header{
	font-family: "Mea Culpa";
	text-align: center;
	font-size: 50pt;
	font-weight: 100;
	margin-bottom: -10px;
}

/* assign navigation bar color */
.navbar {
  background-color: var(--rp-overlay);
  overflow: hidden;
}

/* style links in navigation bar */
.navbar a {
  float: left;
  color: var(--rp-rose);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar input {
	float: right;
  	margin-top: 18px;
}

.navbar label {
	float: right;
  	padding: 14px 16px;
}

/* Change the color of links on hover */
.navbar a:hover {
  background-color: var(--rp-highlight-high);
  color: var(--rp-gold);
}

/* Add a color to the active/current link */
.navbar a.active {
  background-color: var(--rp-highlight-med);
  color: var(--rp-gold);
}

/* MOBILE-FRIENDLY STYLING */
@media screen and (max-width: 750px) {
	.fancy-header{
		font-size: 8vw;
		font-weight: 100;
	}

	body{
		font-size: 16pt;
	}

	.gallifrey-parent {
		display: flex;
		justify-content: safe center;
		align-items: center;
		gap: 10px;
		max-width: 100%;
	}

	.gallifrey-child {
		flex-basis: 200px;
		flex-shrink: 0;
	}

	.pig-parent {
		display: flex;
		justify-content: safe center;
		align-items: center;
		gap: 20px;
		max-width: 100%;
	}

	.pig-child {
		flex-basis: 100px;
		flex-shrink: 0;
	}

	.picture-gallery-box {
		display: flex;
		justify-content: safe center;
		align-items: safe center;
	}

	.picture {
		flex-basis: auto;
	}
}