body {
    margin: 0;
    min-height: 100dvh;
    background-color: #191919;

    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 450;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;

    color: white;

    display: flex;
    align-items: center;

    padding-inline: 90px;
}

@media not (prefers-reduced-motion: reduce) {
	@view-transition { navigation: auto; }
}

.cMenuPane > div {
    user-select: none;

    width: fit-content;

    transform-origin: left;
    scale: 1;

    transition:
        scale .35s cubic-bezier(0.41, 0.24, 0.19, 1.35),
        font-weight .2s;
}
.cMenuPane > div:not(:last-child):hover {
    cursor: pointer;

    font-weight: 600;

    scale: 1.1;
}

.cMenuPane > .cMenuHoverSelector {
    position: absolute;

    user-select: none;

    translate: 0 0;

    left: -40px;

    transition: transform .35s cubic-bezier(0.31, -0.17, 0.26, 1.24);
}

.cMenuPane {
    display: flex;
    flex-direction: column;

    flex: 1;

    font-size: 2.2em;

    transform-origin: left;
    scale: 1;

    transition: scale .2s;
}

.cMenuPaneActive {
    scale: 1.11;
}

.cContentPane {
    flex: 1.5;

    max-height: 92vh;

    overflow-y: auto;

    font-size: 2em;
}

.cContentLoading {
    opacity: 0;

    user-select: none;
}

@media only screen and (max-width: 1180px) {
    body {
        padding-inline: 60px;
    }
}

@media only screen and (max-width: 950px) {
    .cMenuPane {
        font-size: 2em;
    }

    .cContentPane {
        font-size: 1.9em;

        margin-right: -25px;
    }

    .cMenuHoverSelector {
        left: -30px !important;
    }
}

@media only screen and (max-width: 600px) {
    body {
        flex-direction: column;
        justify-content: center;
    }

    .cMenuPane {
        flex: unset;

        font-size: 2em;

        position: absolute;
        top: 40px;
    }

    .cContentPane {
        flex: unset;

        width: auto;
        max-height: unset;

        font-size: 1.9em;

        position: absolute;
        top: 260px;

        max-width: 90%;
    }

    .cMenuHoverSelector {
        left: -30px !important;
    }
}

.cBlogListTitle {
    background-color: #191919;

    position: sticky;
    position: -webkit-sticky;
    top: 0;

    width: 95%;
}

.cBlogList {
    list-style-type: none;

    margin: 0;
    padding: 0;
}

.cBlogList > li {
    margin-block: 50px;
}

.cBlogList > li > span {
    font-size: .7em;
    color: gray;
}

.cBlogList > li > h3 {
    margin-block: 5px;
}

.cBlogList > li > p {
    margin: 0;
    font-size: .8em;
}

.cBlogList > p {
    font-size: .9em;
    color: gray;
}

a {
    transition: color .12s;
}

a:link { color: lightskyblue; }
a:visited { color: #b092cb; }
a:hover { color: white; }
a:active { color: #f5ffc4; text-decoration: none; }

.cBlogContainer {
    font-size: 1.2em;

    max-width: 980px;
}

.cBlogContainer > hr {
    border: 1px solid #414141;
    border-inline: 0;
}

.cBlogHeader {
    margin-top: 100px;
    margin-bottom: 30px;
}

.cBlogHeader > p {
    font-size: 1em;
    color: gray;

    display: flex;
    gap: 9px;
}

.cBlogTitle {
    font-size: 2.2em;
    line-height: 1.15;

    margin: 0;
}

.cBlogHomeButton {
    text-decoration: none;

    position: absolute;
    left: 30px;
    top: 30px;

    width: 90px;
    height: 90px;

    border: 0;
    border-radius: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "Open Sans", sans-serif;
    font-weight: 550;

    letter-spacing: -.2;

    background-color: #2e2e2e;
    color: #d0d0d0 !important;

    transform-origin: left top;

    transition: all .2s cubic-bezier(0.28, 0.32, 0.26, 1.44);

    cursor: pointer;

    z-index: 1;
}

.cBlogHomeButton:hover {
    scale: 1.2;

    background-color: #323232;
    color: white !important;

    top: 35px;
    left: 35px;
}

.cBlogHomeButton:active {
    scale: 1.1;

    background-color: #303030;
    color: #d1d0d0 !important;
}

.cBlogHomeButton > span {
    font-size: 3.1em;
    text-align: center;

    user-select: none;

    color: auto;
}

@media only screen and (max-width: 1250px) {
    .cBlogContainer {
        max-width: 700px;
    }
}

@media only screen and (max-width: 950px) {
    .cBlogContainer {
        max-width: 500px;
    }
}

@media only screen and (max-width: 755px) {
    .cBlogContainer {
        margin-top: 50px;
    }
}