/*
selector->declaration
selector {
	property: value;
}
*/
:root {
	--blue: #1e90ff;
}
body {
	background-color: var(--blue);
}
h1 {
	color: var(--blue);
  font-size: 2.5em;
  font-family: 'Roboto Mono', monospace;
  font-style: italic;
  text-decoration: line-through blue wavy 5px;
  background-color: yellow;
  margin: 1em 2em 3em 4em; 
  padding: 1em 2em 3em 4em;
  border: 5px solid black;
  border-image: linear-gradient(#f6b73c, #4d9f0c) 30;
  /* 
  	margin = margin-top, margin-right, margin-bottom, margin-left
  	1 value -> all four properties
  	2 values -> 1st = top/bottom, 2nd = left/right
  	3 values -> 1st = top, 2nd = left/right, 3rd = bottom
  	4 values -> 1st = top, 2nd = right, 3rd = bottom, 4th = left
  */
  /* 
  	padding = padding-top, padding-right, padding-bottom, padding-left
  	padding follows same logic as margin in regards to multiple values
  */
}
a:link {
	color: white;
}
a:visited {
	font-size: 1.5em;
  color: magenta;
}
a:before {
	content: "🐒";
}
a:after {
	content: "🐊";
}

/* 
	targeting an ID - #ID-Name 
	targeting a class - .class-name
*/
#firsth2 {
	font-size: 1em;
  font-weight: normal;
}
#fakeHeading:hover {
	font-size: 2em;
  font-weight: 600;
  color: purple;
}
#download {
	background-color: blue;
  color: white;
  font-size: 1.2em;
  border: 0;
  border-radius: 0.5em;
  padding: 0.3em;
  text-decoration: none;
}
#download:hover {
	background-color: #00007A;
  cursor: pointer;
}
#download:active {
	background-color: #0064FF;
}


.heading {
	color: green;
  text-decoration: overline magenta dashed;
  background-color: orange;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
.box {
	border: 1px solid black;
  margin-bottom: 2em;
  padding: 1em;
  background-color: #d8b3c8;
}
.red {
	color: red;
  background-color: yellow;
}
.text-green {
	color: green;
}
.text-underline {
	text-decoration: underline;
}
.boxCenter {
	margin: 0 auto;
  background-color: red;
}

ol {
	list-style: none;
  counter-reset: num;
}
ol li {
	counter-increment: num;
}
ol li::before {
	content: counter(num) "🐒. ";
  font-weight: bold;
  color: green;
}
#gradient {
	height: 200px;
  margin-bottom: 2em;
  background-size: 100% 100%;
	border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1;
  border-width: 10px;
  border-style: solid;
  background-color: white;
  text-align: center;
  padding: 0.5em;
  /*
  	backgrouond property
  	two types - linear and radial
  	linear-gradiant(direction, color1, color2, color3, etc.);
  	radial-gradiant(direction, color1, color2, color3, etc.);
  */
}
#text-shadow {
	text-shadow: 1px 10px 11px red;
  /* x-offset, y-offset, color, blur */
}
.box-shadow {
	box-shadow: 0px 0px 10px black;
}
#bradius {
	border: 1px solid black;
  padding: 0.5em;
  border-radius: 5% 10% 15% 20%;
  background-color: blue;
  color: white;
  /*
  	one value -> all corners
  	two values -> upper left/lower right, upper right/lower left
  	three values -> upper left, upper right/lower left, lower right
  	four values -> upper left, upper right, lower right, lower left
  */
}
/*
	Pseudoclasses:
	propertyName::pseudoclassName {}
	:link -> directly style a link that has yet to be clicked on
	:hover -> applies CSS when element is hovered	
	:visited -> styles a link that already has been clicked on
	:active -> applies styles when an element is "activated" 
	LVHA -> recommended order of pseudoclasses (link, visited, hover, active)
	:before -> sets content before an element
	:after -> sets content after an element
*/
.img-responsive {
	width: 100%;
  max-width: 350px;
}
audio {
	background-color: yellow;
}

/*
	The Position Property
	Five values: static (default), relative, fixed, absolute, sticky
*/
#parent-box {
	position: relative;
  height: 600px;
}
.static-box {
	position: static;
  background-color: blue;
  /*
  	Positioning properties have no effect on 'static'
  */
  top: 10px;
  left: 20px;
}
.relative-box {
	position: relative;
  background-color: red;
  /*
  	Positions relative to parent div
  	Stays within flow of document
  */
  top: 15px;
  left: 10px;
}
.absolute-box {
	position: absolute;
  background-color: cyan;
  /*
  	Positions relative to parent div
  	Outside natural flow of document
  */
  top: 1em;
  left: 20em;
}
.fixed-box {
	position: fixed;
  background-color: green;
  /* 
  	Positions relative to html element
  	Outside natural flow of document
  */  
  left: 10em;
}
.sticky-box {
  position: sticky;
	background-color: magenta;
  /*
  	Starts out 'relative', becomes 'fixed'
  */
  top: 1px;
}
#right-alignment {
	text-align: right;
}
#center-alignment {
	text-align: center;
}
#justify-alignment {
	text-align: justify;
}
#vert-parent {
  height: 200px;
  position: relative;
}
#vert-child {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid black;
  transform: translate(-50%, -50%);
}
a:focus {
	background-color: red;
}

.clearfix:after {
	content: "";
  clear: both;
  display: table;
}
#box1 {
	background-color: #f00; /* ff0000 */
}
#box2 {
	background-color: #0f0; /* 00ff00 */
}
#box3 {
	background-color: #00f; /* 0000ff */
}
.smallBox {
	width: 100px;  
  padding: 0.5em;
  float: left;
  margin: 0.5em;
}
.doubleBackground {
	background: url("https://projects.codecraftworks.com/web/IWolUHo6JvP5lKqBZuvp/assets/CC_Crew.png"), linear-gradient(to bottom, rgb(255, 0, 0, 0.3), rgb(0,255,255,0.3));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-clip: content-box;
}
.gradBox {
	background: linear-gradient(11deg, rgba(173,255,185,0.5466561624649859) 0%, rgba(170,28,4,1) 0%, rgba(245,255,0,1) 100%);
  background-clip: text;
  color: transparent;
}
.overflowExample {
  padding: 0.5em;
  margin-bottom: 0.5em;
}
.textElement {
	width: 200px;
  height: 200px;
  border: 1px solid blue;
}
#overVis {
	overflow: visible;
}
#overHide {
	overflow: hidden;
}
#overAuto {
	overflow: auto;
}
#overScroll {
	overflow: scroll;
}
/* overflow = overflow-x and overflow-y combined */