body {
	background-image: url("../images/background-linework1-03.png");
	background-repeat: no-repeat;
	background-color: yellow;
	font-family: 'Oswald', sans-serif;
	font-size: 1.5vmax;
	font-weight: lighter;
	margin: 0px;
	padding: 0px;
	margin-left: 0.5vw;
	margin-right: 0.5vw;
	background-size: 79%;

}

/*NOTE: IT SEEMS TO BE THAT THE
TOTAL WIDTH OF CONTENT IN
MODERN BROWSERS IS 99VW; 1VW
SEEMS TO GO TO THE SCROLLBAR!
>>actually this is only firefox*/

body::-webkit-scrollbar {
	width: 2vw;
}

body::-webkit-scrollbar-track {
	background-color: black;
}

body::-webkit-scrollbar-thumb {
	/*background: linear-gradient(red, yellow);
	border-radius: 1vw;*/

	background-image: url("../images/scrollthumb-v2-yel.svg");
	background-repeat: no-repeat;
}

p {
	padding: 25px;
	margin: 0px;
}

a {
	color: black;
}

.a_light {
	color: cyan;
}

a:hover {
	text-decoration: none;
	color: red;
}

.mars:hover {
	color: blue;
}



h1 {
	font-size: 2vmax;
	font-weight: lighter;
	margin-left: 15px;
}
.center_h1 {
	text-align: center;
	font-size: 4vmax;
	margin-left: 0px;
}

div {
	
}

img {
	margin: 0px;
}

.nameplate {
	display: inline-block;
	margin-top: 8px;
	height: 20vh;
	width: 100%;
}

.foot {
	margin-top: 8px;
	margin-bottom: 8px;
}

#geiringer1 {
	/*display: inline-block;*/
}
.back_button {
	display: inline-block;
	float: right;
	margin-right: 20px;
	margin-bottom: 20px;
}

.gallery {
	margin-top: 1vw;
	/*width: 98vw;*/
	display: grid;
	grid-gap: 1vmax;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 60vh;
	grid-auto-rows: 60vh;
	/*overflow: hidden;*/

}

.g_item {
	box-sizing: border-box;
	width: 100%;
	margin: 0px;
	overflow: hidden;
	object-fit: cover;
}
.g_item.span2 {
	grid-column-end: span 2;
}
.g_item.span3 {
	grid-column-end: span 3;
}
.g_item.span4 {
	grid-column-end: span 4;
}

.g_image {
	width: 100%;
	height: 100%;
	margin: 0px;
	overflow: hidden;
	object-fit: cover;
}
.g_image_scale {
	width: 100%;
	height: 100%;
	margin: 0px;
	object-fit: scale-down;
}

.image_label {
	padding: 0;
	height: 1.2vmax;
	margin-left: 0;
	font-size: 1vmax;
	position: relative;
	top: -2vmax;
	float: right;
}
.image_label_text {
	display: inline-block;
	padding: 0;
	text-align: center;
	background-color: black;
	color: red;
	font-family: monospace;
}

iframe.fullsize {
	width: 100%;
	height: 100%;
}

/*.gallery_5square {
	display: grid;
	padding: 0;
	grid-gap: 1vw;
	background-color: rgba(50,50,50,0.7);
	grid-template-columns: 18.8vw 18.8vw 18.8vw 18.8vw 18.8vw;
	grid-template-rows: 18.8vw;
	grid-auto-rows: 18.8vw;
	overflow: hidden;
}*/

.spacer2 {
	grid-row-end: span 2;
}
.spacer3 {
	grid-row-end: span 3;
}

.give2 {
	grid-row-end: span 1;
}
.give3 {
	grid-row-end: span 2;
}
.gallery.dense {
	grid-auto-flow: row dense;
}



/*PAGE-SPECIFIC SECTION WEB!!!!!!!!!!!!!!!!!!!!!!*/

