diff --git a/Car_games/assets/images/bg1.jpg b/Car_games/assets/images/bg1.jpg
new file mode 100644
index 00000000..a5d42ff6
Binary files /dev/null and b/Car_games/assets/images/bg1.jpg differ
diff --git a/Car_games/assets/images/bg2.jpg b/Car_games/assets/images/bg2.jpg
new file mode 100644
index 00000000..ec56a1bb
Binary files /dev/null and b/Car_games/assets/images/bg2.jpg differ
diff --git a/Car_games/assets/images/blast.png b/Car_games/assets/images/blast.png
new file mode 100644
index 00000000..cd70ff60
Binary files /dev/null and b/Car_games/assets/images/blast.png differ
diff --git a/Car_games/assets/images/enemycar.png b/Car_games/assets/images/enemycar.png
new file mode 100644
index 00000000..95550b9d
Binary files /dev/null and b/Car_games/assets/images/enemycar.png differ
diff --git a/Car_games/assets/images/my_car.png b/Car_games/assets/images/my_car.png
new file mode 100644
index 00000000..12054f39
Binary files /dev/null and b/Car_games/assets/images/my_car.png differ
diff --git a/Car_games/assets/sound_effect/car_crash.wav b/Car_games/assets/sound_effect/car_crash.wav
new file mode 100644
index 00000000..e828b3d6
Binary files /dev/null and b/Car_games/assets/sound_effect/car_crash.wav differ
diff --git a/Car_games/assets/sound_effect/horn.wav b/Car_games/assets/sound_effect/horn.wav
new file mode 100644
index 00000000..27e7abb0
Binary files /dev/null and b/Car_games/assets/sound_effect/horn.wav differ
diff --git a/Car_games/assets/sound_effect/race.mp3 b/Car_games/assets/sound_effect/race.mp3
new file mode 100644
index 00000000..a17c3c5b
Binary files /dev/null and b/Car_games/assets/sound_effect/race.mp3 differ
diff --git a/Car_games/assets/sound_effect/race.wav b/Car_games/assets/sound_effect/race.wav
new file mode 100644
index 00000000..040e2fff
Binary files /dev/null and b/Car_games/assets/sound_effect/race.wav differ
diff --git a/Car_games/assets/sound_effect/theme.mp3 b/Car_games/assets/sound_effect/theme.mp3
new file mode 100644
index 00000000..d69ba31d
Binary files /dev/null and b/Car_games/assets/sound_effect/theme.mp3 differ
diff --git a/Car_games/code/DemoOne.jpeg b/Car_games/code/DemoOne.jpeg
new file mode 100644
index 00000000..0e081172
Binary files /dev/null and b/Car_games/code/DemoOne.jpeg differ
diff --git a/Car_games/code/DemoTwo.jpeg b/Car_games/code/DemoTwo.jpeg
new file mode 100644
index 00000000..96788f9c
Binary files /dev/null and b/Car_games/code/DemoTwo.jpeg differ
diff --git a/Car_games/code/README.md b/Car_games/code/README.md
new file mode 100644
index 00000000..62fd0e11
--- /dev/null
+++ b/Car_games/code/README.md
@@ -0,0 +1,18 @@
+# Welcome to Souvik's Car Racing Game
+
+## This is a simple car racing game as long as you play you will earn points
+
+## Game is deployed here - https://yourstruggle11.github.io/Car_game/
+
+
+
+
+# Here are some screen shots
+
+
+<img src="DemoOne.jpeg" alt="Demo One" width="100%" height="600">
+
+<img src="DemoTwo.jpeg" alt="Demo One" width="100%" height="600">
+
+#
+# The is also some amazing sound effect but to hear  that you have to play the game give it a try, Wish you luck
\ No newline at end of file
diff --git a/Car_games/code/brain.js b/Car_games/code/brain.js
new file mode 100644
index 00000000..a17b8a03
--- /dev/null
+++ b/Car_games/code/brain.js
@@ -0,0 +1,439 @@
+
+function myFunction(x) {
+    if (x.matches) { // If media query matches
+        var score = document.querySelector(".score");
+var playArea = document.querySelector(".playArea");
+var startScreen = document.querySelector(".startScreen");
+var roadlines = document.querySelector(".roadLines");
+var playGame = { speed: 5 , score : 0}
+var player = {}
+var car_crash = new Audio("../assets/sound_effect/car_crash.wav");
+var horn = new Audio("../assets/sound_effect/horn.wav");
+var race = new Audio("../assets/sound_effect/race.wav");
+var theme = new Audio("../assets/sound_effect/theme.mp3")
+const up_btn = document.querySelector(".up_btn");
+const down_btn = document.querySelector(".down_btn");
+const left_btn = document.querySelector(".left_btn");
+const right_btn = document.querySelector(".right_btn");
+
+//start the game 
+
+startScreen.addEventListener("click", start); 
+    
+
+
+
+//write a function to move the car
+let forMoving = {
+    ArrowUp: false, ArrowDown: false, ArrowRight: false, ArrowLeft: false
+}
+
+
+
+
+document.addEventListener("keydown", function (e) {
+    if(e.key === "h"){
+        horn.play();
+    }
+    e.preventDefault;
+    forMoving[e.key] = true;
+    //console.log(forMoving);
+    //carMove()
+})
+/*document.addEventListener("deviceready", init, false);
+
+function init(){}*/
+
+    //here is the function for mobile device to move the car
+    up_btn.addEventListener("touchstart", function(e){
+        e.preventDefault;
+        forMoving["ArrowUp"] = true;
+    })
+    up_btn.addEventListener("touchend", function(e){
+        e.preventDefault;
+        forMoving["ArrowUp"] = false;
+    })
+
+    right_btn.addEventListener("touchstart", function(e){
+        e.preventDefault;
+        forMoving["ArrowDown"] = true;
+    })
+    right_btn.addEventListener("touchend", function(e){
+        e.preventDefault;
+        forMoving["ArrowDown"] = false;
+    })
+
+    left_btn.addEventListener("touchstart", function(e){
+        e.preventDefault;
+        forMoving["ArrowLeft"] = true;
+    })
+    left_btn.addEventListener("touchend", function(e){
+        e.preventDefault;
+        forMoving["ArrowLeft"] = false;
+    })
+
+    down_btn.addEventListener("touchstart", function(e){
+        e.preventDefault;
+        forMoving["ArrowRight"] = true;
+    })
+    down_btn.addEventListener("touchend", function(e){
+        e.preventDefault;
+        forMoving["ArrowRight"] = false;
+    })
+
+
+
+    //ending of the function for mobile device to move the car
+
+
+document.addEventListener("keyup", function (e) {
+    race.pause();
+    e.preventDefault;
+    forMoving[e.key] = false;
+    //console.log(forMoving);
+})
+
+
+//make a function to crash the cars 
+
+function iscrash(s,d){
+     sRect = s.getBoundingClientRect();
+     dRect = d.getBoundingClientRect();
+
+     return !((sRect.bottom < dRect.top) || (sRect.top > dRect.bottom) ||
+           (sRect.right < dRect.left) || (sRect.left > dRect.right))
+}
+
+    ///make animation to look road moving
+ function moveLine(){
+    var line = document.querySelectorAll(".roadLines");
+    line.forEach(function (item) {
+        if (item.y == 750) {
+            item.y -= 800;
+        }
+        item.y += playGame.speed;
+        item.style.top = item.y + "px";
+    });
+ }
+
+ function endGame(){
+    player.start = false;
+    theme.pause();
+
+
+ }
+//make animation to look enemy car moving
+function enemy(car) {
+    var enemycar = document.querySelectorAll(".enemyCar");
+    enemycar.forEach(function (item) {
+        if(iscrash(car, item)){
+            console.log("hello");
+            document.getElementById("car").setAttribute("id", "blast")
+            car_crash.play();
+            endGame();
+            startScreen.classList.remove("hide");
+            startScreen.innerHTML = `<h2>Hey you did will but keep trying for better result</h2> <br> <p>Your final score is ${player.score + 1}</p> <br> <p><b>Click here to Restart The Game</b></p>`
+        }
+        if (item.y >= 800) {
+            item.y = -70;
+            item.style.left = Math.floor(Math.random() * 200) + "px";
+            item.style.backgroundColor = randomColor();
+        }
+        
+        //console.log(player.score);
+        if(player.score >= 3000){
+            item.y += 5;
+        item.style.top = item.y + "px";
+        }
+        else{
+            item.y += 2;
+        item.style.top = item.y + "px";
+        }
+    });
+    
+}
+//make a function to create random color for enemy car
+function randomColor() {
+    function c() {
+        // Math.floor(Math.random()*16777215).toString(16);
+        let hex = Math.floor(Math.random() * 256).toString(16);
+        return ("0" + String(hex)).substr(-2);
+    }
+    return "#" + c() + c() + c();
+}
+console.log(randomColor())
+
+function gamePlay(){
+    if(player.start){
+            moveLine();
+            enemy(car);
+
+        var carTop = document.querySelector("#car").offsetTop;
+    var carLeft = document.querySelector("#car").offsetLeft;
+    //console.log(carTop);
+    //console.log(carLeft);
+    if (forMoving.ArrowUp) {
+            race.play();
+        if (carTop > 150) {
+            document.querySelector("#car").style.top = carTop - playGame.speed + "px";
+        }
+    }
+    if (forMoving.ArrowDown) {
+        race.play();
+        if (carTop <= 735) {
+            document.querySelector("#car").style.top = carTop + playGame.speed + "px";
+        }
+    }
+    if (forMoving["ArrowLeft"]) {
+        race.play();
+        if (carLeft > -5) {
+            document.querySelector("#car").style.left = carLeft - playGame.speed + "px";
+        }
+    }
+    if (forMoving["ArrowRight"]) {
+       race.play();
+        if (carLeft <= 225) {
+            document.querySelector("#car").style.left = carLeft + playGame.speed + "px";
+        }
+    }
+        window.requestAnimationFrame(gamePlay);
+        player.score++
+        score.innerHTML = `Your Score: ${player.score}`;
+       
+    }
+
+}
+
+function start(){
+    startScreen.classList.add("hide");
+    playArea.innerHTML = "";
+    player.start = true;
+    player.score = 0;
+    theme.play();
+
+    window.requestAnimationFrame(gamePlay);
+
+    //create road lines
+for (var i = 0; i < 5; i++) {
+    var lines = document.createElement("div");
+    lines.setAttribute("class", "roadLines");
+    lines.y = i * 150;
+    lines.style.top = lines.y + "px";
+    playArea.appendChild(lines);
+}
+
+//make enemy car
+for (var y = 0; y < 3; y++) {
+    var enemyCar = document.createElement("div");
+    enemyCar.setAttribute("class", "enemyCar");
+    enemyCar.y = y * 300;
+    enemyCar.style.left = enemyCar.y + 1 + "px";
+    enemyCar.style.top = y * enemyCar.y  + "px";
+    playArea.appendChild(enemyCar);
+}
+
+    var car = document.createElement("div");
+    car.setAttribute("id", "car");
+    document.querySelector(".playArea").appendChild(car);
+    var details_of_playArea = playArea.getBoundingClientRect();
+}
+    } 
+
+
+    //making the functionallity for desktop,laptops
+    else{
+        var score = document.querySelector(".score");
+var playArea = document.querySelector(".playArea");
+var startScreen = document.querySelector(".startScreen");
+var roadlines = document.querySelector(".roadLines");
+var playGame = { speed: 5 , score : 0}
+var player = {}
+var car_crash = new Audio("../assets/sound_effect/car_crash.wav");
+var horn = new Audio("../assets/sound_effect/horn.wav");
+var race = new Audio("../assets/sound_effect/race.wav");
+var theme = new Audio("../assets/sound_effect/theme.mp3")
+
+//start the game 
+
+startScreen.addEventListener("click", start); 
+    
+
+
+
+//write a function to move the car
+let forMoving = {
+    ArrowUp: false, ArrowDown: false, ArrowRight: false, ArrowLeft: false
+}
+
+
+
+
+document.addEventListener("keydown", function (e) {
+    if(e.key === "h"){
+        horn.play();
+    }
+    e.preventDefault;
+    forMoving[e.key] = true;
+    //console.log(forMoving);
+    //carMove()
+})
+document.addEventListener("keyup", function (e) {
+    race.pause();
+    e.preventDefault;
+    forMoving[e.key] = false;
+    //console.log(forMoving);
+})
+
+
+//make a function to crash the cars 
+
+function iscrash(s,d){
+     sRect = s.getBoundingClientRect();
+     dRect = d.getBoundingClientRect();
+
+     return !((sRect.bottom < dRect.top) || (sRect.top > dRect.bottom) ||
+           (sRect.right < dRect.left) || (sRect.left > dRect.right))
+}
+
+    ///make animation to look road moving
+ function moveLine(){
+    var line = document.querySelectorAll(".roadLines");
+    line.forEach(function (item) {
+        if (item.y == 750) {
+            item.y -= 800;
+        }
+        item.y += playGame.speed;
+        item.style.top = item.y + "px";
+    });
+ }
+
+ function endGame(){
+    player.start = false;
+    theme.pause();
+
+
+ }
+//make animation to look enemy car moving
+function enemy(car) {
+    var enemycar = document.querySelectorAll(".enemyCar");
+    enemycar.forEach(function (item) {
+        if(iscrash(car, item)){
+            console.log("hello");
+            document.getElementById("car").setAttribute("id", "blast")
+            car_crash.play();
+            endGame();
+            startScreen.classList.remove("hide");
+            startScreen.innerHTML = `<h2>Hey you did will but keep trying for better result</h2> <br> <p>Your final score is ${player.score + 1}</p> <br> <p><b>Click here to Restart The Game</b></p>`
+        }
+        if (item.y >= 700) {
+            item.y = -300;
+            item.style.left = Math.floor(Math.random() * 400) + "px";
+            item.style.backgroundColor = randomColor();
+        }
+        
+        //console.log(player.score);
+        if(player.score >= 2000){
+            item.y += 5;
+        item.style.top = item.y + "px";
+        }
+        else{
+            item.y += 2;
+        item.style.top = item.y + "px";
+        }
+    });
+    
+}
+//make a function to create random color for enemy car
+function randomColor() {
+    function c() {
+        // Math.floor(Math.random()*16777215).toString(16);
+        let hex = Math.floor(Math.random() * 256).toString(16);
+        return ("0" + String(hex)).substr(-2);
+    }
+    return "#" + c() + c() + c();
+}
+console.log(randomColor())
+
+function gamePlay(){
+    if(player.start){
+            moveLine();
+            enemy(car);
+
+        var carTop = document.querySelector("#car").offsetTop;
+    var carLeft = document.querySelector("#car").offsetLeft;
+    //console.log(carTop);
+    //console.log(carLeft);
+    if (forMoving.ArrowUp) {
+            race.play();
+        if (carTop > 150) {
+            document.querySelector("#car").style.top = carTop - playGame.speed + "px";
+        }
+    }
+    if (forMoving.ArrowDown) {
+        race.play();
+        if (carTop <= 615) {
+            document.querySelector("#car").style.top = carTop + playGame.speed + "px";
+        }
+    }
+    if (forMoving["ArrowLeft"]) {
+        race.play();
+        if (carLeft > -5) {
+            document.querySelector("#car").style.left = carLeft - playGame.speed + "px";
+        }
+    }
+    if (forMoving["ArrowRight"]) {
+       race.play();
+        if (carLeft <= 400) {
+            document.querySelector("#car").style.left = carLeft + playGame.speed + "px";
+        }
+    }
+        window.requestAnimationFrame(gamePlay);
+        player.score++
+        score.innerHTML = `Your Score: ${player.score}`;
+       
+    }
+
+}
+
+function start(){
+    startScreen.classList.add("hide");
+    playArea.innerHTML = "";
+    player.start = true;
+    player.score = 0;
+    theme.play();
+
+    window.requestAnimationFrame(gamePlay);
+
+    //create road lines
+for (var i = 0; i < 5; i++) {
+    var lines = document.createElement("div");
+    lines.setAttribute("class", "roadLines");
+    lines.y = i * 150;
+    lines.style.top = lines.y + "px";
+    playArea.appendChild(lines);
+}
+
+//make enemy car
+for (var y = 0; y < 3; y++) {
+    var enemyCar = document.createElement("div");
+    enemyCar.setAttribute("class", "enemyCar");
+    enemyCar.y = y * 300;
+    enemyCar.style.left = y * enemyCar.y + 1 + "px";
+    enemyCar.style.top = enemyCar.y + "px";
+    playArea.appendChild(enemyCar);
+}
+
+    var car = document.createElement("div");
+    car.setAttribute("id", "car");
+    document.querySelector(".playArea").appendChild(car);
+    var details_of_playArea = playArea.getBoundingClientRect();
+}
+    }
+  }
+  
+  var x = window.matchMedia("(max-width: 700px)")
+  myFunction(x) 
+  x.addListener(myFunction) 
+
+
+
diff --git a/Car_games/code/favicon.ico b/Car_games/code/favicon.ico
new file mode 100644
index 00000000..780c760c
Binary files /dev/null and b/Car_games/code/favicon.ico differ
diff --git a/Car_games/code/index.html b/Car_games/code/index.html
new file mode 100644
index 00000000..cc1f864c
--- /dev/null
+++ b/Car_games/code/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" content="#00b2a9">
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">
+    <title>Car Game</title>
+</head>
+
+<body>
+    <div class="score"></div>
+    <div class="playArea"></div>
+    <div class="startScreen">
+        <h2>Hello guys Welcome to the word of racing</h2>
+        <p>As long as you play your score will increasing but if you hit any enemy car you will loos!!</p>
+        <h3><b>Click here to start the game</b></h3>
+    </div>
+    <!-- <div class="for_ph">
+        <p style="font-size: 20px; color: #00B2A9;">Hello guys Tablet and mobile version will coming soon.</p>
+    </div> -->
+    <div class="buttons">
+        <div class="up_btn">
+            <h1 style="transform: rotate(-45deg);"><i class='fas fa-angle-double-up'></i></h1>
+            
+        </div>
+        <div class="down_btn">
+            <h1 style="transform: rotate(-140deg);"><i class='fas fa-angle-double-down'></i></h1>
+            
+        </div>
+        <div class="left_btn">
+            <h1 style="transform: rotate(-40deg);"><i class='fas fa-angle-double-left'></i></h1>
+            
+        </div>
+        <div class="right_btn">
+            <h1 style="transform: rotate(40deg);"><i class='fas fa-angle-double-right'></i></h1>
+            
+        </div>
+    </div>
+
+
+
+
+
+
+    <script src="brain.js"></script>
+    <script src="https://kit.fontawesome.com/bc4016480e.js" crossorigin="anonymous"></script>
+</body>
+
+</html>
diff --git a/Car_games/code/style.css b/Car_games/code/style.css
new file mode 100644
index 00000000..ec8270e9
--- /dev/null
+++ b/Car_games/code/style.css
@@ -0,0 +1,281 @@
+@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Averia+Libre:ital,wght@1,700&display=swap');
+
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+body{
+    background: url(../assets/images/bg1.jpg);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    width: 100vw;
+    overflow-x: hidden;
+}
+/*.for_ph{
+    display: none;
+}*/
+
+.score{
+    width: 300px;
+    height: 200px;
+    position: absolute;
+    top: 50px;
+    left: 70px;
+    background: linear-gradient(120deg, #f5de50, #ffffff);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 2;
+    font-size: 25px;
+    border-radius: 20px;
+    box-shadow: 2px 2px 5px 3px #f5de50,
+                -4px -4px 5px 3px #ffffff;
+                font-family: 'Averia Libre', cursive;
+}
+.playArea{
+    width: 500px;
+    height: 100vh;
+    background: linear-gradient(120deg, #00B2A9, #ffffff);
+    position: relative;
+    margin: auto;
+    overflow: hidden;
+    border-left: 10px dashed gray;
+    border-right: 10px dashed gray;
+
+}
+.playArea .roadLines{
+    width: 10px;
+    height: 80px;
+    background: white;
+    position: absolute;
+    left: 245px;
+    margin: auto;
+}
+.playArea .enemyCar{
+    width: 70px;
+    height: 100px;
+    top: 200px;
+    left: 100px;
+    background-image: url(../assets/images/enemycar.png);
+    background-color: blue;
+    background-repeat: no-repeat;
+    background-size: 85px 110px;
+    border-radius: 20px;
+    background-position: center;
+    position: absolute;
+    outline: none;
+    border: none;
+}
+.playArea #car{
+    width: 80px;
+    height: 100px;
+    top: 600px;
+    left: 40px;
+    background-image: url(../assets/images//my_car.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-position: center;
+    position: absolute;
+    z-index: 5;
+    outline: none;
+    border: none;
+}
+#blast{
+    width: 80px;
+    height: 100px;
+    top: 600px;
+    left: 40px;
+    background-image: url(../assets/images/blast.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-position: center;
+    position: absolute;
+    z-index: 5;
+    outline: none;
+    border: none;
+}
+.startScreen{
+    width: 550px;
+    height: 150px;
+    background: linear-gradient(130deg, #a02021, #ffffff);
+    box-shadow: 4px 4px 5px 3px #f5de50,
+                -4px -4px 5px 3px #ffffff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius:20px ;
+    position: absolute;
+    top: 35%;
+    left: 32%; 
+    font-size: 12px;
+    font-family: 'Averia Libre', cursive;
+}
+.hide{
+    display: none;
+}
+.buttons{
+    display: none;
+}
+
+/* --------------------for responsive------------------- */
+@media(max-width: 900px){
+    /*.for_ph{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100vh;
+        position: absolute;
+        top: 0;
+        z-index: 10000000000;
+        background: linear-gradient(120deg, #f57d00, #ffffff);
+        
+
+    }*/
+    /*.startScreen{
+        display: none;
+    }
+    .playArea{
+        display: none;
+    }*/
+    .score{
+        width: 150px;
+        height: 100px;
+        top: 20px;
+        left: 20px;
+        background: linear-gradient(120deg, #f5df5054, #ffffff);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 2;
+        font-size: 15px;
+    }
+    .playArea{
+        width: 300px;
+        height: 100vh;
+        background: linear-gradient(120deg, #00B2A9, #ffffff);
+    }
+    .startScreen{
+        width: 350px;
+        height: 100px;
+        background: linear-gradient(130deg, #a02021, #ffffff);
+        box-shadow: 4px 4px 5px 3px #f5de50,
+                    -4px -4px 5px 3px #ffffff;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        border-radius:20px ;
+        position: absolute;
+        top: 50%;
+        left: 20px; 
+        font-size: 8.50px;
+        transform: translate(-50% -50%);
+        font-family: 'Averia Libre', cursive;
+    }
+    .playArea .roadLines{
+        width: 10px;
+        height: 80px;
+        background: white;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%)
+    }
+    .playArea .enemyCar{
+    width: 50px;
+    height: 70px;
+    top: 200px;
+    background-size: 55px 80px;
+    border-radius: 20px;
+}
+.playArea #car{
+    width: 50px;
+    height: 70px;
+    top: 600px;
+    left: 40px;
+    background-image: url(../assets/images/my_car.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-position: center;
+    position: absolute;
+    z-index: 5;
+    outline: none;
+    border: none;
+}
+.hide{
+    display: none;
+}
+
+.buttons{
+    width: 200px;
+    height: 200px;
+    position: absolute;
+    bottom: 50px;
+    right: 50px;
+    display: flex;
+    flex-wrap: wrap;
+    border-radius: 100%;
+    transform: rotate(45deg);
+    outline: none;
+    border: 2px solid white;
+}
+.buttons .up_btn{
+    width: 50%;
+    height: 50%;
+    background: rgba(255, 255, 255, 0.158);
+    border-top-left-radius:100% ;
+    border: 2px solid white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.buttons .up_btn:hover{
+    border: 2px solid black;
+    box-shadow: 2px 2px 5px 3px rgba(0,0,0,0.5);
+}
+.buttons .down_btn{
+    width: 50%;
+    height: 50%;
+    background: rgba(255, 255, 255, 0.158);
+    border-top-right-radius:100% ;
+    border: 2px solid white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.buttons .down_btn:hover{
+    border: 2px solid black;
+    box-shadow: 2px 2px 5px 3px rgba(0,0,0,0.5);
+}
+.buttons .left_btn{
+    width: 50%;
+    height: 50%;
+    background: rgba(255, 255, 255, 0.158);
+    border-bottom-left-radius:100% ;
+    border: 2px solid white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.buttons .left_btn:hover{
+    border: 2px solid black;
+    box-shadow: 2px 2px 5px 3px rgba(0,0,0,0.5);
+}
+.buttons .right_btn{
+    width: 50%;
+    height: 50%;
+    background: rgba(255, 255, 255, 0.158);
+    border-bottom-right-radius:100% ;
+    border: 2px solid white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.buttons .right_btn:hover{
+    border: 2px solid black;
+    box-shadow: 2px 2px 5px 3px rgba(0,0,0,0.5);
+}
+}