diff --git a/public/index.html b/public/index.html
index 7b4dec924..c4fd362de 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2979,32 +2979,34 @@
     <div id="character_popup">
             
             <div id="character_popup_text">
-                <img id="character_cross" src="img/cross.png" style="position: absolute; right: 15px; top: 15px; width: 20px; height: 20px; cursor: pointer; opacity: 0.6">
-                
-                <div><img src="img/book2.png" id="advanced_book_logo"><h3 id="character_popup_text_h3" style="margin-left: 38px;">Create character</h3></div>
-            
+                <div>
+					<img src="img/book2.png" id="advanced_book_logo">
+				</div>
+					
+				<div>
+					<h3 id="character_popup_text_h3">Create character</h3>
+				</div>
             </div>
-            
+            <img id="character_cross" src="img/cross.png" style="position: absolute; right: 15px; top: 15px; width: 20px; height: 20px; cursor: pointer; opacity: 0.6">
             <div id="personality_div">
-                <h4>Personality summary</h4><h5>A brief description of the personality (<a href="/notes/2" target="_blank">?</a>)</h5>
+                <h4>Personality summary</h4><h5>A brief description of the personality <a href="/notes/2" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
                 <input id="personality_textarea" name="personality" placeholder="" form="form_create" class="text_pole" autocomplete="off">
             </div>
             
             <div id="scenario_div">
                 <h4>Scenario</h4>
-                <h5>Circumstances and context of the dialogue (<a href="/notes/12" target="_blank">?</a>)</h5>
+                <h5>Circumstances and context of the dialogue <a href="/notes/12" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
                 <input id="scenario_pole" name="scenario" class="text_pole" maxlength="9999" value="" autocomplete="off" form="form_create">
             </div>
             
             <div id="mes_example_div">
-                <h4>Examples of dialogue</h4>
-                <h5>Forms a personality more clearly (<a href="/notes/11" target="_blank">?</a>)</h5>
-            </div>
-            <textarea id="mes_example_textarea" name="mes_example" placeholder="" form="form_create"></textarea>
-            
-            
+				<div>
+					<h4>Examples of dialogue</h4>
+					<h5>Forms a personality more clearly <a href="/notes/11" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
+				</div>
+				<textarea id="mes_example_textarea" name="mes_example" placeholder="" form="form_create"></textarea>
+			</div>
             <div id="character_popup_ok" class="menu_button">Save</div>
-            <div></div>
             
     </div>
     <div id="shadow_select_chat_popup">
@@ -3013,15 +3015,18 @@
                 <img id="select_chat_cross" src="img/cross.png" style="position: absolute; right: 15px; top:14px; width: 20px; height: 20px; cursor: pointer; opacity: 0.6">
 
             </div>
-            <div id="select_chat_import">
+            <div id="select_chat_import"> <!-- import chat popup header -->
                 
-                <div style="display: inline-block;" id="chat_import_button"><a>+import</a>&nbsp;</div><div style="display: inline-block; color:#757575;">(<a href="/notes/10" target="_blank">?</a>)</div>
-                <form id="form_import_chat"  action="javascript:void(null);" method="post" enctype="multipart/form-data" style="display: none;">
-                    <input type="file" id="chat_import_file" accept=".json, .jsonl" name="avatar">
-                    <input id="chat_import_file_type" name="file_type" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
-                    <input id="chat_import_avatar_url" name="avatar_url" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
-                    <input id="chat_import_character_name" name="character_name" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
-                </form>
+						<input id="chat_import_button" type="submit" value="+Import">
+					<div>
+						<a href="/notes/10" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
+					</div>
+					<form id="form_import_chat"  action="javascript:void(null);" method="post" enctype="multipart/form-data" style="display: none;">
+						<input type="file" id="chat_import_file" accept=".json, .jsonl" name="avatar">
+						<input id="chat_import_file_type" name="file_type" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
+						<input id="chat_import_avatar_url" name="avatar_url" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
+						<input id="chat_import_character_name" name="character_name" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
+					</form>
             </div>
             
             <div id="select_chat_div">
@@ -3107,11 +3112,11 @@
                 </div>
                 
                 <div id="description_div">
-                    <h4>Description</h4><h5>Description of personality and other characteristics (<a href="/notes/1" target="_blank">?</a>)</h5>
+                    <h4>Description</h4><h5>Description of personality and other characteristics <a href="/notes/1" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
                 <textarea id="description_textarea" name="description" placeholder=""></textarea>
                 </div>
                 <div id="first_message_div">
-                <h4>First message</h4><h5>First message from the character (<a href="/notes/3" target="_blank">?</a>)</h5>
+                <h4>First message</h4><h5>First message from the character <a href="/notes/3" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
                 <textarea id="firstmessage_textarea" name="first_mes" placeholder=""></textarea>
                 </div>
                 
@@ -3165,7 +3170,7 @@
                 <div id="online_status2">
                     <div id="online_status_indicator2"></div><div id="online_status_text2">Not connected</div>
                 </div>
