@font-face{
	font-family: ACoupe;
	src:url(webfonts/ACoupe-8.woff);
}
@font-face{
	font-family: Poppins;
}
#masthead{
	display: flex;
	margin-right: auto;
	margin-left: auto;
	padding-top: 50px;
}
.subhead{
	display: block;
	text-align: center;
	font-weight: 400;
}
/*saw linear gradients on the motorcycle page I used as a visual reference. Inspected element and found it in the css.*/
#quizbutton{
	background-image: linear-gradient(350deg, rgba(66, 66, 77, 1.0), rgba(102, 61, 166, 1.0));
	width: 140px;
	height: auto;
	font-weight: 500;
	font-size: 14pt;
	padding: 10px;
	padding-bottom: px;
	text-align: center;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 70px;
	display: block;
	border-radius: 60px;
}
#finder{
	background-image: linear-gradient(10deg, rgba(82, 242, 124, 1.0), #FFFFFF);
	color: #000000;
	font-weight: 500;
	text-align: center;
	display: block;
	margin: auto;
	width: 55%;
	height: auto;
	padding: 15px;
	border-radius: 25px;
	margin-top: -80px;
	font-size: 14pt;
}
#image-scaling{
	height: auto;
	width: 35px;
	margin-bottom: -11px;
	margin-top: -30px;
	margin-left: 250px;
}
.resource-screen{
	background-color: rgba(102, 61, 166, 1.0);
	/*background-image: url("images/metalsheet.png");*/
	padding-top: 50px;
	display: block;
}
.resourcecontainer{
	padding-top: 80px;
	margin-left: 150px;
	margin-right: 150px;
	margin-bottom: 100px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 200px 200px 200px;
	grid-gap: 10px;	
	grid-column-start: 1;
	grid-column-end: 3;
}
.cardblock{
	display: flex;
	margin: 10px;
	font-family: Poppins;
	font-size: 20pt;
	text-decoration: none;
	background-image: linear-gradient(10deg, rgba(66, 66, 77, 1.0), rgba(102, 61, 166, 1.0));
	border-radius: 45px;
	padding: 50px;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.cardblock1{
	grid-column-start: 1;
	grid-column-end: span 2;
	display: flex;
	margin: 10px;
	font-family: Poppins;
	font-size: 24pt;
	text-decoration: none;
	background-image: linear-gradient(10deg, rgba(66, 66, 77, 1.0), rgba(102, 61, 166, 1.0));
	border-radius: 45px;
	padding: 50px;
	align-items: center;
	justify-content: center;
}

#cardtitle{
	font-family: Poppins;
	font-weight: 700;
	font-size: 32pt;
	color: #FFFFFF;
	grid-column-start: 1;
	grid-column-end: 3;
	text-align: center;
}
article{
	font-family: Poppins;
}
body{
	color: #FFFFFF;
	background-color: rgba(0, 0, 0, 1.0);
	font-family: Poppins;
	font-weight: 600;
}
/*#photo-back{
	background-image: url("images/scissorarray.jpeg");
	background-size: cover;
}*/
h6{
	font-weight: 400;
	font-size: 12pt;
}
a{
	color: white;
	text-decoration: none;
}
#select-title{
	color: white;
	font-size: 22pt;
	font-family: Poppins;
	font-weight: 600;
	word-wrap: break-word;
	padding-right: 20px;
	padding-top: 5px;
}
#selection-box{
	padding: 35px;
	display:flex;
	margin-top: 60px;
	margin-bottom:10px;
	justify-content:center;
}
#submit-button{
	width: 88px;
	height: 40px;
	background-color: rgba(102, 61, 166, 1.0);
	color: white;
	font-family: Poppins;
	font-weight: 600;
	border-radius: 10px;
}
#material{
	margin-right: 15px;
	font-family: Poppins;
	font-size: 14pt;
	background-color: rgba(66, 66, 77, 1.0);
	width: 205px;
	height: 55px;
	border-radius: 60px;
	color: white;
	text-align: center;
}
#toolres{
	margin: auto;
	width: 800px;
	padding-top: px;
	padding-bottom: 10px;
	text-align: center;
	font-weight: 600;
	font-size: 24pt;
}

footer{
	background-color: #000000;
	align-items: center;
	display: block;
}
.footer-text{
	margin-right: 15px;
	font-weight:400;
	font-size: 10pt;
}
.footer-text{
	text-align: right;
	margin-top: -35px;	
}
/* Quiz page*/
#quiz-header{
	font-size: 26pt;
	text-align: center;
	font-weight: 500;
	margin-top: 15px;
	padding: 50px;
}
#quiz-grid{
	background-color: #000000;
}
#material-quiz-page{
	margin-top: 20px;
	display: grid;
	grid-template-rows: 200px 200px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 15px;
	margin-left: 120px;
	margin-right: 130px;
	text-align: center;	
}

#material-select{
	background-image: linear-gradient(190deg, rgba(66, 66, 77, 1.0), #000000);
	display: flex;
	font-weight: 500;
	font-size: 24pt;
	padding: 10px;
	border-radius: 12px;
	justify-content: center;
	align-items: center;
}
#material-info{
	margin-top: 150px;
	margin-bottom: px;
}
/* this styling for the collapible section is derived from w3 schools, as cited in the html document*/
.collapsible {
  background-color: rgba(66, 66, 77, 1.0);
  color: #FFFFFF;
  cursor: pointer;
  padding: 20px;
  width: 100%;
  border-style: solid;
  text-align: left;
  outline: none;
  font-size: 16pt;
  margin: 5px;
}
.active, .collapsible:hover {
  background-color: rgba(82, 242, 124, 0.75);
}
.content {
  padding: 0 20px;
  display: none;
  overflow: hidden;
  background-color: rgba(102, 61, 166, 1.0);
}