@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

h1 {
  text-shadow: 3px 3px 3px #ababab;
}

h2 {
  text-shadow: 3px 3px 3px #ababab;
}

body {
  /* font-family: Roboto, sans-serif; */
  background-color: #Faebd7;
  /* background-color: #C1ffc1; */
  /* background-image: radial-gradient(circle, #A0522d, #Cd5c5c, #F5f5f5); */
  /*
   * Created with https://www.css-gradient.com
   * Gradient link: https://www.css-gradient.com/?c1=87fab1&c2=f2fdf6&gt=r&gd=dcc
   */
  /* background: #87FAB1; */
  /* background: radial-gradient(at center, #87FAB1, #F2FDF6); */
  /* background: linear-gradient(to top left, #28b487, #7dd56f); */
  /* background: url(/static/blog/paisley.png) left top repeat; */
  /* background: url(/static/blog/cork-board.png) left top repeat; */
  /* background: url(/static/blog/vintage-concrete.png) left top repeat; */
  /* background: url(/static/blog/old_map.png) left top repeat; */
}

.navlinks {
  text-align: left;
}

.headline {
  text-align: center;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}

.flex-container>div {
  /* display: table-cell; */
  /* background-color: white; */
  background: url(/static/blog/paisley.png) left top repeat;
  box-shadow: .5em .5em .25em #Cdb38b;
  color: black;
  border-radius: 1em;
  width: 14em;
  height: 14em;
  margin: 2em;
  /* padding: .5em; */
  /* text-align: center;
     vertical-align: middle; */
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow: auto;
}


.card-container {
  position: relative;
  cursor: pointer;
}

.card-link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.card-top {
  /* background-color: yellow; */
  margin-bottom: .5em;
  margin-left: 1em;
  margin-right: 1em;
  font-size: .7em;
}

.card-middle {
  /* background-color: yellow; */
  margin-bottom: .5em;
  margin-left: 1em;
  margin-right: 1em;
}

.card-middle>h6 {
  margin-top: .2em;
  margin-bottom: .2em;
}

.card-middle>h3 {
  margin-top: .2em;
  margin-bottom: .2em;
}

.card-bottom {
  /* border: thin solid black; */
  display: table;
  /* background-color: yellow; */
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  flex-grow: 1;
  /* background-image: url("/static/blog/bottom-background.jpg"); */
  /* background-size: cover; */
}

/* .card-bottom>img { */
/* height: auto; */
/* max-width: 60%; */
/* } */

.card-bottom>p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: small;
}

.article-box {
  margin: auto;
  width: 85%;
  /* border-style: groove; */
  /* border-radius: .5em; */
  /* border: .1em solid black; */
  padding: .5em;
  /* box-shadow: .5em .5em .25em #Cdb38b; */
  background-color: white;
  box-shadow: .5em .5em .25em #Cdb38b;
  color: black;
  border-radius: 1em;
}

.article-header {
  text-align: center;
}

.article-content {
  background-color: white;
}

header {
  font-size: small;
}

footer>a {
  font-size: x-small;
}