html {
  --background-main: rgb(32, 32, 32);
  background-color: var(--background-main);
  color: white;
  font-family: sans-serif;
  text-align: center;
  margin: 0 auto;
}

header {

}

main {

}

footer {

}

header h1 {
  font-size: 40px;
}

h2 {
  text-align: left;
}

nav {
  display: flex;
  justify-content: space-evenly;
}

a {
  text-decoration: none;
  font-weight: bold;
  color: rgb(96, 172, 255);
}

/* When the link isn't being hovered over and also hasn't been visited yet */
a {

}

a:hover {
  /* color: rgb(0, 224, 255); */
}

code {
  background-color: rgb(16, 16, 16);
}

img {
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}

figure {
  margin: 0 auto;
}

figcaption {
  text-align: right;
  width: 50%;
  margin: 0 47% auto;
  font-style: italic;
}

.navbar-link {
  color: rgb(96, 172, 255);
}

.navbar-link:hover {
  color: rgb(144, 224, 255);
}

#top-header {
  text-align: center;
  margin: 4px auto;
}

#article-date {
  text-align: center;
  margin: 4px auto;
}

#parent-section {
  display: grid;
  grid-template-columns: 25% 50% 25%;
  width: 75%;
  margin: 0 auto;
}

#child-left {

}

#child-center {
  text-align: left;
}

#child-right {

}

#mobile-test {
  color: rgba(0, 0, 0, 0);
}

/* Settings for smartphones and low resolutions */
@media screen and (max-width: 1080px) {
  #mobile-test {
    color: white;
  }

  #parent-section {
    display: grid;
    grid-template-columns: 5% 90% 5%;
    width: 100%;
    margin: 0 auto;
  }

  h2 {
    font-size: 32px;
  }

  p {
    font-size: 24px;
  }

  nav {
    display: block;
  }

  nav a {
    display: block;
    text-align: center;
    font-size: 24px;
  }

  #navbar-link {

  }
}

@media screen and (min-width: 2560px) {
  #parent-section {
    display: grid;
    grid-template-columns: 35% 30% 35%;
  }
}