body{
background:#0f172a;
color:white;
font-family:Arial;
text-align:center;
}

.container{
width:350px;
margin:auto;
margin-top:60px;
}

.card{
background:#1e293b;
padding:20px;
margin:20px;
border-radius:12px;
}

input{
display:block;
margin:10px auto;
padding:10px;
width:200px;
}

button{
padding:10px 20px;
cursor:pointer;
}

.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

.switch input {display:none;}

.slider {
position: absolute;
cursor: pointer;
background-color: #ccc;
transition: .4s;
top:0;
left:0;
right:0;
bottom:0;
border-radius:34px;
}

.slider:before {
position:absolute;
content:"";
height:26px;
width:26px;
left:4px;
bottom:4px;
background:white;
transition:.4s;
border-radius:50%;
}

input:checked + .slider {
background-color:#22c55e;
}

input:checked + .slider:before {
transform: translateX(26px);
}