:root {
  --electric-blue: #80f0f0;
  --tetradic-green: #80f080; /* Green-ish */
  --tetradic-blue: #8080f0; /* Blue-ish */
}

body {
  font-family: sans-serif;
  max-width: 40em;
  line-height: 1.5;
  margin: 0em auto;
  background-color: white;
  box-shadow: 0 0 10px 2px black;
  padding: 0 3em;
}

:is(header, main) > section:not(:first-child),
article > section,
footer,
h3 {
  margin: 4em auto 2em;
}

footer {
  padding-bottom: 2em;
}

header {
  padding-top: 2em;
}

:not(article) > h2 {
  border: black 1.5pt solid;
  width: max-content;
  padding: 5px 10px;
  border-radius: 10px;
}

h1 {
  margin-top: 0;
}

html {
  background-color: lightcoral;
}

nav {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: -15px;
  top: 4px;
  z-index: 1;
  & > a {
    background-color: var(--tetradic-green);
    color: black;
    text-decoration: none;
    font-weight: bold;
    width: max-content;
    border: black 1.5pt solid;
    border-radius: 5px;
    padding: 5px 15px 5px 20px;
    margin: 4px;
    box-shadow: 2px 0px 5px 0.25px black;
    &.titular-navbar-tab {
      box-shadow: -2px 0 5px 0.25px inset black;
      background-color: var(--tetradic-blue);
    }
  }
}

.projects {
  border-top: solid black;
  h2 {
    border: none;
  }
  
  & > section {
    border: black 1.5pt solid;
    margin-top: 16pt;
    padding: 5px;
    border-radius: 10px;
  }
  p {
    padding: 10px;
  }
}

.article-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.date-posted {
  display: grid;
  justify-content: end;
  font-weight: bold;
}

.author {
  font-style: italic;
}

article {
  border: solid black;
  border-left-style: none;
  border-right-style: none;
  padding-bottom: 1em;
}