diff --git a/assets/texts/main_desc.txt b/assets/texts/main_desc.txt
new file mode 100644
index 0000000..eeb318e
--- /dev/null
+++ b/assets/texts/main_desc.txt
@@ -0,0 +1,7 @@
+Are you bored ? <br/><br/>
+If yes you can find many simple games on this webpage. <br/>
+In section GAMES you have list of all the games. <br/>
+There are also many different suprises hidden everywhere.<br/>
+<br/>Here is very, very simple game below. <br/>
+<br/>
+- click on the rectangle 100 times
\ No newline at end of file
diff --git a/backend.js b/backend.js
new file mode 100644
index 0000000..eb55f09
--- /dev/null
+++ b/backend.js
@@ -0,0 +1,91 @@
+$(document).ready(function(){
+
+	// here we start the program
+	let main_desc_clicked = false;
+	let rect_score = 100;
+	let footer_wow = true;
+	let footer_dbl = false;
+
+
+	// random
+	$(".ni, .outerNi").click(function(){
+		$(this).hide();
+	});
+
+
+	// question mark
+	$(".question_mark_navbar").click(function(){
+		$("*").css("background-color", "#ffffff");
+	});
+
+	// title
+	$("#welcome").mouseenter(function(){
+		if(main_desc_clicked == true){
+			$(header).toggle(200);
+		}
+	});
+	
+	// main_desc
+	$("#main_desc").load("assets/texts/main_desc.txt");
+
+	$("#main_desc").click(function(){
+		$(this).css("color", "#000539");
+		main_desc_clicked = true;
+	});
+
+	// score
+	$(".score").click(function(){
+		rect_score += 1;
+
+		$(this).css("width", "9%");
+		$(this).html(rect_score);
+	});
+
+	// rect
+	$("#rect").click(function(){
+		rect_score -= 1;
+
+		if (rect_score <= 0){
+			rect_score = 0;
+
+			$(".score").css("width", "22%");
+			$(".score").html("Yay you won!");
+		} else {
+			$(".score").css("width", "9%");
+			$(".score").html(rect_score);
+		}
+	});
+
+
+	// footer
+	$(".footer").on({
+		dblclick : function(){
+			$(this).html("wow");
+			$("section, header").toggle(5000);
+
+			if (footer_dbl == true){
+				$(this).css("font-size", "20px");
+				footer_dbl = false;
+			} else {
+				$(this).css("font-size", "400px");
+				footer_dbl = true;
+			}
+
+			footer_wow = true;
+		},
+		
+		click : function(){
+			if (footer_wow == true){
+				$(this).html("try double click");
+				footer_wow = false;
+			} else {
+				$(this).html("wow");
+				footer_wow = true;
+			}
+		}
+	});
+
+
+	console.log("Everything is running.");
+
+});
diff --git a/games/engine.js b/games/engine.js
new file mode 100644
index 0000000..46686e3
--- /dev/null
+++ b/games/engine.js
@@ -0,0 +1,560 @@
+// learn imports
+
+// object for circles inside .game_box
+class Circle{
+	constructor(x, y, radius, element, speed=1){
+		this.x = x;
+		this.y = y;
+		this.radius = radius;
+		this.element = element;
+		this.speed = speed;
+
+		// variables for css
+		this.right = -(50 + this.x);
+		this.top = 125 + this.y;
+
+		this.element.css({
+			"right": `${this.right.toString()}px`,
+			"top": `${this.top.toString()}px`
+		})
+	}
+
+	// for debugging
+	print = function(){
+		console.log(`pos: ${this.x},${this.y} ; rt: ${this.right},${this.top} ; radius: ${this.radius}`);
+	}
+
+	// moving
+	move = function(x, y){
+		x *= this.speed;
+
+		this.x += x;
+		this.y += y;
+
+		// variables for css
+		this.right = -(50 + this.x);
+		this.top = 125 + this.y;
+
+		this.element.css({
+			"right": `${this.right.toString()}px`,
+			"top": `${this.top.toString()}px`
+		})
+	}
+
+	//updating pos
+	update = function(x=this.x, y=this.y){
+		this.x = x;
+		this.y = y;
+
+		// variables for css
+		this.right = -(50 + this.x);
+		this.top = 125 + this.y;
+
+		this.element.css({
+			"right": `${this.right.toString()}px`,
+			"top": `${this.top.toString()}px`
+		})
+	}
+
+	// collisions
+	collisions = function(Xlimit, other_circle){
+		if(this.x > Xlimit){
+			this.x = -50;
+
+			$(".cgame").css("background-color", "#ffdccc");
+			setTimeout(function(){
+				$(".cgame").css("background-color", "#f2f3fe");
+			},1000);
+		}
+
+		// if collide
+
+		// css bad u go after first circle so u need to add 50 cause visually it starts right after 1. circle
+		if (distance_indicator([this.x, this.y], [other_circle.x + 50, other_circle.y]) < (this.radius + other_circle.radius)){
+			this.x = -50;
+			other_circle.update(other_circle.x, random_integer(250) - 125);
+
+			$(".cgame").css("background-color", "#b0ffb3");
+			setTimeout(function(){
+				$(".cgame").css("background-color", "#f2f3fe");
+			},1000);
+		}
+	}
+}
+
+// function for changing aplitude
+function change_amplitude(amplitude, dir, step=1){  // limits are set to -1.5 and 1.5
+	if (amplitude >= 120){
+		dir = "down";
+	} else if (amplitude <= -120){
+		dir = "up";
+	}
+	
+	if (dir == "up"){
+		amplitude += step;
+	} else {
+		amplitude -= step;
+	}
+
+	return [amplitude, dir];
+}
+
+
+// useful funcs
+function random_integer(max){
+	let lim = Math.floor(Math.log10(max)) + 1;
+	let random_num = max + 1;
+
+	while (random_num > max){
+		random_num = Math.floor(Math.random() * Math.pow(10, lim));
+	}
+
+	return random_num;
+}
+
+function distance_indicator(cords0, cords1){
+	let x_dist = Math.abs(cords0[0] - cords1[0]);
+	let y_dist = Math.abs(cords0[1] - cords1[1]);
+	let dist = Math.sqrt(Math.pow(x_dist, 2) + Math.pow(y_dist, 2));
+
+	return dist;
+}
+
+function random_color(){
+	let digits = [];
+	for (let i = 0; i < 10; i++){
+		digits.push(i.toString());
+	}
+
+	digits = digits.concat(["a", "b", "c", "d", "e", "f"]);
+
+	let color_tag = "#";
+
+	for (let i = 0; i < 6; i++){
+		color_tag += digits[random_integer(15)];
+	}
+
+	return color_tag;
+}
+
+$(document).ready(function(){
+    
+    // We start the program here
+    let footer_wow = true;
+	let footer_dbl = false;
+	let title_right = 0;
+	let footer_changed = false;
+	let temporary_variable = 0;
+	let digits = [];
+	for (let i = 0; i < 10; i++){
+		digits.push(i.toString());
+	}
+	let wee_count = 0;
+	let pink_titles = false;
+
+	// preparing colors
+	let colors = ["Red", "Lime", "Aqua", "Yellow", "White", "Black", "Violet", "Pink", "Orange"];
+	let colors_score = 0;
+
+	for (color_ of colors){
+		$(".color_options").append(`<p id="X${color_}">${color_}</p>`);
+	}
+
+	let color = colors[random_integer(8)];
+	$(".color_current").html(colors[random_integer(8)]).css("color", color);
+
+	// preparing sin wave game
+
+	temporary_variable = random_integer(83);
+	let angle = 0;
+	let amplitude = 120;
+	let dir = "up";
+	let target_circle = new Circle(700, (temporary_variable * 3) - 125, 25, $("#target_circle"));
+
+	let moving_circle = new Circle(0, 0, 25, $("#moving_circle"));
+
+	$(".amplitude_showerX").css("top", `${125 - (amplitude + 25)}px`);
+	$(".shower").css("top", 125 + (moving_circle.y - 25));
+
+	$("#target_circle").css("top", `${temporary_variable}%`);
+
+	target_circle.update()
+
+	// preparing elements game
+
+	let element_size = [];
+	let win_fade_game = false;
+
+	$(".helloX").hide();
+
+	for (let i = 0; i < 150; i++){
+		$(".sgame").append(`<p id="X${i}"> &nbsp; </p>`);
+	}
+
+	for (let i = 0; i < 150; i++){
+		$(`#X${i}`).css("background-color", random_color());
+		if (element_size.length < 2){
+			element_size.push($(`#X${i}`).outerWidth(true));
+			element_size.push($(`#X${i}`).outerHeight(true));
+		}
+	}
+
+	// Here prep work ends
+
+    // random
+	$(".ni, .outerNi").click(function(){
+		$(this).hide();
+	});
+
+
+	// question mark
+	$(".question_mark_navbar").click(function(){
+		$("*").css("background-color", "#ffffff");
+	});
+
+	// title
+	$(".brrr").click(function(){
+		title_right--;
+
+		if (title_right < -20){
+			title_right = 0;
+		}
+		
+		$(this).css("right", `${title_right}%`);
+	})
+
+	// current_color
+	$(".color_current").click(function(){
+		$(".color_options, .colors_score").slideToggle(5000);
+	});
+
+	// colors score
+	$(".colors_score").click(function(){
+		if (footer_changed == false){
+			$(".footer").css("font-size", "400px");
+			footer_changed = true;
+		} else {
+			$(".footer").css("font-size", "20px");
+			footer_changed = false;
+		}
+	});
+
+	// first game
+
+	// clicking elements
+    $(".color_options").children("p").click(function(){
+
+		if ($(this).html() != color){
+			$(this).hide(1000);
+			$(".color_options").children("p").css("background-color", "#f2f3fe");
+			const old_score = colors_score;
+			colors_score = 0;
+
+			$(".colors_score").html(`${colors_score} ;${old_score}`).animate({
+				marginLeft: "+=80%"
+			}, 3000);
+		} else {
+			color = colors[random_integer(8)];
+			$(".color_current").html(colors[random_integer(8)]).css("color", color);
+			$(this).css("background-color", colors[random_integer(8)]);
+			colors_score++;
+			$(".colors_score").html(colors_score);
+		}
+
+	});
+
+	// reseting elements
+	$(".color_options").click(function(){
+		$(this).children().show(2000);
+	});
+
+	// second game
+
+	// game loop
+
+    setInterval(function(){ 
+		moving_circle.move(1, 0);
+		moving_circle.update(moving_circle.x, Math.cos(angle) * amplitude);
+		$(".shower").css("top", 125 + (moving_circle.y - 25));
+
+		moving_circle.collisions(parseInt($(".game_box").width()) - 150, target_circle);
+		angle += 0.01;
+
+	}, 8);
+
+	// changing amplitude
+	$(".cgame, .amplitude").click(function(){
+		returned_list = change_amplitude(amplitude, dir, 10);
+		amplitude = returned_list[0];
+		dir = returned_list[1];
+		$(".amplitude_showerX").css("top", `${125 - (amplitude + 25)}px`);
+
+		$(".amplitude").html(`Amplitude: ${amplitude}`);
+	});
+
+	// second title
+	$(".title2").on({
+		mouseenter: function(){
+
+			$(".cgame").css("background-color", "#000539");
+	
+		},
+		mouseleave: function(){
+			$(".cgame").css("background-color", "#f2f3fe");
+		},
+		click: function(){
+			$(this).css("background-color", "#000539");
+		}
+	});
+
+	$("body").keypress(function( event ) {
+		if (event.key in digits){
+			if (wee_count < 3){
+				$(".secret").append('<span> WEE </span>');
+				wee_count++;
+			}
+		}
+	});
+
+	// third game
+
+	for (let i = 0; i < 150; i++){
+		$(`#X${i}`).on({
+			mouseenter: function(){
+			
+				let rni = random_integer(10);
+				
+				// 0 3 height, 2 opacity, 4 bg
+				if (rni == 0){
+					op = $(`#X${i}`).css("opacity");
+					$(`#X${i}`).css("opacity", op  -0.1);
+	
+					$(`#X${i}`).animate({
+						height: 51
+					}, 1500 );
+				} else if (rni == 1){
+					$(`#X${i}`).animate({
+						opacity: 0.2
+					}, 1500 );
+				} else if (rni == 2){
+					op = $(`#X${i}`).css("opacity");
+					$(`#X${i}`).css("opacity", op  -0.4);
+	
+				} else if (rni == 3){
+					op = $(`#X${i}`).css("opacity");
+					$(`#X${i}`).css("opacity", op  -0.1);
+	
+					$(`#X${i}`).animate({
+						height: `${element_size[1]}px`
+					}, 1500 );
+				} else if (rni == 4){
+					op = $(`#X${i}`).css("opacity");
+					$(`#X${i}`).css("opacity", op  -0.1);
+	
+					$(`#X${i}`).css("background-color", random_color());
+				} else if (rni == 5){
+					op = $(`#X${i}`).css("opacity");
+					$(`#X${i}`).css("opacity", op  -0.1);
+	
+					$(`#X${i}`).css("right", parseInt($(`#X${i}`).css("right").slice(0, -2)) + 10);
+				} else if (rni == 6){
+					op = $(`#X${i}`).css("opacity");
+					$(`#X${i}`).css("opacity", op  -0.1);
+	
+					$(`#X${i}`).css("top", parseInt($(`#X${i}`).css("top").slice(0, -2)) + 10);
+				} else if (rni == 7){
+					op = $(`#X${i}`).css("opacity");
+					$(`#X${i}`).css("opacity", op  -0.1);
+	
+					$(`#X${i}`).css("bottom", parseInt($(`#X${i}`).css("top").slice(0, -2)) + 10);
+				} else if (rni == 8){
+					op = $(`#X${i}`).css("opacity");
+					$(`#X${i}`).css("opacity", op  -0.1);
+	
+					$(`#X${i}`).css("left", parseInt($(`#X${i}`).css("left").slice(0, -2)) + 10);
+				} else if (rni == 9){
+					op = $(`#X${i}`).css("opacity");
+					$(`#X${i}`).css("opacity", op  -0.1);
+	
+					$(`#X${i}`).css("border-radius", parseInt($(`#X${i}`).css("border-radius").slice(0, -2)) + 6);
+				} else if (rni == 10){
+					op = $(`#X${i}`).css("opacity");
+					$(`#X${i}`).css("opacity", op  -0.1);
+	
+					$(`#X${i}`).addClass("box_shadow");
+				}
+			},
+
+			click: function(){
+				op = $(`#X${i}`).css("opacity");
+				$(`#X${i}`).css("opacity", op  -0.15);
+			}
+		});
+	}
+
+	setInterval(function(){
+		if (win_fade_game == false){
+			let clear = true;
+
+			for (let i = 0; i < 150; i++){
+				op = $(`#X${i}`).css("opacity");
+				if (op > 0.022){
+					clear = false;
+				} 
+			}
+
+			if (clear == true){
+				win_fade_game = true;
+
+				$(".sgame").css("background-color", "#b5ffb8").toggle(3000);
+
+				setTimeout(function(){
+					$(".sgame").css("background-color", "#f2f3fe");
+				}, 3000)
+
+				$(".helloX").show(3000);
+			}
+		}
+	}, 1000);
+
+	$(".helloX").on({
+		click: function(){
+			$(".sgame").empty();
+
+			win_fade_game = false;
+
+			for (let i = 0; i < 150; i++){
+				$(".sgame").append(`<p id="X${i}"> &nbsp; </p>`);
+			}
+
+			for (let i = 0; i < 150; i++){
+				$(`#X${i}`).css("background-color", random_color());
+			}
+
+			for (let i = 0; i < 150; i++){
+				$(`#X${i}`).on({
+					mouseenter: function(){
+					
+						let rni = random_integer(10);
+						
+						// 0 3 height, 2 opacity, 4 bg
+						if (rni == 0){
+							op = $(`#X${i}`).css("opacity");
+							$(`#X${i}`).css("opacity", op  -0.1);
+			
+							$(`#X${i}`).animate({
+								height: 51
+							}, 1500 );
+						} else if (rni == 1){
+							$(`#X${i}`).animate({
+								opacity: 0.2
+							}, 1500 );
+						} else if (rni == 2){
+							op = $(`#X${i}`).css("opacity");
+							$(`#X${i}`).css("opacity", op  -0.4);
+			
+						} else if (rni == 3){
+							op = $(`#X${i}`).css("opacity");
+							$(`#X${i}`).css("opacity", op  -0.1);
+			
+							$(`#X${i}`).animate({
+								height: `${element_size[1]}px`
+							}, 1500 );
+						} else if (rni == 4){
+							op = $(`#X${i}`).css("opacity");
+							$(`#X${i}`).css("opacity", op  -0.1);
+			
+							$(`#X${i}`).css("background-color", random_color());
+						} else if (rni == 5){
+							op = $(`#X${i}`).css("opacity");
+							$(`#X${i}`).css("opacity", op  -0.1);
+			
+							$(`#X${i}`).css("right", parseInt($(`#X${i}`).css("right").slice(0, -2)) + 10);
+						} else if (rni == 6){
+							op = $(`#X${i}`).css("opacity");
+							$(`#X${i}`).css("opacity", op  -0.1);
+			
+							$(`#X${i}`).css("top", parseInt($(`#X${i}`).css("top").slice(0, -2)) + 10);
+						} else if (rni == 7){
+							op = $(`#X${i}`).css("opacity");
+							$(`#X${i}`).css("opacity", op  -0.1);
+			
+							$(`#X${i}`).css("bottom", parseInt($(`#X${i}`).css("top").slice(0, -2)) + 10);
+						} else if (rni == 8){
+							op = $(`#X${i}`).css("opacity");
+							$(`#X${i}`).css("opacity", op  -0.1);
+			
+							$(`#X${i}`).css("left", parseInt($(`#X${i}`).css("left").slice(0, -2)) + 10);
+						} else if (rni == 9){
+							op = $(`#X${i}`).css("opacity");
+							$(`#X${i}`).css("opacity", op  -0.1);
+			
+							$(`#X${i}`).css("border-radius", parseInt($(`#X${i}`).css("border-radius").slice(0, -2)) + 6);
+						} else if (rni == 10){
+							op = $(`#X${i}`).css("opacity");
+							$(`#X${i}`).css("opacity", op  -0.1);
+			
+							$(`#X${i}`).addClass("box_shadow");
+						}
+					},
+		
+					click: function(){
+						op = $(`#X${i}`).css("opacity");
+						$(`#X${i}`).css("opacity", op  -0.15);
+					}
+				});
+			}
+
+			$(".helloX").hide(3000);
+			$(".sgame").show(3000);
+		},
+		dblclick: function(){
+			$(".sgame p, .color_current").addClass("ss");
+		}
+	});
+
+	$(".title3").click(function(){
+		if (pink_titles){
+			$(".title").toggleClass("title_shadow");
+			$(".title").toggleClass("box_shadow_secret");
+		} else {
+			$(".title").toggleClass("title_shadow");
+			$(".title").toggleClass("box_shadow_secret");
+		}
+	});
+
+	// footer
+
+	// footer
+	$(".footer").on({
+		dblclick : function(){
+			$(this).html("wow");
+			$("section, header").toggle(5000);
+
+			if (footer_dbl == true){
+				$(this).css("font-size", "20px");
+				footer_dbl = false;
+			} else {
+				$(this).css("font-size", "400px");
+				footer_dbl = true;
+			}
+
+			footer_wow = true;
+		},
+		
+		click : function(){
+			if (footer_wow == true){
+				$(this).html("try double click");
+				footer_wow = false;
+			} else {
+				$(this).html("wow");
+				footer_wow = true;
+			}
+		}
+	});
+	
+	// debug message
+
+	console.log("Everything is running.");
+
+});
diff --git a/games/game-styles.css b/games/game-styles.css
new file mode 100644
index 0000000..160960f
--- /dev/null
+++ b/games/game-styles.css
@@ -0,0 +1,296 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
+/*https://dafluffypotato.com/ */
+
+*{
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    background-color: #f2f3fe;
+    user-select: none;
+}
+
+header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 5%;
+    background-color: #000539;
+}
+
+.navbar_items{
+    padding-right: 3%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    background-color: #000539;
+}
+
+.ni{
+    text-decoration: none;
+    cursor: pointer;
+    position: relative;
+    display: inline-block;
+    font-weight: bold;
+    font-size: 30px;
+    color: #f2f3fe;
+    background-color: #000539;
+    transition: right 0.15s ease-in-out;
+    right: 0px;
+}
+
+.outerNi{
+    margin: 10px;
+    margin-left: 15px;
+}
+
+.ni:hover{
+    right: -2px;
+    color: #7882f5;
+}
+
+/* navbar above */
+
+.mid{
+    margin: auto;
+}
+
+.right{
+    margin-left: 80%;
+}
+
+.game{
+    margin-top: 2%;
+    margin-bottom: 2%;
+}
+
+.circle{
+    height: 50px;
+    width: 50px;
+    background-color: #7882f5;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.title{
+    color: #7882f5;
+    position: relative;
+    font-weight: bold;
+    font-size: 40px;
+    padding-left: 2%;
+    margin-bottom: 3%;
+    width: 30%;
+    background-color: #f2f3fe;
+    border-radius: 10px ;
+    transition: all 0.15s ease-in-out;
+    right: -1%;
+}
+
+.title_shadow{
+    box-shadow: 0px 3px 4px rgba(73, 73, 80, 0.212);
+}
+
+.color_options{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+
+    margin: 5%;
+    position: relative;
+    border-radius: 15px;
+    transition: all 0.15s ease-in-out;
+    right: 0px;
+}
+
+.color_options p{
+    cursor: pointer;
+    color: #5661e0;
+    position: relative;
+    font-weight: bold;
+    font-size: 40px;
+    margin: 1%;
+    padding: 0.5%;
+    background-color: #f2f3fe;
+    border-radius: 10px ;
+    transition: all 0.15s ease-in-out;
+    right: 0px;
+}
+
+.color_current{
+    position: relative;
+    font-weight: bold;
+    font-size: 45px;
+    width: 16%;
+    padding: 3%;
+    background-color: #6673ff;
+    border-radius: 10px ;
+    transition: all 0.15s ease-in-out;
+    right: 0px;
+}
+
+.colors_score{
+    color: #5661e0;
+    position: relative;
+    font-weight: bold;
+    font-size: 40px;
+    width: 8%;
+    padding: 0.5%;
+    background-color: #f2f3fe;
+    border-radius: 10px ;
+    transition: all 0.15s ease-in-out;
+    right: 0px;
+}
+
+.game_box{
+    margin-left: 5%;
+    margin-right: 5%;
+    border-radius: 20px;
+    position: relative;
+    font-weight: bold;
+    background-color: #f2f3fe;
+    transition: all 0.15s ease-in-out;
+    right: 0px;
+}
+
+.cgame{
+    height: 300px;
+}
+
+#target_circle{
+    position: relative;
+    right: -80%;
+    background-color: #010a72;
+}
+
+#moving_circle{
+    position: relative;
+    right: -50px;
+    top: 125px;
+}
+
+.amplitude{
+    cursor: pointer;
+    color: #5661e0;
+    position: relative;
+    font-weight: bold;
+    font-size: 40px;
+    margin: 1%;
+    width: 30%;
+    padding: 0.5%;
+    background-color: #f2f3fe;
+    border-radius: 10px ;
+    transition: all 0.15s ease-in-out;
+    right: 0px;
+}
+
+.amplitude_shower{
+    display: inline-block;
+    position: relative;
+    background-color: #7882f5;
+    width: 50px;
+    height: 10px;
+    border-radius: 10px;
+}
+
+.secret{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    margin: 5%;
+}
+
+.secret span{
+    cursor: pointer;
+    color: #5661e0;
+    position: relative;
+    font-weight: bold;
+    font-size: 40px;
+    margin: 1%;
+    width: 30%;
+    padding: 0.5%;
+    background-color: #f2f3fe;
+    border-radius: 10px ;
+    transition: all 0.15s ease-in-out;
+    right: 0px;
+}
+
+.box_shadow_secret{
+    box-shadow: -2px 5px 15px rgb(255, 0, 128);
+}
+
+.sgame{
+    display: grid;
+    grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
+    grid-template-rows: auto;
+    height: 850px;
+}
+
+.sgame p{
+    cursor: pointer;
+    color: #5661e0;
+    position: relative;
+    margin: 1%;
+    background-color: #f2f3fe;
+    border-radius: 10px ;
+    transition: all 0.15s ease-in-out;
+    right: 0px;
+}
+
+.box_shadow{
+    box-shadow: 0px 3px 10px rgba(91, 91, 99, 0.4);
+}
+
+.element{
+    cursor: pointer;
+    color: #5661e0;
+    position: relative;
+    font-weight: bold;
+    font-size: 40px;
+    margin: 1%;
+    width: fit-content;
+    padding: 0.5%;
+    background-color: #f2f3fe;
+    border-radius: 10px ;
+    transition: all 0.15s ease-in-out;
+    right: 0px;
+}
+
+/* hover here */
+
+.color_options:hover, .color_current:hover, .colors_score:hover, .amplitude:hover, .element:hover{
+    right: -1.5%;
+    box-shadow: 0px 3px 4px rgba(40, 39, 51, 0.4);
+}
+
+.color_options p:hover, .game_box:hover, .secret span:hover{
+    right: -0.3%;
+    box-shadow: 0px 3px 6px rgba(40, 39, 51, 0.4);
+}
+
+.sgame p:hover{
+    right: -2%;
+    box-shadow: 0px 3px 6px rgba(40, 39, 51, 0.4);
+}
+
+.title:hover{
+    right: -2.5%;
+    box-shadow: 0px 3px 4px rgba(40, 39, 51, 0.4);
+}
+
+.ss:hover{
+    width: 50%;
+    height: 50%;
+}
+
+/* footer below */
+
+.footer{
+    color: #5661e0;
+    margin: 0.5%;
+    font-size: 20px;
+    transition: all 5s ease 0s;
+}
+
+.footer:hover{
+    color: #f2f3fe;
+    font-size: 8px;
+}
\ No newline at end of file
diff --git a/games/games.html b/games/games.html
new file mode 100644
index 0000000..ce804e8
--- /dev/null
+++ b/games/games.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="game-styles.css"/>
+    <title>Boredom Games</title>
+</head>
+<body>
+    <header id="header">
+        
+        <div class="navbar_items">
+            <p class="ni outerNi"><a class="ni" href="../index.html">HOME</a></p>
+        </div>
+
+        <div class="navbar_items">
+            <p class="ni outerNi"><a class="ni question_mark_navbar">?</a></p>
+            <p class="ni outerNi"><a class="ni">HELLO</a></p>
+            <p class="ni outerNi"><a class="ni" href="games.html">GAMES</a></p>
+            <p class="ni outerNi"><a class="ni" href="https://tucan444.itch.io/">AUTHOR</a></p>
+        </div>
+    </header>
+    <section>
+        <div class="game">
+            <p class="title title_shadow brrr">1. Click by the color of text.</p>
+
+            <div class="colors">
+                <p class="color_current mid"></p>
+                <div class="color_options"></div>
+                <p class="colors_score right">0</p>
+            </div>
+        </div>
+
+        <div class="game">
+            <p class="title title_shadow title2">2. Make the circles collide.</p>
+
+            <p class="amplitude">Amplitude: 120</p>
+
+            <div class="game_box cgame">
+                <span class="amplitude_shower amplitude_showerX"></span>
+                <span class="amplitude_shower shower"></span>
+                <span class="circle" id="moving_circle"></span>
+                <span class="circle" id="target_circle"></span>
+            </div>
+
+            <div class="secret"></div>
+        </div>
+
+        <div class="game">
+            <p class="title title_shadow title3">3. Fade the elements</p>
+
+            <div class="game_box sgame"></div>
+
+            <p class="element helloX">/   Generate new game!   /</p>
+        </div>
+    </section>
+
+    <footer>
+        <p class="footer">wow</p>
+    </footer>
+    <script src="engine.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..7c3d582
--- /dev/null
+++ b/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="style.css"/>
+    <title>Boredom Games</title>
+</head>
+<body>
+    <header id="header">
+        
+        <div class="navbar_items">
+            <p class="ni outerNi"><a class="ni" href="index.html">HOME</a></p>
+        </div>
+
+        <div class="navbar_items">
+            <p class="ni outerNi"><a class="ni question_mark_navbar">?</a></p>
+            <p class="ni outerNi"><a class="ni">HELLO</a></p>
+            <p class="ni outerNi"><a class="ni" href="games/games.html">GAMES</a></p>
+            <p class="ni outerNi"><a class="ni" href="https://tucan444.itch.io/">AUTHOR</a></p>
+        </div>
+    </header>
+    <section>
+        <div>
+            <p id="welcome">Welcome to Boredom Games</p>
+        </div>
+        <div>
+            <p id="main_desc"></p>
+        </div>
+        <div class="mid">
+            <div class="mid" id="rect"></div>
+            <p class="score mid">100</p>
+        </div>
+    </section>
+
+    <footer>
+        <p class="footer">wow</p>
+    </footer>
+    <script src="backend.js"/>
+</body>
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..43a94f8
--- /dev/null
+++ b/style.css
@@ -0,0 +1,136 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
+/*https://dafluffypotato.com/ */
+
+*{
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    background-color: #f2f3fe;
+    user-select: none;
+}
+
+header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 5%;
+    background-color: #000539;
+}
+
+.navbar_items{
+    padding-right: 3%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    background-color: #000539;
+}
+
+.ni{
+    text-decoration: none;
+    cursor: pointer;
+    position: relative;
+    display: inline-block;
+    font-weight: bold;
+    font-size: 30px;
+    color: #f2f3fe;
+    background-color: #000539;
+    transition: right 0.15s ease-in-out;
+    right: 0px;
+}
+
+.outerNi{
+    margin: 10px;
+    margin-left: 15px;
+}
+
+.ni:hover{
+    right: -2px;
+    color: #7882f5;
+}
+
+/* navbar above */
+
+#welcome{
+    color: #7882f5;
+    position: relative;
+    font-weight: bold;
+    font-size: 40px;
+    padding-left: 2%;
+    width: 30%;
+    background-color: #f2f3fe;
+    border-radius: 10px ;
+    transition: all 0.15s ease-in-out;
+    right: 0px;
+}
+
+#main_desc{
+    color: #5661e0;
+    position: relative;
+    font-weight: bold;
+    font-size: 30px;
+    width: 90%;
+    margin-top: 2%;
+    margin-bottom: 2%;
+    padding-left: 2%;
+    background-color: #f2f3fe;
+    border-radius: 10px ;
+    transition: all 0.15s ease-in-out;
+    right: 0px;
+}
+
+#main_desc:hover, #welcome:hover{
+    right: -2%;
+    box-shadow: 0px 3px 4px rgba(40, 39, 51, 0.4);
+}
+
+.mid{
+    margin: auto;
+}
+
+.score{
+    color: #5661e0;
+    position: relative;
+    font-weight: bold;
+    font-size: 40px;
+    width: 9%;
+    margin-top: 2%;
+    margin-bottom: 2%;
+    padding-left: 2%;
+    background-color: #f2f3fe;
+    border-radius: 10px ;
+    transition: all 0.15s ease-in-out;
+    right: 0px;
+}
+
+.score:hover{
+    right: -0.5%;
+    box-shadow: 0px 3px 4px rgba(40, 39, 51, 0.4);
+}
+
+#rect{
+    position: relative;
+    border-radius: 10px;
+    width: 200px;
+    height: 200px;
+    background-color: #ff0000;
+    box-shadow: 0px 3px 10px rgba(40, 39, 51, 0.4);
+    transition: all 0.2s ease-in-out;
+    right: 0px;
+}
+
+#rect:hover{
+    right: -0.1%;
+    box-shadow: 1px 5px 12px rgba(40, 39, 51, 0.6);
+}
+
+.footer{
+    color: #5661e0;
+    margin: 0.5%;
+    font-size: 20px;
+    transition: all 5s ease 0s;
+}
+
+.footer:hover{
+    color: #f2f3fe;
+    font-size: 8px;
+}
\ No newline at end of file