:root {
    --body-margin: 20%;

    --accent: ;

    --background-primary: #251829;
    --background-secondary: #312336;
    --background-tertiary: #221625;

    --foreground-primary: #8f829a;

    --hyperlink-normal: #76657a;
    --hyperlink-visited: blue;
    --hyperling-hover: #75578e;

    --borders: var(--background-secondary);
    --separator: #413047;
}

html {
    background-image: url(/checkers.png);
    animation: scrolling 19s linear 1;
    animation-direction: forward;
    animation-iteration-count: infinite;
    background-size: 200px;
    background-color: var(--background-primary);
    margin-top: 20px;
 
}

body {
    font-family: monospace;
    font-size: 14.2px;
    color: var(--foreground-primary);
    margin-left: var(--body-margin);
    margin-right: var(--body-margin);
}

a {
    color: var(--hyperlink-normal);
}

a:hover {
    color: var(--hyperling-hover);
}

hr {
    color: var(--separator);
}

h1 {
    margin-top:0px;
}

/* ============= parts ===============*/

.box {
    border: 2px dashed var(--borders);
    background-color: var(--background-primary);
    box-shadow: 20px 15px #0000001f;
}

footer {
    margin: 5px;
    padding: 5px;
    filter: opacity(50%);
}display

/* ========== Containers ==============*/

.c-layout {
    /* display: inline-flex; */
    width: 100%;
}

.c-main {
    padding: 0px;
    margin-right: 10px;
    min-width: 70%;
    width: 100%;
}

.c-content {
    padding: 15px;
}

.c-sidepanel {
    width: 100%;
}

.c-floating {
    padding: 35px;
    max-width: 50%;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ========== Header Style ==============*/

.c-heading {
    padding: 5px;
    background-color: var(--background-secondary);
}

.site-title {
    font-size: 25px !important;
    font-weight: 900 !important;
}

.c-navbar {
    /* background-color: #00000014; */
    background-color: var(--background-tertiary);
}

.c-navbar a {
    color: var(--foreground-primary)!important;
    text-decoration: none;
}

.c-navbar ul {
    display: inline-flex;
    margin: 0px;
    padding: 0px;
}

.c-navbar li {
    color: blue !important;
    text-decoration: none;
    list-style: none;
    padding: 10px;
    border: 2px dotted var(--background-secondary);
    background-color: var(--background-primary);
}

.c-navbar li:hover {
    background-color: #211524;
}


/* ============= Sidepanel ================ */

.c-sidepanel-title {
    font-size: 25px;
    font-weight: 500;
    padding: 5px;
    background-color: var(--background-tertiary);

}


/* == News */


.news-heading {
    margin-top: 0px;
}

.news-title {
    margin: 0px;
    font-size: 20px;
    font-weight: 900;
}


.news-date {
    margin-top: 5px;
    font-size: 12px;
    font-style: italic;
}



/* =============== List ================== */

.c-blog-list {
    width: 80%;
}

.c-blog-list li {
    margin: 0px;
}

.c-post-header h1 {
    margin-bottom: 4px;
}


/* ================== IDK ================= */ 

.c-floating p {
    max-width: 80%;
}


/* ============== Responsivity ============ */

@media screen and (max-width: 800px) {
    :root {
        --body-margin: 5%;
    }
}

@-webkit-keyframes scrolling {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -200px 200px;
    }
}