/* Selecting an HTML element -> element name */
body {
  background: rgb(34,193,195);
  background: linear-gradient(120deg, rgba(34,193,195,1) 4%, rgba(34,193,195,1) 22%, rgba(48,195,34,1) 47%, rgba(195,34,99,1) 78%, rgba(141,190,122,1) 100%);
  height: 2000px;
}
img {
	width: 100%;
  max-width: 250px;
}


/* Selecting an ID -> #id-name */
#header {
	background-color: blue;
  padding: 1em;
  /*
  	border-radius: 50%;
  	width: 200px;
  	height: 200px;
  */
  text-align: center;
}
#red {
	background-color: red;
}
#blue {
	background-color: #2E3191;
}
#link {
	background-color: white;
  color: black;
}
#sense {
	color: yellow;
  font-weight: bold;
  text-decoration: underline wavy;
}
#parent-div {
	width: 400px;
  height: 400px;
  background-color: orange;
  position: relative;
}
#child-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 
	Pseudo-classes have a specific order
	LVHA - link, visited, hover, active
*/
#spidey:link {
	color: #2E3191;
}
#spidey:visited {
	color: red;
}
#spidey:hover {
	color: pink;
}
#spidey:active {
	color: green;
}

/* Selecting a Class -> .class-name */
.box {
	border: 2px solid red;
  padding: 0.5em;
  margin: 1em;
  color: white;
}
.text-center {
	text-align: justify;
}
.shadows {
	/* 
  	text shadows use 4 values
  	horizontal offset, vertical offset, blur (optional), color (default black)
  */
  text-shadow: 2px 2px 5px;
  
}
.shadows:hover {
	text-shadow: 2px 2px 3px, 4px 4px 3px pink;
  font-size: 2em;
  color: red;
}
.shadows {
	box-shadow: 4px 4px 3px black;
}