h1 {text-align: center;}
p {text-align: center;}

header {
   text-align: center;
   position: absolute;
   left: 50%;
   transform: translate(-50%, -50%);
   margin-top: 6%;}

body {
   background-image: url('https://spacepatrollyle.com/bg-dark.svg');
   background-repeat: no-repeat;
   background-size: cover;
   background-attachment: fixed;
   background-color: transparent;}

.dark-mode {
   background-image: url('https://spacepatrollyle.com/bg.svg');
   background-repeat: no-repeat;
   background-size: cover;
   background-attachment: fixed;
   background-color: transparent;}

.dark-checkbox {
   font-size: 17px;
   position: relative;
   display: inline-block;
   width: 3.5em;
   height: 2em;}

.dark-checkbox input {
   opacity: 0;
   width: 0;
   height: 0;}

.slider {
   position: absolute;
   cursor: pointer;
   inset: 0;
   border: 2px solid black;
   border-radius: 50px;
   transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);}

.slider:before {
   position: absolute;
   content: "";
   height: 1.4em;
   width: 1.4em;
   left: 0.2em;
   bottom: 0.2em;
   background-color: #1F1F2D;
   border-radius: inherit;
   transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);}

.dark-checkbox input:checked + .slider {
   border: 2px solid #5D5E76;}

.dark-checkbox input:checked + .slider:before {
   transform: translateX(1.5em);}