-                <h4>Preset settings</h4><h5>Selecting settings (<a href="/notes/4" target="_blank">?</a>)</h5>
+                <h4>Preset settings</h4><h5>Selecting settings <a href="/notes/4" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
                 <select id="settings_perset">
                     <option value="gui">GUI KoboldAI Settings</option>
                 </select>
@@ -3184,7 +3189,7 @@
                 <div style="position: absolute; right:152px; top:-25px; opacity:0.25;"><a href="https://novelai.net/" target="_blank"><img src="img/novelai.png" style="width:auto;height:22px;"></a></div>
                 <form  action="javascript:void(null);" method="post" enctype="multipart/form-data">
 
-                    <h4>API key</h4><h5>Where to get (<a href="/notes/6" target="_blank">?</a>)</h5>
+                    <h4>API key</h4><h5>Where to get <a href="/notes/6" class="notes-link" target="_blank"><span class="note-link-span"><span class="note-link-span">?</span></span></a></h5>
                     <input id="api_key_novel" name="api_key_novel" class="text_pole" maxlength="500" value="" autocomplete="off">
 					<Br>
                     <input id="api_button_novel" type="submit" value="Connect">
@@ -3193,12 +3198,12 @@
                 <div id="online_status3">
                     <div id="online_status_indicator3"></div><div id="online_status_text3">No connection...</div>
                 </div>
-                <h4>Model</h4><h5>Selecting NovelAI model (<a href="/notes/8" target="_blank">?</a>)</h5>
+                <h4>Model</h4><h5>Selecting NovelAI model <a href="/notes/8" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
                 <select id="model_novel_select" class="option_select_right_menu" style='margin-bottom: 16px;'>
                     <option value="euterpe-v2">Euterpe</option>
                     <option value="krake-v2">Krake</option>
                 </select>
-                <h4>Preset settings</h4><h5>Selecting settings (<a href="/notes/7" target="_blank">?</a>)</h5>
+                <h4>Preset settings</h4><h5>Selecting settings <a href="/notes/7" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
                 <select id="settings_perset_novel" class="option_select_right_menu">
                     <option value="gui">Default</option>
                 </select>
@@ -3240,7 +3245,7 @@
                 </div>
 				
                 <h4>Anchors Order</h4>
-				<h5>Helps to increase the length of messages (<a href="/notes/9" target="_blank">?</a>)</h5>
+				<h5>Helps to increase the length of messages <a href="/notes/9" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
                 <select id="anchor_order">
                     <option value="0">Character Anchor - Style Anchor</option>
                     <option value="1">Style Anchor - Character Anchor</option>
diff --git a/public/style.css b/public/style.css
index 7235f562d..4a85e9a30 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,5 +1,33 @@
 @charset "UTF-8";
 
+:root {
+	--transparent:	rgba(0,0,0,0);
+	
+	--black30a:		rgba(0,0,0,0.3);
+	--black50a:		rgba(0,0,0,0.5);
+	--black70a:		rgba(0,0,0,0.7);
+	--black100:		rgba(0,0,0,1);
+	
+	--white30a:		rgba(255,255,255,0.3);
+	--white50a:		rgba(255,255,255,0.5);
+	--white70a:		rgba(255,255,255,0.7);
+	--white100:		rgba(255,255,255,1);
+	
+	--grey10:		rgb(25,25,25);
+	--grey30:		rgb(75,75,75);
+	--grey50:		rgb(125,125,125);
+	--grey70:		rgb(175,175,175);
+	
+	--fullred:		rgba(255,0,0,1);
+	--crimson70a:	rgba(100,0,0,0.7);
+	--cobalt30a:	rgba(100,100,255,0.3);
+	--sienna:		rgb(210,100,40);
+	--orangered:	rgb(255,90,0);
+	--greyCAIbg:	rgb(36,36,37);
+	--ivory:		rgba(229,224,216,1);
+}
+
+
 * {
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
@@ -12,13 +40,13 @@ body {
 	padding:0;
 	width: 100%;
     height: 100%;
-    background-color: rgb(36, 37, 37);
+    background-color: var(--greyCAIbg);
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
 	font-family: "Noto Sans", "Noto Color Emoji", sans-serif; 
 	font-size:15px; /*1rem*/
-	color: rgb(229, 224, 216);
+	color: var(--ivory);
 	
 }
 
@@ -35,16 +63,16 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-    /*background-color: rgba(0,0,0,0.5);
-    -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);*/
+    background-color: var(--black50a);
+    -webkit-box-shadow: inset 0 0 6px var(--black30a);
     -webkit-border-radius: 10px;
     border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: rgba(255,255,255,0.7);
-    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
-	        box-shadow: inset 0 0 5px rgb(0 0 0);
+    background: var(--white70a);
+    -webkit-box-shadow: inset 0 0 2px var(--black30a);
+	        box-shadow: inset 0 0 5px black;
     border-radius: 5px;
 }
 
