diff --git a/.gitignore b/.gitignore
index 1739b041d..33b6f6f34 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,8 @@
 node_modules
+.DS_Store
+/public/chats
+/public/characters
+/public/User Avatars
+/public/backgrounds
 /uploads
-.DS_Store
\ No newline at end of file
+/config.conf
diff --git a/public/css/bg_load.css b/public/css/bg_load.css
index 48f626f34..139ef92e1 100644
--- a/public/css/bg_load.css
+++ b/public/css/bg_load.css
@@ -1 +1 @@
-#bg1 {background-image: linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url(../backgrounds/tavern.png);}
\ No newline at end of file
+#bg1 {background-image: url(../backgrounds/tavern.png);}
diff --git a/public/index.html b/public/index.html
index bb16a6066..4df0f484b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,7 +6,7 @@
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">-->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
+        <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>-->
 	<link rel="preconnect" href="https://fonts.googleapis.com">
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
 	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
@@ -35,6 +35,7 @@
 
 
     <script type=module>
+			
         import {encode, decode} from "../scripts/gpt-2-3-tokenizer/mod.js";
         $(document).ready(function(){
             const VERSION = '1.2.8';
@@ -51,8 +52,8 @@
                 is_name: true,
                 create_date: 0,
                 mes: '\n*You went inside. The air smelled of fried meat, tobacco and a hint of wine. A dim light was cast by candles, and a fire crackled in the fireplace. It seems to be a very pleasant place. Behind the wooden bar is an elf waitress, she is smiling. Her ears are very pointy, and there is a twinkle in her eye. She wears glasses and a white apron. As soon as she noticed you, she immediately came right up close to you.*\n\n' +
-                    ' Hello there! How is your evening going?\n' +
-                    '<img src="img/star_dust_city.png" width=80% style="opacity:0.3; disolay:block;border-radius:5px;margin-top:25px;margin-bottom:23px; margin-left: 45px;margin-right: auto;">\n<a id="verson" style="color:rgb(229, 224, 216,0.8);" href="https://github.com/TavernAI/TavernAI" target="_blank">@@@TavernAI v'+VERSION+'@@@</a><div id="characloud_url" style="margin-right:10px;margin-top:0px;float:right; height:25px;cursor: pointer;opacity: 0.99;display:inline-block;"><img src="img/cloud_logo.png" style="width: 25px;height: auto;display:inline-block; opacity:0.7;"><div style="vertical-align: top;display:inline-block;">Cloud</div></div><br><br><br><br>'
+                    ' "Hello there! How is your evening going?"<br><br>\n' +
+                    '<img src="img/star_dust_city.png" width=80%; display:block;">\n'
             }];
             
             var chat_create_date = 0;
@@ -175,35 +176,13 @@
             var preset_settings_novel = 'Classic-Krake';
             
             //css
-            var bg1_toggle = true;
+            var bg1_toggle = true;					// inits the BG as BG1
             var css_mes_bg = $('<div class="mes"></div>').css('background');
             var css_send_form_display = $('<div id=send_form></div>').css('display');
             
             var colab_ini_step = 1;
 			
-			// VARIABLES DONE NOW THE REAL CODE 
-			//
-			//
-			//
-			
-			// Dealing with Textarea Height
-			
-			//function textAreaAdjust(element) {
-			//	element.style.height = "1px";
-			//	element.style.height = (25+element.scrollHeight)+"px";
-			//}	
-			//function calcHeight(value) {
-			//	let numberOfLineBreaks = (value.match(/\n/g) || []).length;
-			//	// min-height + lines x line-height + padding + border
-			//	let newHeight = 25 + numberOfLineBreaks * 25 + 6 + 1;
-			//	return newHeight;
-			//}
-			//let textarea = document.querySelector(".resize-ta");
-			//textarea.addEventListener("keyup", () => {
-			//textarea.style.height = calcHeight(textarea.value) + "px";
-			//});
-			
-            setInterval(function() {
+           setInterval(function() {
                 switch(colab_ini_step){
                     case 0:
                         $('#colab_popup_text').html('<h3>Initialization</h3>');
@@ -244,10 +223,10 @@
 					getBackgrounds();
 					getUserAvatars();
 				});
-			
-            $('#characloud_url').click(function(){
+				
+			            $('#characloud_url').click(function(){
                 window.open('https://boosty.to/tavernai', '_blank');
-            });
+            });	
             $('#character_search_bar').on('input', function() {
                 const searchValue = $(this).val().trim().toLowerCase();
                 
@@ -261,7 +240,7 @@
                     });
                 }
             });
