/*CSS Document used for homework5 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;
	color: lightgreen;
}

/* This is the p selector*/
p {
	/* Changes the font and color of the text*/
	font-family: "Lucida Console", "Courier New", monospace;
	/* 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: clamp(48px, 4.8vw, 64px);
	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;
}

/* This changes the font size of the body text if the screen resolution 
is 800px or less*/
@media only screen and (max-width: 800px) {
  .H1 {font-size: 20px;}
}

/* This changes the font size of the body text if the screen resolution
is 800px or less*/
@media only screen and (max-width: 800px) {
  .body {
  	font-size: 12px;
  }
}

/* This changes the color of background if the screen resolution
is 600px or less*/
@media only screen and (max-width: 600px) {
  .body {
  	background-image: none;
  	background-color: darkolivegreen;
  }
}

/* This sets the background size and repeat behavior for .image1 and .image2 */
@media screen and (max-width: 600px) {
  .image1, .image2 {
    background-size: contain;
    background-repeat: repeat; 
    height: 310px;
    width: auto;
  }

   /* This adjusts the size of .image3, .image4, and .bass images on smaller screens */
@media screen and (max-width: 600px) {
  .image3, .image4, .bass {
    height: 150px;
    width: 200px;
  }
  /* This changes the layout for .container on smaller screens (single column layout) */
.container {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 10px;
}
 /* This sets up a 3 by 2 grid layout for larger screens */
@media screen and (min-width: 600px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}
/* This sets the size of images inside the .container */
.container img {
    width: 100%;
    height: auto;
    object-fit: cover;
}