:root {
    /* https://colorhunt.co/palette/557571d49a89f7d1baf4f4f4 */
    --color-60:#557571;
    --color-30:#D49A89;
    /* --color-30:#c08851; */
    --color-10:#F7D1BA;
    --color-10-alt:#F4F4F4;
    --main-width:95%;

    /* --color-60:#F1DDBF;
    --color-30:#92BA92;
    --color-10:#78938A;
    --color-10-alt:#525E75; */
}
* {
    font-family: 'Poppins', sans-serif;
    color: #557571;
    /* font-size: 4vw; */
}
h1, h2 {
    color: var(--color-10);
    color: var(--color-30);
}
p {
    color: var(--color-10-alt);
}
a {
    color: var(--color-10);
    color: var(--color-30);
    color: var(--color-60);
}
body {
    background-color: #fff;
    background-image: url(img/bg/katharina-bill-g1MiCwvnYTI-unsplash.jpg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center; 
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#title_bar {
    display: grid;
    grid-template-columns:1fr 1fr;
    width: var(--main-width);
    margin-left: auto;
    margin-right: auto;
}
#title_bar{
    border-left: 3px solid #557571;
    padding-left: 10px;
}
.title_header {
    text-align: center;
}
h2 {
    text-align: center;
    color: var(--color-30);
}
nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: end;
    text-align: right;
}
nav a {
    margin: 10px;
}
.container {
    display: flex;
    width: var(--main-width);
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}
.content {
    flex: 1;
}
.tile {
    background-color: var(--color-10-alt);
    background-color: rgba(244, 244, 244, 0.95);
    margin: 10px;
    width: 700px;
    height: 350px;
    border-radius: 10px;
    transition-property: height, width;
    transition-duration: 4s;
    transition-delay: 2s;
}
.tile_text {
    margin: 3%;
    text-align: justify;
    color: var(--color-60);
    overflow: hidden;
    height: 215px;
}
.tile_text img {
    float: left;
    margin: 2%;
    margin-right: 4%;
    width: 100%;
    height: auto;
    max-width: 10vw;
    min-width: 100px;
}
.read_more {
    color: #D49A89;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.expanded {
    height: auto;
    width: auto;
    max-width: 1024px;
}
.hidden {
    display: none;
}
.alt_list {
    list-style-type: circle;
    /* padding: 0; */
}
.alt_list li {
    margin-bottom: 10px;
}
@media screen and (max-width: 1280px) {
    .tile_text {
      font-size: 13px;
    }
  }