:root {
  /* max width of the main text */
  --text-max-width: 800px;

  /* the size of h1 elements in the text */
  --heading-base-size: 1.75em;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4em;
  font-family: sans;

  & #landing {
    width: min(80%, 600px);
    margin: auto;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 2cm;

    @media (max-width: 500px) {
      width: 90%;

      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 2cm;
    }

    & #introduction {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      line-height: 1.4;

      @media (max-width: 500px) {
        gap: 50px;
        align-items: center;

        & p {
          text-align: center;
        }
      }

      & h1 {
        font-size: 2em;
      }
    }

    & img {
      height: 200px;
      width: 200px;

      border: 1px solid black;
      border-radius: 50%;
    }
  }

  & #projects,
  #aboutme {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
  }

  & #aboutme {
    width: 80%;
    max-width: 1050px;

    @media (max-width: 1050px) {
      width: 90%;
    }

    display: flex;
    flex-direction: column;
    gap: 1cm;

    &>h1 {
      font-size: 2em;
      text-align: center;
    }

    &>hr {
      width: 100%;

      height: 0px;
      border: none;
      border-bottom: 1px solid lightgray;
    }

  }

  & #projects {
    width: 90%;
    --gap: 40px;

    display: flex;
    flex-direction: row;
    gap: var(--gap);

    @media (max-width: 1050px) {
      flex-direction: column;
    }

    & #ownprojects>.list>.project {
      background-color: #effaf3;
    }

    & #contributions>.list>.project {
      background-color: #eef6fc;
    }

    & #ownprojects,
    #contributions {
      line-height: 1.4;

      flex-basis: 0;
      flex-grow: 1;
      flex-shrink: 1;

      display: flex;
      flex-direction: column;
      gap: 1cm;

      &>h1 {
        font-size: 2em;
        text-align: center;
      }

      &>hr {
        width: 100%;

        height: 0px;
        border: none;
        border-bottom: 1px solid lightgray;
      }

      &>.list {
        --border-radius: 8px;
        --shadow: 0em 0.5em 1em -0.2em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .01);

        display: grid;
        grid-template-columns: 1fr 1fr;

        @media (max-width: 800px) {
          grid-template-columns: 1fr;
        }

        gap: 20px;

        &>.project {
          border: 1px solid lightgray;
          border-radius: var(--border-radius);
          padding: 20px;

          display: flex;
          flex-direction: column;
          gap: 30px;

          &>.header {
            font-weight: bold;
            align-self: center;
          }

          &>img {
            height: 80px;
            align-self: center;
          }

          &>.description,
          .contributions {
            align-self: center;
            flex-grow: 1;

            display: flex;
            flex-direction: column;
            gap: 10px;

            & code {
              border: 1px solid lightgray;
              font-family: monospace;
              font-size: 1.2em;
            }
          }

          &>.contributions {
            &>ul {
              list-style-type: square;
              list-style-position: inside;
              display: flex;
              flex-direction: column;
              gap: 1em;
            }
          }

          &>.tags {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 10px;

            font-size: smaller;

            &>.tag {
              display: flex;
              flex-direction: row;

              &>.k,
              .v {
                padding: 5px;
              }

              &>.k {
                background-color: #363636;
                color: white;
              }
            }

            &>.tag.language {
              &>.k::before {
                content: "language"
              }

              &>.v {
                background-color: #3298dc;
                color: white;
              }
            }

            &>.tag.tech {
              &>.k::before {
                content: "tech"
              }

              &>.v {
                background-color: #48c774;
                color: black;
              }
            }
          }

          &>.links {
            display: flex;
            flex-direction: row;

            &>div {
              flex-basis: 0;
              flex-grow: 1;
              flex-shrink: 1;

              display: flex;
              flex-direction: row;
              gap: 10px;
              align-items: center;

              &>img {
                height: 20px;
              }
            }
          }
        }
      }
    }
  }

  & #skills {
    --border-radius: 8px;
    --shadow: 0em 0.5em 1em -0.2em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .01);

    width: 90%;
    margin: auto;

    display: flex;
    flex-direction: column;
    gap: 100px;

    & #focus-areas,
    & #technologies,
    & #certifications {
      display: flex;
      flex-direction: column;
      gap: 1cm;

      &>h1 {
        font-size: 2em;
        text-align: center;
      }

      &>hr {
        width: 100%;

        height: 0px;
        border: none;
        border-bottom: 1px solid lightgray;
      }
    }

    & #focus-areas>div {
      --gap: 20px;

      display: flex;
      flex-direction: row;
      gap: var(--gap);

      @media (max-width: 1050px) {
        flex-direction: column;
      }

      &>.column {

        flex-basis: 0;
        flex-grow: 1;
        flex-shrink: 1;

        display: flex;
        flex-direction: column;
        gap: var(--gap);

        & section {
          --box-padding: 20px;
          --heading-additional-padding: 10px;

          line-height: 1.4;
          flex-grow: 1;
          border: 1px solid lightgray;
          border-radius: var(--border-radius);
          padding: var(--box-padding);
          padding-top: calc(var(--box-padding) + var(--heading-additional-padding));

          box-shadow: var(--shadow);

          display: flex;
          flex-direction: column;
          gap: 40px;

          & h1 {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            gap: 10px;

            padding-left: var(--heading-additional-padding);

            &>span {
              font-size: 1.5em;
              text-align: center;
              flex-grow: 1;

            }

            &>img {
              height: 48px;
              width: 48px;
            }
          }

          & .slogan {
            font-weight: bold;
          }

          &>div {
            display: flex;
            flex-direction: column;
            gap: 20px;
          }
        }
      }
    }

    & #technologies {
      --cell-spacing: 25px;
      display: flex;
      flex-direction: column;

      &>div {
        display: table;
        border-collapse: collapse;

        @media (max-width: 1050px) {
          display: flex;
          flex-direction: column;
          gap: 60px;
          border-spacing: 0;
        }

        &>.block {
          display: table-row;


          @media (max-width: 1050px) {
            display: flex;
            flex-direction: column;
            gap: 30px;
          }

          &>.name {
            display: table-cell;

            @media (max-width: 1050px) {
              width: 100%;
              display: flex;
              justify-content: center;
            }


            /* the spacing between the columns */
            padding-right: 1em;

            /* make it as small as possible */
            width: 1%;

            vertical-align: middle;

            &>h1 {
              font-size: 1.3em;

              /* lines may break */
              line-height: 1.3;
            }
          }

          &>.techlist {
            display: table-cell;

            @media (max-width: 1050px) {
              display: block;
            }

            &>div {
              display: flex;
              flex-direction: row;

              @media (max-width: 1050px) {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                flex-wrap: wrap;
              }
              
              @media (max-width: 750px) {
                grid-template-columns: 1fr 1fr 1fr;
              }

              
              @media (max-width: 500px) {
                grid-template-columns: 1fr 1fr;
              }
              
              @media (max-width: 300px) {
                grid-template-columns: 1fr;
              }


              gap: var(--cell-spacing);

              &>.tech {
                border: 1px solid lightgray;
                border-radius: var(--border-radius);

                padding: 15px;
                gap: 10px;

                display: flex;
                flex-direction: column;
                align-items: center;

                box-shadow: var(--shadow);


                text-align: center;

                flex-grow: 1;
                @media not (max-width: 1050px) {
                  max-width: 15%;
                }

                &>img {
                  height: 48px;
                  width: 48px;
                }
              }

              &>.tech[data-tech-level=pro] {
                background-color: aliceblue;
                border: 1px solid lightblue;
              }
            }
          }
        }

        /* we only want top padding for all rows *after* the first one */
        & .block>.techlist {
          @media not (max-width: 1050px) {
            padding-top: var(--cell-spacing)
          }
        }

        & .block:first-child>.techlist {
          @media not (max-width: 1050px) {
            padding-top: 0;
          }
        }
      }
    }

    & #certifications {
      & ul {
        display: flex;
        flex-direction: row;

        justify-content: center;

        & li {
          max-width: max(190px, 20%);

          & a {
            border: 1px solid lightgray;
            padding: 20px;
            border-radius: var(--border-radius);

            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;

            text-align: center;
            text-decoration: none;
            color: black;

            & img {
              --size: 128px;
              height: var(--size);
              width: var(--size);
            }
          }
        }
      }
    }
  }
}

