/* Name: Aaron Robinson
   Course: ITWP 1050
   Assignment Info: This assignment is intended to showcase the student's findings about CSS styling discussed in chapters 8 and 9 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 {
	transform: scale(1.5, 1.5);
	font-family: myFirstFont;
	font-weight: 100;
	text-shadow: 2px 2px 0px black;
	letter-spacing: 1px;
	font-variant: small-caps;
	white-space: nowrap;
}

/* H2 element selector that skews the text and applies the other properties listed below */
h2 {
	transform: skew(-25deg, 0deg);
	font-family: myFirstFont;
	font-weight: 100;
	text-shadow: 2px 2px 0px black;
	white-space: nowrap;
}

/* H3 element selector that, in addition to the other listed properties, applies a transform shorthand property that adjusts the perspective and rotates the text based on its X value */
h3 {
	color: white;
	text-shadow: 2px 2px 0px black;
    background-image: linear-gradient(
	#2F95EA,
	transparent,
	#2F95EA
	);
	transform: perspective(400px)
			   rotateX(30deg)
			   scale(1.1);
}

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

/* Class selector that's used to rotate the image at the bottom of the page by 180 degrees */
.rotation {
	transform: rotateX(180deg);
}

/* Class selector that adds transition properties to the links in the page */
.transition {
	transition-property: background-color, transform;
	transition-duration: 400ms, 400ms;
	transition-delay: 0ms, 400ms;
}

/* Class selector that activates when a link is hovered over by the user */
.transition:hover {
	background: #2F95EA;
}