/* One cool thing is that we can change the color of when you highlight text to copy it */
::selection {
  background: rgb(128, 192, 255);

  color: black;
}

html {
	background-color: rgb(16, 16, 16);
	font-family: sans-serif;
	color: white;
  width: 100%;
}

header {

}

header h1 {
  font-size: 32px;
  text-align: center;
}

nav {
}

nav section {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 8px;
}

figure {
  max-width: 100%;

  border: 2px solid rgb(64, 64, 64); 
}

figcaption {
  text-align: center;
  font-style: italic;
}

img {
  max-width: 100%;
}

ul {
  margin-top: 48px;
  margin-bottom: 48px;
}

li {
  margin-top: 16px;
  margin-bottom: 16px;
}

#festive-colors-frontpage {
  max-width: 384px;
  max-height: 384px;
}

.thumbnail {

}

.navbar-link {
  color: rgb(96, 128, 255);
  text-align: center;
  width: 50%;
}

.navbar-link:hover {
  color: rgb(160, 192, 255);
}

.newline-link {
  display: block;
}

.block {
  display: block;
}

/* Slightly change the background color of odd elements in long lists with URLs in them. Makes them slightly easier to read. */
.url-list a:nth-child(odd) {
  background-color: rgb(32, 32, 32);
}

.link-section {
  background-color: rgb(24, 24, 24);
}

#festive-colors-header {
  width: 67%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 50% 50%;
}

#header-festive {
  color: rgb(224, 0, 0);
  text-align: right;
}

#header-colors {
  color: rgb(96, 224, 96);
  text-align: left;
}

#main-section {
  display: grid;
  grid-template-columns: 30% 40% 30%;
}

#articles-and-dates {
  display: grid;
  grid-template-columns: 70% 30%;
  text-align: left;
}

#articles-and-dates p {
  margin: auto;
}

#article-title {
  color: rgb(172, 255, 172);
  margin-bottom: 4px;
}

#article-date {
  color: rgb(172, 255, 172);
  margin-bottom: 40px;
}


.article-link {
  margin: none;
  text-align: left;
  width: 100%;
}

p {
  margin-top: 16px;
  margin-bottom: 16px;
}

a {
  color: rgb(0, 128, 255);
  text-decoration: none;
  font-weight: bold;
  margin-bottom: 16px;
  margin: 0 auto;
  /*  display: block; */
}

a:hover {
  color: rgb(96, 192, 255);
}

main {
  margin-bottom: 128px;
}

footer {

}

footer a {

}

@media only screen and (max-width: 1080px) {

  #welcome-text {
    display: none;
  }

  #header-name {
    display: block;
  }

  #header-image {
    margin-bottom: 64px;
  }

  #main-section {
    display: grid;
    grid-template-columns: 5% 90% 5%;
  }


  h2 {
    font-size: 32px;
  }

  #article-date {
    font-size: 24px;
  }

  p {
    font-size: 24px;
  }

  a {
    font-size: 24px;
    margin-bottom: 8px;
  }

  nav {

  }

  nav section {
    display: block
  }

  .navbar-link {
    display: block;
  }

  ul {

  }

  li {
    font-size: 24px;
  }

  figcaption {
    font-size: 20px;
    font-style: italic;
  }

  .homepage-link {
    margin-bottom: 30px;
  }
}

@media only screen and (min-width: 2560px) {
  #main-section {
    display: grid;
    grid-template-columns: 40% 20% 40%;
  }
}

img {
  display: block;
  margin: 0 auto;
}