RobertHeaton.github.io/4.css

body {
	background: #ffffff;
	background-attachment: fixed;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	font-family: sans-serif;
}

html{
	scroll-behavior: smooth;
}

p{
	margin-left:10px;
}
p.project{
	margin-left: 0px;
	margin-top: 5px;
}

/*classic highlight with website theme*/
a.pan{
	color: #0077ff;
	text-decoration: underline;
	cursor: pointer;
}
a.pan:hover{
	color:#000000;
}

/*pointer only, no other changes*/
a.pointerOnly, .pointerOnly:hover,.pointerOnly:focus{
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

/*For the top banner menu buttons*/
a.btn{
  transition: 0.1s all linear;
	text-decoration: none;
	margin: 15px;
	background-color: #ffffff;
	border: 2px solid #ffffff;
	color:#ffffff;
  border-radius: 15px;
	scroll-behavior: smooth;
}
a.btn:hover, .btn:focus {
	/*box-shadow: 0px 0px 0px 2px #ffffff;*/
	/*box-shadow: 6px 0px #0077ff;*/
	border: 2px solid #0077ff;
	color:#0077ff;
  border-radius: 15px;
  text-decoration: none;
}

/*For the top banner menu buttons*/
a.smallMenuBtn{
  transition: 0.1s all linear;
	text-decoration: none;
	margin: 15px 30px 0px 0px;
	background-color: #f0f0f0;
	color:#ffffff;
  border-radius: 15px;
	scroll-behavior: smooth;
}
a.smallMenuBtn:hover, .smallMenuBtn:focus {
	box-shadow: 0px 0px 0px 2px #0077ff;
	background-color: #ffffff;
	color:#0077ff;
  border-radius: 15px;
  text-decoration: none;
}

h3.arrow{
	color:inherit;
}
h3.hidden{
	color:#ffffff;
}

.spacer{
	margin-top:10px;
	height:7px;
}

#circuit{
	width:100%;
	height:100vh;
	background-color: #333;
	background-image:url(resources/imgs/circuitBanner.jpg);
	background-repeat:no-repeat;
	background-size:cover;
}
#circuitSmallBanner{
	width:100%;
	height:70px;
	padding-top: 10px;
	background-color: #333;
	background-image:url(resources/imgs/circuitBanner.jpg);
	background-repeat:no-repeat;
	background-size:cover;
}
#bttn{
	width:90vw;
	max-width: 986px;
	height: 200px;
	padding-top: 30vh;
	margin: auto;
	margin-bottom:15px;
	border-radius:5px;
}
#pageTitle{
	width: 90vw;
	margin: auto;
	display:flex;
	flex-wrap: nowrap;
	max-width: 986px;
}
#aboutMe{
	background-color:#ffffff;
	padding-top:20px;
	padding-bottom:20px;
}
#projects{
	background-color: #ffffff;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 0px;
	margin-bottom: 0px;
}
#memoriam{
	margin-top: 20px;
	padding-top:20px;
	padding-bottom:20px;
	background-color: #333;
	background-image:url(resources/imgs/poppy.jpg);
	background-repeat:no-repeat;
	background-size:cover;
}
#contactInfo{
	padding-top:20px;
	padding-bottom:20px;
	background-color:#333;
	background-image:url(resources/imgs/unionBanner.jpg);
	background-repeat:no-repeat;
	background-size:cover;
}

div.terminator{
	width:90vw;
	max-width: 986px;
	padding-top:1px;
	background-color:#f0f0f0;
	border-color:#ffffff;
	border:3px solid;
	border-radius:5px;
	margin:auto;
}

div.titleMenuWrapper{
	width:90vw;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: space-between;
	max-width: 986px;
	margin:auto;
	justify-content:center;
}

div.smallMenuWrapper{
	width:90vw;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: space-around;
	max-width: 986px;
	margin: auto;
	justify-content: left;
}

div.landing-bttn{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
  border-radius: 15px;
  padding: 5px 20px;
  margin: 0px;
	max-width: 200px;
	font-weight:500;
	font-size:35px;
	text-align: left;
	cursor: pointer;
}

div{
	display:block;
}

div.spacing{
	border-top: 2px solid #000000;
	padding-top: 15px;
	margin:auto;
	margin-top:30px;
	width:90%;
}

h1{
	color:#000000;
	border-radius: 5px;
	background-color:#ffffff;
	margin-left:10px;
	margin-top:10px;
	margin-bottom:10px;
	font-weight:700;
	font-size:130px;
	text-align: center;
}

h2{
	color:#333;
	background-color:#ffffff;
	border-radius:5px;
	margin-left:10px;
	margin-top:10px;
	margin-bottom:10px;
	font-weight:700;
	font-size:40px;
	text-align: center;
}

h3{
	color: #0077ff;
	margin-top:0;
	margin-bottom:0px;
	font-weight:400;
	font-size:35px;
	text-align: center;
}

h3.project{
	color: #0077ff;
	margin-top:0;
	margin-bottom:0px;
	font-weight:400;
	font-size:30px;
	text-align: left;
	margin-right: 10px;
}

h4{
	color:#000000;
	margin: 10px 0px 0px 0px;
	padding-left: 10px;
	padding-right: 10px;
	font-weight:700;
	font-size:35px;
	text-align: left;
	background-color: #ffffff;
	border-radius:5px;
}
b.title2{
	font-weight:700;
	color:#0077ff;
	font-size:35px;
}

/*not used*/
hr.intro{
	background-color:#000000;
	position:relative;
	top:30px;
	height:1px;
	clear: both;

	margin-left:10px;
	margin-right:10px;
	margin-top:30px;
	margin-bottom:30px;
}

.introductary_text{
	margin-left:10px;
	margin-right:10px;
	margin-bottom:33px;
	margin-top: 10px;
	color:#000000;
}

.highlight{
	cursor:pointer;
	transition: 0.1s all linear;
}

.highlight:hover, .highlight:focus{
	box-shadow: 0px 0px 2px 2px #0077ff;
}

div.pageText{
	width:90vw;
	max-width: 986px;
	padding-top:1px;
	background:#f0f0f0;
	box-shadow: 0px 0px 1px 1px #e4e4e4;
	border-radius:5px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: space-between;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left:auto;
	margin-right:auto;
}

a.project, .project:focus, .project:visited{
	text-decoration: none;
	cursor: pointer;
	scroll-behavior: smooth;
	color: inherit;
	max-width: 970px;
}

div.projectImage{
	margin: 10px;
	width:90vw;
	max-width: 970px;
	padding-left: 10px;

}
div.projectImage img{
	max-width: 200px;
	max-height: 200px;
	margin-top: 3px;
	margin-left: 0px;
	margin-right: 10px;
	padding-right: 10px;
	border-right: 1px solid #000000;
	overflow: hidden;
	float:left;
}

b.title{
	font-weight:700;
	color:#0077ff;
	font-size:130px;
}