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

* {
    font-family: 'Inter', sans-serif;
    transition: all 0.1s ease;
}

body {
    background-color: rgb(22 22 22);
}

#root {
    background-color: rgb(22 22 22);
    width: 100dvw;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
}

#content {
    background-color: rgb(33, 33, 33);
    width: 84dvw;
    height: 98dvh;
    margin: 1dvh;
    border: 2px solid rgb(44, 44, 44);
    border-radius: 5px;
    overflow-y: auto;
    scrollbar-width: thin;    /* auto | thin | none */
    scrollbar-color: rgb(88 88 88) rgb(33 33 44);
}


#sidebar {
    /* box-sizing: border-box; */
    width: 12dvw;
    height: 98dvh;
    margin: 1dvh;
    display: flex;
    flex-direction: column;
    border: 2px solid rgb(26 26 26);
    border-radius: 5px;
    /* box-shadow: 0 4px 10px -2px rgba(0,0,0,0.5); */
}

#title-btn {
    text-align: center;
    font-size: 2dvw;
    color: rgb(180 180 180);
    background: none;
    border: none;
    margin-bottom: 14dvh;
    margin-top: 2dvh;
    padding-top: 1dvh;
    padding-bottom: 1dvh;
    transition: color 0.3s ease;
}

#title-btn:hover {
    color: rgb(255 255 255);
    transition: color 0.3s ease;
    cursor: pointer;
}

#title-btn:active {
    color: rgb(200 200 200);
    transition: color 0.3s ease;
    cursor: grabbing;
}

.section-btn {
    text-align: left;
    font-size: 1.5dvw;
    color: rgb(127 127 127);
    background: none;
    border: none;
    transition: color 0.3s ease;
    margin-bottom: 1dvh;
    padding-top: 1dvh;
    padding-bottom: 1dvh;
    padding-left: 2.5dvw;
    text-decoration: none;
}

.section-btn:hover {
    color: rgb(210 210 210);
    transition: color 0.3s ease;
    cursor: pointer;
}

.section-btn:active {
    color: rgb(170 170 170);
    transition: color 0.3s ease;
    cursor: grabbing;
}