-            function checkOnlineStatus(){
+			function checkOnlineStatus(){
                 //console.log(online_status);
                 if(online_status == 'no_connection'){
                     $("#online_status_indicator").css("background-color", "red");
@@ -303,7 +282,7 @@
                         var getVersion = data.version;
                         if(getVersion !== 'error' && getVersion != undefined){
                             if(compareVersions(getVersion, VERSION) === 1){
-                                $('#verson').append(' <span style="color: #326d78; font-size: 15px;">(New update @'+getVersion+')</span>');
+                                $('#verson').append(' <span>(v.'+getVersion+')</span>');
                             }
                         }
 
@@ -435,16 +414,16 @@
                 }
             }
             
-            function printCharaters(){
+            function printCharacters(){
                 //console.log(1);
-                $("#rm_print_charaters_block").empty();
+                $("#rm_print_characters_block").empty();
                 characters.forEach(function(item, i, arr) {
                     var this_avatar = default_avatar;
                     if(item.avatar != 'none'){
                         this_avatar = "characters/"+item.avatar+"#"+Date.now();
 
                     }
-                    $("#rm_print_charaters_block").prepend('<div class=character_select chid='+i+'><div class=avatar><img src="'+this_avatar+'"></div><div class=ch_name>'+item.name+'</div></div>');
+                    $("#rm_print_characters_block").prepend('<div class=character_select chid='+i+'><div class=avatar><img src="'+this_avatar+'"></div><div class=ch_name>'+item.name+'</div></div>');
                     //console.log(item.name);
                 });
                 
@@ -479,13 +458,13 @@
                     characters.sort((a,b) =>  a.create_date - b.create_date );
                     //characters.reverse();
                     if(this_chid != undefined) $("#avatar_url_pole").val(characters[this_chid].avatar);
-                    printCharaters();
+                    printCharacters();
                     //console.log(propOwn.length);
                     //return JSON.parse(getData[0]);
                     //const getData = await response.json();
                     //var getMessage = getData.results[0].text;
                 }
-            }
+            }		
             async function getBackgrounds() {
                 
                 const response = await fetch("/getbackgrounds", {
@@ -513,7 +492,7 @@
 
                 }
             }
-             async function isColab() {
+       async function isColab() {
                 is_checked_colab = true;
                 const response = await fetch("/iscolab", {
                     method: "POST",
@@ -542,7 +521,7 @@
 
                 }
             }
-            async function setBackground(bg) {
+             async function setBackground(bg) {
                 /*
                 const response = await fetch("/setbackground", {
                     method: "POST",
@@ -681,7 +660,7 @@
                 messageText = messageFormating(messageText, characterName, isSystem);
                 const bias = messageFormating(mes.extra?.bias ?? '');
                 
-                $("#chat").append( "<div class='mes' mesid="+count_view_mes+" ch_name="+characterName+"><div class='for_checkbox'></div><input type='checkbox' class='del_checkbox'><div class=avatar><img src='"+avatarImg+"'></div><div class=mes_block><div class=ch_name>"+characterName+"<div title=Edit class=mes_edit><img src=img/scroll.png style='width:20px;height:20px;'></div><div class=mes_edit_cancel><img src=img/cancel.png></div><div class=mes_edit_done><img src=img/done.png></div></div><div class=mes_text>"+`</div><div class='mes_bias'>${bias}</div></div></div>` );
+				$("#chat").append( "<div class='mes' mesid="+count_view_mes+" ch_name="+characterName+"><div class='for_checkbox'></div><input type='checkbox' class='del_checkbox'><div class=avatar><img src='"+avatarImg+"'></div><div class=mes_block><div class=ch_name>"+characterName+"<div title=Edit class=mes_edit></div><div class=mes_edit_cancel><img src=img/cancel.png></div><div class=mes_edit_done><img src=img/done.png></div></div><div class=mes_text>"+`</div><div class='mes_bias'>${bias}</div></div></div>` );
 
                 const newMessage = $(`#chat [mesid="${count_view_mes}"]`);
                 newMessage.data('isSystem', isSystem);
@@ -1503,14 +1482,14 @@
             });
             
             //menu buttons
-            var seleced_button_style = { color: "#bcc1c8" };
+            var selected_button_style = { color: "#bcc1c8" };
             var deselected_button_style = { color: "#565d66" };
-            $( "#rm_button_create" ).children("h2").css(seleced_button_style);
-            $( "#rm_button_characters" ).children("h2").css(seleced_button_style);
+            $( "#rm_button_create" ).children("h2").css(selected_button_style);
+            $( "#rm_button_characters" ).children("h2").css(selected_button_style);
             $( "#rm_button_settings" ).click(function() {
                 selected_button = 'settings';
                 menu_type = 'settings';
-                $( "#rm_charaters_block" ).css("display", "none");
+                $( "#rm_characters_block" ).css("display", "none");
                 $( "#rm_api_block" ).css("display", "block");
                 
                 $('#rm_api_block').css('opacity',0.0);
@@ -1525,7 +1504,7 @@
                 $( "#rm_info_block" ).css("display", "none");
                 
                 $( "#rm_button_characters" ).children("h2").css(deselected_button_style);
-                $( "#rm_button_settings" ).children("h2").css(seleced_button_style);
+                $( "#rm_button_settings" ).children("h2").css(selected_button_style);
                 $( "#rm_button_selected_ch" ).children("h2").css(deselected_button_style);
             });
             $( "#rm_button_characters" ).click(function() {
@@ -1553,7 +1532,7 @@
                     }
                     
                 }
-                $( "#rm_charaters_block" ).css("display", "none");
+                $( "#rm_characters_block" ).css("display", "none");
                 $( "#rm_api_block" ).css("display", "none");
                 $( "#rm_ch_create_block" ).css("display", "block");
                 
@@ -1597,9 +1576,9 @@
             function select_rm_characters(){
                 
                 menu_type = 'characters';
-                $( "#rm_charaters_block" ).css("display", "flex");
-                $('#rm_charaters_block').css('opacity',0.0);
-                $('#rm_charaters_block').transition({  
+                $( "#rm_characters_block" ).css("display", "block");
+                $('#rm_characters_block').css('opacity',0.0);
+                $('#rm_characters_block').transition({  
                         opacity: 1.0,
                         duration: animation_rm_duration,
                         easing: animation_rm_easing,
@@ -1610,12 +1589,12 @@
                 $( "#rm_ch_create_block" ).css("display", "none");
                 $( "#rm_info_block" ).css("display", "none");
                 
-                $( "#rm_button_characters" ).children("h2").css(seleced_button_style);
+                $( "#rm_button_characters" ).children("h2").css(selected_button_style);
                 $( "#rm_button_settings" ).children("h2").css(deselected_button_style);
                 $( "#rm_button_selected_ch" ).children("h2").css(deselected_button_style);
             }
             function select_rm_info(text){
-                $( "#rm_charaters_block" ).css("display", "none");
+                $( "#rm_characters_block" ).css("display", "none");
                 $( "#rm_api_block" ).css("display", "none");
                 $( "#rm_ch_create_block" ).css("display", "none");
                 $( "#rm_info_block" ).css("display", "flex");
@@ -1632,7 +1611,7 @@
                 select_rm_create();
                 menu_type = 'character_edit';
                 $( "#delete_button_div" ).css("display", "block");
-                $( "#rm_button_selected_ch" ).children("h2").css(seleced_button_style);
+                $( "#rm_button_selected_ch" ).children("h2").css(selected_button_style);
                 var display_name = characters[chid].name;
 
                 $( "#rm_button_selected_ch" ).children("h2").text(display_name);
@@ -1704,16 +1683,16 @@
                 }
                 
             });
-            $(document).on('click', '.del_checkbox', function(){
+            $(document).on('click', '.del_checkbox', function(){		//when a checkbox is clicked
                 $('.del_checkbox').each(function(){
                     $(this).prop( "checked", false );
                     $(this).parent().css('background', css_mes_bg);
                 });
-                $(this).parent().css('background', "#791b31");
-                var i = $(this).parent().attr('mesid');
+                $(this).parent().css('background', "#791b31");			//sets the bg of the selected msg to a muted red
+                var i = $(this).parent().attr('mesid');					//checks the message ID in the chat
                 this_del_mes = i;
-                while(i < chat.length){
-                    $(".mes[mesid='"+i+"']").css('background', "#791b31");
+                while(i < chat.length){									//as long as the current message ID is less than the total chat length
+                    $(".mes[mesid='"+i+"']").css('background', "#791b31");	//sets the bg of the all msgs BELOW the selected msg to a muted red as well
                     $(".mes[mesid='"+i+"']").children('.del_checkbox').prop( "checked", true );
                     i++;
                     //console.log(i);
@@ -1733,8 +1712,6 @@
             $('#logo_block').click(function(event) {  
                 if(!bg_menu_toggle){
                     $('#bg_menu_button').transition({ perspective: '100px',rotate3d: '1,1,0,180deg'});
-                    //$('#bg_menu_content1').css('display', 'block');
-                    //$('#bg_menu_content1').css('opticary', 0);marginTop: '10px'
                     $('#bg_menu_content').transition({
                         opacity: 1.0, height: '90vh',
                         duration: 340,
@@ -1753,28 +1730,28 @@
                       });
                 }
             });
-            $(document).on('click', '.bg_example_img', function(){
-                var this_bgfile = $(this).attr("bgfile");
+            $(document).on('click', '.bg_example_img', function(){	//when user clicks on a BG thumbnail...
+                var this_bgfile = $(this).attr("bgfile");			// this_bgfile = whatever they clicked
                 
-                if(bg1_toggle == true){
-                    bg1_toggle = false;
-                    var number_bg = 2;
-                    var target_opacity = 1.0;
-                }else{
-                    bg1_toggle = true;
-                    var number_bg = 1;
-                    var target_opacity = 0.0;
+                if(bg1_toggle == true){								//if bg1 is toggled true (initially set as true in first JS vars)
+                    bg1_toggle = false;									// then toggle it false
+                    var number_bg = 2;									// sets a variable for bg2
+                    var target_opacity = 1.0;							// target opacity is 100%
+                }else{												//if bg1 is FALSE
+                    bg1_toggle = true;									// make it true
+                    var number_bg = 1;									// set variable to bg1..
+                    var target_opacity = 0.0;							// set target opacity to 0
                 }
-                $('#bg2').stop();
-                $('#bg2').transition({  
-                        opacity: target_opacity,
-                        duration: 1300,//animation_rm_duration,
+                $('#bg2').stop();									// first, stop whatever BG transition was happening before
+                $('#bg2').transition({  							// start a new BG transition routine
+                        opacity: target_opacity,					// set opacity to previously set variable
+                        duration: 1300,								//animation_rm_duration,
                         easing: "linear",
-                        complete: function() {
+                        complete: function() {						// why does the BG transition completion make the #options (right nav) invisible?
                             $("#options").css('display', 'none');
                         }
                 });
-                $('#bg'+number_bg).css('background-image', 'linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url("backgrounds/'+this_bgfile+'")');
+                $('#bg'+number_bg).css('background-image', 'url("backgrounds/'+this_bgfile+'")');
                 setBackground(this_bgfile);
 
             });
@@ -1910,8 +1887,8 @@
                             processData: false, 
                             success: function(html){
                                 setBackground(html);
-                                if(bg1_toggle == true){
-                                    bg1_toggle = false;
+                                if(bg1_toggle == true){				// this is a repeat of the background setting function for when  user uploads a new BG image
+                                    bg1_toggle = false;				// should make the Bg setting a modular function to be called in both cases
                                     var number_bg = 2;
                                     var target_opacity = 1.0;
                                 }else{
@@ -1927,7 +1904,7 @@
                                             $("#options").css('display', 'none');
                                         }
                                 });
-                                $('#bg'+number_bg).css('background-image', 'linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url('+e.target.result+')');
+                                $('#bg'+number_bg).css('background-image', 'url('+e.target.result+')');
                                 $("#form_bg_download").after("<div class=bg_example><img bgfile='"+html+"' class=bg_example_img src='backgrounds/"+html+"'><img bgfile='"+html+"' class=bg_example_cross src=img/cross.png></div>");
                             },
                             error: function (jqXHR, exception) {
@@ -2175,7 +2152,7 @@
                 }
             });
             
-            $( "body" ).click(function() {
+            $( "body" ).click(function() {								// this makes the input bar's option menu disappear when clicked away from
                 if($("#options").css('opacity') == 1.0){
                     $('#options').transition({  
                         opacity: 0.0,
@@ -2214,13 +2191,56 @@
                     callPopup('<h3>Start new chat?</h3>');
                 }
             });
+			//RossAscends: Lets add some hotkeys
+			document.addEventListener('keydown', (event) => {
+				if(event.ctrlKey && event.key == "Enter") {				// Ctrl+Enter for Regeneration Last Response
+					if(is_send_press == false){
+						is_send_press = true;
+						Generate('regenerate');
+					}
+				}else if(event.ctrlKey && event.key == "ArrowUp") {		//Ctrl+UpArrow for Connect to last server
+					document.getElementById('api_button').click();
+
+				}
+			});	
+			
+			//-----------------------------------------------
+			
+			// Now let's add functionality that will close the BG menu and/or RightNav panels when User clicks outside them
+			
+			// COULDN'T GET THIS TO WORK BUT CODE LEFT FOR FUTURE REFERENCE
+			
+			// general function to deetct which elements are being clicked on. 
+ 			//$('body').on('click', function(e){
+			//	alert( 'Class is '+ $(e.target).attr('class') + '. ID is '+ $(e.target).attr('id'));
+			//});
+			
+			//general function to watch the status of the nav-toggle checkbox
+			//var checkb = document.getElementById("nav-toggle");
+			//checkb.addEventListener('change', function(e) {
+			//	alert(checkb.checked, checkb.value);
+			
+			//});
+			
+			//$('document').ready(function(){
+			//	$("body").click(function(e){
+			//		if (e.target.parentNode.classList.contains('.nav') == false){
+			//		alert('triggered!');
+			//		document.getElementById('nav-toggle').click();
+			//	};	
+			//});
+			//});
+			 
+			//---------------------------------------------------
+						
             $( "#option_regenerate" ).click(function() {
                 if(is_send_press == false){
                     is_send_press = true;
                     Generate('regenerate');
                 }
             });
-            $( "#option_delete_mes" ).click(function() {
+            // this function hides the input form, and shows the delete/cancel buttons fro deleting messages from chat
+			$( "#option_delete_mes" ).click(function() {
                 if(this_chid != undefined && !is_send_press){
                     $('#dialogue_del_mes').css('display','block');
                     $('#send_form').css('display','none');
@@ -2232,6 +2252,7 @@
                     });
                 }
             });
+			//functionality for the cancel delete messages button, reverts to normal display of input form
             $( "#dialogue_del_mes_cancel" ).click(function() {
                 $('#dialogue_del_mes').css('display','none');
                 $('#send_form').css('display',css_send_form_display);
@@ -2245,6 +2266,7 @@
                 this_del_mes = 0;
 
             });
+			//confirms message delation with the "ok" button
             $( "#dialogue_del_mes_ok" ).click(function() {
                 $('#dialogue_del_mes').css('display','none');
                 $('#send_form').css('display',css_send_form_display);
@@ -2394,7 +2416,7 @@
                     $('#softprompt_block').css('display', 'none');
                 }
             }
-            async function getUserAvatars(){
+             async function getUserAvatars(){
                 const response = await fetch("/getuseravatars", {
                     method: "POST",
                     headers: {
@@ -2919,7 +2941,7 @@
                             if(mes.length > strlen){
                                 mes = '...'+mes.substring(mes.length - strlen);
                             }
-                            $('#select_chat_div').append('<div class="select_chat_block" file_name="'+data[key]['file_name']+'"><div class=avatar><img src="characters/'+characters[this_chid]['avatar']+'" style="width: 33px; height: 51px;"></div><div class="select_chat_block_filename">'+data[key]['file_name']+'</div><div class="select_chat_block_mes">'+mes+'</div></div>');
+                            $('#select_chat_div').append('<div class="select_chat_block" file_name="'+data[key]['file_name']+'"><div class=avatar><img src="characters/'+characters[this_chid]['avatar']+'" style="width: 33px;"></div><div class="select_chat_block_filename">'+data[key]['file_name']+'</div><div class="select_chat_block_mes">'+mes+'</div></div>');
                             if(characters[this_chid]['chat'] == data[key]['file_name'].replace('.jsonl', '')){
                                 //children().last()
                                 $('#select_chat_div').children(':nth-last-child(1)').attr('highlight', true);
@@ -3631,12 +3653,9 @@
 <title>Tavern.AI</title>
 </head>
 <body>
-    <!--<p class="customfont">Hello world!</p>-->
-    
-    
-    <!--<div style="cursor: pointer;opacity: 0.1;"><img src="img/donut.png" style="width: 25px;height: 25px;bottom: 2px;left: 2px;position: absolute; "><div style="position: absolute; bottom: 6px;left: 28px;"><h4 style="margin-bottom: 0px"><i>Donuts</i></h4></div></div>-->
     <div id="bg1"></div>
     <div id="bg2"></div>
+	<div id="top-bar"></div>
     
     <div id="shadow_popup">
         <div id="dialogue_popup">
@@ -3825,7 +3844,8 @@
             <img id="tips_cross" src="img/cross.png" style="position: absolute; margin-left: 230px; width: 20px; height: 20px; cursor: pointer; opacity: 0.6">
             
             <img src="img/love.png" style="width: 45px;height: 45px; margin-bottom: 0px; opacity: 0.6;">
-            <div style="margin-top:20px; margin-left: 20px; margin-right: 20px; margin-bottom: 15px;"><u>TavernAI</u> is being developed with love and care on a voluntary basis. If you like the project and want to support it, your donation would make a huge impact! <u>Thank you!</u></div>
+            <div style="margin-top:20px; margin-left: 20px; margin-right: 20px; margin-bottom: 15px;">
+			<u>TavernAI</u> is being developed with love and care on a voluntary basis. If you like the project and want to support it, your donation would make a huge impact! <u>Thank you!</u></div>
             <img src="img/eth_icon.png" style="width: 35px;height: 35px; margin-bottom: 0px; opacity: 0.6;">
             <img src="img/usdt.png" style="width: 35px;height: 35px; margin-bottom: 0px; opacity: 0.6;">
             <div id="tips_text"><h3 style="margin-top: 0px; opacity: 0.8">Ethereum or USDT</h3></div>
@@ -3836,7 +3856,17 @@
         </div>
     </div>
     <div id="bg_menu">
-        <div id="logo_block"><div id="bg_menu_button"><img src="img/tri.png"></div><img src="img/logo.png" id="site_logo"></div>
+        <div id="logo_block"><div id="bg_menu_button"><img src="img/tri.png"></div><img src="img/logo.png" id="site_logo">
+		
+		<!-- derp derp derp -->
+		<div id="update-notification">
+		<a id="verson" href="https://github.com/TavernAI/TavernAI" target="_blank"></a>
+		</div>
+		<!-- derp derp derp derp -->
+		
+		</div>
+		
+				
         <div id="bg_menu_content">
             <form id="form_bg_download"  action="javascript:void(null);" method="post" enctype="multipart/form-data">
                 <label class="input-file">
@@ -3868,7 +3898,16 @@
                 <input id="character_name_pole" name="ch_name" class="text_pole" maxlength="120" size="35" value="" autocomplete="off">
                 </div>
                 <div id="avatar_div" class="avatar_div">
-                    <div id="avatar_div_div" class="avatar"><img id="avatar_load_preview" src="img/fluffy.png" alt="avatar"></div><input type="file" id="add_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
+                    <div id="avatar_div_div" class="avatar">
+						<img id="avatar_load_preview" src="img/fluffy.png" alt="avatar">
+					</div>
+					
+					<label id="add_avatar_button">
+						<input type="file" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
+						Change Avatar
+					</label>
+					
+					
                     
                 </div>
                 
@@ -3911,7 +3950,7 @@
         <div id="rm_api_block" class="right_menu" >
             
             <h3 id="title_api">API</h3>
-            <select id="main_api" style="color:#fff;" >
+            <select id="main_api" >
                 <option value="kobold">KoboldAI</option>
                 <option value="novel">NovelAI</option>
             </select>
@@ -3925,7 +3964,7 @@
                 <img id="api_loading" src="img/load.svg" >
                 </form>
                 <div id="online_status2">
-                    <div id="online_status_indicator2"></div><div id="online_status_text2">No connection...</div>
+                    <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>
                 <select id="settings_perset">
@@ -4049,24 +4088,22 @@
                 </div>
             </div>
         </div>
-        </div>
-        <div id="rm_charater_import" class="right_menu" style="display: none;">
+        <div id="rm_character_import" class="right_menu" style="display: none;">
             <form id="form_import"  action="javascript:void(null);" method="post" enctype="multipart/form-data">
             <input type="file" id="character_import_file" accept=".json, image/png" name="avatar">
             <input id="character_import_file_type" name="file_type" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
             </form>
         </div>
-        <div id="rm_charaters_block" class="right_menu">
-            <div id="rm_characters_topbar">
-                <div id="rm_characters_topbar_buttons">
-                    <div id="rm_button_create" class="right_menu_button"><h4>+Create</h4></div>
-                    <div id="character_import_button" class="right_menu_button"><h4>+Import</h4></div>
-                </div>
-                <form id="form_character_search_form" action="javascript:void(null);">
-                    <input id="character_search_bar" class="text_pole" type="search" placeholder="Search here..." />
-                </form>
-            </div>
-            <div id="rm_print_charaters_block"></div>
+        <div id="rm_characters_block" class="right_menu">
+            <div id="rm_button_create" class="right_menu_button"><h2>+New Character</h2></div>
+            <div id="character_import_button" class="right_menu_button"><h2>+Import</h2></div>
+			
+			<div id="characloud_url" title="Find more characters on CharaCloud (coming soon)">
+				<img src="img/cloud_logo.png">
+			</div>
+			
+            <div id="rm_print_characters_block"></div>
+			
         </div>
         <div id="rm_info_block" class="right_menu">
             <div id="rm_info_panel">
@@ -4101,7 +4138,7 @@
 				
 <script type="text/javascript">
     $('#send_textarea').on('input', function () {
-        this.style.height = '1rem';
+        this.style.height = '40px';
         this.style.height =
             (this.scrollHeight) + 'px';
     });
@@ -4113,7 +4150,7 @@
 					
 					<div id="online_status">
 						<div id="online_status_indicator"></div>
-						<div id="online_status_text">No connection...</div>
+						<div id="online_status_text">Not connected</div>
 					</div>
 					
 					<input id="send_but" type="button">
diff --git a/public/style.css b/public/style.css
index 3943759e9..5d7d2924e 100644
--- a/public/style.css
+++ b/public/style.css
@@ -11,14 +11,14 @@
 }
 
 body {
-    margin: 0;
-   
+    margin: 0;  
     background-color: rgb(36, 37, 37);
     background-size: auto 100%;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
     backdrop-filter: blur(2px);
+	-webkit-backdrop-filter: blur(2px);
     scrollbar-width: thin;
     scrollbar-color: gray #191b31;
 	font-family: "Noto Sans", "Noto Color Emoji", sans-serif; /*add in custom font universally */
@@ -27,26 +27,26 @@ body {
 	-webkit-font-smoothing: antialiased;
 }
 .mes_text i {
-    color: grey !important;
+    color: #999 !important;
 }
 .mes_text em {
-    color: grey !important;
+    color: #999 !important;
 }
 .mes_text p {
     margin-top: 0px;
-    margin-bottom: 16px;
+    margin-bottom: 8px;
 }
 .mes_text strong {
     font-weight: bold;
-    color: grey !important;
+    
 }
 .mes_text h2 {
     font-weight: bold;
-    color: rgb(229, 224, 216);
+    
 }
 .mes_text h1 {
     font-weight: bold;
-    color: rgb(229, 224, 216);
+   
 }
 .mes_text li tt {
     min-width: 80px;
@@ -69,9 +69,7 @@ code {
   word-wrap: break-word;
 }
 
-/* 
 #bg1{
-    //background-image: linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url(backgrounds/tavern.png);
     background: url(backgrounds/tavern.png);
 	background-size: auto 100%;
     background-repeat: no-repeat;
@@ -83,30 +81,44 @@ code {
     height: 100%;
     z-index: -2;
 }
-#bg2{
-   //background: linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url(backgrounds/tavern.png);
+#bg2{  
 	background: url(backgrounds/tavern.png);
     background-size: auto 100%;
     background-repeat: no-repeat;
     background-attachment: fixed;
     filter: blur(2px);
     background-size: cover;
-    -webkit-backdrop-filter: blur(2px);
     backdrop-filter: blur(2px);
+	-webkit-backdrop-filter: blur(2px);
     opacity: 0.0;
     position: absolute;
     width: 100%;
     height: 100%;
     z-index: -1;
 } 
-*/
+
+/*TOPPER margin*/
+
+#top-bar{
+	content: "BLANK SPACE";
+	width:100vw;
+	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);
+	backdrop-filter: blur(10px) brightness(0.3);
+	-webkit-backdrop-filter: blur(10px) brightness(0.3);
+	z-index:2001;	
+}
 
 #sheld {
     display: grid;
-    grid-template-rows: [chat] auto [inputform] min-content; /*minmax(10px, 10vh);
-    /*background: #191b3133;*/
-    height: 100vh;
-    overflow: auto;
+    grid-template-rows: [chat] auto [inputform] min-content;
+    height: calc(100svh);
+	
+    /*overflow: auto;*/
     overflow-x: hidden;
     /*overflow-y: hidden;*/
     max-width:800px;
@@ -121,83 +133,86 @@ code {
     overflow-y: scroll;
 	border-bottom: 1px solid #333;
 	margin-top:40px;
-    padding-top: 12px;
-   
-   /*optional dark mode with blur and borders*/
-    /*
-	background: #00000050;
-    border-bottom:1px solid #00000070;
-	border-left:1px solid #00000070;
-	border-right:1px solid #00000070;	
-	-webkit-backdrop-filter: blur(20px);
-    backdrop-filter: blur(20px);
-	*/
+	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);
+	backdrop-filter: blur(10px) brightness(0.3);
+	-webkit-backdrop-filter: blur(10px) brightness(0.3);
+	border-radius: 0 0 40px 40px;
+	text-shadow: #000 0 0 3px;
+	
 }
 
 ::-webkit-scrollbar {
-    width: .60em;
-    /* background-color: blue; */
+    width: 0.6em;   
 }
 
 ::-webkit-scrollbar-track {
-    /*background-color: #191b31;*/
+    /*background-color: rgba(0,0,0,0.5);
+    -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);*/
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+}
+
+#chat::-webkit-scrollbar-track {
+    margin-bottom: 30px;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: gray;
+    background: rgba(255,255,255,0.7);
     border-radius: 1px;
-    box-shadow: inset 0.05em 0.05em 0 rgba(0, 0, 0, 0.1), inset 0 -0.05em 0 rgba(0, 0, 0, 0.07);
+    box-shadow: inset 2px 2px 2px rgb(0 0 0 / 10%);
+    -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 50%);
+    border-radius: 5px;
 }
 #form_sheld {
     white-space:nowrap;
-	padding: 10px 0 10px 0;
 	width:90%;
-	margin: 0 auto 0 auto;
-	background-color:rgb(36,37,37);
-	/*border:1px solid red;*/
+	margin: 10px auto 10px auto;
 }
 
