@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    /* Fonts */
    --textFont: 'Mona Sans', sans-serif;
    --codeFont: 'Space Mono', monospace;
    --titleFont: 'Space Grotesk', sans-serif;

    /* Main Colors */
    --bg: #FAF9F4;
    --bg2: #F5F3EC;
    --bg3: #EDEBE5;
    --text: #1C1A18;
    --border: #E0DBCE;

    /* Accent colors */
    --purple: #A89CEB;
    --green: #4F6814;
    --lightGreen: #ecebb4;
    --orange: #EE6B17;

    /* Cursors */
    --pointer: url(../assets/images/pointer.png), auto;
    --cursor: url(../assets/images/cursor.png), auto;
}

* {
    font-family: var(--textFont);
    color: var(--text);
    font-optical-sizing: auto;
}

body, html {
    cursor: var(--cursor);
}

a {
    cursor: var(--pointer);
}

body {
    background-color: var(--bg);
    display: flex;
    flex-direction: row;
    height: 100vh;
    font-family: var(--textFont);
    font-optical-sizing: auto;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* Menu */
#menu-toggle {
    position: fixed;
    top: 20px;
    right: calc((100vw - 1200px) / 2 - 40px);
    font-size: 1rem;
    line-height: 1.375rem;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--orange);
    padding: 4px 14px;
    border: 2px solid var(--orange);
    background-color: var(--bg2);
    box-shadow: 4px 4px 0 0 var(--orange);
    cursor: var(--pointer);
    transition: box-shadow 0.3s ease,
                background-color 0.3s ease,
                color 0.3s ease;
}

#menu-toggle:hover {
    box-shadow: 0px 0px 0 0 var(--orange);
    background-color: var(--orange);
    color: var(--bg2);
}

@media (max-width: 1320px) {
    #menu-toggle {
        right: 20px;
    }
}

#menu nav {

}

/* Main */
.redactor {
    strong {
        font-weight: bold;
    }
    code {
        font-family: var(--codeFont);
        font-optical-sizing: auto;
    }
}

/* Sidebar */
#sidebar {
    width: 400px;
    padding: 40px 40px 20px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-right: 2px dashed var(--border);
    .sidebar-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 30px;
        .avatar-wrapper {
            position: relative;
            display: inline-block;
        }
        .avatar-wrapper::before {
            content: '';
            position: absolute;
            top: 6px;
            left: 6px;
            width: 180px;
            height: 180px;
            background-color: var(--purple);
        }
        .avatar {
            width: 180px;
            height: 180px;
            object-fit: cover;
            position: relative;
            z-index: 4;
        }
        .description {
            display: flex;
            flex-direction: column;
            gap: 10px;
            font-size: 1rem;
            line-height: 1.438rem;
        }
    }
}

#socials {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    a {
        user-select: none;
        display: inline-block;
        font-family: var(--textFont);
        color: var(--green);
        border: 2px solid var(--green);
        font-size: 1rem;
        line-height: 1.375rem;
        text-decoration: none;
        padding: 0.5rem 0.875rem;
        font-weight: 600;
        background-color: var(--bg2);
        box-shadow: 4px 4px 0 0 var(--green);
        transition: box-shadow 0.3s ease,
                    background-color 0.3s ease,
                    color 0.3s ease;
    }
    a:hover {
        background-color: var(--green);
        color: var(--lightGreen);
        box-shadow: 0 0 0 0 var(--green);
    }
}

footer p {
    opacity: 0.8;
    color: var(--green);
    font-size: 0.75rem;
    line-height: 1.5rem;
}

/* Main */
main {
    flex: 1;
    max-height: 100vh;
    overflow-y: auto;
    padding: 40px 50px;
}

.page-title {
    font-family: var(--titleFont);
    font-weight: bold;
    font-size: 1.875rem;
    line-height: 2.375rem;
}

/* Recent posts */
#recent-posts {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.recent-post {
    display: flex;
    flex-direction: column;
    gap: 8px;
    a {
        font-size: 1.125rem;
        font-weight: 600;
        text-decoration: none;
        display: inline-block;
        border-bottom: 2px dashed transparent;
    }
    a:hover {
        border-color: var(--border);
    }
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    time {
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-family: var(--titleFont);
    }
}

.tags {
    display: flex;
    align-items: center;
    gap: 8px;
    li {
        padding: 2px 6px;
        font-size: 0.875rem;
        line-height: 1.25rem;
        background-color: var(--bg3);
        font-family: var(--titleFont);
        color: var(--green);
    }
}

/* Post Content */
.post-content {
    margin-top: 30px;
    font-size: 1rem;
    line-height: 1.5rem;
    p {
        margin: 16px 0;
        font-size: 1rem;
        line-height: 1.5rem;
        code {
            background-color: var(--bg3);
            padding: 2px 4px;
            font-size: 0.875rem;
            line-height: 1.25rem;
            font-family: var(--codeFont);
            color: var(--green);
        }
        strong {
            font-weight: bold;
        }
        i, em {
            font-style: italic;
        }
        small {
            font-size: 0.875rem;
            line-height: 1.25rem;
        }
        mark {
            background-color: color-mix(in srgb, var(--purple) 20%, transparent 100%);
            color: color-mix(in srgb, var(--purple) 90%, black 40%);
            padding: 2px 4px;
            font-size: 0.875rem;
            font-weight: 500;
            line-height: 1.25rem;
        }
    }
    a {
        color: var(--green);
        text-decoration: none;
        border-bottom: 2px dashed transparent;
    }
    a:hover {
        border-color: var(--border);
    }
    h1, h2, h3, h4 {
        font-family: var(--titleFont);
        font-weight: bold;
    }
    h1 {
        font-size: 1.875rem;
        line-height: 2.375rem;
        margin-top: 20px;
    }
    h2 {
        font-size: 1.5rem;
        line-height: 2rem;
        margin-top: 20px;
    }
    h3 {
        font-size: 1.25rem;
        line-height: 1.75rem;
        margin-top: 14px;
    }
    h4 {
        font-size: 1rem;
        line-height: 1.5rem;
        margin-top: 14px;
    }
    blockquote {
        border-left: 4px solid var(--orange);
        padding-left: 1rem;
        margin-left: 0;
        font-size: 1rem;
        line-height: 1.5rem;
        color: var(--green);
        margin: 16px 0;
    }
    cite {
        font-size: 0.875rem;
        line-height: 1.25rem;
        color: var(--green);
    }
    i, em {
        font-style: italic;
    }
    ul {
        list-style-type: disc;
        padding-left: 1.5rem;
        margin: 16px 0;
    }
    ol {
        list-style-type: decimal;
        padding-left: 1.5rem;
        margin: 16px 0;
    }
    table {
        border-collapse: collapse;
        width: 100%;
        margin: 16px 0;
    }
    th, td {
        border: 1px solid var(--green);
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: var(--lightGreen);
        color: var(--green);
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        font-family: var(--titleFont);
    }
    img {
        margin: 16px 0;
        box-shadow: 6px 6px 0 0 var(--orange);
        max-width: 100%;
        height: auto;
    }
    details {
        margin: 16px 0;
        border: 1px solid var(--purple);
        padding: 10px;
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    summary {
        font-weight: 600;
        cursor: var(--pointer);
    }
    pre {
        margin-top: 16px;
        font-family: var(--codeFont) !important;
        font-weight: 500;
        font-size: 1rem;
        line-height: 2rem;
        box-shadow: 6px 6px 0 0 var(--purple);
        code {
            background-color: color-mix(in srgb, var(--purple) 15%, transparent 100%) !important;
        }
    }
}