body, html {
  margin: 0;
  padding: 0;
  color: #333;
}

p {
  margin: 10px 0 0;
}

h3 {
  text-align: center;
  margin: 0 0 20px;
}

html {
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #D2D9E9;
  transition: background-color ease-in-out .3s;
}
body.night {
  background: #303339;
}

.wrapper {
  width: 311px;
  margin: 20px;
  padding: 20px;
}

.center {
  text-align: center;
}

.toggle {
  display: flex;
  width: 311px;
  height: 132px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 100px;
  background: #3572AF;
  box-shadow: 4px 6px 4px 0 rgba(0, 0, 0, 0.50) inset, 4px 4px 4px 0 #FFF;
  transition: background-color ease-in-out .3s;
  position: relative;
  overflow: hidden;
  cursor: pointer;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.toggle.night {
  background: #1B1E2A;
}

.toggle * {
  transition: all ease-in-out .3s;
  position: absolute;
  pointer-events: none;
}

.toggle .stars {
  z-index: 10;
  top: -31px;
  left: 39px;
  opacity: 0;
}
.toggle.night .stars {
  top: 29px;
  opacity: 1;
}

.toggle .clouds-white {
  z-index: 90;
  top: 32px;
  left: 22px;
  opacity: 1;
}
.toggle.night .clouds-white {
  top: 142px;
  opacity: 0;
}

.toggle .clouds-blue {
  z-index: 80;
  top: 4px;
  left: 12px;
  opacity: 1;
}
.toggle.night .clouds-blue {
  top: 114px;
  opacity: 0;
}

.toggle .moon {
  z-index: 100;
  top: 18px;
  left: 22px;
  opacity: 0;
}
.toggle.night .moon {
  opacity: 1;
  left: 195px;
}

.toggle .sun {
  z-index: 110;
  top: 18px;
  left: 22px;
  opacity: 1;
}
.toggle.night .sun {
  opacity: 0;
  left: 195px;
}

.toggle .ray1 {
  z-index: 50;
  width: 163px;
  height: 163px;
  flex-shrink: 0;
  border-radius: 163px;
  background: rgba(255, 255, 255, 0.10);
  left: -9px;
  top: -12px;
}
.toggle.night .ray1 {
  left: 171px;
}

.toggle .ray2 {
  z-index: 40;
  width: 237px;
  height: 237px;
  flex-shrink: 0;
  border-radius: 237px;
  background: rgba(255, 255, 255, 0.10);
  left: -46px;
  top: -49px;
}
.toggle.night .ray2 {
  left: 134px;
}

.toggle .ray3 {
  z-index: 30;
  width: 319px;
  height: 319px;
  flex-shrink: 0;
  border-radius: 319px;
  background: rgba(255, 255, 255, 0.10);
  left: -87px;
  top: -90px;
}
.toggle.night .ray3 {
  left: 93px;
}

.toggle .ray4 {
  z-index: 20;
  width: 391px;
  height: 391px;
  flex-shrink: 0;
  border-radius: 391px;
  background: rgba(255, 255, 255, 0.10);
  left: -123px;
  top: -126px;
}
.toggle.night .ray4 {
  left: 57px;
}