@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --block-margin: -22px;
}

* {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
    background: honeydew;
    padding-bottom: 2em;
}

h1, h2, h3,
.block {
    color: whitesmoke;
    padding: 5px;
    width: fit-content;
    border-bottom: 3px solid rgba(255, 255, 255, 0.35);
    transition-duration: 250ms;
}

.block:hover {
    letter-spacing: 1px;
}

.block-list-header {
    background: red;
    margin-left: -1em;
    margin-top: calc(var(--block-margin) + 0.5em);
}

.block-list-item {
    background: orange;
    margin-top: var(--block-margin);
}

.block-list-item:nth-of-type(even) {
    background: color-mix(in srgb, orange 75%, red);
}

.block-heading {
    background: blue;
}

.block-subheading {
    background: color-mix(in srgb, blue 75%, black);
    margin-top: var(--block-margin);
}

.block-subsubheading {
    background: color-mix(in srgb, blue 40%, black);
    margin-top: var(--block-margin);
}

main {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
}

main > p {
    max-width: 550px;
}

ul {
    list-style-position: inside;
    text-align: left;
}

.grid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 60px;
    column-gap: 10px;
    border: 1px solid #0002;
    padding: 40px;
}

.grid-item {
    width: 300px;
    height: fit-content;
    border: 1px solid #0002;
    transition-duration: 200ms;
    box-sizing: border-box;
    text-align: left;
    text-decoration: none;
}
.grid-item:hover {
    border: 3px solid #0002;
}

.shaded-bg {
    background: #0001;
}

.grid-item-title {
    display: flex;
    justify-content: space-between;
}

/* Grid item title */
.grid-item-title > span:nth-of-type(1) {
    position: relative;
    color: gray;
    top: -24px;
}

/* Grid item date */
.grid-item-title > span:nth-of-type(2) {
    position: relative;
    color: gray;
    top: -24px;
}

.grid-item > img {
    margin-top: -20px;
    width: 100%;
}

.grid-item > p {
    margin-top: 0;
    text-align: center;
    padding: 5px;
    font-style: italic;
    color: #555;
}

.icon-button {
    color: black;
    text-decoration: none;
    position: absolute;
    font-size: 2em;
}

.socials {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 5px;
    column-gap: 5px;
    border: 1px solid #0002;
    padding: 20px;
}

.social {
    padding: 8px;
    border: 1px solid #0002;
    transition-duration: 200ms;
    box-sizing: border-box;
    text-align: left;
    text-decoration: none;
    background: #0001;
    color: #000c;
}

.spacer {
    height: 8em;
}

.disclaimer {
    color: #0006;
    font-size: 0.8em;
}