Making attractive CSS Dark mode switch. ~ CODING-GREED

Making attractive CSS Dark mode switch.

HTML:

<html>

<head>
<title>Dark Mode</title>
</head>
<body>
<div class="hide">
<div class="web">
<a href="https://coding-greed.blogspot.com/2020/05/making-attractive-css-dark-mode-switch.html">CODING - GREED</a><br /><tt>click here &uparrow; to visit the website</tt>
</div>
</div>
<div class="all">
<div class="outer">
<div class="button"> </div>
</div>
<div class="logo"></div>
<div class="switch" onclick="chgclr()"></div>
</div>
</body>

</html>

CSS:

body {
background-color: white;
}
.hide {
overflow: hidde;
padding: 10px;
overflow: hidden;
}
a {
text-decoration: none;
font-size: 2em;
font-family: Arial;
font-weight: bolder;
color: #f9340a;
}
.web {
width: 80%;
height: 60px;
background: #f4f0ef;
text-align: center;
border-radius: 10px;
padding-top: 20px;
margin-left: 10%;
margin-top: 5%;
position: relative;
color: #c8b2ad;
top: 90px;
transition-duration: 0.5s;
transition-timing-function: linear;
}
.all {
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
.outer {
width: 180px;
height: 180px;
border-radius: 180px;
background-color: #1197f0;
box-shadow: 0px 0px 10px gray;
z-index: 2;
}
.button {
width: 100px;
height: 100px;
border-radius: 100px;
background-color: #1197f0;
border: 5px solid red;
box-shadow: 0px 0px 10px red;
position: absolute;
top: 35px;
left: 35px;
}

.logo {
width: 40px;
height: 40px;
border-radius: 40px;
background: radial-gradient(transparent 0px 15px, white 15px 40px);
z-index: 2;
position: absolute;
top: 68px;
left: 69px;
opacity: 0.8;
}

.logo:before {
content: " ";
position: absolute;
width: 6px;
height: 25px;
border-radius: 10px;
background-color: white;
left: 17px;
top: -8px;
}
.switch {
width: 180px;
height: 180px;
border-radius: 180px;
background-color: transparent;
position: absolute;
top: 0px;
z-index: 3;
}

Java-Script:

alert("click on the button 5 times !");
var x = 0;
var y = 0;
function chgclr() {
var a = document.getElementsByClassName("button");
if (x == 0) {
a[0].style.borderColor = "green";
a[0].style.boxShadow = "0px 0px 10px green";
document.getElementsByTagName("body")[0].style.backgroundColor =
"#000000c9";
y++;
x++;
} else {
a[0].style.borderColor = "red";
a[0].style.boxShadow = "0px 0px 10px red";
document.getElementsByTagName("body")[0].style.backgroundColor = "white";
x--;
y++;
}
if (y == 5) {
var n = document.getElementsByClassName("web");
n[0].style.top = "0px";
}
}