/*CONTACT*/
:root {
	--contact-width: 73vw;
	--contact-height: 66vh;
}
#contact-holder {
	position: absolute;
	margin: 0;
	top: calc((100vh - var(--contact-height)) / 2);
	left: calc((100vw - var(--contact-width)) / 2);
	height: var(--contact-height);
	width: var(--contact-width);
	/*background-color: blue;*/
}
#contact-holder > p {
	color: gainsboro;
	text-align: center;
	padding: 0;
	margin: 0;
}
#contact-holder > h1 {
	color: yellow;
	text-align: center;
	padding: 0;
	margin: 0;
	margin-top: 3vh;
}
#contact-holder > h1 > a {
	color: yellow;
	text-decoration: none;
}

/*ALCHEMY*/
#ALCH-text-intro {
	background-color: rgba(255,0,0,0.9);
}
#ALCH-img-1 {
	grid-row-end: span 2;
	justify-content: center;
}
#ALCH-text-2 {
	grid-column-start: 4;
	background-color: rgba(255,255,255,0.9);
}
#ALCH-text-3 {
	grid-row-end: span 1;
	background-color: rgba(255,255,255,0.9);
}
#ALCH-text-4 {
	grid-row-end: span 1;
	background-color: rgba(255,255,255,0.9);
}
#ALCH-text-5 {
	grid-column-start: 3;
	grid-row-end: span 1;
	background-color: rgba(255,255,255,0.9);
}
#ALCH-img-6 {
	grid-column-start: 4;
	justify-content: center;
}

/*ARCH*/
#ARCH-text-intro {
	grid-row-end: span 2;
	background-color: rgba(255,255,255,0.9);
}
#ARCH-text-SAS {
	grid-row-end: span 1;
	background-color: rgba(150,255,10,0.93);
	height: 60%;
}
#ARCH-text-kub {
	grid-row-end: span 1;
	background-color: rgba(177,51,255,0.8);
	height: 52%;
}
#ARCH-text-dh {
	grid-column-start: 1;
	grid-row-end: span 1;
	background-color: rgba(133, 237, 247,0.85);
	height: 44%;
}
#ARCH-img-dh {
	grid-column-start: 2;
}
#ARCH-text-dt {
	grid-column-start: 1;
	grid-row-end: span 1;
	background-color: rgba(165, 255, 182,0.85);
	height: 44%;
}
#ARCH-img-dt {
	grid-column-start: 2;
}
#ARCH-text-mc {
	grid-column-start: 4;
	grid-row-end: span 1;
	background-color: rgba(255,0,0,0.85);
	height: 44%;
}
#ARCH-text-gr {
	grid-column-start: 2;
	grid-row-end: span 1;
	background-color: rgba(0, 140, 255,0.85);
	height: 44%;
}

/*ATMOSPHERE*/
#ATMO-text-intro {
	background-color: rgba(255,50,0,0.9);
	height: 116%;
}
#ATMO-img-1 {
	grid-row-end: span 3;
}
#ATMO-text-2 {
	background-color: rgba(255,50,0,0.9);
	height: 110%;
}
#ATMO-img-4 {
	grid-row-end: span 2;
}
#ATMO-text-3 {
	background-color: rgba(255,50,0,0.9);
}
.ATMO-img-end {
	grid-row-end: span 2;
}

/*BAKU*/
.g_album {
	box-sizing: border-box;
	width: 100%;
	margin: 0px;
	overflow: hidden;
	object-fit: cover;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}
.g_album-cover {
	height: 100%;
	margin: 0px;
	overflow: hidden;
	object-fit: cover;
	z-index: 1;
	position: absolute;
}
.g_album-cover:hover {
	opacity: 0;
}
.g_album-back {
	height: 100%;
	margin: 0px;
	overflow: hidden;
	object-fit: cover;
	z-index: 0;
	position: absolute;
}
#BAKU-text {
	grid-row-end: span 1;
	background-color: rgba(255,255,255,0.9);
	height: 80%;
}
.BAKU-album {
	grid-row-end: span 2;
}

