/* Inspired by: Zoe Marschner */
:root {
  --accent_color: #0096EA;
  --callout_color: 255, 0, 0;
  --normal_color: black;
  --background_color: rgb(24, 170, 70);
}

h1 {
  color: var(--normal_color);
	font-weight: 700;
	font-family: 'Source Code Pro', monospace;
	font-size: 1.5em;
}

*, strong {
  color: var(--normal_color)
}

.sidebar-about h1 {
	font-weight: 700;
	font-family: 'Source Code Pro', monospace;
	font-size: 1.5em;
}


h2 {
	font-weight: 600;
	font-family: 'Source Code Pro', monospace;
	margin-top: 30px;
	margin-bottom: 10px;
}

h3 {
  color: var(--normal_color);
  font-family: 'Source Code Pro', monospace;
}

p {
	font-family: 'Crimson Text', sans-serif;
	font-size: 17px;
	line-height: 120%;
}

i {
	font-family: 'Crimson Text', sans-serif;
	font-size: 20px;
	line-height: 120%;
}

.highlighted {
	background-color: var(--accent_color) 
}

.content .ext_link a {
	color: var(--normal_color);
	text-decoration: none;
}

/* link formatting */
.ext_link > a {
	border-bottom: 1px solid var(--accent_color);

	background-image: linear-gradient(to right, transparent 50%, var(--accent_color) 50%);
	background-size: 210%; 
}

.ext_link > a:hover  {
	background-position: -95%;
	transition: background-position .5s;
}

.hide {
  display: none;
}

.abstract {
  background-color: var(--background_color);
  font-family: 'Source Code Pro', monospace;
  /* border-radius: 200px; */
  background-size: cover;
}

.abstract:hover + .hide {
  display: block;
  /* color: red; */
}


/* h3{
  padding: 0px;
  margin: 0px;
} */

.research-title {
  font-size: 20px;
  line-height: 90%;
  font-family: 'Source Code Pro', monospace;
  padding-bottom: 10px; }

.iconDetails {
 margin-left:2%;
  float:left; 
  width:auto;
  height:auto;
  max-height:200px;
  max-width:200px; 
  padding: 1.5%;
} 

/* TODO add js */
/* zoom animation */
@-webkit-keyframes zoom {
  from {-webkit-transform:scale(1)}
  to {-webkit-transform:scale(2)}
}

@keyframes zoom {
  from {transform:scale(0.4)}
  to {transform:scale(1)}
}

@-webkit-keyframes zoom-out {
  from {transform:scale(1)}
  to {transform:scale(0)}
}
@keyframes zoom-out {
  from {transform:scale(1)}
  to {transform:scale(0)}
}

.iconDetails:hover {
  /*-webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;*/
  transform: scale(2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}


.container2 {
  /*width:270px;*/
  height:auto;
  padding:1%;
  float:left;
}

/* .row {
  display: flex;
}

.column1 {
  flex: 30%;
  padding: 10px;
}
.column2 {
  flex: 70%;
  padding: 10px;
} */

/* research formatting */
.research-image {
  /* background-image: url("../img/project_images/sos_hex.png"); */
  height: 10rem;
  width: 10rem;
  background-size: cover;
  border-radius: 15px;
  flex-shrink: 0;
  margin-right: 1em; 
  /* background-color: #e6e7e7; */
}

.research-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding-bottom: 30px; }

.links {
  padding-top: 10px; }
  
.content .links a {
  margin-right: 7px;
  font-family: 'Source Code Pro', monospace;
  background-color: var(--accent_color);
  color: white;
  border-radius: 50px;
  padding: 2px 9px; }

/* cube formatting */
#cube {
	stroke: black;
	vertical-align: baseline;
	margin-right: 20px;
	cursor: pointer;
}