@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600&display=swap');

:root {
    --vscode-bg: #1e1e1e;
    --vscode-sidebar: #252526;
    --vscode-panel: #1f1f1f;
    --vscode-border: #444444;
    --vscode-text: #d4d4d4;
    --vscode-text-dim: #858585;
    --vscode-blue: #569cd6;
    --vscode-green: #4ec9b0;
    --vscode-orange: #d7ba7d;
    --vscode-yellow: #dcdcaa;
    --vscode-red: #f44747;
    --vscode-purple: #c586c0;
    --vscode-tab-active: #3c3c3c;
    --vscode-tab-inactive: #2d2d2d;
    --vscode-statusbar: #007acc;
    --vscode-statusbar-inactive: #68217a;
    --vscode-button: #0e639c;
    --vscode-icon: #c5c5c5;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Fira Code', monospace;
    background-color: var(--vscode-bg);
    color: var(--vscode-text);
    height: 100vh;
    display: flex;
    overflow: hidden;
}

.vscode-container {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.activity-bar {
    flex: 0 0 48px;
    height: 100%;
}

.sidebar {
    flex: 0 0 250px;
    height: 100%;
    overflow-y: auto;
}

.editor {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}