:root{
	--negro: #1a2733;
	--oscuro: #667380;
	--acento-oscuro: #689acc;
	--acento: #82c1ff;
	--suave: #cfe7ff;
	--off-blanco: #f5f6f7;
	--blanco: #ffffff;
	--head-list: #52a7bf;
}


/*sections*/
body{
	background-color: var(--off-blanco);
	font-family: Helvetica, Arial, sans-serif;
}

main{
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
}


img{
	margin: auto;
	display: block;
	border-radius: 145px;
	border: 10px solid var(--acento);
}

/*headers*/
h1{
	font-size: 42px;
	color: var(--oscuro);
	font-family: 'Quicksand', 'Helvetica', sans-serif;
}

h2{
	color: var(--oscuro);
	font-family: 'Quicksand', 'Helvetica', sans-serif;
}

h3{
	color: var(--acento);
	font-family: 'Quicksand', 'Helvetica', sans-serif;
	margin-block-end: 0.3em;
}
h4{
	color: var(--head-list);
	font-family: 'Quicksand', 'Helvetica', sans-serif;
	margin-block-end: 0.3em;
}

/*paragraph*/
p{
	line-height: 24px;
	margin-block-start: 0;
}


/*links*/
a{
	color: var(--acento);
	text-decoration: none;
}

a:hover{
	color: var(--acento-oscuro);
	text-decoration: underline;
}

a:active{
	color: var(--acento-oscuro);
	text-decoration: underline;
}

/*papers*/	
li.papers{
	padding: 0 0 15px 0;
	list-style-position: outside;
}

span{
	/*color: var(--acento-oscuro);*/
	font-weight: bold;
}


/*rows and columns*/

.row {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  justify-content: center;
  align-items: flex-end;
  align-content: center;
}

.column-foto{
	order: 1;
	flex-basis: 270px;
}

.column-tarjeta{
	order: 2;
	flex-basis: 400px;
}

/*navigation bar*/

.navigation {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  
  list-style: none;
  margin: 0; 
  background: var(--blanco);
}

/*ul.navigation{
	padding-inline-start: 150px;
}*/

.navigation a {
  display: block;
  padding: 1em;
}


.navigation a.focus{
	background: var(--acento);
  color: var(--blanco);
}



@media all and (max-width: 600px) {
  .navigation {
    flex-flow: column wrap;
    padding: 0;
  }
  .navigation a { 
    text-align: center; 
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255,0.3); 
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
  }
  .navigation li:last-of-type a {
    border-bottom: none;
  }
}