:root {
  --site-bg: #161823;
  --nav-bg: #242A32FC;
  --module-bg: #2a313a95;
  --module-border: #303745;
  --module-border-hover: #4C3A70;
  --subtext: #6d6d6d;
}

body {
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  color: #FFF;

  background-color: var(--site-bg);
}

a {
  color: #FFF;
  text-decoration: none;
}

h2,
h3 {
  margin: 5px 0;
  font-weight: 400;
}

pre {
  overflow-x: scroll;
  max-width: 100%;
  background-color: var(--module-bg);
  border: 1px solid var(--module-border);
  border-radius: 0px;
  padding: 15px;
  margin: 15px;

  scrollbar-width: thin;
  scrollbar-color: var(--subtext) var(--site-bg);
}

code {
  background-color: var(--module-bg);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

/******************* Navigation *******************/

#nav-btn {
  height: auto;
  z-index: 100;
}

.nav-links {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  background-color: var(--nav-bg);
  flex-direction: column;
  margin: 0;
  z-index: 99;
  transition: max-height 0.5s ease;
  padding-left: 0;

  & li {
    margin: 15px 30px 15px 10px;
    text-align: end;
    list-style-type: none;
    border-right: 5px solid var(--module-border);
    padding-right: 10px;
  }

  & li:last-child {
    margin-bottom: 30px;
  }

  & li a {
    font-size: 2rem;
    text-decoration: none;
  }
}

.nav-links::before {
  content: '';
  display: block;
  min-height: 80px;
  flex-shrink: 0;
}

.nav-links.open {
  max-height: 80vh;
}

.navbar-top.open {
  position: fixed;
}

.nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 5px 15px 20px;
  padding: 30px 0 20px;
  border-bottom: 1px dashed var(--subtext);

}


/******************* Modules *******************/

.module-header {
  display: flex;
  justify-content: space-between;
  margin: 5px 5px;
}

.module-end {
  display: inline-flex;
  justify-content: space-between;
}

.timestamp {
  display: none;
}

.subtext,
.subtext a {
  color: var(--subtext);
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "intro intro intro intro intro intro"
    "log log log log log log"
    "inputs inputs inputs inputs inputs inputs"
    "proj proj proj proj proj proj"
    "ops ops ops ops ops ops";
}

.box-module {
  background-color: var(--module-bg);
  border: 1px solid var(--module-border);
  border-radius: 6px;
  padding: 3px 7px;
  margin: 10px;
}

.intro-mod {
  grid-area: intro;
  padding: 3px 7px;
  margin: 10px;

}

.log-mod {
  grid-area: log;

  & .log-content {
    display: block;
    margin: 15px 5px;
    padding-left: 0;
  }

}