@@ -57,10 +85,10 @@ body {
 
 
 .mes_text i {
-    color: #999;
+    color: var(--grey70);
 }
 .mes_text em {
-    color: #999;
+    color: var(--grey70);
 }
 .mes_text p {
     margin-top:0;
@@ -84,12 +112,12 @@ body {
 code {
 	padding: 5px;
     font-family: Consolas, monospace;
-    color: #ccc;
+    color: var(--white50a);
     white-space: pre-wrap;
     word-wrap: break-word;
-    border: 1px solid #666;
+    border: 1px solid var(--white30a);
     border-radius: 5px;
-    background-color: rgba(0,0,0,0.5);
+    background-color: var(--black70a);
     display: inline-block;
 }
 
@@ -124,9 +152,9 @@ code {
 	display: inline-block;
 	height:40px;
 	position:fixed;
-	color:rgba(0,0,0,.3);
-	border-bottom:1px solid rgba(0,0,0,.6);
-	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+	color:var(--black30a);
+	border-bottom:1px solid var(--black70a);
+	box-shadow: 0 4px 8px 0 var(--black30a), 0 6px 20px 0 var(--black30a);
 	backdrop-filter: blur(10px) brightness(0.3);
 	-webkit-backdrop-filter: blur(10px) brightness(0.3);
 	z-index:2001;	
@@ -150,9 +178,9 @@ code {
     overflow-x: hidden;
     overflow-y: scroll;
 	margin-top:40px;
-	border-bottom:1px solid rgba(0,0,0,.3);
-	border-left:1px solid rgba(0,0,0,.3);
-	border-right:1px solid rgba(0,0,0,.3);
+	border-bottom:1px solid var(--black30a);
+	border-left:1px solid var(--black30a);
+	border-right:1px solid var(--black30a);
 	backdrop-filter: blur(10px) brightness(0.3);
 	-webkit-backdrop-filter: blur(10px) brightness(0.3);
 	/*border-radius: 0 0 40px 40px;*/
@@ -172,11 +200,11 @@ code {
     grid-template-columns: 40px auto 40px;
     width: 100%;
     margin: 0 auto 0 auto;
-    border: 1px solid rgba(0,0,0,.5);
+    border: 1px solid var(--black50a);
     /*backdrop-filter: blur(10px) brightness(0.3);
 	-webkit-backdrop-filter: blur(10px) brightness(0.3);*/
     border-radius: 0 0 20px 20px;
-	background-color:rgba(100,0,0,0.7);
+	background-color:var(--crimson70a);
 }
 
 #send_but_sheld {
@@ -186,7 +214,7 @@ code {
     /* width: 40px; */
     position: relative;
     /* border-radius: 0 40px 40px 0; */
-    /* background-color: rgba(0,0,0,.3); */
+    /* background-color: var(--black30a); */
     background-position: center;
     /* display: grid; */
     /* vertical-align: middle; */
@@ -227,7 +255,7 @@ code {
 #options_button {
 	position: relative;
     display: inline;
-    color: rgba(255,255,255,0.5);
+    color: var(--white50a);
     cursor: pointer;
     font-size: 1rem;
     line-height: 1rem;
@@ -250,7 +278,7 @@ code {
 }
 
 #options_button:hover {
-    color: #fff;
+    color: var(--white100);
 }
 
 #options{
@@ -280,13 +308,13 @@ code {
 .options-content hr {
   margin:0;
   padding:0;
-  border-top: 1px solid #ffffff11;
+  border-top: 1px solid var(--white30a);
 }
 #right-nav-panel hr{
-    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
+    background-image: linear-gradient(90deg, var(--transparent), var(--white30a), var(--transparent));
 }
 .options-content a {
-  color: rgb(229, 224, 216);
+  color: var(--ivory, white);
   padding: 12px 16px;
   text-decoration: none;
   display: block;
@@ -302,7 +330,7 @@ code {
 
 /* Изменяем цвет ссылки при наведении */
 .options-content a:hover {
-	background-color: #333; 
+	background-color: var(--white30a); 
 }
 
 
@@ -312,7 +340,7 @@ code {
     padding: 10px 10px 0 10px;
     vertical-align: top;
     width: 100%;
-    color: rgb(229, 224, 216);
+    color: var(--ivory, white);
 }
 .avatar {
     width: 50px;
@@ -326,8 +354,8 @@ code {
     object-fit: cover;
     object-position: center center;
     border-radius: 50%;
-	border: 1px solid rgba(0,0,0,0.3);
-	box-shadow: 0 0 5px rgba(0,0,0,0.5);
+	border: 1px solid var(--black30a);
+	box-shadow: 0 0 5px var(--black50a);
 	
 	
 }
@@ -378,13 +406,13 @@ width: 100%;
     
     resize: vertical;
     display: block;
-    background-color: rgba(0,0,0,0.3);
+    background-color: var(--black30a);
     outline: none;
-    border: 1px solid rgba(255,255,255,0.5);
+    border: 1px solid var(--white30a);
     border-radius: 10px;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 2px var(--black50a);
     padding: 10px;
-    color: #cacaca;
+    color: var(--white70a);
     font-size: 15px;
     font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
     margin-left: 10px;
@@ -409,7 +437,7 @@ width: 100%;
 	text-shadow: #000 0 0 3px;
 }
 
-#send_textarea::placeholder{color:#ccc}
+#send_textarea::placeholder{color:var(--white70a)}
 
 #rm_ch_create_block textarea {
     font-size: 15px;
@@ -432,17 +460,15 @@ width: 100%;
 }
 
 .text_pole{
-    border:1px solid rgba(255,255,255,0.3);
+    border:1px solid var(--white30a);
 	border-radius:15px;
-	background-color: rgba(0,0,0,0.3);
-    margin-left: 10px;
-    
-    color: #ffffffaa;
+	background-color: var(--black30a);
+    color: var(--white70a);
     font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
     font-size: 11pt;
     padding: 7px;
 	width:90%;
-	margin-bottom:5px;
+	margin: 5px;
 }
 
 
@@ -463,7 +489,7 @@ width: 100%;
     margin-bottom: 1px;
 }
 .right_menu h5 {
-    color: #757575;
+    color: var(--white50a);
     margin:0;
     padding:0;
     margin-left: 10px;
@@ -477,11 +503,11 @@ input:focus, textarea:focus, select:focus{
 
 input::file-selector-button {
     font-weight: bold;
-    color: #fff;
+    color: var(--white100);
     padding: 0.5em;
-    border: 1px solid #666;
+    border: 1px solid var(--white50a);
     border-radius: 3px;
-    background-color: rgba(0,0,0,0.3);
+    background-color: var(--black30a);
     cursor: pointer;
 	
 }
@@ -492,19 +518,12 @@ input[type="file"] {
 
 input[type=submit] {
     font-weight: bold;
-    color: #fff;
+	font-size:1rem;
+    color: var(--white100);
     padding: 0.5em;
-    border: 1px solid #666;
-    border-radius: 3px;
-	background-color: rgba(0,0,0,0.3);
-}
-input[type=button] {
-    font-weight: bold;
-    color: #fff;
-    padding: 0.5em;
-    border: 1px solid #666;
-    border-radius: 3px;
-	background-color: rgba(0,0,0,0.3);
+    border: 1px solid var(--white30a);
+    border-radius: 5px;
+	background-color: var(--black50a);
 }
 
 #right-nav-panel-tabs{
@@ -570,8 +589,7 @@ input[type=button] {
     height: 20px;
     margin-top: -25px;
     margin-left: 0;
-    background: rgba(0, 0, 0, 0.3);
-    color: #666;
+    background: var(--black30a);
     -webkit-transition: all 0.275s;
     transition: all 0.275s;
 }
@@ -595,9 +613,9 @@ input[type=button] {
     margin-top: auto;
     margin-bottom: auto;
     font-size: 15px;
-    color: rgba(188, 193, 200, 1);
-	border: 1px solid #333;
-	background-color: rgba(0,0,0,0.3);
+    color: var(--white70a);
+	border: 1px solid var(--white30a);
+	background-color: var(--black30a);
 	padding:5px;
 	border-radius: 10px;
 }
@@ -606,9 +624,9 @@ input[type=button] {
     margin-top: auto;
     margin-bottom: auto;
     font-size: 15px;
-    color: rgba(188, 193, 200, 1);
-	border: 1px solid #333;
-	background-color: rgba(0,0,0,0.3);
+    color: var(--white70a);
+	border: 1px solid var(--white30a);
+	background-color: var(--black30a);
 	padding:5px;
 	border-radius: 10px;
 }
@@ -618,8 +636,8 @@ margin-right: 0px;
     margin-top: 0;
     float: right;
     cursor: pointer;
-    border: 1px solid rgba(255,255,255,0.3);
-    background-color: rgba(0,0,0,0.3);
+    border: 1px solid var(--white30a);
+    background-color: var(--black30a);
     border-radius: 10px;
     padding: 5px;
     opacity: 0.5;
@@ -656,14 +674,14 @@ margin-right: 0px;
 /*#################################################################*/
 
 select option {						/* works to highlight selected/active option */
-	background-color: rgba(255,255,255,0.5);
-	color: rgba(0,0,0,0.8);
+	background-color: var(--white50a);
+	color: var(--black70a);
 	
 }
 
 select option:not(:checked) {		/* works to color unselected items */
-  background-color: rgba(0,0,0,0.8);
-  color: rgba(255,255,255,0.7);
+  background-color: var(--black70a);
+  color: var(--white70a);
 }
 
 /*#######################################################################*/
@@ -679,7 +697,7 @@ display: none;
 }
 #api_button, #api_button_novel {
     cursor: pointer;
-    color: #fff;
+    color: var(--white100);
 	opacity:0.7;
     padding: 10px;
     margin-left: 10px;
@@ -689,10 +707,6 @@ display: none;
 	height: 2.5rem;
 	transition: 0.3s;
 }
-/*#api_button_novel{
-    cursor: pointer;
-    color:#ffffffaa;
-}*/
 
 #api_button:hover, #api_button_novel:hover{background-color:green;}
 
@@ -727,7 +741,7 @@ display: none;
 	transform: translateY(25%);
 }
 .character_select:hover{
-    background-color: #ffffff11;
+    background-color: var(--white50a);
 }
 #avatar_url_div{
     display: none;
@@ -793,10 +807,9 @@ display: none;
     transition: 0.5s; 
     cursor: pointer;
     width: 20px;
-    /*  background: #191b3188; */
-     text-align: center;
-     height: 20px;
-     color: #ffffff88;
+    text-align: center;
+    height: 20px;
+    color: var(--white50a);
      
 }
 #bg_menu_button img{
@@ -846,7 +859,7 @@ width: 103px;
     top: 10px;
     cursor: pointer;
     opacity: 0.5;
-    background-color: black;
+    background-color: var(--black100);
     border-radius: 2px;
     padding: 1px;
 }
@@ -890,9 +903,9 @@ width: 103px;
 .add_avatar_button_label{
     display: inline-block;
     margin-left: 15px;
-    color: #666;
-    background-color: rgba(0,0,0,0.3);
-    border: 1px solid rgba(255,255,255,0.5);
+    color: var(--white70a);
+    background-color: var(--black30a);
+    border: 1px solid var(--white50a);
     padding: 5px;
     border-radius: 5px;
     cursor: pointer;
@@ -955,7 +968,8 @@ width: 103px;
     margin-top: 25px;
     margin-right: 25px;
 	margin-bottom: 30px;
-    color: red;
+    color: var(--white100);
+	background-color: var(--crimson70a);
     font-size: 1rem;
 }
 #export_button{
@@ -964,12 +978,12 @@ width: 103px;
     margin-top: 25px;
     margin-left: 10px;
 	margin-bottom:30px;
-    color: #fff;
+    color: var(--white100);
     font-size: 1rem;
 }
 #result_info{
     margin-left: 10px;
-    color: #ffffff33;
+    color: var(--white30a);
 }
 
 .input-file {
@@ -977,38 +991,6 @@ width: 103px;
 	display: block;
 }
 
-/* SUSPECTED DISUSED STYLE*/
-/*
-.input-file-btn {
-	position: relative;
-	display: inline-block;
-	cursor: pointer;
-	outline: none;
-	text-decoration: none;
-	font-size: 14px;
-	vertical-align: middle;
-	color: rgb(255, 255, 255);
-	text-align: center;
-	border-radius: 4px;
-	background-color: rgba(0,0,0,0.3);
-	line-height: 22px;
-	height: 40px;
-        width:89px;
-	padding: 10px 20px;
-	box-sizing: border-box;
-	border: none;
-	margin: 0;
-	transition: background-color 0.2s;
-}
-
-.input-file input[type=file] {
-	z-index: -1;
-	opacity: 0;
-	display: block;
-	width: 0;
-	height: 0;
-}*/
-
 #form_bg_download{
     margin-bottom: 2px;
 	backdrop-filter: brightness(30%) blur(20px);
@@ -1027,7 +1009,7 @@ width: 103px;
     right: 0;
     text-align: center;
     margin-top: 36vh;
-    box-shadow: 0 0 2px rgba(255,0,0,0.5);
+    box-shadow: 0 0 2px var(--black50a);
     padding: 4px;
     backdrop-filter: blur(10px) brightness(0.3);
 		-webkit-backdrop-filter: blur(10px) brightness(0.3);
@@ -1045,15 +1027,15 @@ width: 103px;
     right: 0;
     text-align: center;
     margin-top: 36vh;
-    box-shadow: 0 0 5px 5px rgba(255,0,0,1);
+    box-shadow: 0 0 5px 5px var(--fullred);
     padding: 4px;
-	background-color: rgba(0,0,0,0.5);
+	background-color: var(--black50a);
     border-radius: 10px;
 }
 #dialogue_popup_ok{
     display: inline-block;
     margin-right: 20px;
-    background-color: #c00;
+    background-color: var(--crimson70a);
     cursor: pointer;
 }
 #dialogue_popup_cancel{
