html {
	scroll-behavior: smooth;
	overflow-x: hidden;
	}
body {
	font-family: 'Cabin', sans-serif;
	color: #000;
	margin:0;
	padding:0;
	width: 100vw;

    text-align: left;
	background-image: url(images/beachSmall.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
	}
#notice{
	height:100vh;
	width:auto;
	font-size:5vh;
	vertical-align:center;
	background-color:yellow;
	z-index:100;
	padding:30vh 10vw;
	top:0;
	}

#header {
	z-index:-10;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:4rem;
	opacity:0.87;
	background-color:#000;
	}
#logo {
	position:absolute;
	left:50%;
	top:3vh;
	margin:3rem;
	width:10vw;
}
.menuContainer {
	z-index:1;
	position:fixed;
	width:100%;
	text-align:center;
	padding-top:2rem;
	margin:-1.4vw 0;
}
.menu {
	margin:1.1vw;
	color:white;
	text-decoration:none;
	font-size:1.4vw;
}
.menu:hover {
	color:yellow;
}
#separator {
	margin:-0.3vw;
	font-size:2.0vw;
}
#separator:hover {
	color:white;
}
.arrow {
	font-family:sans-serif;
	color:#fff;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 95%;
    left: 50%;
    text-align: center;
    margin: -25px 0px 0px -25px;
	font-size: 2rem;
	}
.arrow:hover {
	cursor:pointer;
    color:yellow;
	}
#contact {
	/* margin-top:-0.5%; //try to make top of box hidden again?
	border-style: solid;
    border-width: 2px;
	*/
	}
ul {
	margin:0;
	padding:0;
	position:absolute;
	left:0px;
	min-height: 100%;
	width:100%;
	list-style-type:none;
	font-size:4rem;
}
.blurb {
		border-radius:15px;
}
.roominateDiv ul{
	background-color:#000;
	top:100%;
	}
#roominateLogo {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image:url(images/roominate-fade-inverse.png);
}
.sonosDiv ul{
	background-color:rgb(0,176,170);
	top:200%;
	}
.homeProjDiv ul{
	background-color:#007399;

	background-attachment: fixed;
  background-size: cover;
  background-position: center center;
	top:300%;
	}
#homeProjImg {
	background-image:url(images/homePageThumb.JPG);
	}
	.archDiv ul{
	background-color:#401F68;
	top:400%;
}
#isbe0 {
	background-image:url(images/isbe-logo.jpg);
	top:40%;
	width:20%;
	height:10%;
	cursor:pointer;
}
#isbe1 {
	background-image:url(images/nu-logo.png);
	top:46%;
	left:52%;
	width:38%;
	height:10%;
	cursor:pointer;
}
.sourceCodeDiv ul{
	background-color:#8F0021;
	top:500%;
	}
#SourceCodeImg0 {
	background-image:url(images/source-code.jpg);
	left: 64%;
	width:30%;
	cursor:pointer;
	}
.fiveCreeksDiv ul{
	background-color:#526839;

	background-attachment: fixed;
  background-size: cover;
  background-position: center center;
	top:600%;
	}
#fiveCreeksImg0 {
	width:20%;
	left:70%;
	background-image:url(images/fiveCreeks1Thumb.jpg);
	}
#fiveCreeksImg1 {
	left:42%;
	background-image:url(images/fiveCreeks2Thumb.jpg);
	}
.STBDiv ul{
	background-color:#ED7417;
	top:700%;
	}
#StbImg0 {
	background-image:url(images/StbAd.jpg);
	left: 46%;
	width:30%;
	}
#StbImg1 {
	background-image:url(images/StbLogo.jpg);
	top:35%;
	left:51%;
	width:35%;
	height:35%;
	}
.contactPageDiv ul{
	background-color:white;
	background-image:url(https://images.pexels.com/photos/380330/pexels-photo-380330.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
	background-attachment: fixed;
    background-size: cover;
    background-position: center center;
	top:800%;
}
.contactPageDiv ul .blurb {
	margin-top:5vw;
	padding:2rem;
	padding-left:-4%;
	font-size:2.1vw;
	width:auto;
	background-color:#000;
	opacity:0.8;
}
.title {
	//try to scale height of li as percentage of window height, rather than width;
	padding-left:9%;
	margin:0;
	margin-top:4rem;
	width:91%;
	padding-bottom:2%;
	padding-top:3%;
	color:#000;
	background-color:#fff;

	}
	#homeProjBlurb {
		background-color:#0DA4D6;
		opacity:0.97;
		padding:2%;
		padding-bottom:2.5%;
		top:37%;
	}
#fiveBlurb {
	background-color:#02B838;

	opacity:0.95;
	padding:2%;
	padding-bottom:2.5%;
	top:35%;
}
@media (min-width:1880px) {
	#nametag {
	cursor:pointer;
    padding: 0px;
    position: absolute;
    width: 1000px;
    height: 200px;
    top: 48%;
    left: 50%;
    text-align: center;
    font-size: 3em;
    letter-spacing: 0.1em;
    margin: -100px 0px 0px -500px;
	}
