:root {
    --font-family: 'Trebuchet MS', Sans-Serif;
    --primary-color: #31343c;
    --secondary-color: #9ecacc;
    --border-radius: 4px;
    --background-color: #EDEDF5;
    --text-color: #485873;
  }
 
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

  body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--font-family);
  }

  /* Header, title and nav */

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 10px 0;
    background-color: var(--primary-color);
    color: var(--secondary-color);
  }

  header h1 {
    font-size: 2.5em;
    width: 400px;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    text-align: right;
    padding: 10px 20px;
    color: var(--primary-color);
    background-color: var(--secondary-color);
  }

  header nav {
    display: flex;
    height: 100%;
    margin-right: 20px;
  }

  header nav ul {
    display: flex;
    list-style-type: none;
  }

  header nav ul li {
    display: flex;
    margin-left: 25px;
  }

  header nav ul li a {
    color: var(--secondary-color);
    font-size: 1.4em;
    padding: 0 10px 10px 10px;
    border-bottom: 4px solid var(--secondary-color);
    text-decoration: none;
  }

  /* Main section - About me */

  main {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
  }

  section {
    display: flex;
    padding: 0 20px;
    margin: 40px 0;
  }

  section > div {
    padding: 0 40px;
    flex-wrap: wrap;
  }

  section .label {
    display: flex;
    flex-basis: 15%;
    min-width: 150px;
    flex-grow: 0;
    flex-shrink: 0;
    text-align: right;
    justify-content: flex-end;
    border-right: 8px solid var(--text-color);
  }

  section .label h2 {
    line-height: 1.2em;
    font-size: 3em;
  }

  section .content {
    display: flex;
    flex-grow: 1;
  }

  section#about-me .content {
    flex-wrap: nowrap;
  }

  section .content p {
    line-height: 1.7em;
    font-size: 1.45em;
    margin-left: 40px;
  }

  section .content img {
    width: 300px;
    height: 500px;
    border-radius: var(--border-radius);
    object-fit: cover;
  }

  /* Work section */

  section#work .content {
    justify-content: space-between;
  }

  section#work .content a.card {
    text-decoration: none;
    height: 300px;
    border: 8px solid var(--secondary-color);
    margin-top: 20px;
    flex-basis: 49%;
    background-position: center;
    background-size: cover;
  }

  section#work .content a.card:first-child {
    width: 100%;
    flex-basis: 100%;
    margin-top: 0;  
  }

  section#work .content .overlay {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    background-color: rgba(158, 202, 204, 0.2);
  }

  section#work .content .overlay:hover {
    background-color: transparent;
  }

  section#work .content a.card .work-label {
    line-height: 1.8em;
    color: var(--primary-color);
    background-color: var(--secondary-color);
    padding: 20px;
    height: fit-content;
    position: relative;
    bottom: 40px;
    width: auto;
  }

  /* Portfolio image links */

  .google {
    background-image: url('./Images/blissful\ beginnings.png');
  }

  .facebook {
    background-image: url('./Images/Visual-Vault.png');
  }

  .amazon {
    background-image: url('./Images/Note-Taker.png');
  }

  .linkedin {
    background-image: url('./Images/Work-Day-Scheduler.png');
  }

  .start-up {
    background-image: url('./Images/Weather_Dash.png');
  }

  /* Contact me section */

  section#contact-me .content ul {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    font-size: 1.8em;
  }

  section#contact-me .content ul li {
    border-bottom: 4px solid;
    padding-bottom: 10px;
    margin-right: 20px;
  }

  section#contact-me .content ul a {
    text-decoration: none;
    color: var(--text-color);
  }

  /* Footer */

  footer {
    background-color: var(--primary-color);
    padding: 40px;
    justify-content: space-between;
  }

  /* Responsive UI */

  @media only screen and (max-width: 1224px) {
    /* Content width 100% on smaller screens */

    main {
      width: 100%;
      overflow: hidden;
    }

    section .label {
      font-size: 0.8em;
      min-width: 200px;
    }

    section .content img {
      width: 200px;
      height: 350px;
    }

    section .content p {
      font-size: 1.2em;
    }

    section#contact-me .content ul {
      font-size: 1.2em;
    }
  } 

  @media only screen and (max-width: 839px) {
    /* Allow wrap on smallest screens e.g phones */

    header {
      padding: 10px 10px 10px 0;
      flex-wrap: wrap;
    }

    header h1 {
      align-self: flex-start;
    }

    header nav {
      flex-direction: column;
      width: 100%;
      padding-left: 10px;
    }

    header nav ul {
      margin-top: 20px;
    }

    header nav ul li {
      margin-left: 10px;
    }

    header nav ul li a {
      font-size: 1em;
      padding: 0 10px 5px 10px;
      border-bottom: 2px solid var(--secondary-color);
    }

    /* changing sections to columns */

    section {
      flex-direction: column;
      margin: 20px 0;
    }

    section > div {
      padding: 0;
    }

    section .label {
      flex-grow: 1;
      width: 100%;
      margin-bottom: 10px;
      min-width: none;
      text-align: center;
      border: none;
      justify-content: center;
    }

    section .content {
      flex-grow: 1;
      flex-basis: 100%;
      width: 100%;
    }

    section#about-me .content {
      flex-wrap: wrap;
    }

    section#about-me .content img {
      width: 100%;
      margin-bottom: 10px;
      max-height: 400px;
      object-fit: cover;
      object-position: 50% 30%;
    }

    section .content p {
      line-height: 1.8em;
      font-size: 1.2em;
      margin-left: 0;
    }

    section#work .content a.card {
      height: 200px;
    }

    section#work .content a.card .work-label {
      bottom: 10px;
      padding: 10px 10px 10px 0;
    }

    section#contact-me .content ul {
      flex-direction: column;
      font-size: 1.2em;
    }

    section#contact-me .content ul li {
      border-bottom: none;
      padding: 10px 0;
      margin: 0;
    }
  }