:root {
    --acent-lib-color: #4c2c2c;

    --link-text-color: #26F6A6;
    --warning-text-color: #C6C626;
    --error-text-color: #C63636;
    --green-card-text-color: #26C626;

    --lib-history: #2c2c2c;
    
    --lib-size-svg: 16px;
}

#main {height: 90vh; width: 100%; display: flex; justify-content: center;}
/* * {outline: 1px solid #2cFc2c80;} */

/* Main text style for page */
.text {cursor:default; padding: 10px; display: flex; flex-direction: column; overflow: scroll; overflow-x: hidden;}
.text > .image > img {max-width: 70%;}
.text > .image {display: flex; align-items: center; flex-direction: column; padding: 16px 0;}
.text .image p {color: var(--sub2-text-color);}
.text > span {text-align: justify; font-size: 16px;}
.text > *:not(span) {text-align: center;}
.text-link {color: var(--link-text-color); cursor: alias;}
.text > .warning {color: var(--warning-text-color);}
.text > .error {color: var(--error-text-color);}
.text > .green-card {color: var(--green-card-text-color);}
.text > .author {display: flex; justify-content: end; margin: 10px 0 0 0;}
.text > .author > span {font-size: 16px; font-weight: 800;}
.text > h2 {text-decoration: underline; padding: 10px 0; font-size: 26px; color: var(--sub-text-color); font-size: 30px;}
.text > h3 {text-decoration: underline; padding: 8px 0; font-size: 22px; color: var(--sub-text-color); font-size: 26px;}
.text::-webkit-scrollbar {width: 6px;}
.text::-webkit-scrollbar-track {background: transparent;}
.text::-webkit-scrollbar-thumb {background: var(--main-sub-color)}

.library-block {display: flex; width: 960px; min-width: 768px; height: 90vh; gap: 10px;}

.category {height: 100%; width: 34%; background: var(--main-main-color);border: 2px solid var(--main-border-color); border-radius: 2px 2px 2px 8px; overflow-y: hidden;}
.category-selections {user-select: none; display: flex; flex-direction: column; padding: 6px; gap: 2px; font-size: 16px; font-weight: 500; overflow-y: scroll; overflow-x: hidden; }
.category-selections::-webkit-scrollbar {width: 6px;}
.category-selections::-webkit-scrollbar-track {background: transparent;}
.category-selections::-webkit-scrollbar-thumb {background: var(--main-sub-color)}

.folder, .file {border-radius: 2px; transition: background 0.3s ease;}
.folder-data {display: flex; align-items: center; transition: background 0.3s ease, fill 0.3s ease; padding: 2px;}
.file {padding: 2px 0; gap: 4px; display: flex; align-items: center;}
.file > svg {width: var(--lib-size-svg); height: var(--lib-size-svg); padding-left: 2px;}
.folder-data:hover, .file:hover {background: var(--acent-lib-color); border-radius: 2px;}
.folder-data:hover > .folder-icon {fill: var(--main-text-color);}
.folder-icon {width: var(--lib-size-svg); height: var(--lib-size-svg); margin-top: 4px; margin-right: 4px; rotate: -90deg; transition: rotate 0.3s ease; fill: var(--sub2-text-color);}
.folder-content {display: flex; flex-direction: column;}
.folder-data > .folder-icon {display: flex; align-items: center; justify-content: center;}
.folder > .folder-content {max-height: 0; overflow: hidden;}
.open > .folder-content {max-height: max-content;}
.open > .folder-data > .folder-icon {rotate: 0deg;}
.h1 > span, .h1 .folder-name span {font-size: 14px; color: var(--main-text-color);}
.h2 > span, .h2 .folder-name span {font-size: 13px; color: var(--sub-text-color)}
.h3 > span, .h3 .folder-name span {font-size: 12px; color: var(--sub2-text-color);}
.h2 {margin-left: 8px;}
.h3 {margin-left: 20px;}
.active {background: var(--acent-lib-color);} 
.active:hover {background: var(--acent-lib-color);}

#svg-other {fill: #6c6c6c;}
#svg-shop {fill: #9c9c2c;}
#svg-history {fill: #AcAcAc;}
#svg-mechanics {fill: #9c6c2c;}
#svg-items {fill: #2c5c9c;}
#svg-rule {fill: #9c3c2c;}
#svg-secret {fill: #2c9c2c;}
#svg-person {fill: #2c9c9c;}
#svg-location {fill: #2c9c4c;}
#svg-gag {fill: #9c2c9c;}
#svg-animal {fill: #5c2c9c;}

.content {display: flex; height: 100%; width: 100%; background: var(--main-main-color); border: 2px solid var(--main-border-color); border-radius: 2px 2px 8px 2px; overflow-y: hidden;}
.content-wrap, .category-wrap {display: flex; flex-direction: column; height: 100%; width: 100%;}
.category-name, .note-name {border-bottom: 2px solid var(--main-sub-color); display: flex; cursor: default ; padding: 4px 0; height: 26px; justify-content: center; align-items: center;}