@@ -1072,7 +1054,7 @@ width: 103px;
 }
 #dialogue_del_mes_ok{			/*changes background of OK button in the deletion menu*/
     display: inline-block;
-    background-color: #c00;
+    background-color: var(--crimson70a);
     cursor: pointer;
 }
 #dialogue_del_mes_cancel{
@@ -1081,16 +1063,17 @@ width: 103px;
 }
 .menu_button{
     font-weight: bold;
-    color: #fff;
+    color: var(--white100);
     padding: 5px;
-    border: 1px solid rgba(0,0,0,0.5);
+    border: 1px solid var(--black50a);
     border-radius: 3px;
-    background-color: rgba(0,0,0,0.5);
+    background-color: var(--black50a);
 }
 #dialogue_del_mes .menu_button{
 	font-weight: bold;
     font-size: 1.25rem;
-
+    margin-left: 25px;
+    margin-right: 25px;
 }
 #shadow_popup{
 	backdrop-filter: blur(10px);
@@ -1190,7 +1173,7 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin) {
     overflow: hidden;
     border-radius: 3px;
     background-color: white;
-    box-shadow: inset 0 0 3px 0 rgb(0 0 0 / 80%);
+    box-shadow: inset 0 0 3px 0 var(--black70a);
     cursor: pointer;
     /*margin-top: 18px; /*odd but this is what aligns it with the character avatar*/
     /*right: 5px; /*and centers it in the checkbox column*/
@@ -1199,13 +1182,13 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin) {
 /* the checkbox starts with a size 0 background of a checkmark */
 input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin)::after {
   content: '';
-  color: #fff;
+  color: var(--white100);
   position: absolute;
   top: 4px;
   right: 4px;
   bottom: 4px;
   left: 4px;
-  background-color: transparent;
+  background-color: var(--transparent);
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;
@@ -1225,14 +1208,14 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):checked::after
 /*---------------------------------------------------------------------------------------------------------*/
 
 select {
-    color: rgba(255,255,255,0.7);
+    color: var(--white70a);
     padding: 5px 10px;
     width:95%;
     height: 34px;
     margin-left: 3px;
-    background-color: rgba(0,0,0,0.3);
+    background-color: var(--black30a);
     font-size: 15px;
-    border: 1px solid rgba(255,255,255,0.5);
+    border: 1px solid var(--white30a);
 	border-radius:10px;
     margin-top: 5px;
     margin-bottom: 45px;
@@ -1244,9 +1227,9 @@ select {
     width:284px;
     margin-left: 10px;
     margin-bottom: 35px;
-    color: rgba(255,255,255,0.7);
+    color: var(--white70a);
 	border-radius:10px;
-	background-color: rgba(0,0,0,0.3);
+	background-color: var(--black30a);
 	box-shadow:none;
 }
 
@@ -1254,9 +1237,9 @@ select {
     width:284px;
     margin-left: 10px;
     margin-bottom: 35px;
-    color: rgba(255,255,255,0.7);
-    box-shadow: 0 0 2px rgba(0,0,0,0.5);
-	background-color: rgba(0,0,0,0.3);
+    color: var(--white70a);
+    box-shadow: 0 0 2px var(--black50a);
+	background-color: var(--black30a);
 }
 #user_avatar_block{
     margin-left: 6px;
@@ -1309,39 +1292,48 @@ input[type="range"] {
   margin-right: 15px;
   width: 200px;
   height: 7px;
-  background: rgba(255, 255, 255, 0.6);
+  background: var(--white50a);
   border-radius: 15px;
   background-size: 70% 100%;
   background-repeat: no-repeat;
 }
 
-#right-nav-panel h5 a{
-    color: #936f4a;
-}
-#right-nav-panel h5 a:hover{
-    color: #998e6b;
-}
-#right-nav-panel h4 a{
-    color: #936f4a;
-}
-#right-nav-panel h4 a:hover{
-    color: #998e6b;
+/*Notes '?' links*/
+
+.note-link-span 		{
+	color: var(--sienna);
+    border: 1px solid var(--sienna);
+    border-radius: 10px;
+    line-height: 15px;
+    font-size: 15px;
+    width: 20px;
+    height: 20px;
+    padding-left: 6px;
+    padding-top: 1px;
+    display: inline-block;
+	opacity: 0.7;
 }
 
