/************************
 *** Various Fudging
 ************************/

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

.main-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

section.section:last-child {
  padding: 24px;
}

footer.footer {
  width: 100%;
  padding-top: 30px;
  padding-bottom: 30px;
  margin-top: auto;
  background-color: white;
}

.compact-level-nav {
  max-width: 40rem;
  margin: 1rem auto;
  margin-top: 0px;
}

table {
    table-layout: fixed;
}

a {
  color: #0097ff;
}

.title, .subtitle, .content {
  color: #555;
}

.animated-slow {
  animation-duration: 2s;
}

/************************
 *** Image Mods
 ************************/

figure.image-circle {
    height: 250px;
    width: 250px;
    overflow: hidden;
    border-radius: 50%;
}

img.drew {
    max-width: none;
    height: 100% !important;
    width: auto !important;
    margin-left: -70px;
}

.avatar-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/************************
 *** Tilt.js / Paralax Helpers
 ************************/

.parallax {
  transform-style: preserve-3d;
  transform: perspective(1000px);
}

.parallax-child {
  transform: translateZ(25px);
}

/************************
 *** Project Cards
 ************************/

.content.project {
  color: white;
}

.content.project hr {
  margin-top: 6px;
  margin-bottom: 12px;
}

.content.project h1,
.content.project h2,
.content.project h3,
.content.project h4 {
  margin-bottom: 0px;
  color: white;
}

.gradient1 {
  background-color: #08AEEA;
  background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
}

.gradient2 {
  background-color: #FFE53B;
  background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
}

.gradient3 {
  background-color: #FF3CAC;
  background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
}

.gradient4 {
  background-color: #FA8BFF;
  background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
}

.gradient5 {
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}

.gradient6 {
  background-color: #8BC6EC;
  background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
}

/************************
 *** Blog
 ************************/

.blog-post {
  margin-left: auto;
  margin-right: auto;
  max-width: 680px;
}