header {
  & nav {
    display: flex;
    justify-content: space-between;

    @media (max-width: 750px) {
      flex-direction: column;
      align-items: center;
    }

    @media not (max-width: 750px) {
      flex-direction: row;
      height: 4em;
    }

    & .title,
    & .link {
      height: 100%;
      font-variant: small-caps;
      text-decoration: none;
      color: black;

      display: flex;
      justify-content: center;

      @media not (max-width: 750px) {
        align-items: center;
        padding: 0 20px 0 20px;
      }

      @media (max-width: 750px) {
        padding: 20px;
        gap: 0
      }
    }

    & .title {
      font-size: 1.5em;

      @media (max-width: 750px) {
        width: 100%;
      }
    }

    & .link {
      font-size: 1.2em;
      text-align: center;
    }

    & .title:hover,
    & .links>a:hover {
      background-color: whitesmoke;
    }

    & .links {
      height: 100%;
      display: flex;
      flex-direction: row;
      gap: 20px;

      @media (max-width: 750px) {
        width: 100%;
        justify-content: space-evenly;
      }

      @media (max-width: 450px) {
        flex-direction: column;
        gap: 0;
      }

    }
  }
}

footer {
  --icon-size: 30px;
  --icon-padding: 10px;
  --border: 1px;

  padding: 20px;

  display: flex;
  flex-direction: row;
  justify-content: space-between;

  @media (max-width: 700px) {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }


  & .socials {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    & a {
      height: auto;
      padding: var(--icon-padding);
      font-size: 1.5em;
      color: black;
      border: solid lightgray var(--border);
      border-radius: 5px;

      display: flex;
      align-items: center;

      & img {
        height: var(--icon-size);
        width: var(--icon-size);
      }
    }
  }

  & .badges {
    display: flex;
    flex-direction: row;
    align-items: center;

    & img {
      height: calc(var(--icon-size) + 2 * var(--icon-padding) + 2 * var(--border));
      width: calc(var(--icon-size) + 2 * var(--icon-padding) + 2 * var(--border));
    }
  }

  & .copyright {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}

#blogpost {
  width: min(var(--text-max-width), 95%);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 70px;
  font-family: serif;
}