/*BOWLMOR*/
#BOWLMOR-text-1 {
	grid-row-end: span 1;
	background-color: rgba(255,255,255,0.9);
}
#BOWLMOR-text-2 {
	grid-row-end: span 1;
	background-color: rgba(255,255,255,0.9);
	height: 80%;
}
/*CERAMICS*/
#CERA-text {
	grid-row-end: span 1;
	background-color: rgba(255,255,255,0.9);
}
#CERA-img-4 {
	grid-row-end: span 2;
}
#CERA-img-9 {
	width: 70%;
	margin-left: 30%;
}
#CERA-img-10 {
	width: 70%;
}
#CERA-img-11 {
	grid-column-start: 3;
	width: 70%;
}
#CERA-img-12 {
	grid-row-end: span 2;
}

/*FIGURE*/
#FIG-text-intro {
	grid-row-end: span 1;
	background-color: rgba(255,255,255,0.9);
}
#FIG-img-19 {
	grid-row-end: span 2;
}
#FIG-img-21 {
	grid-column-start: 1;
}
#FIG-text-2 {
	grid-row-end: span 2;
	background-color: rgba(255,255,255,0.9);
}
#FIG-img-23 {
	grid-row-end: span 2;
}

/*GRASSHOPPER*/
#GH-text-intro {
	grid-row-end: span 2;
	background-color: rgba(255,255,255,0.9);
	height: 65%;
}
#GH-img-2 {
	grid-row-end: span 2;
}
#GH-text-2 {
	margin-top: -1%;
	background-color: rgba(255,20,20,0.9);
	height: 10%;
}
#GH-img-5 {
	grid-row-end: span 2;
}
#GH-img-5 > img {
	height: 85%;
}
#GH-text-3 {
	background-color: rgba(200,20,180,0.9);
	height: 15%;
}
#GH-img-8 {
	grid-row-end: span 2;
}
#GH-img-8 > img {
	height: 90%
}
#GH-text-4 {
	background-color: rgba(64,224,208,0.9);
	height: 10%;
}
#GH-img-9 > img {
	float: right;
	width: auto;
}
#GH-img-10 > img {
	float: right;
	width: auto;
}
#GH-text-5 {
	grid-row-end: span 2;
	background-color: rgba(20,255,20,0.9);
	width: 50%;
	margin-left: -1vw;
}

/*LATTICE*/

#LATTICE-text {
	grid-row-end: span 1;
	background-color: rgba(255,255,255,0.9);
	height: 80%;
}
#LATTICE-pgrid {
	grid-row-end: span 6;

	display: grid;
	margin: 0;
	padding: 0;
	grid-gap: 1vmax;
	grid-template-columns: 1fr;
	grid-template-rows: 60vh;
	grid-auto-rows: 60vh;
	overflow: hidden;
}

/*MARSVILLE*/
#MARS-img-2 {
	grid-row-end: span 2;
}
#MARS-text-intro {
	grid-row-end: span 1;
	background-color: rgba(255,255,255,0.9);
	height: 80%;
}
.MARS-olympus {
	width: 50%;
	height: 100%;
	display: inline-block;
}
#MARS-text-2 {
	background-color: rgba(255,255,255,0.9);
	height: 20%;
}
#MARS-img-6 > img {
	height: 66%;
}
#MARS-img-7 {
	grid-row-start: 8;
	grid-row-end: span 2;
	grid-column-start: 1;
}
#MARS-img-7 > img {
	width: 93%;
	margin-left: 0%;
}
#MARS-img-8 {
	grid-row-start: 9;
	grid-row-end: span 2;
	grid-column-start: 2;
}
#MARS-img-8 > img {
	height: 89.1%;
	margin-top: 9%;
}

/*MIME*/