-/*#form_sheld * {border:1px solid red;!important}*/
-
 #send_form {
     display: grid;
+    align-items: center;
     grid-template-columns: 40px auto 40px;
     width: 100%;
-	margin: 0 auto 0 auto;
-	border: 1px solid #333;
-	border-radius: 40px;
-	/*padding:10px;*/
+    margin: 0 auto 0 auto;
+    border: 1px solid rgba(0,0,0,.3);
+    backdrop-filter: blur(10px) brightness(0.3);
+		-webkit-backdrop-filter: blur(10px) brightness(0.3);
+    border-radius: 40px;
 }
 #send_textarea{
     font-size: 1rem;
     line-height: 1.5rem;
     min-height: calc(1.5em + 0.75rem + 2px);
     max-height: 50vh;
-    word-wrap: break-word;
+    word-wrap: breakword;
     height: 40px;
     resize: vertical;
     display: block;
-    background-color: rgb(36,37,37);
+    background-color: rgba(0,0,0,0);
     border: 0px;
     box-shadow: none !important; /*0 0 0px rgb(200 200 200 / 50%);*/
     padding:6px 0 6px 0;
 	font-family: "Noto Sans", sans-serif;
     margin: 0;
+	text-shadow: #000 0 0 3px;
 }
-#send_but_sheld{
-	
-	padding: 0;
-    
+#send_but_sheld {
+    padding: 0;
     border: 0;
     height: 40px;
