/* INIT */

@font-face {
    font-family: "SF Pro Display";
    src: url("../fonts/SF-Pro-Display-Regular.otf") format("opentype");
    font-weight: 400; /* Regular */
    font-style: normal;
}
@font-face {
    font-family: "SF Pro Display";
    src: url("../fonts/SF-Pro-Display-Bold.otf") format("opentype");
    font-weight: 700; /* Regular */
    font-style: bold;
}


:root {
    --text-color: #E5E5E5;
    --text-second-color: #7e7e7e;
    --text-third-color: #a5a5a5;
    --bg-color: #252526;
    --bg-second-color: #151414;
    --bg-selected-color: #2B2D2E;
    --bg-frame-color: #1e1e1e;
    --bg-overlay-color: #000000b3;
    --border-color: #404040;
    --border-radius: 5px;
    --accent-color: #73ef88;
    --accent-second-color: #5bc16c;
    --bad-color: #ff4d4d;
    --neutral-color: #ffa64d;
    --purple-color: #cc4778;
    --blue-color: #7393ef;
    color-scheme: dark;
}

:where(:not(.EasyMDEContainer *, a)) {
    list-style: none;
    text-decoration: none;
    color: var(--text-color);
    margin: 0;
    padding: 0;
    font-family: 'SF Pro Display', sans-serif;
    font-size: 14px;
    user-select: none;
    box-sizing: border-box;
}

::selection {
    background: var(--accent-color);
    color: black;
}

::-moz-selection {
    background: var(--accent-color);
    color: black;
}


/* PAGE */

body {
    background-color: var(--bg-color);
}

html, body, main {
    height: 100%;
}

img {
    filter: invert(1);
}

a {
    color: #4BA3E3 !important;
}

main {
    --left: 75%;
    --top-left: 66%;
    --top-right: 40%;
    display: flex;
    gap: 3px;
    padding: 3px;
    background-color: var(--bg-second-color);
}

.main-grid {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.main-grid.grid-1 {
    min-width: 600px;
    flex: 0 0 var(--left);
}
.main-grid.grid-2 {
    min-width: 300px;
    flex: 1 1 auto;
}

.main-grid.grid-1 section:first-child {
    flex: 0 0 var(--top-left);
}

.main-grid.grid-2 section:first-child {
    flex: 0 0 var(--top-right);
}

.handle {
    position: absolute;
    background: transparent;
    z-index: 10;
}
  
.handle.vertical {
    cursor: col-resize;
    top: 0;
    bottom: 0;
    width: 2px;
    left: calc(var(--left) - 1px);
}

.handle.horizontal {
    cursor: row-resize;
    left: 0;
    right: 0;
    height: 2px;
}

.handle.horizontal.left {
    top: calc(var(--top-left) - 1px);
    right: calc(100% - var(--left));
}

.handle.horizontal.right {
    top: calc(var(--top-right) - 1px);
    left: var(--left);
}

.handle:hover {
    background-color: var(--accent-color);
    z-index: 99999;
}


/* GLOBAL */
h1 {
    font-size: 30px;
}

h2 {
    font-size: 18px;
}

section {
    height: 100%;
    border: solid 1px var(--border-color);
    border-top: none;
    border-left: none;
    overflow: hidden;
    border-radius: var(--border-radius);
    border: solid 1px var(--bg-selected-color);
    background-color: var(--bg-color);
}
section:hover {
    border-color: var(--border-color);
}

section .view {
    height: calc(100% - 2rem);
    padding: 1rem;
}

section .view > div {
    height: 100%;
}