/* CSS HERE */ 
/* Google fonts with css family */
@import url('https://fonts.googleapis.com/css2?family=:wght@&display=swap');
/* CSS */
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body {
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  font-family:Arial, sans-serif;
  background-color:#f5f5f5;
  color:#222;
  transition:
  background 0.6s ease, color 0.6s ease;
}
.container {
  text-align:center;
  padding:50px;
  transition:transform 0.5s ease;
}
.container h1 {
  font-size:42px;
  margin-bottom:15px;
}
.container p {
  font-size:18px;
  opacity:0.7;
  margin-bottom:40px;
}
.theme-toggle {
  width:110px;
  height:55px;
  margin:auto;
  border-radius:50px;
  background-color:#222;
  padding:5px;
  cursor:pointer;
  position:relative;
  transition:
    background 0.5s ease,
    box-shadow 0.5s ease;
  box-shadow:inset 0 3px 8px rgba(0,0,0,0.4), 0 8px 20px rgba(0,0,0,0.2);
}
.toggle-circle {
  width:45px;
  height:45px;
  border-radius:50%;
  background-color:#fff;
  position:absolute;
  top:5px;
  left:5px;
  display:flex;
  justify-content:center;
  align-items:center;
  transition:
    left 0.6s cubic-bezier(.68, -0.55, .27, 1.55),
    transform 0.6s ease;
  background:0.5s ease;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.sun,
.moon {
  position:absolute;
  font-size:24px;
  transition:
    opacity 0.3s ease,
    transform 0.5s ease;
}
.sun {
  opacity:1;
  transform:rotate(0) scale(1);
}
.moon {
  opacity:0;
  transform:rotate(-90deg) scale(0);
}
body.dark {
  background-color:#111827;
  color:white;
}
body.dark .theme-toggle {
  background-color:#6366f1;
  box-shadow:inset 0 3px 8px rgba(0,0,0,0.3),
    0 0 25px rgba(99, 102, 241, 0.5);
}
body.dark .toggle-circle {
  left:60px;
  background-color:#111827;
  transform:rotate(360deg);
}
  body.dark .sun {
    OPACITY:0;
    transform:rotate(90deg) scale(0);
}
body.dark .moon {
  opacity:1;
  transform:rotate(0deg) scale(1);
  color:#fff;
}
.theme-toggle:hover .toggle-circle {
transform:scale(1.08);
}
body.dark .theme-toggle .theme-toggle:hover .toggle-circle {
transform:rotate(360deg) scale(1.08);
}