* {
    box-sizing: border-box;
}

body {
    margin:0;
    background:#0d1117;
    color:#c9d1d9;
    font-family: Consolas, monospace;
}

/* WORKSPACE */
.workspace {
    display:flex;
    height:calc(100vh - 40px);
    overflow:hidden;
}

/* SIDEBAR */
.sidebar {
    width:260px;
    background:#010409;
    padding:20px;
    border-right:1px solid #30363d;
    transition:0.3s ease;
}

.sidebar h2 {
    margin-top:0;
}

.sidebar ul {
    list-style:none;
    padding:0;
}

.sidebar li {
    padding:10px;
    cursor:pointer;
    color:#8b949e;
    border-radius:4px;
}

.sidebar li:hover {
    background:#161b22;
    color:#58a6ff;
}

/* CONTENT */
.content {
    flex:1;
    padding:30px;
    overflow-y:auto;
}

/* TABS */
.tab { display:none; }
.tab.active { display:block; }

/* TAGS */
.tags {
    display:flex;
    flex-wrap:wrap;
}

.tags span {
    border:1px solid #30363d;
    padding:6px 12px;
    margin:5px;
    border-radius:5px;
    font-size:14px;
}

/* LINKS */
a {
    color:#58a6ff;
    word-break:break-all;
}

/* TERMINAL */
.terminal {
    height:40px;
    background:#010409;
    padding:10px;
    color:#7ee787;
    font-size:14px;
}

/* MOBILE HEADER */
.mobile-header {
    display:none;
    height:50px;
    background:#010409;
    align-items:center;
    padding:0 15px;
    border-bottom:1px solid #30363d;
}

.menu-btn {
    background:none;
    border:none;
    color:white;
    font-size:22px;
    margin-right:15px;
    cursor:pointer;
}

/* ========================= */
/* RESPONSIVE BREAKPOINTS */
/* ========================= */

/* TABLET */
@media(max-width:992px){

    .sidebar {
        width:220px;
    }

    .content {
        padding:20px;
    }
}

/* MOBILE */
@media(max-width:768px){

    .mobile-header {
        display:flex;
    }

    .workspace {
        flex-direction:column;
        height:auto;
    }

    .sidebar {
        position:fixed;
        top:50px;
        left:-260px;
        height:100%;
        z-index:999;
    }

    .sidebar.active {
        left:0;
    }

    .content {
        padding:20px 15px;
    }

    h3 {
        font-size:18px;
    }

    p, li {
        font-size:14px;
        line-height:1.6;
    }
}

/* SMALL MOBILE */
@media(max-width:480px){

    .tags span {
        font-size:12px;
        padding:5px 8px;
    }
}


a {
    color: white
}


.code-block {
    background:#0d1117;
    /* border:1px solid #30363d; */
    /* padding:20px; */
    /* border-radius:6px; */
    overflow:auto;
    font-size:14px;
    line-height:1.6;
    white-space:pre-wrap;
}

/* syntax colors */
.kw { color:#ff7b72; }      /* const */
.var { color:#79c0ff; }     /* variable */
.prop { color:#d2a8ff; }    /* property */
.str { color:#a5d6ff; }     /* string */



.prop { color:#79c0ff; }
.str { color:#a5d6ff; }


/* Markdown styling inside code block only */

.dev-code-block .md-h1 {
    color:#58a6ff;
    font-weight:bold;
}

.dev-code-block .md-h2 {
    color:#7ee787;
    font-weight:bold;
}




.dev-code-block .kw {
    color:#ff7b72;
}

.dev-code-block .var {
    color:#79c0ff;
}

.dev-code-block .str {
    color:#a5d6ff;
}

.dev-code-block .const {
    color:#ffa657;
}

.php span {
    font-size: 14px;
    line-height: 1.6;
}

.skills span {
    font-size: 16px !important;
    line-height: 1.6;
}

.skills, .experience, .txt-file{
    font-size: 14px !important;
    line-height: 1.6;
}





.dev-code-block .log-date {
    color:#8b949e;
}

.dev-code-block .log-info {
    color:#7ee787;
    font-weight:bold;
}


.dev-code-block.txt-file a {
    color:#c9d1d9;
    text-decoration:none;
    display:block;
}

.dev-code-block.txt-file a:hover {
    color:#58a6ff;
}

.php a {
    text-decoration: none;
}

.php .str.name {
    color:white ;
}   

h1, h2, h3 {
    font-size: 1.17em !important;
}

.seo-text {
    position:absolute;
    left:-9999px;
    top:auto;
}