+
+.note-link-span:hover 	{
+	color: var(--white100); 
+	background-color:var(--orangered);
+	opacity:1;}
+
 #tips_popup{
     
     width:500px;
     height: 600px;
     position: absolute;
     z-index: 2060;
-    background-color: blue;
+    background-color: var(--cobalt30a);
     margin-left: auto;
     margin-right: auto;
     left: 0;
     right: 0;
     text-align: center;
     margin-top: 15vh;
-    box-shadow: 5px 5px rgba(200,200,200,0.1);
+    box-shadow: 5px 5px var(--black30a);
     padding: 4px;
     backdrop-filter: blur(10px) brightness(0.3);
 			-webkit-backdrop-filter: blur(10px) brightness(0.3);
@@ -1354,11 +1346,11 @@ input[type="range"] {
     width: 100%;
     height: 100vh;
     z-index: 2055;
-    background-color: #00000066;
+    background-color: var(--black70a);
 }
 .mes_edit{
     float:right;
-	color: rgba(255,255,255,0.3);
+	color: var(--white30a);
     cursor:pointer;
     margin-right: 4px;
 	transition: 0.3s ease-in-out;
@@ -1368,7 +1360,7 @@ input[type="range"] {
 
 .mes_edit:after {content: "\270e";} /*unicode pencil*/
 
-.mes_edit:hover{color:white;}
+.mes_edit:hover{color:var(--white100);}
 
 
 .mes_edit_done{
@@ -1399,17 +1391,17 @@ input[type="range"] {
     padding:0;
     margin:0;
     border: none;
-    border-color: transparent;
+    border-color: var(--transparent);
     outline: none;
-    box-shadow: 0 0 3px rgba(255,255,255,0.5);
-	background-color: rgba(0,0,0,0.3);
+    box-shadow: 0 0 3px var(--white50a);
+	background-color: var(--black30a);
 	font-size: 15px;
 	line-height:1.25rem;
 }
 
 #your_name_button {
 	cursor: pointer;
-    color: #fff;
+    color: var(--white100);
     opacity: 0.7;
     padding: 10px;
     margin: 10px;
@@ -1423,42 +1415,13 @@ input[type="range"] {
 #form_change_name{
     margin-bottom: 15px;
 }
-/*.checkbox{
-    display: block;
-}
-label.checkbox input[type="checkbox"] {display:none;}
-label.checkbox span {
-  display:inline-block;
-  border:1px solid #BBBBBB33;
-  border-radius:3px;
-  width:20px;
-  height:20px;
-    vertical-align:middle;
-  margin: 0;
-  position: relative;
-  transition:width 0.1s, height 0.1s, margin 0.1s;
-  
-}
-label.checkbox :checked + span {
-  width:20px;
-  height:20px;
-  margin:0;
-}
-label.checkbox :checked + span:after {
-  content: '\2714'; 
-  font-size: 18px;
-  position: absolute;
-  top: -3px;
-  left: 2px;
-  color: #99a1a7;
-}
-*/
+
 #anchor_order{
     width:284px;
     margin-left: 10px;
     margin-bottom: 15px;
-    color: #ffffff9d;
-	background-color: rgba(0,0,0,0.5);
+    color: var(--white70a);
+	background-color: var(--black50a);
 }
 #anchor_checkbox{
 	margin-left: 10px;
@@ -1490,10 +1453,11 @@ label.checkbox :checked + span:after {
 }
 #character_popup{
 	display: none;
-    background-color: rgba(0,0,0,0.3);
+    background-color: var(--black30a);
     backdrop-filter: blur(50px);
     -webkit-backdrop-filter: blur(50px);
-    grid-template-rows: 50px 100px 100px 40px auto 45px 45px;
+    grid-template-rows: 50px 100px 100px auto;
+	grid-gap: 10px;
     max-width: 800px;
     height: calc(100vh - 50px);
     position: absolute;
@@ -1503,26 +1467,17 @@ label.checkbox :checked + span:after {
     left: 0;
     right: 0;
     margin-top: 40px;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-    padding: 4px;
-    border: 1px solid rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 2px var(--black50a);
+    padding-left: 30px;
+	padding-right: 30px;
+	padding-top: 20px;
+    padding-bottom: 20px;
+    border: 1px solid var(--black30a);
     border-radius: 0 0 20px 20px;
 }
-#character_popup h5 a{
-    color: #936f4a;
-}
-#character_popup h5 a:hover{
-    color: #998e6b;
-}
-#character_popup h4 a{
-    color: #936f4a;
-}
-#character_popup h4 a:hover{
-    color: #998e6b;
-}
 
 #character_popup h3{
