:root{
	--base-color: #ffffff;
	--text-color: #000000;
	-primary-color: #ffc06e;
	--secondary-color: #8D8DFF;
	--color-1: #F9F6F3;
	--color-2: #F3F7F9;
	--color-3: #F6F3F9;
}
/*  *: selects all elements */
/*padding makes sure space between element and border is 0*/
/*margin makes sure space between this element and other elements is 0*/
/*boxsizing borderbox include padding and border withing specified width and height*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/*styles html page*/
/*color sets text color to --text-color*/
html {
	color: var(--text-color);
}
/*styles body tag*/
/*padding sets spaccing between border and element to be 1em*/
/*set background-color to --base-color*/
body {
	padding: 1em;
	background-color: var(--base-color);
}


/*styles navagation anchor*/
/*text decoration: add underline when hovered over*/
nav a:hover{
	text-decoration: underline;
}
/*styles main background color*/
/*sets background 100 pixels from the top*/
/*takes up entire width of screen*/
/*height set to 500pixels*/
/*background color is blackish*/
.background{
	margin-top: 100px;
	width: 100%;
	height: 500px;
	background-color: #262626;
/*styles contact us and paragraph below*/
/*text is centered on screen*/
/*font weight or boldness set to 500*/
/*text color set to white*/
.contact-us{
	text-align: center;
	font-weight: 500;
	color: white;
}
/*styles the contact us paragraph*/
/*font size set to 20pixels*/
.contact-us p{
	font-size: 20px;
}
/*styles contact us heading*/
/*space between element and border set to 100px*/
/*font size set to 60 pixels*/
h1 {
	padding-top: 100px;
	font-size: 60px;
}
/*styles get in touch heading*/
/*margin-bottom set to 40 pixels*/
h2{
	margin-bottom: 40px;
}
/*styles contact information paragraphs*/
/*margin top set to 20 pixels*/
.contact-information p{
	margin-top: 20px;
}
/*styles the contact information*/
/*padding left set to 20 pixels*/
/*color of text set to white*/
/*padding top set to 20 pixels*/
/*width of background set to 400pixels*/
/*height of background set to 300pixels*/
/*margin set to auto (centers background)*/
/*margin-top set to 100pixels*/
/*border radius curves edges of background color*/
/*text align sets text to left side of background*/
.contact-information{
	padding-left: 20px;
	color: white;
	padding-top: 20px;
	width: 40%;
	height: 300px;
	margin: auto;
	margin-top: 100px;
	border-radius: 10px;
	background-color: gray;
	text-align: left;
}
/*media all creates media query that applies styles to all media types and the styles work when screen is smaller than 768px*/
@media all and (max-width: 768px){
	/*styles the background for contact information*/
	/*set width to be 80% of screen size*/
	.contact-information{
		width: 80%;
	}

}