-    width: 40px;
+    /* width: 40px; */
     position: relative;
-    top: 50%;
-    transform: translate(0%,-50%);
-	
+    /* border-radius: 0 40px 40px 0; */
+    /* background-color: rgba(0,0,0,.3); */
+    background-position: center;
+    /* display: grid; */
+    /* vertical-align: middle; */
+    /* padding-top: 377%; */
 }
 #send_but{
- 
     width: 40px;
     height: 40px;
 	margin: 0;
@@ -210,7 +225,12 @@ code {
     outline:          none;
     border:           none;
     cursor:           pointer;
+	transition: 0.3s;
+	filter:brightness(0.7);
 }
+
+#send_but:hover {filter:brightness(150%)}
+
 #loading_mes{
     display: none;
     width: 40px;
@@ -222,41 +242,58 @@ code {
     background-position: center center;
 }
 
-#options_button{
+#options_button {
+	position: relative;
+    display: inline;
+    color: rgba(255,255,255,0.5);
     cursor: pointer;
-    position: relative;
-	top: 50%;
-    transform: translateY(-50%);
-    width:40px;
-    height: 40px; 
-    background-image: url('img/options2.png');
-    background-size: contain;
-    background-repeat: no-repeat;
+    font-size: 1rem;
+    line-height: 1rem;
+    height: 40px;
+    width: 40px;
+    z-index: 2001;
+    -webkit-transition: color .25s ease-in-out;
+    -moz-transition: color .25s ease-in-out;
+    transition: color .25s ease-in-out;
+    padding: 11px;
+	
+}
+
+#options_button:after {
+    content: '\2630';		/*uses a unicode symbol for hamburger menu icon */
+    text-decoration: none;
+	font-size: 1.5rem;
+	
+}
+
+#options_button:hover {
+    color: #f4f4f4;
 }
 
 
 #options{
-    
     border-radius: 5px;
     opacity: 0.0;
     display: none;
     bottom: 196px;
     position: relative;
