/* https://coolors.co/palette/0d1b2a-1b263b-415a77-778da9-e0e1dd */
/* https://coolors.co/palette/e63946-f1faee-a8dadc-457b9d-1d3557 */

html {
    height: 100vh;
    box-sizing: border-box;
    font-family: "Noto Sans", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    background-color: #0D1B2A;
}

body {
    margin: inherit;
    height: 100%;
}

.base-layout {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.metadata {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;

    box-sizing: border-box;
    font-size: large;
    color: #E0E1DD;
    padding: 25px;
    width: 800px;
    min-height: auto;
    background-color: #1B263B;
    border: 1px solid #233850;
    border-radius: 10px;
    border-style: none;
    box-shadow: 0px 10px 5px #090f16;
}

.post-title {
    font-size: xx-large;
    color: #778DA9;
}

.post-date {
    font-size: small;
    color: #949177;
}

.header {
    background-color: #1B263B;
    color: #E0E1DD;
    font-size: x-large;
    font-weight: 500;
    border-bottom: 1px solid #233850;
    padding: 20px;
    column-gap: 20px;

    display: flex;
    place-content: start center;
}

a {
    color: #ff8a8e;
    text-decoration: none;
    transition: color 0.25s;
}

a:hover {
    color: #E63946;
}

.main-body {
    padding: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

.content {
    box-sizing: border-box;
    font-size: large;
    color: #E0E1DD;
    padding: 25px;
    width: 800px;
    height: 100%;
    background-color: #1B263B;
    border: 1px solid #233850;
    border-radius: 10px;
    border-style: none;
    box-shadow: 0px 10px 5px #090f16;
}

.home-post-holder {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.home-posts {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-post-date {
    text-align: left;
    color: #949177;
}

.home-post-title {
    text-align: right;
}

code {
    color: #949177;
    background-color: #194255;
    border-radius: 5px;
}

pre {
    background-color: #194255;
    border-radius: 5px;
}

blockquote {
    color: #a7a7a7;
    padding-left: 10px;
    border-left: 3px solid #175496;
}

.footer {
    background-color: #1B263B;
    border-top: 1px solid #233850;
    color: #E0E1DD;
    padding: 20px;

    display: flex;
    place-content: start center;
}