/* to import Google Font */
 @import url('https://fonts.googleapis.com/css?family=Playfair+Display');

/*	Jin Ning Huang, 1622041
	CSE 154, Section AP
	Creative Project 2, 4/9/18 
	This file is to links from index.html and cp02.html file and for to decorates and arranges 
	certain objects from the website. */ 

/* ***NOTE: Everythings below this comment is refering to index.html; unless mentions otherwise */

/* trying to make this line break visible */
hr {
	color: black;
}

/* website background color of sky bule-ish */ 
body {
	background-color: #97EBF2;
}

/* to make the caption center along with the image */
#center {
	text-align: center;
}

/* making this specific line yellow */
#yellow-background {
	background-color: yellow;
	width: 700px;
}

/* making the title more cooler and bigger */
h1 {
	color: white;
	border-style: solid;
	width: 500px;
	font-size: 500%;
	background-image: url("https://i.imgur.com/xc5E2QX.gif");
	background-repeat: repeat;
	background-size: 270px;
	background-attachment: fixed; 
	opacity: 0.9;
}

/* making underline for the intro header underneath the title */
h2 {
	text-decoration: underline;
}

/* moving the image caption to the center */
h5 {
	text-align: center;
} 

/* to make the image centers and adjusting the size */
img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	border-radius: 8px;
}

/* to colorize the color of the link in certain action from user */
/* unvisited link */
a:link {
	color: blue;
}
/* visited */
a:visited {
	color: #af41f4;
}
/* mouse over link */
a:hover {
	color: red;
}

/* ***NOTE: everything below this comment is refering to cp02.html */

/* to adjust the font for website title and intro header */
#learningtitle, #learningintro {
	font-family: 'Playfair Display', serif;
}

/* to arrange the position of the title */
#learningtitle {
	margin:auto;
	padding: 17px;
} 

/* to have the pic of Tetriminos on the background */
#background {
	background-image: url(
		https://i2.wp.com/letsplayvideogames.com/wp-content/uploads/2016/12/o-TETRIS-facebook.jpg?resize=1080%2C675);
	background-repeat: repeat;
}

/* to make all certain tags to have textbox */
.textbox {
	background-color: white;
	border: 2px solid black;
	opacity: 0.9;
}

/* to make only this section tag to have certain size */
section.textbox {
	width: 500px;
	height: 400px;
}

/* to make the right column of images have line up in column */
.image {
	flex-direction: column;
}

/* to move the right and left columns to center and have flex ablilty */
main.flex-container {
	display: flex;
	text-align: center;
}

/* making this last section stay closer to the far left */
footer {
	float:left;
}