-    /* margin-top:0; */
+    margin-top:0;
     margin-bottom:0;
     margin-left:0;
 }
@@ -1536,40 +1491,42 @@ label.checkbox :checked + span:after {
     margin-top:0;
     margin-bottom: 3px;
     margin-left:0;
-    color: #757575;
+    color: var(--grey50);
 
 }
 
 #character_popup_text{
-    margin-left: 36px;
+	display: grid;
+    grid-template-columns: 50px auto;
+    grid-gap: 20px;
+	align-items: center;
+    width: 100%;   
 }
 #personality_div{
-    margin-left: 36px;
-    margin-top: 20px;
+    
+    
 }
 #personality_textarea{
-    width: 92%;
-    /* height: 65px; */
-    margin-top:0;
-    margin-left:0;
+    width: 100%;   
+    
 }
 #scenario_div{
-    padding-top: 10px;
-    margin-left: 36px;
+    
+    
 }
 #mes_example_div{
-    margin-left: 36px;
-    max-height: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-rows: min-content auto;
 }
 #scenario_pole{
-    width: 92%;
+    width: 100%;
     margin-left:0;
 }
 #mes_example_textarea{
-    margin-left: 36px;
-    width: 88%;
-    height: 100%;
-    margin-top:0;
+    width: 100%;
+    max-height: 100%;
+	margin-left:0;
 }
 
 #character_popup_ok{
