html {
	height: 100%;
	width: 100%;
}

/* ============ 1. HEAD ============ */

/* VIEWPORT controls page dimensions and scaling: <meta name="viewport" content="width=device-width, initial-scale=1.0">*/

/* CSS RESET sets all HTML elements to baseline value: <link rel="stylesheet" href="styles/normalize.css">*/

/* ============ 2. BODY ============ */

/* CSS SHORTHAND PROPERTIES -------- */

/* Padding values: all | top-bottom, right-left | top, left-right, bottom | top, right, bottom, left */

/* Font: style (italic) | weight | size/line-height | family */

/* Color: no color names | hexadecimal pairs (#000000) become 3 digits (#000)*/

/* Units: no need to specify for 0 */

body {
	font-family: 'Open Sans', sans-serif;
	/* color: #666; */
	color: #a1a1a1; /* Dark Mode */
	background-color: #121212; /* Dark Mode */
/*. overflow-x: hidden;*/
}

/* ============ 3. MENU ============ */

/* NAVIGATION BAR ------------------ */

/* A list of links, no bullets, remove browser default settings */
header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* background-color: #3D3F40; */
  background-color: #1f1f1f; /* Dark Mode */
/* Fixed top navigation bar */
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1; /* sets positioned element on top of everything else */
}

/* Block elements float next to each other */
header li {
  float: right;
}

header li a {
  display: block;
  color: white;
  text-align: center;
  vertical-align: center;
  text-decoration: none;
  font-weight: 400;
}

header li a.name {
  float: left;
  font-size: 1.1em;
  padding: 12px 6px; /* positions Andrés Lucero */
}

header li a.name span {
  color: #ff6ba6; /* Dark Mode */
}

header li a.menu {
  font-size: 0.8em;
  padding: 15px 8px 16px 8px; /* top-bottom, right-left */
}

/* Change link color on hover */
header li a.menu:hover {
  background-color: #333;
}

/*header li a.menu:hover:not(.active) {
  background-color: #444;
}*/

.active {
	/* background-color: #FF0066; */
	background-color: #FF579A; /* Dark Mode */
	color: #000000; /* Dark Mode */
	font-size: 0.8em;
    padding: 15px 8px 16px 8px;
}

/* =========== 4. CONTENT =========== */

/* ARTICLE ------------------------- */

article {
		margin: 0 auto;
		padding: 0 1em;
		max-width: 500px;
        /*font-size: 0.8em; */
	    font-size: 80%;
	    font-weight: 400;
		line-height: 1.4em; 
}

/* HEADINGS ------------------------- */

/* Headings */
h1 {
	/* color: #FF0066;*/ /* Normal Mode */
	color: #FF4D94;/* Dark Mode: Saturated */
	font-size: 1.8em;
	font-weight: 600;
	margin: 1em 0 1.5em 0;
	text-align: center;
	padding: 65px 0px 5px 0px; /* top, right, botoom, left */
}

article h1 span.span1 {
	 color:#fff;
	 font-size: 80%;
}

article h1 span.span2 {
	 color:#A1A1A1;
	 font-size: 80%;
}

h2 {
	/* color: #000; */
	color: #FFF; /* Dark Mode */
	font-weight: 400;
	font-size: 1.8em;
	line-height: 1.4em;
	padding: 0.5em 0 0 0; /* top, right, botoom, left */
	/* Font: style (italic) | weight | size/line-height | family */
}

/* FIGURES ------------------------- */

/* Figure */
figure {
	overflow-x: hidden;/* prevents main image from creating extra space horizontally */
	margin: 0;
	border: 0;
	padding: 0 0 1.5em 0;
}

figure img {
	display: block;
	margin: 0 auto; /* auto prevents cropping on mobile */
    width: 500px;
	max-width: 100%;
	height: auto;
}

/* YouTube */
/*iframe {
	overflow: hidden;
	width: 500px;
	max-width: 100%;
	min-height: 281px;
	height: auto;
}*/

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
	margin-bottom: 2.5em;
	z-index: 0; /* prevents positioned element from floating on top of menu */
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

/* Caption */
figcaption {
	font-style: italic;
	font-size: 0.7em;
	font-weight: 300;
	padding: 0.4em 0;
}

/* Links */

article a:link {
	/* color: #FF0066;*/ /* Normal Mode */
	color: #FF6BA6;/* Dark Mode: Desaturated */
	text-decoration: none;
}
article a:visited {
	/* color: #FF0066;*/ /* Normal Mode */
	color: #FF6BA6;/* Dark Mode: Desaturated */
	text-decoration: underline;
}
article a:hover {
	/* color: #FF0066;*/ /* Normal Mode */
	color: #FF6BA6;/* Dark Mode: Desaturated */
	text-decoration: underline;
}
article a:active {
	/* color: #FF0066;*/ /* Normal Mode */
	color: #FF6BA6;/* Dark Mode: Desaturated */
	text-decoration: underline;
}

ul.publications {
	list-style-type: none;
	margin: 0;
	padding: 0 1em;
}

/* GALLERY --------------------------- */

.container {
    margin: auto;
	display: grid;
	grid-gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 2fr);
	text-align: center;	
    padding: 1em 0;
}

.container > div > a > img {
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* PUBLICATIONS ---------------------- */

ul.publications li {
		margin: 0 0 .5em 0;
		padding-left: 28px;
	}

	ul.publications li a:first-child {
		margin-left: -36px;
	}

	ul.publications li a:first-child img {
		margin-bottom: -18px;
	}

/* =========== 5. FOOTER =========== */

footer {
	clear: both;
	line-height: 3em;
	font-size: 0.6em;
	text-align: center;
	font-weight: 300;
    color: #777;
	padding: 4em 0 0 0;
}

	/* Grayscale, it messes up with the top menu */
/*footer img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  /*filter: grayscale(100%);
}*?