#MIME-text-intro {
	grid-row-end: span 2;
	background-color: rgba(0,0,0,0.9);
	color: gainsboro;
	text-align: center;
}
#MIME-pgrid {
	grid-row-end: span 4;

	display: grid;
	padding: 0;
	grid-gap: 1vw;
	background-color: rgba(50,50,50,0.7);
	grid-template-columns: repeat(5, 18.8vw);
	grid-template-rows: 18.8vw;
	grid-auto-rows: 18.8vw;
	overflow: hidden;
}
#MIME-text-2 {
	grid-row-end: span 1;
	background-color: rgba(0,0,0,0.9);
	color: gainsboro;
	text-align: center;
}
#MIME-vid-2 {
	grid-row-end: span 2;
}
#MIME-text-outro {
	grid-row-end: span 2;
	background-color: rgba(0,0,0,0.9);
	color: gainsboro;
	text-align: center;
}

/*MODULON*/
#MOD-text-intro {
	grid-row-end: span 2;
	background-color: rgba(255,255,255,0.9);
	height: 80%;
}
#MOD-text-quote {
	padding: 60px;
	margin-top: -40px;
	font-size: 1.2vmax;
}
.MOD-pix > img {
	width: 65%;
}

/*SCULPTCHA*/
#SCULPTCHA-text {
	grid-row-end: span 1;
	background-color: rgba(255,255,255,0.9);
}
#SCULPTCHA-image-last {
	grid-row-end: span 3;
}

/*SELF*/
#SELF-text {
	grid-row-end: span 3;
	background-color: rgba(255,255,255,0.9);
}

/*BELOW IS FOR MOBILE, DUH!!!!*/

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

body {
	font-size: 2.5vmax;
	margin-left: 1vw;
	margin-right: 1vw;
	background-size: 97%;
}

h1 {
	font-size: 4vmax;
	font-weight: lighter;
	margin-left: 15px;
}
.center_h1 {
	text-align: center;
	font-size: 6vmax;
}

.gallery {
	margin-top: 0;
	display: grid;
	width: 98vw;
	grid-template-columns: minmax(250px, 1fr);
	grid-template-rows: 40vh;
	grid-auto-rows: 40vh;
}

.g_item {
}

.g_item.span2 {
	grid-column-end: span 1;
}
.g_item.span3 {
	grid-column-end: span 1;
}
.g_item.span4 {
	grid-column-end: span 1;
}

.nameplate {
	display: inline-block;
	margin-top: 2.5vw;
	margin-left: 5vw;
	width: 90vw;
	height: 9vh;
}
#geiringer1 {
	width: 100%;
}
#back_arrow {
	display: none;
}

.image_label {
	padding: 0;
	height: 1.9vmax;
	margin-left: 0;
	font-size: 1.7vmax;
	position: relative;
	top: -3.2vmax;
	float: right;
}

.spacer1 {
	display: none;
}
.spacer2 {
	display: none;
	grid-row-end: span 1;
}
.spacer3 {
	display: none;
	grid-row-end: span 1;
}

.give2 {
	grid-row-end: span 2;
}
.give3 {
	grid-row-end: span 3;
}

.hide {
	display: none;
}



/*PAGE-SPECIFIC SECTION MOBILE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

/*ALCHEMY*/
#ALCH-text-intro {
	grid-row-end: span 3;
	background-color: rgba(255,0,0,0.9);
	height: 75%;
}
#ALCH-img-1 {
	grid-row-end: span 1;
	justify-content: center;
}
#ALCH-text-2 {
	grid-column-start: auto;
	background-color: rgba(255,255,255,0.9);
}
#ALCH-text-3 {
	grid-row-end: span 3;
	background-color: rgba(255,255,255,0.9);
	height: 80%;
}
#ALCH-text-4 {
	grid-row-end: span 2;
	background-color: rgba(255,255,255,0.9);
	height: 90%;
}
#ALCH-text-5 {
	grid-column-start: auto;
	grid-row-end: span 1;
	background-color: rgba(255,255,255,0.9);
	height: 75%;
}
#ALCH-img-6 {
	grid-column-start: auto;
	justify-content: center;
}

