/*
:root {
    --background: #f1dab0;
    --foreground: #252323;
    --border: #252323;

    --background-secondary: #BD9B61;
    --foreground-secondary: #9F7A39;
    --border-secondary: #9F7A39;

    --background-primary: #FC9B4A;
    --foreground-primary: #FFFFFF;
    --border-primary: #FC9B4A;

    --border-radius: 1em;
}
*/

:root {
    --background: #2E3440;
    --foreground: #D8DEE9;
    --border: #D8DEE9;

    --background-secondary: #434C5E;
    --foreground-secondary: #D8DEE9;
    --border-secondary: #4C566A;

    --background-primary: #3B4252;
    --foreground-primary: #f9f5d7;
    --border-primary: #4C566A;

    --border-radius: 1em;
}

body {
    font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    line-height: 1.5;
    font-size: 1.5rem;
    background-color: var(--background-secondary);
    color: var(--foreground-secondary);
}

h1 {
    font-size: 4.5rem;
}

h2 {
    font-size: 3rem;
}


h3 {
    font-size: 1.875rem;
    margin-bottom: 0px;
}

a, p {
    margin: 0px;
    text-decoration: none;
}

a {
    background-color: var(--background-secondary);
    color: var(--foreground-secondary);
    border: dashed 3px var(--border-secondary);
    padding: 1px;
    transition: 0.1s;
}

a:hover {
    background-color: var(--background-primary);
    color: var(--foreground-primary);
    border: dashed 3px var(--border-primary);
}

.list a {
    background-color: inherit;
    border: none;
}

.list {
    display: flex;
    overflow-x: scroll;
}

.post {
    width: 600px;
    height: 450px;
    overflow-y: clip;
}

.post, .block {
    margin: 1em;
    padding: 0em;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
}

.post-date {
    text-align: right;
    padding: 0em;
    margin: 0;
}

.post-title {
    border: var(--border-primary) 0.5rem;
    background-color: var(--background-primary);
    color: var(--foreground-primary);
}

.post-content {
    border: var(--border-primary) 0.5rem;
    background-color: var(--background);
    color: var(--foreground);
    flex-grow: 1;
}

.block-title {
    border: var(--border-secondary) 0.5rem;
    background-color: var(--background-secondary);
    color: var(--foreground-secondary);
}

.block-content {
    border: var(--border-secondary) 0.5rem;
    background-color: var(--background);
    color: var(--foreground);
}

.post-title, .block-title {
    transition: 0.3s;
    margin: 0;
    text-align: center;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    border-style: solid;
    font-size: 1.25em;
    display: block;
    padding: 0;
}

.post-content {
    position: relative;
}

.post:hover .post-title {
    text-decoration: underline;
}

.post:hover .post-content {
    color: color-mix(in lab, var(--background) 90%, var(--foreground) 10%);
}

.post:hover .post-content .post-link {
    color: var(--foreground);
    opacity: 1.0;
}

.post-link:hover {
    text-decoration: underline;
}

.post-link {
    transition: 0.3s;
    padding: 1rem;
    opacity: 0.0;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    margin: auto;
    border: var(--border-primary) 0.5rem;
    background-color: var(--background-primary);
    color: var(--foreground-primary);
    border-style: solid;
    border-radius: var(--border-radius);
}

.links .link {
    flex: 1 1 calc(20% - 0px);
    text-align: center;
    margin: 0.25rem;
}

.links {
    padding: 0em;
    display: flex;
    flex-wrap: wrap;
}

.post-content, .block-content {
    transition: 0.3s;
    border-top: 0;
    border-style: solid;
    display: block;
    padding: 0.5em;
    overflow: hidden;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

pre {
    margin: 0;
}

.page-title {
    text-align: center;
}

.page-content {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
}