:root {
    margin: auto;
    padding: 0rem;
    max-width: 60rem;

    --bg: #0d0d0d;
    --color: #e6e2d2;
    --orange: #ffa500;

    /* Main Colors */
    --color-main: #ffa500; 
    --color-main-hover: #e59400;
    --color-main-active: #cc8400;
    
    /* Text Colors */
    --color-text: #e6e2d1; 

    /* BG Colors */
    --bg-darkest: #0d0d0d;  
    --bg-darker: #1c1c1c;
    --bg-dark: #3b3b3b;
    --bg-light: #5c5c5c;
    --bg-lighter: #808080;

    /* Status Colors */
    --success: #28a745;
    --warning: #ffc107; 
    --error: #dc3545;
}

html {
    height: 100vh;
}

/*
#0d0d0d
#3b3b3b
#6b6b6b
#a1a1a1
#d6d6d6
*/

body {
    background-color: var(--bg-darkest);
    color: var(--color-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    height: 100%;
    margin: 3rem;
    margin-top: 0rem;
    margin-bottom: 0rem;

    display: flex;
    flex-flow: column;
}


hr {
    width: 100%;
}

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2.5rem;
}

.navbar-links {
    list-style-type: none;
}

.navbar-links li {
    display: inline;
    margin-left: 0.5rem;
}

.navbar-links li a {
    text-decoration: none;
}

/* Keep navbar links always orange */
.navbar-links li a:visited {
    color: var(--color-main);
}

.header-text {
    text-decoration: none;
    color: var(--color-main);
}

/* Keep header link always orange */
.header-text:visited {
    color: var(--color-main);
}


/* navbar componens */
.header-container * {
    margin: 0;
}

/* Service lists */

.service-container {
    display: flex;
}

.service-name-list {
    width: min-content;
}


.service-description-list {
    list-style-type: none;
}

/* Main styling */
main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* general styling */

a {
    color: var(--color-main);
}

a:visited {
    color: var(--color-main-active)
}

/* Footer */
footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* post previews */

.post-container {
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    background-color: var(--bg-darker);
}

.post-preview-title {
    margin: 0;
}

.post-metadata * {
    font-size: small;
}

.post-metadata p {
    margin: 0;
    padding: 0;
}

.post-tags {
    display: inline;
    font-size: small;
    margin: 0;
    margin-top: 10px;
}

.post-tags li {
    display: inline;
}

.tags-text {
    display: inline
}

.post-title {
    font-size: x-large;
    font-weight: bold;
}

img {
    max-width: 54rem;
    border-radius: 10px;
}

blockquote {
    color: var(--color-text);
    font-style: italic;

    border-left: 4px solid var(--color-main);;
    border-radius: 2px;
    padding-left: 3rem;
    margin-left: 0;
    line-height: 1.2;
    font-size: smaller;
    position: relative;
}

/* code coloring */
.chroma {
    padding: 1rem;
    border-radius: 10px;
    font-size: large;
}

code {
    display: block;
    overflow: scroll;
}

@media (max-width: 767px) {
    body {
        margin: 1rem;
        margin-top: 0rem;
        font-size: 90%;
    }

    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: start;
        flex-direction: column;
        margin-top: 1rem;

    }

    .navbar-links {
        padding: 0;
        margin: 0;
        margin-top: 0.5rem;
    }

    .navbar-links li {
        margin: 0;
    }

    .navbar-links li:not(:first-child) {
        margin-left: 0.25rem;
    }

    .landing-text {
        margin: 2.5rem;
        margin-top: 0;
    }

    img {
        width: 100%;
        object-fit: cover;
    }

    #footer-links {
        display: none;
    }

    footer {
        flex-direction: column;
    }

    footer * {
        margin: 0;
    }
}