diff --git a/CSS/startpage.css b/CSS/startpage.css
new file mode 100644
index 0000000..25c76d1
--- /dev/null
+++ b/CSS/startpage.css
@@ -0,0 +1,188 @@
+@charset "utf-8";
+/* CSS Document */
+
+@font-face {
+	font-family: 'WorkSans-SemiBold';
+	src: url("../fonts/WorkSans-SemiBold.ttf");
+}
+
+@font-face {
+	font-family: 'SpaceMono-Bold';
+	src: url("../fonts/SpaceMono-Bold.ttf");
+}
+
+@font-face {
+	font-family: 'SpaceMono-Regular';
+	src: url("../fonts/SpaceMono-Regular.ttf");
+}
+	
+header {
+	color: #757575;
+	font-family: 'SpaceMono-Bold';
+	font-size: 50px;
+    -webkit-text-fill-color: #757575;
+	z-index:1;
+}
+
+p1 {
+    font-family: 'SpaceMono-Regular';
+    -webkit-text-fill-color: #757575;
+    font-size: 17px;
+	z-index:1;
+}
+
+p2 {
+    font-family: 'SpaceMono-Regular';
+    -webkit-text-fill-color: #757575;
+    font-size: 12px;
+	z-index:1;
+}
+
+form {
+    background-color: #363636;
+    width: 25%;
+    height: 35px;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0 auto;
+}
+
+input {
+    background-color: unset;
+    font: 16px 'SpaceMono-regular';
+    color: #fff;
+    height: 100%;
+    width: 100%;
+    padding: 6px 10px;
+    border-top-style: hidden;
+    border-right-style: hidden;
+    border-left-style: hidden;
+    border-bottom-style: hidden;
+}
+
+::placeholder {
+  color: #757575;
+  opacity: 0.7; 
+}
+
+svg {
+    color: #fff;
+    fill: currentColor;
+    width: 24px;
+    height: 24px;
+    padding: 10px;
+}
+
+button {
+    all: unset;
+    cursor: pointer;
+    width: auto;
+    height: 10px;
+}
+
+input {
+    color: #B5B5B5;
+}
+
+.buttontext {
+    color: #757575;
+    font-family: 'SpaceMono-regular';
+}
+
+.button {
+	border: none;
+    background: none;
+  	color: #757575;
+  	padding: 10px;
+  	font-size: 12px;
+    align-content: center;
+    text-align: center;
+    font-family: 'SpaceMono-regular';
+}
+
+.button:hover {
+	border: none;
+    background: none;
+  	color: #B5B5B5;
+  	padding: 10px;
+  	font-size: 12px;
+    align-content: center;
+    text-align: center;
+    font-family: 'SpaceMono-regular';
+}
+
+.button[id = "twitch"]:hover{
+	border: none;
+    background: none;
+  	color: #b48ead;
+  	padding: 10px;
+  	font-size: 12px;
+    align-content: center;
+    text-align: center;
+    font-family: 'SpaceMono-regular';
+}
+
+.button[id = "youtube"]:hover{
+	border: none;
+    background: none;
+  	color: #bf616a;
+  	padding: 10px;
+  	font-size: 12px;
+    align-content: center;
+    text-align: center;
+    font-family: 'SpaceMono-regular';
+}
+
+.button[id = "twitter"]:hover{
+	border: none;
+    background: none;
+  	color: #81a1c1;
+  	padding: 10px;
+  	font-size: 12px;
+    align-content: center;
+    text-align: center;
+    font-family: 'SpaceMono-regular';
+}
+
+a {color: inherit; }
+
+.outer {
+  display: table;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.middle {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.inner {
+  margin-left: auto;
+  margin-right: auto;
+  width: auto;
+  justify-content: center;
+  text-align: center;
+  /*whatever width you want*/
+}
+
+#clock {
+    width: 100%;
+    font-size: 60px;
+    text-align: center;
+    font-family: 'WorkSans-SemiBold';
+    color: #757575;
+    padding: 20px;
+}
+
+#footer {
+  position: fixed ;
+  left: 0 ;
+  bottom: 0 ;
+  z-index:0;
+}
diff --git a/JS/script.js b/JS/script.js
new file mode 100644
index 0000000..5dc8172
--- /dev/null
+++ b/JS/script.js
@@ -0,0 +1,27 @@
+// JavaScript Document
+
+// Real Time Clock (not yet working)
+function realTimeClock() {
+	
+	var clock = new Date();
+	
+	var hours = clock.getHours();
+	var minutes = clock.getMinutes();
+	var seconds = clock.getSeconds();
+	
+	// am or pm?
+	var tod = ( hours < 12 ) ? "am" : "pm";
+	
+	// convert to 12 hour format
+	hours = ( hours > 12 ) ? hours - 12: hours;
+	
+	// padding to make it look a bit nicer
+	hours = ("0" + hours).slice(-2);
+	minutes = ("0" + minutes).slice(-2);
+	seconds = ("0" + seconds).slice(-2);
+	
+	// actually show the clock
+	document.getElementById('clock').innerHTML = hours + " : " + minutes;
+	document.getElementById('ampm').innerHTML = tod;
+	var t = setTimeout( realTimeClock, 500 );
+}
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e1de808
--- /dev/null
+++ b/README.md
@@ -0,0 +1,13 @@
+# Minimal Startpage
+ So here's my startpage! It's pretty simple but I like it that way!
+ I was aiming for a more functional and non-flashy site, and I think it turned out just fine!
+ 
+ ![image](https://user-images.githubusercontent.com/17168770/117563325-f55ca700-b059-11eb-887f-d9cbb1aef117.png)
+
+ 
+ As far as hosting it goes, you can run it locally from the html file, or get it hosted by something like GitHub Pages or a Raspberry Pi!
+ 
+ I'll probably update it every once in a while if I feel like adding more features or fixing bugs, but for now I think it'll be just fine. If you have any issues with it feel free to let me know and I'll see how I can help!
+ 
+ Anyways, thanks for taking a look- I hope it helps you get a bit more organized!
+ -Simon
diff --git a/bookmark.png b/bookmark.png
deleted file mode 100644
index fd3ec04..0000000
Binary files a/bookmark.png and /dev/null differ
diff --git a/css/sidebar.css b/css/sidebar.css
deleted file mode 100644
index 1501f7c..0000000
--- a/css/sidebar.css
+++ /dev/null
@@ -1,171 +0,0 @@
-.sidebar-wrapper {
-	position: fixed;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	height: 100%;
-	right: -300px;
-	transition: box-shadow 1s, right .6s ease-in-out;
-	z-index: 2;
-}
-
-.sidebar {
-	width: 300px;
-	height: 100%;
-	padding: 20px;
-	background: var(--background);
-	overflow: auto;
-}
-
-.show-sidebar {
-	right: 0;
-	box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.4);
-}
-
-.sidebar__settings {
-	display: flex;
-	flex-direction: column;
-	color: var(--foreground);
-	width: 100%;
-	padding-bottom: 25px;
-}
-
-.sidebar h4 {font-size: 13px;}
-
-.sidebar h3 {
-	font-size: 15px;
-	padding-bottom: 10px;
-	margin-bottom: 10px;
-	border-bottom: 2px solid var(--accent);
-}
-
-.sidebar__input {
-	width: 100%;
-	border-color: transparent;
-	margin: 5px 0 20px 0;
-}
-
-.sidebar__input:hover {border: 2px solid var(--accent);}
-
-.sidebar__input:focus {
-	color: var(--accent);
-	border: 2px solid var(--accent);
-}
-
-.sidebar__input:focus::placeholder {
-	color: var(--accent);
-	transition: .3s;
-}
-
-.sidebar__button-container {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-}
-
-.sidebar__button {
-	outline: none;
-	border: none;
-	background-color: var(--accent);
-	color: white;
-	cursor: pointer;
-	width: 60px;
-	padding: 7px 5px;
-	border-radius: 3px;
-	transition: .3s;
-}
-
-.sidebar__button:hover {
-	filter: brightness(.75);
-	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .4);
-	transform: translateY(-2px);
-}
-
-.sidebar__button:active {transform: translateY(0px);}
-
-.sidebar__radio {
-	display: flex;
-	flex-direction: row;
-}
-
-.control {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	position: relative;
-	font-weight: bold;
-	padding-left: 25px;
-	margin: 0 20px 20px 0;
-	cursor: pointer;
-}
-
-.control input {
-	position: absolute;
-	z-index: -1;
-	opacity: 0;
-}
-
-.control__indicator {
-	position: absolute;
-	left: 0;
-	height: 20px;
-	width: 20px;
-	background: var(--input);
-	transition: .3s;
-}
-
-.control:hover input ~ .control__indicator,
-.control input:checked ~ .control__indicator,
-.control input:focus ~ .control__indicator {background: var(--accent);}
-
-.control__indicator::after {
-	box-sizing: unset;
-	content: '';
-	position: absolute;
-	display: none;
-}
-
-.control input:checked ~ .control__indicator::after {display: block;}
-
-.control-radio .control__indicator {
-	border-radius: 50%;
-}
-
-.control-radio .control__indicator::after {
-	left: 7px;
-	top: 7px;
-	height: 6px;
-	width: 6px;
-	border-radius: 50%;
-	background: #ffffff;
-}
-
-input[type="color"] {
-	background: var(--input);
-	border: 2px solid transparent;
-	outline: none;
-	width: 100%;
-	height: 40px;
-	transition: .3s;
-	margin: 5px 0 20px 0;
-	border-radius: 3px;
-	cursor: pointer;
-}
-
-input[type="color"]:hover,
-input[type="color"]:focus {border: 2px solid var(--accent);}
-
-input[type="color"]::-webkit-color-swatch-wrapper {
-	padding: 5px 5px;
-}
-
-input[type="color"]::-webkit-color-swatch {
-	border: none;
-	border-radius: 3px;
-	box-shadow: 0px 1px 5px rgba(0, 0, 0, .5);
-}
-
-input[type=color]::-moz-color-swatch {
-	border: none;
-	border-radius: 3px;
-}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
deleted file mode 100644
index 510e5fe..0000000
--- a/css/style.css
+++ /dev/null
@@ -1,286 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu&family=IBM+Plex+Mono&display=swap');
-@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
-@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css');
-
-@import url('../css/sidebar.css');
-
-:root {
-	--ubuntu: 'Ubuntu', sans-serif;
-	--roboto: 'Roboto', sans-serif;
-	--ibm-mono: 'IBM Plex Mono', monospace;
-
-	--inactive-icon: #BDBDBD;
-	--theme-icon: #ffd37b;
-	--header-icon: #7ebebd;
-	--menu-icon: #dd7c85;
-}
-
-[theme="light"] {
-	--background: #1d2021;
-	--foreground: #91949c;
-	--accent: #81A1C1;
-	--input: #212125;
-}
-
-[theme="dark"] {
-	--background: #1d2021;
-	--foreground: #91949c;
-	--accent: #81A1C1;
-	--input: #212125;
-}
-
-* {
-	font-family: var(--ubuntu);
-	box-sizing: border-box;
-	margin: 0px;
-}
-
-body {
-	background: var(--background);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin: 0 60px;
-	height: 100vh;
-	overflow: hidden;
-	font-size: 16px;
-	transition: all .5s, background-color .8s;
-}
-
-.container {
-	display: grid;
-	grid-template-rows: 1fr auto 1fr;
-}
-
-.main {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-direction: row;
-	flex-wrap: wrap;
-	z-index: 1;
-}
-
-a {
-	color: var(--foreground);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 50px;
-	height: 50px;
-	margin: 25px;
-	font-size: 50px;
-	text-decoration: none;
-	transition: .5s;
-}
-
-.big-icons {
-	margin: 40px;
-	font-size: 65px;
-}
-
-.small-icons {
-	margin: 20px;
-	font-size: 35px;
-}
-
-.main a:hover {
-	color: var(--accent);
-	transform: scale(1.2);
-	transition: .3s;
-}
-
-.header {
-	position: relative;
-	align-self: end;
-	text-align: center;
-	color: var(--foreground);
-	font-size: 18px;
-	font-weight: bold;
-	letter-spacing: 1px;
-	transition: all .2s, margin .5s ease;
-}
-
-.header::after {
-	content: '';
-	position: absolute;
-	width: 444px;
-	height: 2px;
-	bottom: 0;
-	left: 50%;
-	background: var(--accent);
-	margin: 0px 0px 0px -222px;
-	opacity: .5;
-	border-radius: 10px;
-	z-index: -1;
-}
-
-.header__weather,
-.header__greeting {
-	margin-bottom: 25px;
-	transition: opacity .5s ease;
-}
-
-.hide-header-elements {
-	opacity: 0;
-	transition: opacity 0s;
-}
-
-.header__greeting-name,
-.header__weather-temp {color: var(--accent);}
-
-.search-form {
-	position: absolute;
-	bottom: -33px;
-	left: 50%;
-	opacity: 0;
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	width: 450px;
-	margin: 0px 0px 0px -225px;
-	transition: opacity .2s ease-out;
-}
-
-.show-search {
-	opacity: 1;
-	transition: opacity .5s ease-in;
-}
-
-.search-form__input {
-	border: 2px solid transparent;
-	width: 100%;
-}
-
-.search-form__input:hover,
-.search-form__input:focus {
-	border: 2px solid var(--accent);
-}
-
-.search-form__button {
-	position: absolute;
-	top: 0;
-	right: 0;
-	background: transparent;
-	color: var(--foreground);
-	width: 35px;
-	height: 35px;
-	outline: none;
-	border: 2px solid transparent;
-	border-radius: 0px 3px 3px 0px;
-	cursor: pointer;
-	transition: .3s;
-}
-
-.search-form__button:hover {
-	background: var(--accent);
-	color: var(--background);
-}
-
-@media screen and (max-width: 600px) {
-	.header h1{
-		font-size: 30px;
-	}
-
-	a {
-		width: 40px;
-		height: 40px;
-		margin: 20px;
-		font-size: 40px;
-	}
-
-	.big {
-		margin: 30px;
-		font-size: 55px;
-	}
-
-	.header::after {
-		width: 344px;
-		margin: 0px 0px 0px -172px;
-	}
-
-	.search-form {
-		width: 350px;
-		margin: 0px 0px 0px -175px;
-	}
-}
-
-.buttons {
-	position: absolute;
-	display: flex;
-	flex-direction: column;
-	top: 15px;
-	left: -45px;
-	
-}
-
-.btn_theme,
-.btn_header,
-.btn_menu {padding: 5px 0;}
-
-.btn_theme {transform: rotate(-25deg);}
-
-#chb_theme,
-#chb_header,
-#chb_menu {display: none;}
-
-#chb_theme + label::before,
-#chb_theme + label:hover::before,
-#chb_theme:checked + label::before,
-#chb_theme:checked + label:hover::before,
-#chb_header + label::before,
-#chb_header + label:hover::before,
-#chb_header:checked + label::before,
-#chb_header:checked + label:hover::before,
-#chb_menu + label::before,
-#chb_menu + label:hover::before,
-#chb_menu:checked + label::before,
-#chb_menu:checked + label:hover::before {
-	font-family: 'Font Awesome 5 Free';
-	font-weight: 900;
-	font-size: 22px;
-	cursor: pointer;
-	transition: .2s;
-}
-
-#chb_theme + label::before,
-#chb_theme + label:hover::before,
-#chb_theme:checked + label::before,
-#chb_theme:checked + label:hover::before {font-size: 20px;}
-
-#chb_theme + label::before {content: "\f186";}
-
-#chb_header + label::before {content: "\f05a";}
-
-#chb_menu + label::before {content: "\f013";}
-
-#chb_theme + label::before,
-#chb_header + label::before,
-#chb_menu + label::before {color: var(--inactive-icon);}
-
-#chb_theme:checked + label::before,
-#chb_theme:checked + label:hover::before {color: var(--theme-icon);}
-
-#chb_header:checked + label::before,
-#chb_header:checked + label:hover::before {color: var(--header-icon);}
-
-#chb_menu:checked + label::before,
-#chb_menu:checked + label:hover::before {color: var(--menu-icon);}
-
-#chb_theme + label:hover::before,
-#chb_header + label:hover::before,
-#chb_menu + label:hover::before,
-#chb_theme:checked + label:hover::before,
-#chb_header:checked + label:hover::before,
-#chb_menu:checked + label:hover::before {filter: brightness(.8);}
-
-input[type=text] {
-	height: 35px;
-	outline: none;
-	text-align: center;
-	font-weight: bold;
-	background: var(--input);
-	color: var(--foreground);
-	border-radius: 3px;
-	transition: .3s;
-}
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..0a1d4a0
Binary files /dev/null and b/favicon.ico differ
diff --git a/fonts/SpaceMono-Bold.ttf b/fonts/SpaceMono-Bold.ttf
new file mode 100644
index 0000000..4acd36a
Binary files /dev/null and b/fonts/SpaceMono-Bold.ttf differ
diff --git a/fonts/SpaceMono-Regular.ttf b/fonts/SpaceMono-Regular.ttf
new file mode 100644
index 0000000..28d7ff7
Binary files /dev/null and b/fonts/SpaceMono-Regular.ttf differ
diff --git a/fonts/WorkSans-Regular.ttf b/fonts/WorkSans-Regular.ttf
new file mode 100644
index 0000000..ba11a2d
Binary files /dev/null and b/fonts/WorkSans-Regular.ttf differ
diff --git a/fonts/WorkSans-SemiBold.ttf b/fonts/WorkSans-SemiBold.ttf
new file mode 100644
index 0000000..5cefd7c
Binary files /dev/null and b/fonts/WorkSans-SemiBold.ttf differ
diff --git a/index.html b/index.html
index d4d620d..34a0bc8 100644
--- a/index.html
+++ b/index.html
@@ -1,134 +1,59 @@
-<!DOCTYPE html>
-<html lang="us">
-
-<head>
-	<title>Welcome Javier!</title>
-	<meta charset="UTF-8">
-	<link rel="stylesheet" type="text/css" href="css/style.css">
-	<link rel="icon" href="bookmark.png">
-	<base target="_blank">
-</head>
-
-<body>
-	<div class="sidebar-wrapper">
-		<div class="sidebar">
-			<div class="buttons">
-				<input type="checkbox" id="chb_theme">
-				<label class="btn_theme" for="chb_theme"></label>
-				<input type="checkbox" id="chb_header">
-				<label class="btn_header" for="chb_header"></label>
-				<input type="checkbox" id="chb_menu">
-				<label class="btn_menu" for="chb_menu"></label>
-			</div>
-			<div class="sidebar__settings">
-				<h3>Weather</h3>
-				<h4>API</h4>
-				<input class="sidebar__input" type="text" placeholder="Enter key" id="key" autocomplete="off">
-				<h4>City</h4>
-				<input class="sidebar__input" type="text" placeholder="Enter city" id="city">
-				<div class="sidebar__radio">
-					<label class="control control-radio">
-						&deg;C
-						<input type="radio" name="temp_unit" id="celsius">
-						<div class="control__indicator"></div>
-					</label>
-					<label class="control control-radio">
-						&deg;F
-						<input type="radio" name="temp_unit" id="fahrenheit">
-						<div class="control__indicator"></div>
-					</label>
-				</div>
-				<button class="sidebar__button" id="weather_apply">Apply</button>
-			</div>
-			<div class="sidebar__settings">
-				<h3>Greeting</h3>
-				<h4>Name</h4>
-				<input class="sidebar__input" type="text" id="greeting_name" name="name_field">
-				<button class="sidebar__button" id="name_apply">Apply</button>
-			</div>
-			<div class="sidebar__settings">
-				<h3>Theme</h3>
-				<h4>Background</h4>
-				<input type="color" id="bg_input">
-				<h4>Foreground</h4>
-				<input type="color" id="fg_input">
-				<h4>Accent</h4>
-				<input type="color" id="accent_input">
-				<div class="sidebar__button-container">
-					<button class="sidebar__button" id="color_apply">Apply</button>
-					<button class="sidebar__button" id="color_reset">Reset</button>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="container">
-		<div class="header">
-			<h1 class="header__greeting">Howdy, <span class="header__greeting-name">Javier Pacheco</span>.</h1>
-			<div class="header__weather">
-				<p id="header__weather-alert"></p>
-				<p id="header__weather-info"></p>
-			</div>
-			<form class="search-form" action="https://google.com/search" method="get">
-				<input type="text" class="search-form__input" id="gsearch" autocomplete="off" name="q" spellcheck="false">
-				<button class="search-form__button">
-					<i class="fa fa-search"></i>
-				</button>
-			</form>
-		</div>
-		<div class="main">
-			<a href="https://wiki.archlinux.org/">
-				<i class="fa-brands fa-linux"></i>
-			</a>
-			<a href="https://suckless.org">
-				<i class="fas fa-ghost"></i>
-			</a>
-			<a href="https://docs.voidlinux.org/">
-				<i class="fa-solid fa-book-journal-whills"></i>
-			</a>
-			<a href="https://www.yewtu.be">
-				<i class="fab fa-youtube"></i>
-			</a>
-			<a href="https://mail.google.com/mail/ca/u/1/#inbox">
-				<i class="fas fa-inbox"></i>
-			</a>
-			<a href="https://www.github.com/engjpacheco">
-				<i class="fab fa-github"></i>
-			</a>
-			<a href="https://www.gitlab.com/jpachecom4">
-				<i class="fab fa-gitlab"></i>
-			</a>
-			<a href="https://autoliv-mx.leading2lean.com/">
-				<i class="fa-solid fa-road-spikes"></i>
-			</a>
-			<a href="http://erp/cgi-bit/rpgle/cgipartvw3.pgm">
-				<i class="fa-solid fa-screwdriver-wrench"></i>
-			</a>
-		</div>
-	</div>
-
-	<script src="js/theme.js"></script>
-	<script src="js/greeting.js"></script>
-	<script src="js/weather.js"></script>
-	<script src="js/menu.js"></script>
-	<script src="js/header.js"></script>
-        <script src="js/script.js"></script>
-	<script>
-		let sidebar = document.querySelector('.sidebar-wrapper');
-		let searchForm = document.querySelector('.search-form');
-		let searchInput = document.querySelector('.search-form__input');
-		
-		// Search on enter key event
-        	document.getElementById("gsearch").addEventListener("keydown",  event => { 
-        	    if (event.keyCode === 13) {
-        	        var val = document.getElementById("gsearch").value;
-                	window.open("https://google.com/search?q=" + val);
-			header.style.marginBottom = '';
-			searchForm.classList.remove('show-search');
-			searchInput.value = '';
-			searchInput.blur();
-        	    }
-        	});
-	</script>
-</body>
-
-</html>
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>[ startpage - javier@venom ]</title>
+        <link href="CSS/startpage.css" rel="stylesheet" type="text/css">
+        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+	<link rel="icon" href="favicon.ico">
+        <script type="text/javascript" src="JS/script.js"></script>
+    </head>
+	
+    <body onload="realTimeClock()" bgcolor="#2a2a2a">
+        <div class="outer">
+            <div class="middle">
+                <div class="inner w3-animate-opacity">
+                    <div><p1 id="clock"></p1> <p1 id="ampm"></p1></div>
+                    <form id="form" role="search">
+                        <input type="search" id="query" name="q" placeholder="Search Google..." autofocus>
+                    </form>  
+                    <script>
+                        const f = document.getElementById('form');
+                        const q = document.getElementById('query');
+                        const search = 'https://www.google.com/search?q=';
+
+                        function submitted(event) {
+                            event.preventDefault();
+                            const url = search + q.value;
+                        window.open(url, '_self');
+                        }
+
+                        f.addEventListener('submit', submitted);
+                    </script>
+                    <p></p>	
+                    <!--<p2> twitter | youtube | twitch </p2> -->
+                    <div class="box">
+                        <div class="items">
+                            <p class="lst">
+                            <span style="color: var(--color4)">[</span><a href="https:jpacheco.xyz">jpacheco</a><span style="color: var(--color5)">]</span>
+                                <span style="color: var(--color1)">[</span><a href="https://git.disroot.org/jpacheco">disroot</a><span style="color: var(--color1)">]</span>
+                                <span style="color: var(--color3)">[</span><a href="https://github.com/engjpacheco">github</a><span style="color: var(--color3)">]</span>
+                                <span style="color: var(--color3)">[</span><a href="https://gitlab.com/jpachecom4">gitlab</a><span style="color: var(--color3)">]</span>
+                                <span style="color: var(--color5)">[</span><a href="https://gmail.com">mail</a><span style="color: var(--color5)">]</span>
+                            </p>
+                            <p class="lst">
+                                <span style="color: var(--color1)">[</span><a href="https://autoliv-mx.leading2lean.com/">autoliv</a><span style="color: var(--color1)">]</span>
+                                <span style="color: var(--color5)">[</span><a href="http://erp/cgi-bit/rpgle/cgipartvw3.pgm">partview</a><span style="color: var(--color5)">]</span>
+                                <span style="color: var(--color6)">[</span><a href="https://us.edstem.org/courses/390/discussion/22561">ed</a><span style="color: var(--color6)">]</span>
+                            </p>
+                            <p class="lst">
+                                <span style="color: var(--color5)">[</span><a href="https://web.telegram.org/a/#-1421253041">Telegram</a><span style="color: var(--color5)">]</span>
+                                <span style="color: var(--color2)">[</span><a href="https://youtube.com">youtube</a><span style="color: var(--color2)">]</span>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/js/greeting.js b/js/greeting.js
deleted file mode 100644
index 1c38014..0000000
--- a/js/greeting.js
+++ /dev/null
@@ -1,50 +0,0 @@
-let greeting = document.querySelector('.header__greeting');
-let buttonApplyName = document.getElementById('name_apply');
-let nameInput = document.getElementById('greeting_name');
-
-// Greetings
-const night = 'Good night';
-const morning = 'Good morning';
-const afternoon = 'Good afternoon';
-const evening = 'Good evening';
-
-// Name
-if (localStorage.getItem('name') !== null) {
-	let name = localStorage.getItem('name');
-	let greetingName = `<span class="header__greeting-name">${name}</span>.`;
-	setGreeting(greetingName);
-	nameInput.placeholder = name;
-} else {
-	let name = 'Javier Pacheco';
-	let greetingName = `<span class="header__greeting-name">${name}</span>.`
-	setGreeting(greetingName);
-	nameInput.placeholder = name;
-}
-
-buttonApplyName.onclick = () => {
-	if (nameInput.value !== '') {
-		let greetingName = `<span class="header__greeting-name">${nameInput.value}</span>.`;
-		setGreeting(greetingName);
-
-		localStorage.setItem('name', nameInput.value);
-
-		nameInput.placeholder = nameInput.value;
-		nameInput.value = '';
-		nameInput.blur();
-	}
-};
-
-// Hours of the greetings
-function setGreeting(greetingName) {
-	let hour = new Date().getHours();
-
-	if (hour >= 23 || hour < 6) {
-		greeting.innerHTML = `${night}, ${greetingName}`;
-	} else if (hour >= 6 && hour < 12) {
-		greeting.innerHTML = `${morning}, ${greetingName}`;
-	} else if (hour >= 12 && hour < 17) {
-		greeting.innerHTML = `${afternoon}, ${greetingName}`;
-	} else {
-		greeting.innerHTML = `${evening}, ${greetingName}`;
-	}
-}
diff --git a/js/header.js b/js/header.js
deleted file mode 100644
index 4f39e00..0000000
--- a/js/header.js
+++ /dev/null
@@ -1,78 +0,0 @@
-let buttonHeader = document.getElementById('chb_header');
-let header = document.querySelector('.header');
-let headerWeather = document.querySelector('.header__weather');
-let headerGreeting = document.querySelector('.header__greeting');
-let icons = document.querySelectorAll('.main a');
-
-localStorage.getItem('header') === 'shown' || localStorage.getItem('header') === null ? showHeader() : hideHeader();
-
-buttonHeader.onclick = () => buttonHeader.checked ? showHeader() : hideHeader();
-
-function showHeader() {
-	buttonHeader.checked = true;
-	localStorage.setItem('header', 'shown');
-
-	for (let e of icons) {
-		e.classList.remove('big-icons');
-	}
-
-	header.style.opacity = '.75';
-	header.style.zIndex = '1';
-	headerWeather.classList.remove('hide-header-elements');
-	headerGreeting.classList.remove('hide-header-elements');
-}
-
-function hideHeader() {
-	buttonHeader.checked = false;
-	localStorage.setItem('header', 'hidden');
-
-	for (let e of icons) {
-		e.classList.add('big-icons');
-	}
-
-	header.style.opacity = '0';
-	header.style.zIndex = '-1';
-}
-
-document.addEventListener('keyup', (event) => {
-	let header = document.querySelector('.header');
-	let sidebar = document.querySelector('.sidebar-wrapper');
-	let searchForm = document.querySelector('.search-form');
-	let searchInput = document.querySelector('.search-form__input');
-
-	if (searchInput !== document.activeElement &&
-		event.keyCode >= 65 &&
-		event.keyCode <= 90 &&
-		!sidebar.classList.contains('show-sidebar')) {
-		if (buttonHeader.checked === false) {
-			header.style.opacity = '.75';
-			header.style.zIndex = '1';
-			headerWeather.classList.add('hide-header-elements');
-			headerGreeting.classList.add('hide-header-elements');
-
-			for (let e of icons) {
-				e.classList.remove('big-icons');
-			}
-		}
-
-		header.style.marginBottom = '35px';
-		searchForm.classList.add('show-search');
-		searchInput.focus();
-		searchInput.value = event.key;
-	}
-
-	if (event.code === 'Escape') {
-		if (buttonHeader.checked === false) {
-			header.style.opacity = '0';
-
-			for (let e of icons) {
-				e.classList.add('big-icons');
-			}
-		}
-
-		header.style.marginBottom = '';
-		searchForm.classList.remove('show-search');
-		searchInput.value = '';
-		searchInput.blur();
-	}
-});
\ No newline at end of file
diff --git a/js/menu.js b/js/menu.js
deleted file mode 100644
index 0bd6821..0000000
--- a/js/menu.js
+++ /dev/null
@@ -1,5 +0,0 @@
-let buttonSidebar = document.querySelector('.btn_menu');
-buttonSidebar.onclick = () => {
-    let sidebar = document.querySelector('.sidebar-wrapper');
-    sidebar.classList.toggle('show-sidebar');
-};
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
deleted file mode 100644
index 5d360c7..0000000
--- a/js/script.js
+++ /dev/null
@@ -1,299 +0,0 @@
-/* based on chromium plugin code, adapted by Nibble<.gs@gmail.com> */
-var hint_num_str = '';
-var hint_elems = [];
-var hint_open_in_new_tab = false;
-var hint_enabled = false;
-function hintMode(newtab){
-	hint_enabled = true;
-	if (newtab) {
-		hint_open_in_new_tab = true;
-	} else {
-		hint_open_in_new_tab = false;
-	}
-	setHints();
-	document.removeEventListener('keydown', initKeyBind, false);
-	document.addEventListener('keydown', hintHandler, false);
-	hint_num_str = '';
-}
-function hintHandler(e){
-	e.preventDefault();  //Stop Default Event 
-	var pressedKey = get_key(e);
-	if (pressedKey == 'Enter') {
-		if (hint_num_str == '')
-			hint_num_str = '1';
-		judgeHintNum(Number(hint_num_str));
-	} else if (/[0-9]/.test(pressedKey) == false) {
-		removeHints();
-	} else {
-		hint_num_str += pressedKey;
-		var hint_num = Number(hint_num_str);
-		if (hint_num * 10 > hint_elems.length + 1) {
-			judgeHintNum(hint_num);
-		} else {
-			var hint_elem = hint_elems[hint_num - 1];
-			if (hint_elem != undefined && hint_elem.tagName.toLowerCase() == 'a') {
-				setHighlight(hint_elem, true);
-			}
-		}
-	}
-}
-function setHighlight(elem, is_active) {
-	if (is_active) {
-		var active_elem = document.body.querySelector('a[highlight=hint_active]');
-		if (active_elem != undefined)
-			active_elem.setAttribute('highlight', 'hint_elem');
-		elem.setAttribute('highlight', 'hint_active');
-	} else {
-		elem.setAttribute('highlight', 'hint_elem');
-	}
-}
-function setHintRules() {
-	 if (document.styleSheets.length < 1) {
-	    var style = document.createElement("style");
-	    style.appendChild(document.createTextNode(""));
-	    document.head.appendChild(style);
-	}
-	var ss = document.styleSheets[0];
-	ss.insertRule('a[highlight=hint_elem] {background-color: NULL}', 0);
-	ss.insertRule('a[highlight=hint_active] {background-color: NULL}', 0);
-}
-function deleteHintRules() {
-	var ss = document.styleSheets[0];
-	ss.deleteRule(0);
-	ss.deleteRule(0);
-}
-function judgeHintNum(hint_num) {
-	var hint_elem = hint_elems[hint_num - 1];
-	if (hint_elem != undefined) {
-		execSelect(hint_elem);
-	} else {
-		removeHints();
-	}
-}
-function execSelect(elem) {
-	var tag_name = elem.tagName.toLowerCase();
-	var type = elem.type ? elem.type.toLowerCase() : "";
-	if (tag_name == 'a' && elem.href != '') {
-		setHighlight(elem, true);
-		// TODO: ajax, <select>
-		if (hint_open_in_new_tab)
-			window.open(elem.href);
-		else location.href=elem.href;
-      var textField = document.createElement("textarea");
-      textField.innerText = elem.href
-      window.document.body.appendChild(textField);
-      textField.select();
-      window.document.execCommand("copy");
-      textField.remove();
-	} else if (tag_name == 'input' && (type == "submit" || type == "button" || type == "reset")) {
-		elem.click();
-	} else if (tag_name == 'input' && (type == "radio" || type == "checkbox")) {
-		// TODO: toggle checkbox
-		elem.checked = !elem.checked;
-	} else if (tag_name == 'input' || tag_name == 'textarea') {
-		elem.focus();
-		elem.setSelectionRange(elem.value.length, elem.value.length);
-	}
-	removeHints();
-}
-function setHints() {
-	setHintRules();
-	var win_top = window.scrollY;
-	var win_bottom = win_top + window.innerHeight;
-	var win_left = window.scrollX;
-	var win_right = win_left + window.innerWidth;
-	// TODO: <area>
-	var elems = document.body.querySelectorAll('a, input:not([type=hidden]), textarea, select, button');
-	var div = document.createElement('div');
-	div.setAttribute('highlight', 'hints');
-	document.body.appendChild(div);
-	for (var i = 0; i < elems.length; i++) {
-		var elem = elems[i];
-		if (!isHintDisplay(elem))
-			continue;
-		var pos = elem.getBoundingClientRect();
-		var elem_top = win_top + pos.top;
-		var elem_bottom = win_top + pos.bottom;
-		var elem_left = win_left + pos.left;
-		var elem_right = win_left + pos.left;
-		if ( elem_bottom >= win_top && elem_top <= win_bottom) {
-			hint_elems.push(elem);
-			setHighlight(elem, false);
-			var span = document.createElement('span');
-			span.style.cssText = [ 
-				'left: ', elem_left, 'px;',
-				'top: ', elem_top, 'px;',
-				'position: absolute;',
-				'font-size: 13px;',
-				'background-color: ' + (hint_open_in_new_tab ? '#458588' : '#1d2021') + ';',
-				'color: white;',
-				'font-weight: bold;',
-				'padding: 0px 1px;',
-				'z-index: 100000;'
-					].join('');
-			span.innerHTML = hint_elems.length;
-			div.appendChild(span);
-			if (elem.tagName.toLowerCase() == 'a') {
-				if (hint_elems.length == 1) {
-					setHighlight(elem, true);
-				} else {
-					setHighlight(elem, false);
-				}
-			}
-		}
-	}
-}
-function isHintDisplay(elem) {
-	var pos = elem.getBoundingClientRect();
-	return (pos.height != 0 && pos.width != 0);
-}
-function removeHints() {
-	if (!hint_enabled)
-		return;
-	hint_enabled = false;
-	deleteHintRules();
-	for (var i = 0; i < hint_elems.length; i++) {
-		hint_elems[i].removeAttribute('highlight');
-	}
-	hint_elems = [];
-	hint_num_str = '';
-	var div = document.body.querySelector('div[highlight=hints]');
-	if (div != undefined) {
-		document.body.removeChild(div);
-	}
-	document.removeEventListener('keydown', hintHandler, false);
-	document.addEventListener('keydown', initKeyBind, false);
-}
-function addKeyBind( key, func, eve ){
-	var pressedKey = get_key(eve);
-	if( pressedKey == key ){
-		eve.preventDefault();  //Stop Default Event 
-		eval(func);
-	}
-}
-document.addEventListener( 'keydown', initKeyBind, false );
-function initKeyBind(e){
-	var t = e.target;
-	if( t.nodeType == 1){
-		addKeyBind( 'M-M', 'hintMode()', e );
-		addKeyBind( 'M-m', 'hintMode(true)', e );
-		addKeyBind( 'M-c', 'removeHints()', e );
-	}
-}
-var keyId = {
-	"U+0008" : "BackSpace",
-	"U+0009" : "Tab",
-	"U+0018" : "Cancel",
-	"U+001B" : "Esc",
-	"U+0020" : "Space",
-	"U+0021" : "!",
-	"U+0022" : "\"",
-	"U+0023" : "#",
-	"U+0024" : "$",
-	"U+0026" : "&",
-	"U+0027" : "'",
-	"U+0028" : "(",
-	"U+0029" : ")",
-	"U+002A" : "*",
-	"U+002B" : "+",
-	"U+002C" : ",",
-	"U+002D" : "-",
-	"U+002E" : ".",
-	"U+002F" : "/",
-	"U+0030" : "0",
-	"U+0031" : "1",
-	"U+0032" : "2",
-	"U+0033" : "3",
-	"U+0034" : "4",
-	"U+0035" : "5",
-	"U+0036" : "6",
-	"U+0037" : "7",
-	"U+0038" : "8",
-	"U+0039" : "9",
-	"U+003A" : ":",
-	"U+003B" : ";",
-	"U+003C" : "<",
-	"U+003D" : "=",
-	"U+003E" : ">",
-	"U+003F" : "?",
-	"U+0040" : "@",
-	"U+0041" : "a",
-	"U+0042" : "b",
-	"U+0043" : "c",
-	"U+0044" : "d",
-	"U+0045" : "e",
-	"U+0046" : "f",
-	"U+0047" : "g",
-	"U+0048" : "h",
-	"U+0049" : "i",
-	"U+004A" : "j",
-	"U+004B" : "k",
-	"U+004C" : "l",
-	"U+004D" : "m",
-	"U+004E" : "n",
-	"U+004F" : "o",
-	"U+0050" : "p",
-	"U+0051" : "q",
-	"U+0052" : "r",
-	"U+0053" : "s",
-	"U+0054" : "t",
-	"U+0055" : "u",
-	"U+0056" : "v",
-	"U+0057" : "w",
-	"U+0058" : "x",
-	"U+0059" : "y",
-	"U+005A" : "z",
-	//"U+005B" : "[",
-	//"U+005C" : "\\",
-	//"U+005D" : "]",
-	"U+00DB" : "[",
-	"U+00DC" : "\\",
-	"U+00DD" : "]",
-	"U+005E" : "^",
-	"U+005F" : "_",
-	"U+0060" : "`",
-	"U+007B" : "{",
-	"U+007C" : "|",
-	"U+007D" : "}",
-	"U+007F" : "Delete",
-	"U+00A1" : "¡",
-	"U+0300" : "CombGrave",
-	"U+0300" : "CombAcute",
-	"U+0302" : "CombCircum",
-	"U+0303" : "CombTilde",
-	"U+0304" : "CombMacron",
-	"U+0306" : "CombBreve",
-	"U+0307" : "CombDot",
-	"U+0308" : "CombDiaer",
-	"U+030A" : "CombRing",
-	"U+030B" : "CombDblAcute",
-	"U+030C" : "CombCaron",
-	"U+0327" : "CombCedilla",
-	"U+0328" : "CombOgonek",
-	"U+0345" : "CombYpogeg",
-	"U+20AC" : "€",
-	"U+3099" : "CombVoice",
-	"U+309A" : "CombSVoice",
-}
-function get_key(evt){
-	var key = keyId[evt.keyIdentifier] || evt.keyIdentifier,
-		ctrl = evt.ctrlKey ? 'C-' : '',
-		meta = (evt.metaKey || evt.altKey) ? 'M-' : '',
-		shift = evt.shiftKey ? 'S-' : '';
-	if (evt.shiftKey){
-		if (/^[a-z]$/.test(key)) 
-			return ctrl+meta+key.toUpperCase();
-		if (/^[0-9]$/.test(key)) {
-			switch(key) {
-				// TODO
-				case "4":
-					key = "$";
-				break;
-			};
-			return key;
-		}
-		if (/^(Enter|Space|BackSpace|Tab|Esc|Home|End|Left|Right|Up|Down|PageUp|PageDown|F(\d\d?))$/.test(key)) 
-			return ctrl+meta+shift+key;
-	}
-	return ctrl+meta+key;
-}
diff --git a/js/theme.js b/js/theme.js
deleted file mode 100644
index f302a96..0000000
--- a/js/theme.js
+++ /dev/null
@@ -1,117 +0,0 @@
-let switcher = document.getElementById('chb_theme');
-let buttonApply = document.getElementById('color_apply');
-let buttonReset = document.getElementById('color_reset');
-let bgInput = document.getElementById('bg_input');
-let fgInput = document.getElementById('fg_input');
-let accentInput = document.getElementById('accent_input');
-
-switcher.onclick = () => switcher.checked ? darkTheme() : lightTheme();
-
-localStorage.getItem('theme') === 'dark' ? darkTheme() : lightTheme();
-
-function darkTheme() {
-	switcher.checked = true;
-	localStorage.setItem('theme', 'dark');
-	document.body.setAttribute('theme', 'dark');
-
-	setColors('dark');
-}
-
-function lightTheme() {
-	switcher.checked = false;
-	localStorage.setItem('theme', 'light');
-	document.body.setAttribute('theme', 'light');
-
-	setColors('light');
-}
-
-buttonReset.onclick = () => {
-	let themeName = localStorage.getItem('theme');
-	let root = document.querySelector(`[theme="${themeName}"]`);
-
-	localStorage.removeItem(themeName);
-
-	root.style.setProperty('--background', null);
-	root.style.setProperty('--foreground', null);
-	root.style.setProperty('--accent', null);
-
-	resetColors(themeName);
-};
-
-buttonApply.onclick = () => {
-	let themeName = localStorage.getItem('theme');
-	let root = document.querySelector(`[theme="${themeName}"]`);
-	let bgColor = getComputedStyle(root).getPropertyValue('--background');
-	let fgColor = getComputedStyle(root).getPropertyValue('--foreground');
-	let accentColor = getComputedStyle(root).getPropertyValue('--accent');
-
-
-	if (bgInput.value !== bgColor) {
-		bgColor = bgInput.value;
-		root.style.cssText = `--background: ${bgColor};`;
-	}
-
-	if (fgInput.value !== fgColor) {
-		fgColor = fgInput.value;
-		root.style.cssText += `--foreground: ${fgColor};`;
-	}
-
-	if (accentInput.value !== accentColor) {
-		accentColor = accentInput.value;
-		root.style.cssText += `--accent: ${accentColor};`;
-	}
-
-	let colors =
-	{
-		'background': bgColor,
-		'foreground': fgColor,
-		'accent': accentColor
-	};
-
-	localStorage.setItem(themeName, JSON.stringify(colors));
-}
-
-function resetColors(themeName) {
-	let root = document.querySelector(`[theme="${themeName}"]`);
-
-	let bgColor = getComputedStyle(root).getPropertyValue('--background');
-	let fgColor = getComputedStyle(root).getPropertyValue('--foreground');
-	let accentColor = getComputedStyle(root).getPropertyValue('--accent');
-
-	let colors =
-	{
-		'background': bgColor,
-		'foreground': fgColor,
-		'accent': accentColor
-	};
-
-	localStorage.setItem(themeName, JSON.stringify(colors));
-
-	bgInput.value = colors['background'].replace(/\s/g, '');
-	fgInput.value = colors['foreground'].replace(/\s/g, '');
-	accentInput.value = colors['accent'].replace(/\s/g, '');
-}
-
-function setColors(themeName) {
-	let root = document.querySelector(`[theme="${themeName}"]`);
-
-	root.style.setProperty('--background', null);
-	root.style.setProperty('--foreground', null);
-	root.style.setProperty('--accent', null);
-
-	if (localStorage.getItem(themeName) !== null) {
-		let colors = JSON.parse(localStorage.getItem(themeName));
-
-		root.style.cssText = `
-		--background: ${colors['background']};
-		--foreground: ${colors['foreground']};
-		--accent: ${colors['accent']};
-		`;
-
-		bgInput.value = colors['background'].replace(/\s/g, '');
-		fgInput.value = colors['foreground'].replace(/\s/g, '');
-		accentInput.value = colors['accent'].replace(/\s/g, '');
-	} else {
-		resetColors(themeName);
-	}
-}
\ No newline at end of file
diff --git a/js/weather.js b/js/weather.js
deleted file mode 100644
index 8f9331b..0000000
--- a/js/weather.js
+++ /dev/null
@@ -1,111 +0,0 @@
-let keyInput = document.getElementById('key');
-let cityInput = document.getElementById('city');
-let apply = document.getElementById('weather_apply');
-let weatherAlert = document.getElementById('header__weather-alert');
-let info = document.getElementById('header__weather-info');
-let radioCelsius = document.getElementById('celsius');
-let radioFahrenheit = document.getElementById('fahrenheit');
-let weatherLS = localStorage.getItem('weather');
-
-if (weatherLS !== null) {
-	let key = JSON.parse(weatherLS).key;
-	let city = JSON.parse(weatherLS).city;
-
-	keyInput.placeholder = key;
-	cityInput.placeholder = city;
-	getWeatherInfo(key, city);
-} else {
-	getWeatherInfo(null, null);
-}
-
-apply.onclick = () => {
-	let key = keyInput.value;
-	let city = cityInput.value;
-	let weatherLS = localStorage.getItem('weather');
-
-	if (key === '') {
-		if (weatherLS !== null) {
-			key = JSON.parse(weatherLS).key;
-		}
-	} else {
-		weatherAlert.style.display = 'none';
-	}
-
-	if (city === '') {
-		if (weatherLS !== null) {
-			city = JSON.parse(weatherLS).city;
-		}
-	} else {
-		weatherAlert.style.display = 'none';
-	}
-
-	radioFahrenheit.checked ? tempUnit = 'F' : tempUnit = 'C';
-
-	let info = {
-		key: key,
-		city: city,
-		tempUnit: tempUnit
-	};
-
-	localStorage.setItem('weather', JSON.stringify(info));
-
-	cityInput.value = '';
-	cityInput.blur();
-	cityInput.placeholder = city;
-
-	keyInput.value = '';
-	keyInput.blur();
-	keyInput.placeholder = key;
-
-	getWeatherInfo(key, city);
-}
-
-function getWeatherInfo(key, city) {
-	fetch(`https://api.openweathermap.org/data/2.5/weather?q=matamoros&appid=b99f1143ff8154505212b913f22645c0`)
-		.then(function (response) {
-			return response.json();
-		})
-		.then(function (data) {
-			celsius = Math.round(parseFloat(data.main.temp) - 273.15);
-			fahrenheit = Math.round(((parseFloat(data.main.temp) - 273.15) * 1.8) + 32);
-			description = data.weather[0].description;
-		})
-		.then(function () {
-			drawWeather();
-		})
-		.catch(function (error) {
-			if (key === '' || key === null) {
-				weatherAlert.style.display = '';
-				weatherAlert.innerHTML = 'remember to add your api key';
-				keyInput.placeholder = 'Enter key';
-			} else if (city === '' || city === null) {
-				weatherAlert.style.display = '';
-				weatherAlert.innerHTML = 'remember to add city name';
-				cityInput.placeholder = 'Enter city';
-			}
-			else {
-				weatherAlert.style.display = 'none';
-				info.innerHTML = '¯\u005C_(ツ)_/¯';
-				console.log(error);
-			}
-		});
-}
-
-function drawWeather() {
-	if (weatherLS) {
-		if (JSON.parse(weatherLS).tempUnit === 'C') {
-			temp = `${celsius}\u00B0C`;
-			radioCelsius.checked = true;
-		} else {
-			temp = `${fahrenheit}\u00B0F`;
-			radioFahrenheit.checked = true;
-		}
-	}
-
-	if (!weatherLS) {
-		temp = `${celsius}\u00B0C`;
-		radioCelsius.checked = true;
-	}
-
-	info.innerHTML = `${description}, <span class="header__weather-temp">${temp}</span>`;
-}