:root {
  color-scheme: light dark;

  --background1-dark: rgb(17, 17, 17);
  --background2-dark: rgb(22, 22, 22);
  --heading1-dark: rgb(214, 214, 214);

  --background1-light: rgb(235, 235, 235);
  --background2-light: rgb(226, 226, 226);
  --heading1-light: rgb(10, 10, 10);

  --box-shadow-light: rgb(211, 211, 211);
  --box-shadow-dark: rgb(3, 3, 3);
}

* {
  transition: .4s;
  -webkit-transition: .4s;
}

h1 {
  color: light-dark(var(--heading1-light), var(--heading1-dark));
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
  background-color: light-dark(var(--background1-light), var(--background1-dark));
  margin: 0;
}

.header {
  width: 100%;
  background-color: light-dark(var(--background2-light), var(--background2-dark));
  height: 100px;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 60px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(37, 37, 37);
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: light-dark(#e9ebff, rgb(202, 202, 202));
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: rgb(72, 84, 255);
}

input:focus + .slider {
  box-shadow: 0 0 1px light-dark(var(--box-shadow-light), var(--box-shadow-dark));
}

input:checked + .slider:before {
  -webkit-transform: translateY(-26px);
  -ms-transform: translateY(-26px);
  transform: translateY(-26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

#theme-switch-navbar {
  float: right;
}