* {
  box-sizing: border-box;
}

body {
  font-family: monospace;
  background-color: #FFFFFF;
  color: #040D1D;
}


/* Typography */

h1 {
  font-family: "M PLUS 1 Code", monospace;
  font-size: 6rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #192280;
}

h2 {
  font-family: "M PLUS 1 Code", monospace;
  font-size: 2rem;
  font-weight: 500;
}

h3 {
  font-family: "M PLUS 1 Code", monospace;
  font-size: 1.5rem;
  font-weight: 500;
}

h4 {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 1rem;
  font-weight: 500;
}

h6 {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 0.75rem;
  font-weight: 200;
}

p {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

a {
  font-family: "M PLUS 1 Code", monospace;
  font-size: 1.5rem;
  font-weight: 400;
  color: #941D12;
  text-decoration: underline;
}

p a {
  font-family: "M PLUS 1 Code", monospace;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #941D12;
}


/* Universal Content */

.header {
  display: flex;
  align-items: baseline;
  padding: 2rem 0 0 0;
}

.nav ul {
  display: flex;
  justify-content: space-evenly;
  text-align: center;
}

li {
  padding: 0.5rem;
  width: 100%;
}

.nav a {
  font-size: 4rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
}

.hamburger-icon {
  font-size: 2.5rem;
  color: #040D1D;
  display: none;
}

.mobile-nav-container {
  background-color: #FFFFFF;
  font-size: 1.5rem;
  
  position: fixed;
  z-index: 2;
  bottom: 0;
  left: 0;
  padding-bottom: 6rem;
  
  display: none;

  height: 100%;
  width: 100%;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;

  height: 100%;
  width: 100%;
}

.mobile-nav li a {
  font-size: 4rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 1rem;
}

.close-button {
  font-size: 2rem;
  transition: all 500ms;
  color: #040D1D;

  position: absolute;
  bottom: 0;
  left: 0;
  padding: 2rem;
}

.marker {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.5rem 0 0.5rem;
}

hr {
  border: 2px solid #192280;
}

main {
  padding-bottom: 4rem;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #FFFFFF;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0.5rem;
  border-top: 4px solid #192280;
}


/* Index */

.contact {
  display: flex;
  gap: 0.5rem;
  padding: 0 0 0.5rem 1rem;
}

.body {
  padding: 2rem 0 0 2rem;
  width: 67%;
}


/* Design */

.project {
  display: flex;
  padding: 1rem 1rem 0.5rem 2rem;
  gap: 1rem;
  height: 50%;
}

/* Note for code review: the following is probably the 
weakest area and is deeply in need of refinement. The 
mobile version of this layout is not as good as I want it 
to be, I just haven't figured out the optimal solution for 
arranging them yet. */

.project-details {
  width: 33%;
}

.project-details h3 {
  padding-bottom: 0.5rem;
}

.project-details h4 {
  padding-bottom: 1rem;
}

.project-details a {
  font-size: 1rem;
}

.project-details p {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.project-content {
  width: 50%;
}

.project-content2 {
  width: 15%;
}

.project-content3 {
  width: 25%;
}

/* About */

.copy {
  padding: 2rem 0 0 2rem;
  width: 75%;
}

/* Process */

.cans {
  display: flex;
}

.cans img {
  width: 33%;
  height: auto;
}

.presentation {
  display: flex;
  justify-content: center;
  padding: 1rem;
}

.links {
  display: block;
  padding: 2rem;
}

.process-a {
  padding: 1rem;
}

/* pseudo-classes */

.nav a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

li:hover {
  background-color: #192280;
}

.nav a:active {
  color: #192280;
}


/* media queries */

@media (max-width: 640px) {

  h2 {
    font-size: 1.5rem;
    padding-left: 0.25rem;
  }

  .header {
    flex-direction: column;
  }

  .nav {
    display: none;
  }

  .body {
    padding: 2rem;
    width: 100%;
  }

  .contact {
    display: none;
  }

  .hamburger-icon {
    display: inline;
    padding: 1rem;
  }

  .project {
    display: block;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .project-details {
    width: 100%;
    padding-bottom: 1rem;
  }

  .project-content, .project-content-2, .project-content-3 {
    width: 100%;
  }

  .copy {
    padding: 2rem;
    width: 100%;
  }
  
}