/*ARCH*/
#ARCH-text-intro {
	grid-row-end: span 2;
	background-color: rgba(255,255,255,0.9);
}
#ARCH-text-SAS {
	grid-row-end: span 1;
	background-color: rgba(150,255,10,0.93);
	height: 80%;
}
#ARCH-text-kub {
	grid-row-end: span 1;
	background-color: rgba(177,51,255,0.8);
	height: 75%;
}
#ARCH-text-dh {
	grid-column-start: auto;
	grid-row-end: span 1;
	background-color: rgba(133, 237, 247,0.85);
	height: 75%;
}
#ARCH-img-dh {
	grid-column-start: auto;
}
#ARCH-text-dt {
	grid-column-start: auto;
	grid-row-end: span 1;
	background-color: rgba(165, 255, 182,0.85);
	height: 75%;
}
#ARCH-img-dt {
	grid-column-start: auto;
}
#ARCH-text-mc {
	grid-column-start: auto;
	grid-row-end: span 1;
	background-color: rgba(255,0,0,0.85);
	height: 75%;
}
#ARCH-text-gr {
	grid-column-start: auto;
	grid-row-end: span 1;
	background-color: rgba(0, 140, 255,0.85);
	height: 75%;
}

/*ATMOSPHERE*/
#ATMO-text-intro {
	grid-row-end: span 2;
	background-color: rgba(255,50,0,0.9);
	height: 116%;
}
#ATMO-img-1 {
	grid-row-end: span 2;
}
#ATMO-text-2 {
	grid-row-end: span 4;
	background-color: rgba(255,50,0,0.9);
	height: 95%;
}
#ATMO-img-4 {
	grid-row-end: span 1;
}
#ATMO-text-3 {
	grid-row-end: span 2;
	background-color: rgba(255,50,0,0.9);
}
.ATMO-img-end {
	grid-row-end: span 1;
}

/*BAKU*/
.g_album {
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	margin: 0px;
	/*overflow: hidden;*/
	object-fit: scale-down;
	display: block;
}
/*NOTE: these should have
position: absolute to work
right but it was scaling them
wrong for some reason. need to
test on mobile to see if this
works as intended..*/
.g_album-cover {
	width: 100%;
	height: 100%;
	margin: 0px;
	/*overflow: hidden;*/
	object-fit: scale-down;
	z-index: 1;
	position: relative;
}
.g_album-cover:hover {
	opacity: 0;
}
.g_album-back {
	width: 100%;
	height: 100%;
	margin: 0px;
	/*overflow: hidden;*/
	object-fit: scale-down;
	z-index: 0;
	position: relative;
}
#BAKU-text {
	grid-row-end: span 3;
	background-color: rgba(255,255,255,0.9);
	height: 75%;
}
.BAKU-album {
	grid-row-end: span 2;
}

/*BOWLMOR*/
#BOWLMOR-text-1 {
	grid-row-end: span 2;
	background-color: rgba(255,255,255,0.9);
}
#BOWLMOR-text-2 {
	grid-row-end: span 3;
	background-color: rgba(255,255,255,0.9);
	height: 90%;
}

/*CERAMICS*/
#CERA-text {
	grid-row-end: span 2;
	background-color: rgba(255,255,255,0.9);
}
#CERA-img-4 {
	grid-row-end: span 1;
}
#CERA-img-9 {
	width: 100%;
	margin-left: 0%;
}
#CERA-img-10 {
	width: 100%;
}
#CERA-img-11 {
	grid-column-start: auto;
	width: 100%;
}
#CERA-img-12 {
	grid-row-end: span 1;
}

/*FIGURE*/
#FIG-text-intro {
	grid-row-end: span 2;
	background-color: rgba(255,255,255,0.9);
	height: 75%;
}
#FIG-img-21 {
	grid-column-start: 1;
}
#FIG-text-2 {
	grid-row-end: span 3;
	background-color: rgba(255,255,255,0.9);
}
#FIG-img-23 {
	grid-row-end: span 1;
}

