* {
  box-sizing: border-box;
}

body {
  margin: 1em 0 0 0;

  font-family: 'Montserrat', sans-serif;

  color: #B9B9B9;
  background-color: #000000;
}

.container {
  display: flex;
  flex-flow: column;
  
  margin: 0 auto;

  max-width: 1280px;
}

/* === HEADER === */

header {
  display: flex;
  justify-content: space-evenly;
  align-self: center;
  position: fixed;
  z-index: 1;

  width: 100%;
  
  font-size: 1.5em;
  font-weight: 500;
  text-transform: uppercase;
}

a {
  text-decoration: none;

  color: #B9B9B9;
}

.work-number {
  margin: 0 2em 0 1em;
}

.about {
  margin: 0 2em 0 0;
}

.work-list {
  margin: 0 2em 0 0;
  padding: 0;
}

.selected {
  text-decoration: line-through;

  color: #CC2626;
}

li {
  display: block;
  
  text-decoration: none;
}

.indent {
  text-indent: 1em;
}

.work-design {
  margin-top: 2em;
  padding: 0;
  
  font-size: .85em;
  font-weight: 400;
  text-transform: none;
}

.logo {
  margin-right: 1em;

  max-width: 75px;
}

/* === CONTENT === */

main {
  margin: 0 10em;
}

section {
  display: flex;
  flex-flow: column;
}

.project-title {
  align-self: flex-start;

  margin: 2em 0 0 0;
  
  font-size: 12em;
  line-height: .8em;
}

.project-title-margin_weight {
  margin-top: .5em;

  font-weight: 600;
}

.color-fork {
  color: #79C000;
}

.color-ultralight {
  color: #0000FF;
}

.color-fendi {
  color: #F8B948;
}

.color-oakley {
  color: #FFFFFF;
}

.color-swiss {
  color: #FF2800;
}

.color-about {
  color: #CC2626;
}

.info-link {
  font-weight: 600;
  text-transform: uppercase;
}

span {
  font-weight: 500;

  color: #CC2626;
}

.project-description {
  align-self: center;

  max-width: 45em;

  margin: 6.5em 0 7em 0em;

  font-size: 1.3em;
  text-indent: 1em;
}

.subtitle {
  font-weight: 600;

  color: #B9B9B9;
}

.project-presentation {
  display: flex;
  justify-content: flex-end;

  margin: 7.5em 0 10em 0;
}

.info-text {
  flex-flow: column;
  align-self: center;
  margin-bottom: 0;

  max-width: 43em;
}

.info-paragraph {
  margin-top: 7em;
  margin-bottom: 3.5em;
}

h2 {
  font-size: 3em;
  font-weight: 500;

  line-height: .85em;
}

.position-image {
  display: flex;
  flex-flow: column;
  align-items: flex-end;
}

.project-image {
  max-width: 45vw;
}

.info-photo {
  align-self: center;
  
  width: 45vw;
  height: 45vw;

  background-image: url(/davideguerrero.github.io/images/about/david_encalada_photo.png);
  background-size: cover;
}

.caption {
  margin: 0;
  
  font-size: 1.25em;
}

.next-container {
  display: flex;
  justify-content: center;
}

.next {
  align-self: center;

  margin-top: 1em;

  font-size: 2em;
  font-weight: 500;
  text-transform: uppercase;
}

.go-to {
  margin-top: 6em;
}

/* === FOOTER === */

footer {
  display: flex;
  flex-flow: column;
  align-self: center;
  
  margin: 5em 0 0 0;
}

.copy {
  margin-bottom: .15em;

  font-size: 1.25em;
  font-weight: 100;
  text-align: center;
}

/* === HOVER === */

a:hover {
  text-decoration: line-through;

  color: #B9B9B9;
}

.selected:hover {
  color: #CC2626;
}

.info-photo:hover {
  background-image: url(/davideguerrero.github.io/images/about/david_encalada_photo-hover.png);
}

/* === MEDIA === */

@media (min-width: 2560px) {
  header {
    width: 80%;
  }

  .project-image {
    max-width: 30vw;
  }

  .info-photo {
    max-height: 30vw;
  }

}

@media (max-width: 1024px) {
  .container {
    font-size: 90%
  }

  .project-description {
    max-width: 34em;
  }

  .project-presentation {
    justify-content: flex-end;
  }

  h2 {
    margin-right: 1.5em;
  }

}

@media (max-width: 768px) {
  h2 {
    margin-right: 0;

    font-size: 2em;
  }

  .project-image {
    max-width: 55vw;
  }

  .project-title-size {
    margin-top: 3.5em;

    font-size: 8em;
  }

  .next {
    max-width: 15em;

    text-align: center;
  }

  .next-fork,
  .next-fendi,
  .next-oakley,
  .next-swissted {
    max-width: 10em;
  }

}

@media (max-width: 425px) {
  .container {
    align-items: center;
  }

  header {
    font-size: 1.25em;
  }

  .work-number {
    display: none;
  }

  .about {
    align-self: flex-start;

    margin: 0 2em 0 .6em;

    transform: rotate(180deg);
    writing-mode: vertical-lr;
  }
  
  .logo {
    max-width: 50px;
  }

  .project-title {
    align-self: flex-start;

    margin-top: 2.5em;

    font-size: 8.85em;
  }

  .project-title-size {
    margin-top: 5em;

    font-size: 4.25em;
  }

  .project-title-margin {
    margin-top: 4em;
  }

  .project-description {
    align-self: center;

    max-width: 20.75em;

    font-size: 1em;
  }

  .project-description-margin {
    margin-top: 12em;
  }

  .project-presentation {
    flex-flow: column;

    margin-top: 0;
  }

  h2 {
    font-size: 2.5em;
  }

  .position-image {
    align-items: center;
  }

  .project-image {
    max-width: 92vw;
  }

  .caption {
    align-self: flex-end;
    text-align: right;

    font-size: 1em;
  }

  .next {
    font-size: 1.55em;
  }

  .copy {
    font-size: 1em;
  }

  .info-photo {
    max-width: 100vw;
    width: 275px;
    height: 275px;
  }

}