/*This is the stylesheet for my portfolio site.*/

/* Margin magic to make the logo fit into the navbar properly */
.logo {
  margin-top: -10px;
}

body {
  /*background-color: #222222;*/

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#134c4c+0,238c8c+50,2db2b2+100 
  Gradient created on Colorzilla, as the link above indicates*/
  background: #134c4c; /* Old browsers */
  background: -moz-linear-gradient(top,  #134c4c 0%, #238c8c 50%, #2db2b2 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #134c4c 0%,#238c8c 50%,#2db2b2 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #134c4c 0%,#238c8c 50%,#2db2b2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#134c4c', endColorstr='#2db2b2',GradientType=0 ); /* IE6-9 */

  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  font-size: 1.5em; 
  
  padding-top: 2em;
  position: relative;
}

h1, h2, h3, h4 {
  font-family: 'Shadows Into Light Two', cursive;
  text-align: center;
}

/* More margin magic plus padding magic for scroll-spy and page navigation to work better */
section {
  margin-bottom: 4em;
  padding-top: 2em;
}

a:link {
  color: #C1F0C1;
  text-decoration: none;
}

a:hover{
  font-weight: bold;
}

a:visited {
  color: #C1F0C1;
}

#home {
  /*background-color: #134C4C;*/
  color: #ffffff;
}

hgroup {
  padding-bottom: 1em;
}

/* Animation for the scroll arrow. No longer in use, but keeping it for reference */
@keyframes arrow {
  0%, 100% {-ms-transform: translate(0px, 0px); /* IE 9 */
        -webkit-transform: translate(0px, 0px); /* Safari */
        transform: translate(0px, 0px);}
  50% {-ms-transform: translate(0px, 10px); /* IE 9 */
      -webkit-transform: translate(0px, 10px); /* Safari */
      transform: translate(0px, 10px);}
}

h1.arrow {
  font-weight: bolder;
  animation-name: arrow;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

#works {
  color: #ffffff;
}

#works a{
  color: #ffffff;
}

#works a:visted {
  color: #000000;
}

figure.front {
  padding: 10px;
}

figure:hover {
  transform: rotate(-10deg);
}

figcaption{
  margin-top: 10px;
}

.sticky1 {
  position: sticky;
  top: -1;
}

.self {
  max-height: 100vh;
  max-width: 100vh;
}

/* Project pages styling */

#project {
  color: #ffffff;
}

#project section {
  margin-bottom: 1em;
}

#project h1 {
  margin-top: 0px;

}

#project p {
  padding: 1em;
  margin: auto;
  max-width: 900px;
}

#project p, ul {
  text-align: left;
}

#project figcaption {
  font-size: 0.85em;
  text-align: center;
  margin-bottom: 0px;
  padding-left: 1em;
  padding-right: 1em;
}

/* To ensure embedded videos are a reasonable size... */
#project .video{
  max-height: 100vh;
  max-width: 100vh;
  margin: auto;
}

#project .pdf {
  max-height: 80vh;
  max-width: 80vw;
  margin: auto;
}

/* Navigation for within the Works section. */
#project-nav {
  text-align: center;
  width: 100%;
  margin: auto;
  padding: 1em;

  background-color: #222222;
}

#project-nav a{
  color: #9D9D9D;
}

#project-nav a:hover{
  color: #ffffff;
}

.lft-arrow {
  padding-right: 1em;

  color: #9D9D9D;
}

.rgt-arrow {
  padding-left: 1em;
}