@@ -1608,26 +1565,21 @@ label.checkbox :checked + span:after {
     left: 0;
     right: 0;
     margin-top: 6vh;
-    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
+    box-shadow: 0 0 10px var(--black50a);
     padding: 10px;
     /* padding-top: 50px; */
 	
-    background-color: rgba(0,0,0,0.7);
+    background-color: var(--black70a);
     border-radius: 20px;
     overflow-y: scroll;
 }
-#select_chat_popup a{
-    color: #936f4a;
-}
-#select_chat_popup a:hover{
-    color: #998e6b;
-}
-#chat_import_button a{
-    color: #d5c9be;
-}
-#chat_import_button a:hover{
-    color: #998e6b;
+/*#select_chat_popup a, #chat_import_button a{
+    color: var(--sienna);
 }
+#select_chat_popup a:hover, #chat_import_button a:hover {
+    color: var(--orangered);
+}*/
+
 #export_div{
     cursor:pointer;
 }
@@ -1652,9 +1604,19 @@ label.checkbox :checked + span:after {
 #select_chat_div hr{
     margin:0;
 }
+
+#select_chat_import {
+	display:grid;
+	grid-template-columns: min-content auto;
+	align-items: center;
+	grid-gap: 10px;
+	margin-left: 15px;
+	margin-top: 15px;
+}
+
 #chat_import_button{
