/* Name: Aaron Robinson
   Course: ITWP 1050
   Assignment Info: This assignment is intended to showcase the student's findings about CSS styling discussed in the first two chapters of the textbook. */

/* This element selector styles most, if not all of the text like this within the main body */   
body {
  margin: 25px;
  font-family: thatOtherFont, Arial, sans-serif;
  font-size: 1em;
  text-align: center;
  background-color: black;
  line-height: 1.9rem;
}

/* A universal selector that changes (almost) all of the text to the color specified below */
* {
	color: #2F95EA;
}

/* This selector adjusts the top and bottom margins for the footer at the bottom of the page */
footer {
	margin-top: 50px;
	margin-bottom: 50px;
}

/* This selector gives each image a rounded blue border */
img {
	border: 1px solid DodgerBlue;
	border-radius: 20px;
}

/* This pseudo-element selector adds (external) in the specified color after the text for any external link in the page */
.external-link::after {
	content: ' (external)';
	color: White;
}

/* This element selector styles all links to include a background gradient and white text. */
a {
	color: white;
	background-image: linear-gradient(
	#2F95EA,
	transparent,
	#2F95EA
	);
}

/* This class selector is similar to the element selector above it, but instead styles the h1 element on the page. */
.h1_gradient {
	color: white;
	background-image: linear-gradient(
	#2F95EA,
	transparent,
	#2F95EA
	);
}

/* References a web font that's used for the main body of text. */
@font-face {
  font-family: myFirstFont;
  src: url(HandelGo.woff);
}

/* Same as above, but for the h1 element at the beginning of the page. */
@font-face {
	font-family: thatOtherFont;
	src :url(InterstateBold.woff);
}

/* Element selector for h1 that greatly changes the appearance of the font. */
h1 {
	font-family: myFirstFont;
	font-weight: 100;
	text-shadow: 2px 2px 0px black;
	letter-spacing: 1px;
	font-variant: small-caps;
	white-space: nowrap;
}

/* ID selector that changes the final image seen at the bottom of the page. */
#image-styling {
	filter: saturate(90%) brightness(1.1) sepia(30%);
}