/*GRASSHOPPER*/
#GH-text-intro {
	grid-row-end: span 3;
	background-color: rgba(255,255,255,0.9);
	height: 100%;
}
#GH-img-2 {
	grid-row-end: span 2;
}
#GH-img-2 > img {
	object-fit: scale-down;
}
#GH-text-2 {
	margin-top: -45%;
	background-color: rgba(255,20,20,0.9);
	height: 30%;
}
#GH-img-5 {
	grid-row-end: span 2;
}
#GH-img-5 > img {
	height: 40%;
}
#GH-text-3 {
	background-color: rgba(200,20,180,0.9);
	height: 60%;
}
#GH-img-8 {
	grid-row-end: span 2;
}
#GH-img-8 > img {
	height: 60%
}
#GH-text-4 {
	background-color: rgba(64,224,208,0.9);
	height: 30%;
}
#GH-img-9 > img {
	width: 100%;
}
#GH-img-10 > img {
	width: 100%;
}
#GH-text-5 {
	grid-row-end: span 1;
	background-color: rgba(20,255,20,0.9);
	width: 100%;
	margin-left: 0vw;
}

/*LATTICE*/
#LATTICE-text {
	grid-row-end: span 2;
	background-color: rgba(255,255,255,0.9);
	height: 100%;
}
#LATTICE-pgrid {
	grid-row-end: span 9;
}

/*MARSVILLE*/
#MARS-img-2 {
	grid-row-end: span 1;
}
#MARS-text-intro {
	grid-row-end: span 3;
	background-color: rgba(255,255,255,0.9);
	height: 80%;
}
.MARS-olympus {
	width: 50%;
	height: 100%;
	display: inline-block;
}
#MARS-text-2 {
	background-color: rgba(255,255,255,0.9);
	height: 90%;
}
#MARS-img-6 > img {
	display: none;
}
#MARS-img-7 {
	grid-row-start: auto;
	grid-row-end: span 1;
	grid-column-start: auto;
}
#MARS-img-7 > img {
	width: 100%;
}
#MARS-img-8 {
	grid-row-start: auto;
	grid-row-end: span 1;
	grid-column-start: auto;
}
#MARS-img-8 > img {
	height: 100%;
	margin-top: 0%;
}

/*MIME*/
#MIME-text-intro {
	grid-row-end: span 6;
	background-color: rgba(0,0,0,0.9);
	color: gainsboro;
	text-align: center;
}
#MIME-pgrid {
	grid-row-end: span 9;

	display: grid;
	padding: 0;
	grid-gap: 1vw;
	background-color: rgba(50,50,50,0.7);
	grid-template-columns: repeat(2, 48.5vw);
	grid-template-rows: 48.5vw;
	grid-auto-rows: 48.5vw;
	overflow: hidden;
}
#MIME-text-2 {
	grid-row-end: span 3;
	background-color: rgba(0,0,0,0.9);
	color: gainsboro;
	text-align: center;
}
#MIME-vid-2 {
	grid-row-end: span 1;
}
#MIME-text-outro {
	grid-row-end: span 8;
	background-color: rgba(0,0,0,0.9);
	color: gainsboro;
	text-align: center;
}

/*MODULON*/
#MOD-text-intro {
	grid-row-end: span 4;
	background-color: rgba(255,255,255,0.9);
	height: 90%;
}
#MOD-text-quote {
	padding: 60px;
	margin-top: -40px;
	font-size: 2.25vmax;
}
.MOD-pix > img {
	width: 100%;
	object-fit: scale-down;
}

/*SCULPTCHA*/
#SCULPTCHA-text {
	grid-row-end: span 2;
	height: 80%;
}
#SCULPTCHA-image-last {
	grid-row-end: span 1;
}

/*SELF*/
#SELF-text {
	grid-row-end: span 7;
}

}