/*
Colors
- main header - #354E41
- gradient top - #1A708D
- gradient bottom - #5A9E9B
- author/date - #686868
- card border - #D5D5D7
- card background - rgba(255, 255, 240, 0.65)
- card text - #060606
- card author/date/content type - #686868
- category orange - #D28161
- category green - #354E41
- category grey - rgb(54, 69, 79)

*/




body {
    padding-left: 4em;
    padding-right: 4em;
    background: linear-gradient(to bottom, rgb(255, 255, 240), rgb(54, 69, 79));
}

h1 {
    color: #354E41;
    font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
    font-weight: 100;
}

.focus-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 1.5em;
}

.focus-card {
    padding: 0.5em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.focus-card h3 {
    color: #686868;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: lighter;
    font-size: small;
}

.focus-text-container {
    padding: 1.5em;
    width: 25em;
    background: linear-gradient(180deg,rgba(26, 64, 41, 1) 0%, rgba(78, 122, 78, 1) 100%);
    border-radius: 0.3em;
}

.focus-text-container h2 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-variant: small-caps;
    color: rgb(255, 255, 240);
}

.focus-text-container p {
    font-family: Helvetica, "Arial Rounded MT", Arial, sans-serif;
    font-size:medium;
    color: rgb(255, 255, 240);
}

.focus-content img {
    max-width: 26em;
    max-height: 26em;
    border-radius: 1em 1em 1em 1em;
    border: solid 2px rgba(0,0,0,0.2);
}

.focus-image {
    display: flex;
    padding: 0.5em;
}

.links {
    margin: 0 auto 0 auto;
    padding: 1em;
}

.links img {
    max-height: 1.5em;
    border: none;
}

.category-note-1{
    background-color: rgb(54, 69, 79);
    width: fit-content;
    padding: 0.5em;
    color: #ffffff;
    border-radius: 0.5em;
    font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
    font-size: small;
}

.category-note-2{
    background-color: #354E41;
    width: fit-content;
    padding: 0.5em;
    color: #ffffff;
    border-radius: 0.5em;
    font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
    font-size: small;
}

.card-main {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.card {
    width: 23em;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(168, 168, 169,0.3);
    border-radius: 0.5em;
    margin: 0.5em;
    padding: 0.5em 0.4em 0;
    background-color: rgba(255, 255, 240, 0.65);
}

.card h3 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-variant: small-caps;
    color: #060606;
}

.card h5 {
    color: #686868;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: lighter;
}

.card p {
    font-family: Arial, Helvetica, sans-serif;
    color: #060606;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.card-container {
    padding: 2px 16px;
    overflow: hidden;
}

.card img {
    object-fit: cover;
    border-radius: 1em 1em 1em 1em;
    border: solid 2px rgba(0,0,0,0.2);
}

.read-more {
    text-align: right;
    font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
}