/* ---- General ---- */

* {
  margin: 0;
  padding: 0;
}

html, body {
    min-height: 100vh;
    display: flex;
    font-family: 'IBM Plex Sans', sans-serif;
    color: #CE9E22;
}

body {
    background: linear-gradient(300deg,#234635,#0C2418,#081810);
    background-size: 180% 180%;
    animation: gradient-animation 18s ease infinite;
}

/* ---- Font styling ---- */

footer a, main nav a {
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0.06rem;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 207, 85, 0.75);
}

footer a:hover, main nav a:hover {
  color: rgba(255, 207, 85, 1);
}

#home h1 {
  font-size: 156px;
  line-height: 140px;
  letter-spacing: -0.3rem;
  font-weight: 300;
}

#home p, #project h1 {
  font-size: 48px;
  line-height: 60px;
  font-weight: 200;
}

#project section article#intro p {
  font-size: 24px;
  line-height: 36px;
  font-weight: 200;
}

#home p a, #project section article p a, #project section article ol li a, #project section article ul li a {
  font-weight: 400;
  color: #FFEF77;
}

nav a[title]:hover:after {
  font-weight: 300;
  text-transform: none;
}

nav a#active {
  opacity: 0.25;
  color: rgba(255, 207, 85, 0.6);
}

#project section article h2 {
  font-size: 24px;
  line-height: 36px;
  font-weight: 400;
}

#project section article p, #project section article ol, #project section article ul {
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  letter-spacing: 0.01rem;
}

#project section article ol li, #project section article ul li {
  margin: 8px 0 0 24px;
}

/* ---- Everything else ---- */

footer p {
  float: right;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.01rem;
  color: #234635;
}

#home {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 0 120px;
}

#home h1 {
  margin-bottom: 68px;
}

main {
  animation: fadeIn 2s;
}

#project section article p + h2 {
  margin-top: 30px;
}

nav {
  position: fixed;
  float: left;
  width: 240px;
  height: 100%;
  top: 80px;
}

nav#centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: static;
  top: 0;
}

nav a {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 207, 85, 0.15);
}

nav a:hover {
  background-color: rgba(8, 24, 16, 0.4);
  border-bottom: 1px solid rgba(255, 207, 85, 0.5);
}

nav a[title]:hover:after {
  content: attr(title);
  position: absolute;
  width: 260px;
  left: 230px;
  padding: 10px;
  background: #081810;
  border-radius: 4px;
  animation: fadeIn 0.4s;
}

nav a#active {
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 207, 85, 0.20);
}

nav a#active[title]:hover:after {
  display: none;
}

#project {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-left: 280px;
  padding: 20px 40px;
  background: #081810;
}

#project h1 {
  margin: 24px 0;
}

#project section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  padding: 12px 0 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(35, 70, 53, 0.5);
}

#project section article {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

#project section article p {
  margin-top: 8px;
}

#project section article#intro p {
  margin: 0 0 24px;
}

#project section img {
  margin: 0 20px 20px 0;
  border-radius: 2px;
}

/* ---- Background animation ---- */

@keyframes gradient-animation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

  /* ---- Break points ---- */

@media only screen and (max-width: 900px) {
    #home {
      padding: 0;
    }
    #home h1 {
      font-size: 7em;
      line-height: 1em;
      margin: 90px 30px 30px;
    }
    #home p {
      font-size: 1.5em;
      line-height: 1.5em;
      margin: 0 30px 60px;
    }
    nav, nav#centered {
      display: none;
    }
    #project {
      margin: 0;
    }
  }