:root {
    --rich-black: rgb(3, 13, 24);
    --oxford-blue: rgb(12, 21, 37);
    --yinmn-blue: #415a77ff;
    --silver-lake-blue: #778da9ff;
    --platinum: #e0e1ddff;
    --platinum-darker: #8e7878;
    --prussianblue: #003459ff;

    --white: #ffffffff;
    --rich-black-2: #00171fff;
    --prussian-blue: #003459ff;
    --cerulean: #007ea7ff;
    --picton-blue: #00a8e8ff;

    --black-alpha: rgba(3, 15, 29, 0.7);

    --accent-dark: #000d8a;
    --black: 15, 18, 25;
    --gray: 96, 115, 159;
    --gray-light: 229, 233, 240;
    --gray-dark: 34, 41, 57;
    --gray-gradient: rgba(var(--gray-light), 50%), #fff;
    --box-shadow:
        0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
        0 16px 32px rgba(var(--gray), 33%);

    --rounding: 8px;
    text-shadow: -2px 1px 4px black;
}

@font-face {
    font-family: "Atkinson";
    src: url("/fonts/atkinson-regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Atkinson";
    src: url("/fonts/atkinson-bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("/fonts/Inter-Regular.ttf");
    font-weight: normal;
}

@font-face {
    font-family: "Inter";
    src: url("/fonts/Inter-Bold.ttf");
    font-weight: bold;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("/fonts/IBMPlexMono-Regular.ttf");
    font-weight: normal;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("/fonts/IBMPlexMono-Bold.ttf");
    font-weight: bold;
}

@font-face {
    font-family: "Atkinson";
    src: url("/fonts/atkinson-regular.woff");
    font-weight: normal;
}

@font-face {
    font-family: "Atkinson";
    src: url("/fonts/atkinson-bold.woff");
    font-weight: bold;
}

@font-face {
    font-family: "Quicksand";
    src: url("/fonts/Quicksand-Light.ttf");
    font-weight: lighter;
}

@font-face {
    font-family: "Quicksand";
    src: url("/fonts/Quicksand-Medium.ttf");
    font-weight: normal;
}

@font-face {
    font-family: "Quicksand";
    src: url("/fonts/Inter-Bold.ttf");
    font-weight: bold;
}

body {
    /*background: var(--rich-black);*/
    background: linear-gradient(to top, #1c2127, #001b2e);
    background-attachment: fixed;
}

p {
    color: var(--platinum);
    font-family: Inter;
}

a {
    color: var(--white);
    transition: all ease-in-out 200ms;
}

a:hover {
    color: var(--picton-blue);
    transition: all ease-in-out 200ms;
    text-decoration: underline;
}

video {
    margin: auto;
}

hr {
    border-color: var(--cerulean);
    margin-bottom: 2em;
}

h1 {
    font-size: 48px;
    font-weight: bold;
    color: var(--platinum);
    margin-top: 8px;
    /*text-decoration: underline;*/
    border-bottom: 2px dashed var(--picton-blue);
}

h2 {
    font-size: 42px;
    font-weight: bold;
    color: var(--platinum);
}

h3 {
    font-size: 32px;
    font-weight: bold;
    color: var(--platinum);
}

ul.bloglist {
    li {
        font-family: Inter;
        font-size: 19px;
        margin-bottom: 12px;
        padding-left: 7px;

        img {
            min-width: 16px;
            min-height: 16px;
            max-width: 64px;
            max-height: 64px;
            filter: brightness(25%);
        }
    }
}

prose {
    p {
        line-height: 1.5;
        margin: 16px 7px;
        font-family: Quicksand;
        font-size: 16px;
    }

    img {
        margin: 8px 0;
        border: 2px dashed var(--silver-lake-blue);
    }

    video {
        border: 2px dashed var(--silver-lake-blue);
    }

    a {
        color: orange;
        transition: all ease-in-out 200ms;
    }

    a:hover {
        color: var(--picton-blue);
        transition: all ease-in-out 200ms;
        text-decoration: underline;
    }

    strong {
        text-decoration: underline;
    }

    ol {
        line-height: 1.5;
        margin: 16px 7px;
        font-family: IBM Plex Mono;
        font-size: 16px;
        color: var(--platinum);
    }

    ul {
        margin: 16px 7px;
        font-family: Quicksand;
        font-weight: bold;
        font-size: 14px;
        /*color: var(--picton-blue);*/
        color: orange;
        list-style: square;
    }
}

.no-x-scroll {
    max-width: 100%;
    overflow-x: hidden;
}

.outline-dashed {
    border: 2px dashed var(--silver-lake-blue);
}

.date {
    color: var(--platinum-darker);
    font-family: IBM Plex Mono;
    font-weight: light;
    font-size: 14px;
}

#inner {
    margin-top: 2%;
    padding: 0px 2px;
}

#titlecard {
    img {
        min-width: 16px;
        min-height: 16px;
        max-width: 72px;
        max-height: 72px;
    }
}

#pfp {
    transition: transform ease-in-out 200ms;
}

#pfp:hover {
    transform: scale(1.1);
}

#linkcluster {
    a {
        color: var(--picton-blue);
        transition: all ease-in-out 200ms;
    }

    a:hover {
        color: var(--white) !important;
    }
}

#back-to-blogs {
    display: block;
    position: relative;
    margin-bottom: 16px;
}

#new-flag {
    /*background-color: var(--silver-lake-blue);*/
    /*text-shadow: -2px 1px 2px var(--silver-lake-blue);*/
    margin: 0;
    padding: 0 3px;
    text-align: center;
    font-size: 19px;
    color: orange;
    font-family: Inter;
    justify-self: left;
    font-weight: bold;
    /*font-style: italic;*/
    /*text-decoration: underline;*/
    border: 2px dashed var(--silver-lake-blue);
}

pre {
    /*padding: 12px;*/
    margin: 12px 0px;
    border: 2px dashed var(--silver-lake-blue);

    background-color: #2a2734;
    font-size: 14px;

    font-family: Consolas;
}