@font-face {
	font-family:  "AmericanTypewriter";
	src: url('../data/fonts/AmericanTypewriter.ttc') format('truetype');
}

* {
	margin:0px; 
	padding:0px;
	font-family:"AmericanTypewriter", Monaco, monospace, Times New Roman, Helvetica;
}

body {
	background-color: lightsteelblue; 

}
	/* Title section*/ 

header{
	border:20px solid aliceblue; 
}
	
h1 {
	color: black;
	background-color: lightgrey;
	position: sticky;
	top: 0;
	transition-duration: 100ms;
  	transition-property:color, background-color;
  	transition-timing-function: ease-in;
}

h1:hover {
	color: white;
	background-color: lightsteelblue;
}

h2 {
	color: white;
	background-color: lightsteelblue;
	transition-duration: 100ms;
  	transition-property:color, background-color;
  	transition-timing-function: ease-in;
}

h2:hover{
	color:black;
	background-color: lightgrey;

}

h1, h2 {
	font-weight: bolder;
}

header {
	text-align:center;
	margin-top:2px;
	
}
	/* Main section*/

	section, h1, h2, h3, h4, article p, ul {
		margin: 15px;
		padding:20px;
	}

	h1, h2, h3, h4 {
		text-align:center;
	}

	article#intro, article#con, {
	border:20px solid lightsteelblue; 
	}

	img {
		margin: 5px;
		padding:10px;
	}

	img {
  	transition-duration: 3000ms;
  	transition-property: transform;
  	transition-timing-function: ease-in;
  	transition-delay: 500ms;
	}

	img:hover {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
          transform: rotate(360deg);
	}

	figcaption {
			margin:5px;
			padding: 10px;
			text-align: right;
	}

	section, section#citation {
		background-color: lightgrey;
	}

	article { 
		background-color: aliceblue;
		margin-top:100px;
		margin-bottom:100px;
		padding:15px;
	}	

	article .images, article .content {
		width:49%;
		display: inline-block;
		vertical-align:top;
	}

	article img {
		width: 100%;
	}

	article#intro *, article#con * {
		width:90%;
	}

	article#intro h3, h4{

		font-size: 30px;
		font-weight:bold;
	} 

	ul {
		list-style-type: square;
		background-color: white;
		text-align: center;
		transition-duration: 100ms;
	  	transition-property: background-color;
	  	transition-timing-function: ease-in;
	}

	ul:hover {
		background-color: aliceblue;
	}

	/* video */

	iframe {
		height:45vw;
		width:80vw;
	}

	/* Intro title *//* Challenges title*/ /* Solution title*/ /* Citation title*/


	article h3, h4{
		color: white;
		font-size: 40px;
		font-weight:bold;
		background-color: lightsteelblue;
	  	transition-duration: 200ms;
	  	transition-property: color, background-color;
	  	transition-timing-function: ease-in;
		}

	h3:hover {
         color: black;
         background-color:aliceblue;
	}


	h4:hover {
         color: black;
         background-color:aliceblue;
	}


	/* Conclustion*/
	article#con {
		text-align: center;
	}

	
/* Citation content*/

section.citation {
	width: 75%;
	height: 100px;
	overflow: scroll;
	position: absolute;
	margin: auto;
   	left: 0px;
   	right: 0px;
}

article.citation {
	text-align: center;
	margin:20px;
	padding: 20px;
}

ul.citation {
	list-style-type:circle;
}

a {
	color: grey;
	transition-duration: 100ms;
  	transition-property:color;
  	transition-timing-function: ease-in;
}

a:hover {
	color:black;
}