-    //background-color: blue;
-    z-index:1990;
-   
+    z-index:1990;  
+	
 }
 
 
 .options-content {
-    overflow: hidden;
+  overflow: hidden;
   display: block;
   position: absolute;
-  background-color: rgb(37, 38, 38);
-  border: 1px solid #444;
+  background-color: rgba(0,0,0,1);
+  backdrop-filter: brightness(0.3) blur(10px);
+  -webkit-backdrop-filter: brightness(0.3) blur(10px);
+  border: 1px solid rgba(0,0,0,0.3);
+  border-radius: 15px;
+  box-shadow: 0px 0px 5px #000;
   min-width: 205px;
-  z-index: 1;
-  //bottom: 1px;
+  z-index: 2000;
 }
 
 /* Ссылки внутри выпадающего блока */
@@ -281,7 +318,7 @@ code {
 }
 
 /* Изменяем цвет ссылки при наведении */
-.options-content a:hover {background-color: #ffffff05}
+.options-content a:hover {background-color: #ffffff11}
 
 
 .mes {
@@ -298,7 +335,7 @@ code {
 .avatar {
     width: 60px;
     height: 60px;
-    border-style: none;
+    border-style:none;
 }
 
 .avatar img {
@@ -307,6 +344,10 @@ 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);
+	
+	
 }
 
 
@@ -321,7 +362,11 @@ code {
 }
 .mes_text{
     font-weight:400;
+	line-height:1.25rem;
     padding-right: 40px;
+	padding-left: 5px;
+	padding-top:5px;
+	padding-bottom:5px;
     max-width: 720px;
     word-wrap: break-word;
     animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
@@ -340,27 +385,26 @@ code {
         visibility: hidden;
     }
 }
-.mes_text i{
-    /* color: rgb(229, 224, 216, 0.5); */
-}
+
 br {
    display: block;
    margin: 3px 0;
 }
 
 textarea{
-    width:100%; 
-    font-size: 11pt; 
-    resize: vertical; /*none;*/
-    display:block;
-	background-color: rgb(40, 42, 42);
+width: 100%;
+    font-size: 11pt;
+    resize: vertical;
+    display: block;
+    background-color: rgba(0,0,0,0.3);
     outline: none !important;
-    border:0px solid grey;
-    box-shadow: 0 0 2px rgba(200,200,200,0.5);
+    border: 1px solid rgba(255,255,255,0.5);
+    border-radius: 10px;
+    box-shadow: 0 0 2px rgb(0 0 0 / 50%);
     padding: 10px;
     color: #cacaca;
-    font-size: 15px; /*18px;*/
-	font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
+    font-size: 15px;
+    font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
     margin-left: 10px;
     margin-top: 10px;
 }
@@ -385,9 +429,9 @@ textarea{
 }
 
 .text_pole{
-    border:0px solid grey;
-    box-shadow: 0 0 2px rgba(200,200,200,0.5);
-	background-color: rgb(36, 37, 37);
+    border:1px solid rgba(255,255,255,0.3);
+	border-radius:15px;
+	background-color: rgba(0,0,0,0.3);
     margin-left: 10px;
     padding: 10px;
     color: #ffffffaa;
@@ -400,11 +444,17 @@ textarea{
 
 
 .right_menu{
-
+/*
     max-height: 86%;
     overflow: hidden;
     overflow-y: auto;
     scrollbar-width: thin;
+	*/
+	max-height: 90vh;
+    overflow: hidden;
+    overflow-y: hidden;
+    scrollbar-width: thin;
+	
 }
 .right_menu h3 {
     margin: 0px;
@@ -436,26 +486,32 @@ input::file-selector-button {
     font-weight: bold;
     color: #fff;
     padding: 0.5em;
-    border: thin solid rgba(200,200,200,0.2);
+    border: 1px solid yellow; /*#666;*/
     border-radius: 3px;
-    background-color: rgb(36,37,37);
+    background-color: red; /*rgba(0,0,0,0.3);*/
     cursor: pointer;
+	
 }
+
+input[type="file"] {
+    display: none;
+}
+
 input[type=submit] {
     font-weight: bold;
     color: #fff;
     padding: 0.5em;
-    border: thin solid rgba(200,200,200,0.2);
+    border: 1px solid #666;
     border-radius: 3px;
-	background-color: rgb(36, 37, 37);
+	background-color: rgba(0,0,0,0.3);
 }
 input[type=button] {
     font-weight: bold;
     color: #fff;
     padding: 0.5em;
-    border: thin solid rgba(200,200,200,0.2);
+    border: 1px solid #666;
     border-radius: 3px;
-	background-color: rgb(36, 37, 37);
+	background-color: rgba(0,0,0,0.3);
 }
 .right_menu_button{
     display:inline-block;
@@ -471,16 +527,66 @@ input[type=button] {
 #character_import_button{
     cursor: pointer;
     display: inline-block;
-    margin-left: 15px;/* 274px; */
-    margin-top: 6px;/* 10px; */
+	
+    /*margin-left: 15px;/* 274px; */
+    /*margin-top: 6px;/* 10px; */
     
 }
 #character_import_button h2{
     margin-top: auto;
     margin-bottom: auto;
     font-size: 17px;
-    color: rgb(188, 193, 200, 0.5);
+    color: rgb(188, 193, 200, 1);
+	border: 1px solid #333;
+	background-color: rgba(0,0,0,0.3);
+	padding:6px;
+	border-radius: 10px;
 }
+
+#rm_button_create h2{
+    margin-top: auto;
+    margin-bottom: auto;
+    font-size: 17px;
+    color: rgb(188, 193, 200, 1);
+	border: 1px solid #333;
+	background-color: rgba(0,0,0,0.3);
+	padding:6px;
+	border-radius: 10px;
+}
+
+#characloud_url{
+    margin-right: 10px;
+    margin-top: 0px;
+    float: right;
+    cursor: pointer;
+    display: inline-block;
+    border: 1px solid rgba(255,255,255,0.3);
+    background-color: rgba(0,0,0,0.3);
+    border-radius: 10px;
+    padding: 6px;
+    opacity: 50%;
+}
+
+#characloud_url img {
+	width: 25px;
+	height: auto;
+	display:inline-block;
+	opacity:0.7;
+}
+
+#characloud_url div {
+	vertical-align: top;
+	display:inline-block;
+}
+
+#rm_print_characters_block {
+    margin-top: 15px;
+    height: 90vh;
+    padding-bottom: 10vh !important;
+    overflow-y: auto;
+}
+}
+
 .right_menu_button:active {
     color:red;
     box-shadow: 0 0 5px -1px rgba(0,0,0,0.05);
@@ -490,14 +596,32 @@ input[type=button] {
 #rm_ch_create_block{
     display: none;
 }
+
+/* ################################################################*/
+/*   CUSTOMIZE THE DROPDOWN SELECT COLORS FOR RIGHT MENU
+/*#################################################################*/
+
+select option {						/* works to highlight selected/active option */
+	background-color: rgba(255,255,255,0.5);
+	color: rgba(0,0,0,0.8);
+	
+}
+
+select option:not(:checked) {		/* works to color unselected items */
+  background-color: rgba(0,0,0,0.8);
+  color: rgba(255,255,255,0.7);
+}
+
+/*#######################################################################*/
+
 #rm_api_block{
-    display: none;
+display: none;
     padding-bottom: 5px;
-    /* visibility: hidden; */
+    overflow-y: auto;
 }
 #api_url_text{
     /*margin-right: 4px;*/
-	/*display:block;*/
+	display:block;
 }
 #api_button{
     cursor: pointer;
@@ -523,18 +647,6 @@ input[type=button] {
     
 }
 
-#rm_charaters_block {
-    display: flex;
-    height: 100%;
-    flex-direction: column;
-}
-
-#rm_print_charaters_block {
-    flex-grow: 1;
-    height: 100%;
-    overflow-y: scroll;
-}
-
 /* RossAscends: doubling the API status/form CSS to place it on bottom below SHELD form*/
 
 #api_loading-bottom{
@@ -708,7 +820,8 @@ input[type=button] {
       -moz-user-select: none; 
       -ms-user-select: none; 
       user-select: none;  
-    
+	/*backdrop-filter: brightness(0.3) blur(20px);
+	-webkit-backdrop-filter: brightness(0.3) blur(20px);*/
 }
 
 /*TOPPER margin*/
@@ -734,10 +847,26 @@ input[type=button] {
     vertical-align: top;
     margin-left: 1px;
 }
+
+#update-notification {
+	height: min-content;
+    font-size: 0.75rem;
+    line-height: 0.75rem;
+    color: orange;
+    margin-bottom: 5px;
+    display: inline-block;
+    top: -50%;
+    position: relative;
+}
+
+#update-notification a {
+	color:orange; 
+	text-decoration:none;
+}
 #bg_menu_button{
     display: inline-block;
     opacity: 0.4;
-     /* transition: 0.5s */
+      transition: 0.5s 
      cursor: pointer;
      width: 20px;
     /*  background: #191b3188; */