-    margin-top: 15px;
-    margin-left: 13px;
+    margin-top: 0;
+    margin-left: 0;
     cursor:pointer;
 }
 
@@ -1662,7 +1624,7 @@ label.checkbox :checked + span:after {
 border-radius: 5px;
     margin-right: 10px;
     margin-bottom: 10px;
-    border: 1px solid rgba(255,255,255,0.2);
+    border: 1px solid var(--white30a);
     padding: 5px;
     display: grid;
 	grid-template-columns: min-content auto;
@@ -1670,10 +1632,10 @@ border-radius: 5px;
     grid-gap: 10px;
 }
 .select_chat_block:hover {
-    background-color: rgba(255,255,255,0.2);
+    background-color: var(--white30a);
 }
 .select_chat_block[highlight]{
-    background-color: rgba(100,100,255,0.3);
+    background-color: var(--cobalt30a);
 }
 
 .select_chat_block .avatar{
@@ -1703,19 +1665,17 @@ border-radius: 5px;
     height: 40px;
     margin-left: 10px;
     font-weight: bold;
-    color: #fff;
+    color: var(--white100);
     padding: 0.5em;
-    border: thin solid rgba(200,200,200,0.2);
+    border: thin solid var(--white30a);
     border-radius: 3px;
-	background-color: rgba(0,0,0,0.3);
+	background-color: var(--black30a);
     opacity: 0.7;
 }
 #advanced_book_logo{
     width: 35px;
     height: 35px;
     display: inline-block;
-    position: absolute;
-    top:19px;
 }
 #character_popup_text_h3{
     display: inline-block;
@@ -1739,10 +1699,6 @@ hr {
     margin: 22px 0;
     height: 1px;
     border: 0;
-    background-image: -webkit-linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
-    background-image: -moz-linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
-    background-image: -ms-linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
-    background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
 }
 
 h1 {
@@ -1777,7 +1733,7 @@ a {
     -o-border-radius: 10em;
     border-radius: 10em;
     border: 0;
-    color: #fff;
+    color: var(--white100);
     margin: 6px;
     white-space: normal;
     word-wrap: break-word;
@@ -1793,7 +1749,7 @@ a {
     padding: .5rem 1rem;
     font-size: 1rem;
     font-weight: 400;
-    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+    box-shadow: 0 2px 5px 0 var(--transparent),0 2px 10px 0 var(--black30a);
 }
 .btn {
 	  
@@ -1801,18 +1757,7 @@ a {
 }
 .btn:hover {
 	  
-	  box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);
-}
-.btn-primary {
-	  border: 2px solid #2BBBAD;
-    color: #00695c;
-    background-color: transparent;
-}
-
-.btn-secondary {
-    border: 2px solid #00C851;
-    color: #007E33;
-    background-color: transparent;
+	  box-shadow: 0 5px 11px 0 var(--transparent),0 4px 15px 0 var(--black30a);
 }
 
 /* ############################################################# */
@@ -1835,7 +1780,7 @@ a {
 	-webkit-backdrop-filter: blur(10px) brightness(0.3);
     z-index: 2050;
     white-space:nowrap;
-	border-left: 1px solid rgba(0,0,0,0.3);
+	border-left: 1px solid var(--black30a);
 }
 
 @media screen and (max-width: 450px) {	
@@ -1858,7 +1803,7 @@ a {
 }
 	
 #nav-toggle:hover::after {										
-    color: #f4f4f4;
+    color: var(--ivory);
 }
 
 #nav-toggle::after {
@@ -1873,10 +1818,10 @@ a {
     height: 30px;
     margin-top: -8px;
     margin-left: -24px;
-    border: 1px solid #666;
+    border: 1px solid var(--white50a);
     border-radius: 5px;
-    background: rgba(0, 0, 0, 0.3);
-    color: #666;
+    background: var(--black30a);
+    color: var(--white50a);
     -webkit-transition: all 0.275s;
     transition: all 0.275s;   
 }
@@ -1893,6 +1838,6 @@ a {
 
 #nav-toggle:checked ~ #right-nav-panel{						
     right:0;											
-    box-shadow: -5px 0 10px 0 rgba(0, 0, 0, 0.50);
+    box-shadow: -5px 0 10px 0 var(--black50a);
     overflow-y: auto;
 }
\ No newline at end of file