/* make the body the entire window */
body {
    margin: 0;
    padding: 0; 
}

/* only show links as unvisited */
a:visited, a:hover, a:active {
    color: blue;
}

/* make the tabs and notepad take up the entire screen */
section[role="main"] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Add a border to the bottom of the tabs that matches the line color of the notepad */
.nav-item, .nav-link:hover, .nav-link.active {
    border-bottom: 1px solid #ccccdd !important;
}

/* Override tabs link color to make it gray */
.nav-link {
    color: #495057 !important;
}

/* show the close button at the far right of the tab */
.nav-link > button.btn-close:not(#addNoteButton) {
    float: right;
}

/* hacky: rotate the add note close button "x" to make it look like a "+" */
#addNoteButton {
    transform: rotate(45deg);
}

/* get rid of border on click, especially because it shows that the element is rotated */
.btn-close:focus, #addNoteButton:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* https://www.rapidtables.com/tools/notepad.html */
#notepad {
    height: 100%;
               
    padding-top: 3px;
    padding-left: 50px;

    background-image: linear-gradient(90deg, #d0a090 1px, #d0a090 1px), linear-gradient(#fdf8c8, #fdf8c8 23px, #ccd 23px, #ccd 24px, #fdf8c8 24px);
    background-size: 2px 100%, 100% 24px;
    background-position: 40px top, left 0px;
    background-repeat: no-repeat, repeat;
    background-attachment: local;
               
    overflow-x: hidden;

    line-height: 24px !important;
    font-family: sans-serif;
    font-size: 15px;

    white-space: pre-wrap;
}

/* get rid of the contenteditable focus border */
#notepad:focus {
    outline: 0px solid transparent;
}