/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
  line-height: 1.25;
  display:flex;
  justify-content: center;
}

header {
  display: flex;
  margin: auto;
}

main { 
  display: flex;
  flex-direction: column;
  background-color: darksalmon;
  padding-left: 10px;
  padding-right: 10px;
}
main > * {
  background-color: lightsalmon;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 20px;
  border-width: 3px;
  border-color: darkslategrey;
  border-style: ridge;
  margin: 10px;
}

content {
  max-width: 100%;
  width: 1250px;
  display: grid;
  grid-template:
    "header header header" auto
    "asideLeft main asideRight" auto
    "footer footer footer" auto / 220px auto 220px;
  align-self: center;
}

asideLeft {
  background-color: darksalmon;
  max-width: 100%;
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

asideRight {
  background-color: darksalmon;
  max-width: 100%;
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

welcome {
  font-family: 'cascadia code mono', 'Courier New', monospace, Courier;
  font-size: 14px;
}

blog {
  font-family: 'cascadia code mono', 'Courier New', monospace;
  font-size: 14px;
}

.intra-linker {
  /* what here? */
}
.intra-linker > li {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  padding-top: 3px;
}
.intra-linker > li:hover {
  background-color: salmon;
}

.pfp {
  border-width: 2px;
  border-style: dashed;
  border-color: grey;
  z-index: 1;
}

.two-columns {
  display: flex;
}
.two-columns > * {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-content: center;
  padding: 0.75em;
}
/*.two-columns > *:first-child {
  align-content: center;
}
 .two-columns > *:last-child {
  align-content: flex-start;
} */

.blog-post {
  display: flex;
}
.blog-post > * {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-content: center;
  padding: 0.75em;
}
.blog-post > *:first-child {
  /* date of blog */
  align-content: center;
  text-decoration: underline;
}
.blog-post > p {
  align-content: flex-start;
}
.blog-post > div div img {
  /* affects blog-post images, not images in the text */
  image-rendering: pixelated;
  align-items: center;
  border: grey;
  border-style: dotted;
  border-width: 2px;
}
.blog-post-img-wide {
  /* this one used for primarly wide images */
  width: 198px;
}
.blog-post-img-high {
  /* this one used for primarly high images */
  height: 198px;
}

.footer-text {
  color: grey;
  text-align: center;
  font-size: 12px;
  line-height: 1;
}
.footer-link {
  color: grey;
}
.footer-center {
  border-color: darkslategrey;
  background-color: darksalmon;
  justify-self: center;
  align-content: center;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px;
  border-style: outset;
  margin-top: 10px
}

.back-button {

}