#story {
	margin-top:-4rem;
	font-size:1.8rem;
	}
	.blurb {
		padding:2%;
		margin-left:-2%;
		position:absolute;
		padding-top:5.5rem;
		top:28%;
		left:10%;
		width:34%;
		height:auto;
		color:#fff;
		font-size:2.3rem;
		}
	#roomText {
		font-size:2.4rem;
		top:20vh;
	}
}
@media (min-width:1580px) {
	#nametag {
	cursor:pointer;
    padding: 0px;
    position: absolute;
    width: 1000px;
    height: 200px;
    top: 48%;
    left: 50%;
    text-align: center;
    font-size: 2.8em;
    letter-spacing: 0.1em;
    margin: -100px 0px 0px -500px;
	}
#story {
	margin-top:-3.6rem;
	font-size:1.6rem;
	}
	.blurb {
		padding:2%;
		margin-left:-2%;
		position:absolute;
		padding-top:5.5rem;
		top:28%;
		left:10%;
		width:34%;
		height:auto;
		color:#fff;
		font-size:2rem;
		}
	#roomText {
		font-size:2rem;
		top:35vh;
	}
}
@media (min-width:1500px) {
	#nametag {
	cursor:pointer;
    padding: 0px;
    position: absolute;
    width: 1000px;
    height: 200px;
    top: 48%;
    left: 50%;
    text-align: center;
    font-size: 2.6em;
    letter-spacing: 0.1em;
    margin: -100px 0px 0px -500px;
	}
#story {
	margin-top:-3rem;
	font-size:1.4rem;
	}
	.blurb {
		padding:2%;
		margin-left:-2%;
		position:absolute;
		padding-top:5.5rem;
		top:28%;
		left:10%;
		width:34%;
		height:auto;
		color:#fff;
		font-size:1.8rem;
		}
	#roomText {
		font-size:1.6rem;
		top:36vh;
	}
}
@media (min-width:1000px) {
	#nametag {
	cursor:pointer;
    padding: 0px;
    position: absolute;
    width: 1000px;
    height: 200px;
    top: 48%;
    left: 50%;
    text-align: center;
    font-size: 2em;
    letter-spacing: 0.1em;
    margin: -100px 0px 0px -500px;
	}
#story {
	margin-top:-2.6rem;
	font-size:1.0rem;
	}
	.blurb {
		padding:2%;
		margin-left:-2%;
		position:absolute;
		padding-top:5.5rem;
		top:28%;
		left:10%;
		width:34%;
		height:auto;
		color:#fff;
		font-size:1.2rem;
		}
	#roomText {
		font-size:1.2rem;
		top:24vh;
	}
	.hide-large {
		display: none;
	}
}
@media (max-width:1000px) {
	#nametag {
	cursor:pointer;
    padding: 0px;
    position: absolute;
    width: 1000px;
    height: 200px;
    top: 48%;
    left: 50%;
    text-align: center;
    font-size: 2em;
    letter-spacing: 0.1em;
    margin: -100px 0px 0px -500px;
	}
	#header {
		height: 6rem;
	}
	#separator {
		margin:-0.3vw;
		font-size:1.3rem;
	}
	.title {
		//try to scale height of li as percentage of window height, rather than width;
		margin-top:6rem;
		}
	.menuContainer {
		z-index:1;
		position:fixed;
		width:100%;
		text-align:center;
		padding-top:2rem;
		margin:-1.4rem 0;
	}
	.menu {
		margin:1.1vw;
		color:white;
		text-decoration:none;
		line-height: 2rem;
		font-size:1.3rem;
	}
	.image {
		display:none;
	}
	#story {
		margin-top:-2.6rem;
		font-size:0.8rem;
	}
	.blurb {
		position:absolute;
		padding-top:5.5rem;
		top:28%;
		left:10%;
		width:70%;
		height:auto;
		color:#fff;
		font-size:1.3rem;
		}
	#roomText {
		font-size:1.3rem;
		top:22vh;
	}

}
.toProject {
	border-radius:3px;
	margin-left:3px;
	padding:1%;
	border-style: solid;
    border-width: 2px;
	color:white;
	text-decoration:none;
	margin-bottom:4rem;
	}
.toProject:hover {
	border-width: 3px;
	margin-left:2px;
	text-decoration:bolder;
	}
.image {
	margin-top:2%;
	margin-right:10%;
	position:absolute;
	top:32%;
	left:50%;
	width:40%;
	height:50%;
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	}
@media (max-width:650px) {
	.hide-large {
		display: normal;
	}
	#header {
		height: 5rem;
	}
	.title {
		//try to scale height of li as percentage of window height, rather than width;
		margin-top:5rem;
		}
	.menu {
		margin-top:2rem;
		margin:1.3vw;
		color:white;
		text-decoration:none;
		line-height: 1.6rem;
		font-size:1rem;
	}
	#nametag {
	cursor:pointer;
    padding: 0px;
    position: absolute;
    width: 1000px;
    height: 200px;
    top: 48%;
    left: 50%;
    text-align: center;
	line-height:3rem;
    font-size: 1rem;
    letter-spacing: 0.15rem;
    margin: -100px 0px 0px -500px;
	}

		.blurb {
			width:80%;

		}
		#roomText {
		top:17vh;
		font-size:1rem;
		}
	}