:root {
    --text: #929399;
    --background: #000000;
    --primary: #1ABCFE;
    --secondary: #FF7262;
    --accent: #29324f;
}

* {
    scrollbar-width: 15px;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(0, 0, 0, 0);
}

* {
    box-sizing: border-box;
    font-family:Inter;
}

*, *:before, *:after {
    box-sizing: inherit;
}

#app {
    min-height:100vh;
    color: var(--text);
    overflow-y:hidden;
    /* background: linear-gradient(180deg, #241b2c 50%, #1a262c 100%); */
    background: var(--background);
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
}


h1:focus {
    outline: none;
}

h3{
    font-family:Helvetica;
    font-weight: 700;
}

a, .btn-link {
    text-decoration:none;
    color: white;
    
}

.btn-primary {
    color: #fff;
    background-color: var(--primary);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}


.login{
    width: 500px;
    margin: 100px auto;
    padding: 10px;
}

/* -------------------------------------------CSS FOR THE APP ---------------------------------------------------- */
#layout {
    min-height: 100vh;
    display: flex;
    justify-content: space-between;
    gap: 5px;
}

/* ----------------------------------------------------- SIDEBAR -------------------------------------------------------------------- */

.sidebar{
    border-radius:3px;
    margin: 5px;
    border-right: solid 0.5px rgba(255, 255, 255, 0.11);
    width: 15vw;
    gap: 5px;
    background-color: rgb(22, 22, 22);
}

.sidebar-item{
    cursor:pointer;
    padding:5px;
}

.sidebar-item:hover{
    background-color:rgba(255, 255, 255, 0.11);
    border-radius: 5px;

}


/* ----------------------------------------------------- NOTES SECTION -------------------------------------------------------------------- */

.content{
    display:flex;
    border-radius: 10px;
    width: 85vw;
    
}


/* ----------------------------------------------------- NOTES SECTION 1 - NOTEBAR -------------------------------------------------------------------- */

.notebar{
    width: 20vw;
    resize: horizontal;
    border-right: solid 0.5px rgba(255, 255, 255, 0.2);
    gap: 10px;
}

.notebar-item{
    height: 100px;
    border: solid 0.5px rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    padding: 5px;
    background-color: var(--accent);
}

/* ----------------------------------------------------- NOTES SECTION 2 - NOTEPAGE -------------------------------------------------------------------- */

.notepage{
    width: 65vw;
}

.input-decor {
    color: var(--text);
    background-color: rgba(1,1,1,0);
    border: solid 0.5px white;
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    font-size: 20px;
}

textarea {
    color: antiquewhite;
    background-color: rgba(1,1,1,0);
    border: none;
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    resize: none;
    height: 250px;
}

textarea:focus{
    border: none;
}


/* -------------------------------------------CSS FOR THE MAIN BODY ---------------------------------------------------- */