.log-recent {
  display: flex;
  justify-content: space-between;
  margin: 0 5px;
  border-bottom: 1px dashed var(--subtext);


  & .log-title {
    display: inline;
    margin-bottom: 5px;
    margin-right: 5px;

    flex: 1 1 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  & .log-date {
    display: inline;
    margin-bottom: 5px;
  }

}

.proj-mod {
  grid-area: proj;

  & .proj-feat h2 {
    margin: 0 5px 5px;
  }

  & .proj-feat p {
    margin: 10px 5px 2vh;
    line-height: 1.5;
  }
}

.ops-mod {
  grid-area: ops;

  & .ops-list {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 0 2vw 2vh;
  }

  & .ops-post {
    border-left: 1px solid var(--subtext);
    padding-left: 8px;
    margin-bottom: 30px;
  }

  & .ops-category {
    margin: 0 5px 5px;
  }

  & .ops-title {
    margin: 0 5px 0;
  }

  & .ops-desc {
    margin: 5px 5px 0;
  }
}

.inputs-mod {
  grid-area: inputs;

  & .input-title {
    margin: 0 5px 5px;
  }

  & .input-desc {
    margin: 10px 5px 2vh;
    line-height: 1.5;
  }
}

footer {
  margin-top: 20px;
  text-align: center;

  & .links {
    border-bottom: 1px dashed var(--subtext);
    padding-bottom: 5px;

    & a {
      margin: 0 15px;
    }
  }

  & .footer-info {
    color: var(--subtext);
    margin-top: 5px;
  }
}

.post-body {
  line-height: 1.5;
  padding: 10px;
}

.contact-body {
  margin: 10px;
}

.linkedin-contact {
  display: flex;
  flex-direction: column;
  margin: 10px;
  margin-bottom: 20px;
  height: 100%;

  & .readmore {
    margin: auto 0 0 auto;
  }
}

.email-contact {
  display: flex;
  flex-direction: column;
  margin: 10px;

  & .readmore {
    margin: auto 0 0 auto;
  }
}

/******************* Project/Log Page *******************/

.proj-entry,
.log-entry {
  display: grid;
  grid-template-columns: 8fr 4fr;

  background-color: var(--module-bg);
  border: 1px solid var(--module-border);
  border-radius: 6px;
  padding: 3px 7px;
  margin: 20px 10px;


  & h2 {
    font-size: 1.3rem;
    margin: 5px;
  }

  & .log-date,
  & .proj-date {
    color: var(--subtext);
    margin: 10px 5px 0;
  }

  & .log-desc,
  & .proj-desc {
    margin: 5px 5px 10px;
  }

  & p {
    margin: 5px;
    line-height: 1.5;
  }
}

.log-title:hover,
.log-entry .log-title:hover,
.proj-entry .proj-title:hover {
  text-decoration: underline;
}

.log-title {
  justify-self: start;
  grid-area: logtitle;
}

.log-date {
  grid-area: logdate;
}

.log-desc {
  grid-area: logdesc;
}

.readmore {
  grid-area: readmore;
  text-align: end;
}

.post-back {
  display: block;
  margin: 5px 5px 5px auto;
  text-align: end;
}

.proj-title {
  justify-self: start;
  grid-area: projtitle;
}

.proj-date {
  grid-area: projdate;
}

.proj-desc {
  grid-area: projdesc;
}

.log-entry {
  grid-template-areas:
    "logdate ."
    "logtitle logtitle"
    "logdesc logdesc"
    ". readmore";
}


.proj-entry {
  grid-template-areas:
    "projdate ."
    "projtitle projtitle"
    "projdesc projdesc"
    ". readmore";
}

#proj-entry-title,
#log-post-title {
  margin: 0 15px 10px;
}

#proj-entry-date,
#log-post-date {
  margin: 0 0 0 10px;
}

#proj-entry-content,
#log-post-content {
  padding: 10px;
}

.goback {
  margin-right: 10px;
}


/******************* Media Queries *******************/

@media screen and (min-width: 24rem) {
  .timestamp {
    display: inline-block;
  }
}

@media screen and (min-width: 48rem) {
  .contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "contact contact"
      "linkedin email";
  }

  .contact-body {
    grid-area: contact;
  }

  .linkedin-contact {
    grid-area: linkedin;
    height: 100%;
  }

  .email-contact {
    grid-area: email;
    height: 100%;
  }

  .box-module:hover {
    outline: 2px solid var(--module-border-hover);
  }

  .subtext a:hover {
    border-bottom: 1px solid var(--subtext);
  }

  .section-grid {
    grid-template-areas:
      "intro intro intro intro intro intro"
      "log log log log log log"
      "inputs inputs inputs inputs inputs inputs"
      "proj proj proj proj proj proj"
      "ops ops ops ops ops ops";
  }

  .ops-mod {

    & .ops-list {
      flex-direction: row;
    }
  }

  .log-entry {
    grid-template-columns: 10fr 2fr;
    grid-template-areas:
      "logtitle logdate"
      "logdesc logdesc"
      ". readmore";
  }

  .proj-entry {
    grid-template-columns: 10fr 2fr;
    grid-template-areas:
      "projtitle projdate"
      "projdesc projdesc"
      ". readmore";
  }

  .log-date,
  .proj-date {
    text-align: end;
  }

}

@media screen and (min-width: 64rem) {
  #nav-btn {
    display: none;
  }

  .nav-links {
    position: absolute;
    top: 0px;
    left: unset;
    right: 10px;
    overflow: visible;
    display: flex;
    flex-direction: row;
    gap: 30px;
    width: max-content;
    height: auto;
    z-index: 101;

    & li {
      margin: 32px 15px 0 0;
      border: 0;
      padding: 0;
    }

    & li a {
      font-size: 1.5rem;
      color: #fff;
    }
  }

  .section-grid {
    grid-template-areas:
      "intro intro intro log log log"
      "inputs inputs inputs inputs inputs inputs"
      "proj proj proj ops ops ops";

    gap: 15px;
  }
}