#blogpost .header {
  display: flex;
  flex-direction: column;
  gap: 40px;

  border-left: 1px solid lightgray;
  padding-left: 25px;

  &>h1 {
    /* to prevent overlapping text when wrapping */
    line-height: 1.2;

    font-size: calc(var(--heading-base-size) * 1.1)
  }

  & .meta {
    height: 3em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 40px;

    & .summary {
      line-height: 1.6;
      color: dimgray;
    }

    & .summary,
    & .date {
      display: flex;
      align-items: center;
      color: dimgray;
    }
  }
}

#aboutme .with-pictures {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 4em;

  &>.pictures {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;

    & figure {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.2em;

      & img {
        float: right;
      }

      & figcaption {
        font-size: small;
        color: gray;
      }
    }
  }
}

#aboutme .pictures-right {
  flex-direction: row-reverse;
}

#aboutme .pictures-left {
  flex-direction: row;
}

#blogpost .content,
#aboutme .content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  line-height: 1.6;

  & code {
    font-family: monospace;
    font-size: 1.2em;
  }

  & pre {
    border: 1px solid lightgray;
    overflow: scroll;
  }

  & pre>code {
    padding: 10px;
    display: block;
    overflow: scroll;
  }

  & :not(pre) code {
    background-color: whitesmoke;
  }

  & h1,
  & h2,
  & h3,
  & h4,
  & h5 {
    margin-top: 20px;
  }

  & h1 {
    font-size: var(--heading-base-size);
  }

  &>h1::before {
    content: "# ";
    color: lightgray;
  }

  & h2 {
    font-size: calc(1em + (var(--heading-base-size) - 1em) * 0.8);
  }

  &>h2::before {
    content: "## ";
    color: lightgray;
  }

  & h3 {
    font-size: calc(1em + (var(--heading-base-size) - 1em) * 0.7);
  }

  &>h3::before {
    content: "### ";
    color: lightgray;
  }

  & h4 {
    font-size: calc(1em + (var(--heading-base-size) - 1em) * 0.55);
  }

  &>h4::before {
    content: "#### ";
    color: lightgray;
  }

  & h5 {
    font-size: calc(1em + (var(--heading-base-size) - 1em) * 0.4);
  }

  &>h5::before {
    content: "##### ";
    color: lightgray;
  }

  & ul,
  & ol {
    list-style-type: square;
    flex-direction: column;
    display: flex;
    gap: 1em;

    & li::marker {
      vertical-align: middle;
    }

    & li {
      margin-left: 1em;
      display: list-item;

      &>p {
        margin-left: 0.5em;
        display: inline block;
      }
    }
  }

  & table {
    border-collapse: collapse;
    text-align: left;

    margin-top: 20px;

    border: 1px solid black;
    font-family: sans;

    & th {
      text-align: center;
      font-weight: bold;
    }

    & td {
      text-align: left;
    }

    & th,
    td {
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 5px;
      padding-bottom: 5px;
      border: 1px solid black;
    }
  }

  & .footnote-ref {
    vertical-align: super;
    font-size: small;
  }

  & .footnotes {
    border-top: 1px solid lightgray;
    padding-top: 1em;
  }

  & blockquote {
    border-left: 1px solid lightgray;
    padding-left: 1em;
    margin-left: 1em;
  }

  & pre[lang]::before {
    float: right;
    color: gray;
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-color: lightgray;
    padding: 7px;
    background-color: snow;
  }

  & pre[lang=rust]::before {
    content: "Rust";
  }

  & .buzzword {
    font-variant: small-caps;
    font-weight: 600;
    color: crimson;
  }
}

.postlist {
  font-family: sans;

  width: 90%;
  margin: auto;

  & table,
  & tr,
  & td {
    border: 1px solid lightgray;
  }

  & table {
    width: 100%;
  }

  & th,
  & td {
    padding: 10px;
  }

  & a {
    text-decoration: none;
  }
}