@@ -755,61 +884,61 @@ input[type=button] {
     margin-top: 5px;
     margin-left: 0px;
     opacity: 0.0;
-    /* padding-top: 10px; */
     cursor:auto;
     display: block;
-    width: 122px;/* 114px; */
+    width: 122px;
     height: 0px;
-    background: #00000040;/*rgb(36,37,37);*/
+    backdrop-filter: brightness(30%) blur(10px);
+	-webkit-backdrop-filter: blur(10px) brightness(30%);
     overflow: hidden;
     overflow-y: hidden;
     
     scrollbar-width: thin;
     scrollbar-color: #ffffff11 #191b3111;
 }
-#bg_menu_content::-webkit-scrollbar-track {
-    /*background-color: #191b3111;*/
-}
 
-#bg_menu_content::-webkit-scrollbar-thumb {
+/*#bg_menu_content::-webkit-scrollbar-thumb {
     background: #ffffff11;
     border-radius: 1px;
     box-shadow: inset 0.05em 0.05em 0 rgba(0, 0, 0, 0.1), inset 0 -0.05em 0 rgba(0, 0, 0, 0.07);
-}
+}*/
+
 .bg_example {
-  /* box-shadow: 0 0 2px rgba(200,200,200,0.5); */
-  /* background: #13152c; */
-  width: 103px;
-  height: 83px;
-  border-style: none;
-  padding:6px;
-  padding-bottom:20px;
-  position: relative;
-  margin-left: 3px;
+width: 103px;
+    height: 83px;
+    border-style: none;
+    padding: 6px;
+    /* padding-bottom: 20px; */
+    position: relative;
+    margin-left: 3px;
+    backdrop-filter: blur(1px) brightness(50%);
+	-webkit-backdrop-filter: blur(1px) brightness(50%);
 }
 
 .bg_example_img {
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center center;
-  border-radius: 10px;
+	cursor: pointer;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center center;
+    border-radius: 10px;
 }
 .bg_example_cross {
-    width:12px;
-    height:12px;
+    width: 12px;
+    height: 12px;
     position: absolute;
     float: right;
     right: 10px;
     top: 10px;
     cursor: pointer;
-    opacity: 0.4;
+    opacity: 0.5;
+    background-color: black;
+    border-radius: 2px;
+    padding: 1px;
 }
 .bg_example_but_load {
     margin-left: 3px;
-  /* box-shadow: 0 0 2px rgba(200,200,200,0.5); */
-  /* background: #13152c; */
+  
   width: 103px;
   height: 83px;
   border-style: none;
@@ -834,9 +963,7 @@ input[type=button] {
 
 .avatar_div{
     margin-top: 16px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+	vertical-align: middle;
 }
 .avatar_div .avatar{
     margin-left: 4px;
@@ -845,8 +972,14 @@ input[type=button] {
 }
 
 #add_avatar_button{
-	background-color: rgb(36, 37, 37);
-	border: 1px solid #444;
+    display: inline-block;
+	margin-left: 15px;
+	font-size: 0.75rem;
+	color: #666;
+	background-color: rgba(0,0,0,0.3);
+	border: 1px solid rgba(0,0,0,0.7);
+	border-radius: 5px;
+	cursor:pointer;
 }
 #description_div{
     margin-top: 6px;
@@ -904,7 +1037,7 @@ input[type=button] {
     float:right;
     margin-top: 25px;
     margin-right: 10px; 
-    color: #ffffff68;/* 66 */
+    color: red;
 }
 #export_button{
     opacity: 0.51;
@@ -913,7 +1046,7 @@ input[type=button] {
     float:right;
     margin-top: 25px;
     margin-right: 16px; 
-    color: #ffffff68;
+    color: #fff;
 }
 #result_info{
     margin-left: 10px;
@@ -936,7 +1069,7 @@ input[type=button] {
 	color: rgb(255 255 255);
 	text-align: center;
 	border-radius: 4px;
-	background-color: rgb(36,37,37);
+	background-color: rgba(0,0,0,0.3);
 	line-height: 22px;
 	height: 40px;
         width:89px;
@@ -957,6 +1090,8 @@ input[type=button] {
 }
 #form_bg_download{
     margin-bottom: 2px;
+	backdrop-filter: brightness(30%) blur(20px);
+	-webkit-backdrop-filter: brightness(30%) blur(20px);
 }
 /* Focus */
 #colab_popup{
@@ -965,17 +1100,16 @@ input[type=button] {
     height: 150px;
     position: absolute;
     z-index: 2060;
-    background-color: blue;
     margin-left: auto;
     margin-right: auto;
     left: 0;
     right: 0;
     text-align: center;
     margin-top: 36vh;
-    /*box-shadow: 0 0 2px rgba(200,200,200,0.1);*/
+    box-shadow: 0 0 2px rgba(255,0,0,0.5);
     padding: 4px;
-    background: rgb(36,37,37);
-	background-color: rgb(36, 37, 37);
+    backdrop-filter: blur(10px) brightness(0.3);
+		-webkit-backdrop-filter: blur(10px) brightness(0.3);
     border-radius: 10px;
 }
 #dialogue_popup{
@@ -984,16 +1118,15 @@ input[type=button] {
     height: 150px;
     position: absolute;
     z-index: 2060;
-    background-color: blue;
     margin-left: auto;
     margin-right: auto;
     left: 0;
     right: 0;
     text-align: center;
     margin-top: 36vh;
-    box-shadow: 0 0 2px rgba(200,200,200,0.1);
+    box-shadow: 0 0 5px 5px rgba(255,0,0,1);
     padding: 4px;
-	background-color: rgb(36, 37, 37);
+	background-color: rgba(0,0,0,0.5);
     border-radius: 10px;
 }
 #dialogue_popup_ok{
@@ -1011,23 +1144,16 @@ input[type=button] {
     width:100%;
     margin-left: auto;
     margin-right: auto;
-
     text-align: center;
-
     padding: 4px;
-
-
 }
 #dialogue_del_mes_ok{
-    
     display: inline-block;
-
     background-color: #791b31;
     cursor: pointer;
 }
 #dialogue_del_mes_cancel{
     display: inline-block;
-
     cursor: pointer;
 }
 .menu_button{
@@ -1036,7 +1162,7 @@ input[type=button] {
     padding: 0.5em;
     border: thin solid rgba(200,200,200,0.2);
     border-radius: 3px;
-    background-color: rgb(36,37,37);
+    background-color: rgba(0,0,0,0.3);
 }
 #dialogue_del_mes .menu_button{
     font-weight: bold;
@@ -1044,8 +1170,8 @@ input[type=button] {
 
 }
 #shadow_popup{
-    background-color: #00000066;
-	backdrop-filter: blur(50px);
+	backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: blur(10px);
     display: none;
     opacity: 0.0;
     position: absolute;
@@ -1054,7 +1180,9 @@ input[type=button] {
     z-index: 2095;
 }
 #colab_shadow_popup{
-    background-color: #00000066;
+    
+	backdrop-filter: blur(10px) brightness(0.3);
+			-webkit-backdrop-filter: blur(10px) brightness(0.3);
     display: none;
     opacity: 1.0;
     position: absolute;
@@ -1072,53 +1200,44 @@ input[type=button] {
 }
 
 
-#online_status{
-    opacity: 0.3;
-    /*position: relative;*/
+#online_status {
     bottom: 48px;
     margin-bottom: 0px;
     float: right;
-    display: inline;
     right: 3px;
-
 }
-#online_status_indicator{
-    /*big style over the send button*/
 
-    opacity: 0.5;
+#online_status_indicator {
+    opacity: 0.3;
     bottom: 0px;
     height: 40px;
     width: 40px;
     background: red;
     border-radius: 50%;
     float: right;
-	display:inline;
-
-    
-	
-	/*small left default*/
-	/*border-radius: 7px;
-    width: 14px;
-    height: 14px;
-    background-color: red;
-    display: inline-block;*/
-	
+    display: inline;
 }
 
-#online_status_indicator:hover{
-	
-	border:2px solid yellow;
-	opacity: 1;
+#send_form:hover #online_status_text {
+	color:red;
+	transition:0.3s
+	}
+
+#send_form:hover #online_status_indicator {
+	border: 1px solid yellow;
+	opacity:0.5;
+	transition:0.3s
 	}
 	
 
-#online_status_text{
+#online_status_text {
     display: inline;
     font-size: 0.75rem;
-    vertical-align: middle;
     margin-right: 60px;
     position: relative;
     top: 10px;
+    text-shadow: 1px 1px 5px black;
+    color: rgba(255,255,255,0.5);
 }
 #online_status2{
     opacity: 0.5;
@@ -1411,31 +1530,72 @@ input[type=button] {
 
 .del_checkbox{
     display: none;
-    opacity: 0.5;
-    accent-color: #ffffff;
-    /* background-color: green; */
-    width: 20px;
-    height: 20px;
+    opacity: 0.7;
 }
+
 #dialogue_del_mes{
     display: none;
 }
 .for_checkbox{
     display: block;
 }
