/*CSS Document used for homework4 assignment
Author: Joe Licavoli
Course: ITWP1050*/

/* This sets the background of the website*/
body {
	/* Sets the background to the value of the url*/
	background-image: url(table.jpg);
	/* Sets the background to reapeat and size to 100%*/
	background-repeat: repeat;
	background-size: 100%;
	/* Centers all text in the body tag*/
	text-align: center;

}

/* This is the p selector*/
p {
	/* Changes the font, size and color of the text*/
	font-family: "Lucida Console", "Courier New", monospace;
	font-size: 18px;
	color: lightgreen;
	/* This sets the background color to black */
	background-color: black;
	/* This creates the border & radius */
	border:white groove;
	border-radius: 10px;
}
/* ID selector for text1*/
#text1 {
	/* This skews the paragraph to the left*/
	transform: skew(2deg,-2deg);
}
/* ID selector for text2*/
#text2 {
	/* This skews the paragraph to the right*/
	transform: skew(2deg,2deg);
}
/* ID selector for text3*/
#text3 {
	/* This skews the paragraph to the left*/
	transform: skew(2deg,-2deg);
}
/* ID selector for text4*/
#text4 {
	/* This skews the paragraph to the right*/
	transform: skew(2deg,2deg);
}

/*This is the class selector for image1 & image 2*/
.image1, .image2 {
	/* Sets the background image for image1 & image2*/
	background-image: url(water.jpg);

}
/* This is the class selector for image3*/
.image3 {
	/* Rotates and scales the image*/
	transform: rotate(45deg) scale(0.7);
}
/* This is the class selector for image4 */
.image4 {
	/* Shorthand tranform rotates, changes scale and*/
	transform: rotate(25deg) scale(0.8) translate(-45px, 0px);
}
/* The class selector for bass*/
.bass {
	/* This sets the height and width*/
	width: 150px;
  	height: 150px;
  	/* This changes how fast the image becomes*/
  	transition: height 2s, width 4s;
  	/* This makes the image invisble*/
  	opacity: 1;
}

/* This is the pseudo code for bass hover*/
.bass:hover {
	/* Sets width and height*/
	width: 330px;
  	height: 250px;
  	/* This makes the image visible*/
  	opacity: 1;
  	/* This tells what axis the image changes */
  	transition-property: width, height;
  	/* This sets the duration and delay for the image*/
  	transition-duration: 1s;
  	transition-delay: 1s;
}

/* This is the selector for img */
img {
	/* This sets the border color, size, and style*/ 
	border:green solid 8px;
	/* This sets the border radius */
	border-radius: 10px;
	/* This changes the width & height of img */
	width: 25%;
	height: auto;
	/* Sets scale for the image*/
	scale: 0.8;

}

/* This is the selector for h1 headers*/
h1 {
	/* Sets the font size, alignment, and color*/
	font-size: 35px;
	text-align: center;
	color: lightgreen;
	font-family: "Lucida Console", "Courier New", monospace;
}

/* This is the selector for h2 headers*/
h2 {
	/* Sets the font color and size */
	color: lightgray;
	font-size: 25px;
}
/* This is footer selector*/
footer {
	/* This centers the text*/
	text-align: center;
}


/* This is the pseudo class for the hyperlink */
a:hover {
	/* This sets the hyperlink to red and font size when hovering over it*/
	color: red;
	font-size: 18px;
}

/* This is the pseudo class for the hyperlink */
a.red::after {
	/* Inserts the word external into the hyperlink */
	content: "(External!)";
	/* Turns the word red*/
	color: red;
}