html{
  height: 100%;
}

hr {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.nameplate {
	font-size: 4.5rem;
	color: #434343;
}

.fixed-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  background-color: white;
}

.button-bar {
	display: inline-block;
	vertical-align: center;
	text-align: center;
	margin: 0 auto;
	padding: 0.5em;
	width: 100%;
	background-color: white;
}

.button-bar .button {
	margin: 7.5px;
}

.active {
  background-color: #434343;
  color: white;
}

.page {
	bottom: 1rem;
/*	padding-top: 1em;
*/	position: static;
	text-align: center;
/*	top: 0;
*/	width: 100%;
	display: inline-block;
	padding-top: 85px;
	padding-bottom: 20px;
}

.line {
	border: 1px solid #E1E1E1;
}

/*Home Page CSS-------------------------------------*/
.home {
	background: white;
	color: #555;
}

.home-title {
	background-color: white;
	opacity: 0.875;
	height: 17rem;
	margin-top: 3rem;
}

.home p {
	margin-bottom: 0;
}

#home-name {
	font-size: 5rem;
	letter-spacing: 1rem;
	margin: -1rem 0 0 -4rem;
	width: 100%;
}

#home-line span{
	border: 1px solid;
	width: 47rem;
	margin-left: -19rem;
	margin-top: -1.5rem;
	position: absolute;
	display: inline;
}

#home-wd {
	position: fixed;
	display: inline-block;
	margin-left: -19rem;
	font-size: 3.25rem;
	margin-bottom: 0;
	margin-top: -2rem;
	letter-spacing: 2rem;
	text-align: left;
	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
	width: 100%;
}

.home-wrapper {
	width: 100%;
/*	position: relative;
*/	margin: 2.5rem auto;
}

.home-sentence {
	margin-left: -21rem;
	text-align: center;
}

.home-sentence span {
	white-space: nowrap;

}

.home-words {
	display: inline;
	text-indent: 1rem;
}

.home-words span {
	position: absolute;
	opacity: 0;
	overflow: hidden;
	width: 100vw;
	text-align: left;
}

.home-bkgrd {
	width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
	background: url(../images/homebkgd01.jpg) no-repeat center;
	background-size: 0% cover;
/*	width: 100%;
	height: 100px;*/

}

/*Work Page CSS-------------------------------------*/
.work {
	background: white;
	color: #555;
}

.image-container img {
	max-height: 200px;
	margin: 2rem auto 1rem;
}

.image-container img:hover {
	opacity: 0.5;
}

#lmpGif {
  width: 28rem;
  margin-top: 3.5rem;
}

#bugsGif {
	width: 28rem;
	margin-top: 3rem;
}

#kidsGif {
	width: 28rem;
	margin-top: 3rem;
}

#pixelGif {
    width: 26.5rem;
    margin: 3.1rem auto 1.5rem;
}

#playtimeGif {
	width: 27rem;
	margin: 3rem auto 1.5rem;
}

#laptop {
	position: absolute;
	left: 0;
	right: 0;
	cursor: pointer
}

.work-description {
	min-width: 35rem;
	max-width: 50rem;
	margin: 1rem auto 3rem;
}

.work-description p {
	text-align: left;
	margin-bottom: 0.5rem;
}

#title {
	font-size: 3rem;
	text-align: center;
}

.work-description img {
	width: 24px;
	height: 24px;
	margin: 0 2.5px;
}

.work-description img:hover {
	opacity: 0.5;
}

.work-line {
    border: 1px solid;
    min-width: 35rem;
    max-width: 50rem;
    margin: 1rem auto;
}

#line1 {
	border-color: #00565F;
}

#line2 {
	border-color: #EB8634;
}

#line3 {
	border-color: #0C9129;
}

/*About Page CSS-------------------------------------*/
.about {
	background: white;
	color: #555;
}

#profile-pic {
    width: 185px;
    height: 185px;
    border-radius: 200px;
    border: 5px solid #EB8634;
    display: inline-block;
    margin: 0 0 1em;
}

#profile-pic img {
	width: 175px;
	border-radius: 200px;
	border: 5px solid #409995;
}

.header-p {
	font-size: 2.5rem;
	margin-bottom: 0;
}

#about-info {
	margin: 0 auto;
	text-align: left;
	width: 90%;
}

.contact-bar {
	text-align: center;
	margin: 0 auto 2.5rem;
}

.contact-bar img {
	width: 32px;
	height: 32px;
	margin: 0 15px;
}

.contact-bar img:hover {
	opacity: 0.5;
}

.about-table {
	font-size: 1.5rem;
}

#last-row td {
	border-bottom: 0;
}

#copyright {
	font-size: 1.25rem;
}


/*Footer-------------------------------------*/
#footer {
	position: fixed;
	bottom: 0;
	height: 45px;
	/* display: inline-block; */
	/* margin: 0 auto; */
	/* width: 100%; */
	left: 0;
	right: 0;
	background-color: white;
}

#footer p{
	margin-top: 1rem;
	margin-left: 2.5rem;
	margin-bottom: 0;
}

/*Drop Shadow Effect-------------------------------------*/
.shadow-shallow {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}

.shadow-deep {
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2)
}

/*Adjusts margin top of views when windo is collapsed-------------------------------------*/
@media only screen and (max-width: 475px) {
    .page {
        padding-top: 138px;
    }
}

/** { border: 1px solid red; }*/