+
+
+input[type='checkbox'] {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  outline: none;
+   position: relative;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid #rgba(0,0,0,0.5);
+  overflow: hidden;
+  border-radius: 3px;
+  background-color:white;
+  box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.8);
+  cursor: pointer;
+}
+
+input[type='checkbox']::before {
+  content: '';
+  color: #fff;
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  bottom: 4px;
+  left: 4px;
+  background-color: transparent;
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+  border-radius: 2px;
+  -webkit-transform: scale(0);
+          transform: scale(0);
+  -webkit-transition: -webkit-transform 0.25s ease-in-out;
+  transition: -webkit-transform 0.25s ease-in-out;
+  transition: transform 0.25s ease-in-out;
+  transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
+    background-image: url("data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQ0OCIgaGVpZ2h0PSI0NDgiIHZpZXdCb3g9IjAgMCA0NDggNDQ4Ij4KPHRpdGxlPjwvdGl0bGU+CjxnIGlkPSJpY29tb29uLWlnbm9yZSI+CjwvZz4KPHBhdGggZD0iTTQxNy43NSAxNDEuNWMwIDYuMjUtMi41IDEyLjUtNyAxN2wtMjE1IDIxNWMtNC41IDQuNS0xMC43NSA3LTE3IDdzLTEyLjUtMi41LTE3LTdsLTEyNC41LTEyNC41Yy00LjUtNC41LTctMTAuNzUtNy0xN3MyLjUtMTIuNSA3LTE3bDM0LTM0YzQuNS00LjUgMTAuNzUtNyAxNy03czEyLjUgMi41IDE3IDdsNzMuNSA3My43NSAxNjQtMTY0LjI1YzQuNS00LjUgMTAuNzUtNyAxNy03czEyLjUgMi41IDE3IDdsMzQgMzRjNC41IDQuNSA3IDEwLjc1IDcgMTd6Ij48L3BhdGg+Cjwvc3ZnPgo=");
+}
+
+input[type='checkbox']:checked::before {
+  -webkit-transform: scale(1);
+          transform: scale(1);
+}
+
 select {
-    /* font-size: .9rem; */
-    /* border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1); */
-    color: #ffffff66;
+    color: rgba(255,255,255,0.7);
     padding: 5px 10px;
     width:95%;
     height: 34px;
     margin-left: 3px;
-    background-color: rgba(40, 42, 42, 1);
+    background-color: rgba(0,0,0,0.3);
     font-size: 15px;
-    border: 0;
-    outline: 0;
-    box-shadow: 0 0 2px rgba(200,200,200,0.5);
+    border: 1px solid rgba(255,255,255,0.5);
+	border-radius:10px;
+    
+    
     margin-top: 5px;
     margin-bottom: 45px;
 }
@@ -1446,34 +1606,39 @@ select {
     width:284px;
     margin-left: 10px;
     margin-bottom: 35px;
-    color: #ffffff9d;
-    box-shadow: 0 0 2px rgba(200,200,200,0.5);
-	background-color: rgb(36, 37, 37);
+    color: rgba(255,255,255,0.7);
+	border-radius:10px;
+	background-color: rgba(0,0,0,0.3);
+	box-shadow:none;
+	
 }
 
+
 .option_select_right_menu{
     width:284px;
     margin-left: 10px;
     margin-bottom: 35px;
-    color: #ffffff9d;
-    box-shadow: 0 0 2px rgba(200,200,200,0.5);
-	background-color: rgb(36, 37, 37);
+    color: rgba(255,255,255,0.7);
+    box-shadow: 0 0 2px rgba(0,0,0,0.5);
+	background-color: rgb(0,0,0,0.3);
 }
 #user_avatar_block{
     margin-left: 6px;
     display: grid;
-    grid-template-columns: auto auto;
+    grid-template-columns: repeat(auto-fill);
+    grid-gap: 10px;
     margin-top: 10px;
+    grid-template-columns: repeat( auto-fit, minmax(60px, 1fr) );
+    grid-template-rows: min-content;
 }
 #user_avatar_block .avatar{
     cursor: pointer;
-    margin-bottom: 30px;
-    width: 90px;
-    height: 126px;
+    width: 60px;
+    height: 60px;
 }
 #user_avatar_block .avatar img{
-	width: 90px;
-    height: 90px;
+	width: 60px;
+    height: 60px;
 }
 #temp{
     margin-left: 10px;
@@ -1547,7 +1712,8 @@ input[type="range"] {
     margin-top: 15vh;
     box-shadow: 5px 5px -5px -5px rgba(200,200,200,0.1);
     padding: 4px;
-    background: rgb(36,37,37);
+    backdrop-filter: blur(10px) brightness(0.3);
+			-webkit-backdrop-filter: blur(10px) brightness(0.3);
     border-radius: 10px;
 }
 #shadow_tips_popup{
@@ -1562,11 +1728,20 @@ input[type="range"] {
 .mes_edit{
     display: inline-block;
     float:right;
-    /* right:8px; */
+	color: rgba(255,255,255,0.3);
     cursor:pointer;
     margin-right: 4px;
-    opacity:0.07;
+    /*opacity:0.07;*/
+	transition: 0.3s ease-in-out;
+	height:20px;
+	width:20px;	
 }
+
+.mes_edit:after {content: "\270e";}
+
+.mes_edit:hover{color:white;}
+
+
 .mes_edit_done{
     display: none;
     float:right;
@@ -1596,21 +1771,15 @@ input[type="range"] {
     padding: 0px;
     margin: 0px;
     border: none;
+/*	border-radius: 15px;*/
     border-color: transparent;
     outline: none;
-    box-shadow: none;
-	background-color: rgb(40, 42, 42);
+    box-shadow: 0 0 3px rgba(255,255,255,0.5);
+	background-color: rgba(0,0,0,0.3);
+	font-size: 1rem;
+	line-height:1.25rem;
 }
 
-#your_name{
-    outline: none;
-    /* box-shadow: 0 2px 0px rgba(255, 255, 255, 0.1); */
-    box-shadow: 0 0px 0px rgba(255, 255, 255, 0.0);
-    border: none;
-    background: transparent;
-    border: 0;
-    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
-}
 #your_name_button {
     opacity: 0.5;
     margin-left: 10px;
@@ -1628,16 +1797,16 @@ label.checkbox span {
   border:1px solid #BBBBBB33;
   border-radius:3px;
   width:20px;
+  width:20px;
   height:20px;
-  /*background:rgba(19,21,44,0.75);*/
-  vertical-align:middle;
+    vertical-align:middle;
   margin:0px;
   position: relative;
   transition:width 0.1s, height 0.1s, margin 0.1s;
   
 }
 label.checkbox :checked + span {
-  /*background:rgba(19,21,44,0.75);*/
+  background:red;
   width:20px;
   height:20px;
   margin: 0px;
@@ -1656,8 +1825,7 @@ label.checkbox :checked + span:after {
     margin-left: 10px;
     margin-bottom: 15px;
     color: #ffffff9d;
-    box-shadow: 0 0 2px rgba(200,200,200,0.5);
-	background-color: rgb(36, 37, 37);
+	background-color: rgba(0,0,0,0.5);
 }
 #anchor_checkbox{
     margin-left: 10px;
@@ -1670,9 +1838,9 @@ label.checkbox :checked + span:after {
 
 
 #shadow_character_popup{
-	background-color: #00000066;
-	backdrop-filter: blur(50px);
-    display: block;
+	backdrop-filter: blur(10px) brightness(0.3);
+			-webkit-backdrop-filter: blur(10px) brightness(0.3);
+    display: none;
     opacity: 1.0;
     position: absolute;
     width: 100%;
@@ -1681,24 +1849,22 @@ label.checkbox :checked + span:after {
 }
 #character_popup{
     display: none;
-	background-color: #00000066;
+	background-color: rgba(0,0,0,0.3);
 	backdrop-filter: blur(50px);
+	-webkit-backdrop-filter: blur(50px);
     grid-template-rows: 50px 100px 100px 40px auto 45px 45px;
     max-width:800px;
     height: 83vh;
     position: absolute;
     z-index: 2065;
-    background-color: blue;
     margin-left: auto;
     margin-right: auto;
     left: 0;
     right: 0;
-    /* text-align: center; */
-    margin-top: 0px;
-    box-shadow: 0 0 2px rgba(200,200,200,0.1);
+    margin-top: 40px;
+    box-shadow: 0 0 2px rgba(0,0,0,0.5);
     padding: 4px;
-	background-color: rgb(36, 37, 37);
-    border-radius: 1px;
+	border: 1px solid #33;
 }
 #character_popup h5 a{
     color: #936f4a;
@@ -1771,8 +1937,8 @@ label.checkbox :checked + span:after {
     height: 40px;
     margin-top: 15px;
     margin-left: 36px;
-	background-color: #00000066;
-	backdrop-filter: blur(50px); 
+	backdrop-filter: blur(10px) brightness(0.3);
+	-webkit-backdrop-filter: blur(10px) brightness(0.3);
     width: 110px;
     text-align: center;
 }
@@ -1784,7 +1950,8 @@ label.checkbox :checked + span:after {
     width: 100%;
     height: 100vh;
     z-index: 2059;
-    background-color: #00000066;
+    backdrop-filter: blur(10px) brightness(1);
+	-webkit-backdrop-filter: blur(10px) brightness(1);
 }
 
 #select_chat_popup{
@@ -1794,17 +1961,15 @@ label.checkbox :checked + span:after {
     height: 440px;
     position: absolute;
     z-index: 2066;
-    background-color: blue;
     margin-left: auto;
     margin-right: auto;
     left: 0;
     right: 0;
-    /* text-align: center; */
     margin-top: 21vh;
-    box-shadow: 0 0 2px rgba(200,200,200,0.1);
+    box-shadow: 0 0 10px rgba(0,0,0,0.5);
     padding: 4px;
-	background-color: rgb(36, 37, 37);
-    border-radius: 5px;
+	background-color: rgba(0,0,0,0.7);
+    border-radius: 20px;
 }
 #select_chat_popup a{
     color: #936f4a;
@@ -1903,7 +2068,7 @@ label.checkbox :checked + span:after {
     padding: 0.5em;
     border: thin solid rgba(200,200,200,0.2);
     border-radius: 3px;
-	background-color: rgb(39, 40, 40);
+	background-color: rgba(0,0,0,0.3);
     opacity: 1.0;
     /*font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;*/
 }
@@ -2000,24 +2165,25 @@ hr {
 h1,
 h2 {
     margin-bottom: 22px;
-    color: #191919;
     font-weight: 300;
 }
 
 h1 {
-    font-size: 32px;
+    font-size: 2rem;
     line-height: 32px;
 }
 
 h2 {
-    color: #565d66;
+    
     font-size: 1.5rem;
     line-height: 1.75rem;
 	margin-top: 5px;
 }
 
+.right_menu_button h2 {color: rgb(86, 93, 102);}
+
 a {
-    color: #006b05;
+    color: #orange;
     text-decoration: none;
 }
 .btn {
@@ -2043,19 +2209,15 @@ a {
     padding: .5rem 1rem;
     font-size: 1rem;
     font-weight: 400;
-    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
-    -moz-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 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
 }
 .btn {
-	  -webkit-transition: box-shadow .2s ease-out;
-	  -moz-transition: box-shadow .2s ease-out;
-		-ms-transition: box-shadow .2s ease-out;
+	  
     transition: box-shadow .2s ease-out;
 }
 .btn:hover {
-	  -webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);
-	  -moz-box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);
+	  
 	  box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);
 }
 .btn-primary {
@@ -2087,28 +2249,24 @@ a {
     -webkit-transition: right 0.14s ease-in-out  0.02s;
     -moz-transition: right 0.14s ease-in-out  0.02s;
     transition: right 0.14s ease-in-out  0.02s;
-    background: #16a085;
+	backdrop-filter: blur(10px) brightness(0.3);
+	-webkit-backdrop-filter: blur(10px) brightness(0.3);
     z-index: 2050;
-    box-shadow: 0 0 2px rgba(200,200,200,0.1);
+    box-shadow: 0 0 5px rgba(0,0,0,0.5);
     white-space:nowrap;
-    background: #222;
-	border-left: 1px solid #333;
-
-    backdrop-filter: blur(10px);
+	border-left: 1px solid rgba(0,0,0,0.3);
 }
 
-
-
-
 .nav-toggle {
     border-radius: 5px;
     position: absolute;
     right: 455px;
     top: 5px;
     padding: 5px;
-    background: #333;
-	border: 1px solid #444;
-    color: #dadada;
+    backdrop-filter: blur(10px) brightness(0.3);
+	-webkit-backdrop-filter: blur(10px) brightness(0.3);
+	border: 1px solid rgba(255,255,255,0.5);
+    color: rgba(255,255,255,0.5);
     cursor: pointer;
     font-size: 1.25rem;
     line-height: 1rem;
@@ -2119,65 +2277,44 @@ a {
     transition: color .25s ease-in-out;
 }
 
-
-
 .nav-toggle:after {
     content: '\2630';
     text-decoration: none;
 	
 }
 
-
-
 .nav-toggle:hover {
     color: #f4f4f4;
 }
 
-
-
 [id='nav-toggle'] {
     position: absolute;
     display: none;
 }
 
-
-
 [id='nav-toggle']:checked ~ .nav > .nav-toggle {
     left: auto;
     right: 5px;
     top: 5px;
 }
 
-
-
-
 [id='nav-toggle']:checked ~ .nav {
     right: 0;
-    box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.01);
-    -moz-box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.01);
-    -webkit-box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.01);
+    box-shadow: -5px 0px 10px 0px rgba(0, 0, 0, 0.50);
+    
     overflow-y: auto;
 }
 
-
-
-
 [id='nav-toggle']:checked ~ main > article {
     -webkit-transform: translateX(-450px);
     -moz-transform: translateX(-450px);
     transform: translateX(-450px);
 }
 
-
-
-
 [id='nav-toggle']:checked ~ .nav > .nav-toggle:after {
     content: '\2715';
 }
 
-
-
-
 body {
     -webkit-animation: bugfix infinite 1s;
 }
@@ -2188,13 +2325,14 @@ body {
     }
 }
 
-
-
+@supports (height: 100dvh) {
+	body {height:100dvh;}
 
 @media screen and (min-width: 450px) {
     html,
     body {
       margin: 0;
+	  padding: 0;
       overflow-x: hidden;
     }
 }
@@ -2202,57 +2340,21 @@ body {
 @media screen and (max-width: 450px) {
     html,
     body {
-      margin: 0;
-      overflow-x: hidden;
+     margin-left: auto;
+	 margin-right: auto;
+	 overflow-x: hidden; 
+	 
     }
+	
+	#sheld {}
+	
     .nav {
-      width: 100%;
-      box-shadow: none
+     width: 100%;
+     box-shadow: none
     }
 }
 
 
-.nav h22 {
-    width: 90%;
-    padding: 0;
-    margin: 10px 0;
-    text-align: center;
-    text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
-    font-size: 1.3em;
-    line-height: 1.3em;
-    opacity: 0;
-    transform: scale(0.1, 0.1);
-    -ms-transform: scale(0.1, 0.1);
-    -moz-transform: scale(0.1, 0.1);
-    -webkit-transform: scale(0.1, 0.1);
-    transform-origin: 0% 0%;
-    -ms-transform-origin: 0% 0%;
-    -moz-transform-origin: 0% 0%;
-    -webkit-transform-origin: 0% 0%;
-    transition: opacity 0.8s, transform 0.8s;
-    -ms-transition: opacity 0.8s, -ms-transform 0.8s;
-    -moz-transition: opacity 0.8s, -moz-transform 0.8s;
-    -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
-}
-}
-
-.nav h22 a {
-    color: #dadada;
-    text-decoration: none;
-    text-transform: uppercase;
-}
-
-
-[id='nav-toggle']:checked ~ .nav h22 {
-    opacity: 1;
-    transform: scale(1, 1);
-    -ms-transform: scale(1, 1);
-    -moz-transform: scale(1, 1);
-    -webkit-transform: scale(1, 1);
-}
-
-
-
 .nav > ul {
     display: block;
     margin: 0;
@@ -2281,7 +2383,6 @@ body {
     transform: translateX(0);
 }
 
-
 .nav > ul > li:nth-child(2) {
     -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
     transition: opacity .5s .2s, transform .5s .2s;
@@ -2312,9 +2413,6 @@ body {
     transition: opacity .5s .7s, transform .5s .7s;
 }
 
-
-
-
 .nav > ul > li > a {
     display: inline-block;
     position: relative;
@@ -2331,18 +2429,12 @@ body {
     transition: color .5s ease, padding .5s ease;
 }
 
-
-
-
 .nav > ul > li > a:hover,
 .nav > ul > li > a:focus {
     color: white;
     padding-left: 15px;
 }
 
-
-
-
 .nav > ul > li > a:before {
     content: '';
     display: block;
@@ -2368,9 +2460,6 @@ body {
     transition: width .5s ease;
 }
 
-
-
-
 .nav > ul > li > a:hover:before {
     width: 0%;
     background: #3bc1a0;
diff --git a/server.js b/server.js
index 41d74aba5..d151c5e68 100644
--- a/server.js
+++ b/server.js
@@ -660,7 +660,7 @@ app.post("/setbackground", jsonParser, function(request, response){
      //const data = request.body;
     //console.log(request);
     //console.log(1);
-    var bg = "#bg1 {background-image: linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url(../backgrounds/"+request.body.bg+");}";
+    var bg = "#bg1 {background-image: url(../backgrounds/"+request.body.bg+");}";
     fs.writeFile('public/css/bg_load.css', bg, 'utf8', function(err) {
         if(err) {
             response.send(err);