body {
transition: 1.5s;
}
.night-toggle {
      width: 23px;
    height: 23px;
    right: 140px;
    top: 8px;
    position: absolute;
}
.night-toggle:hover{
  cursor: pointer;
}
.moon {
     position: relative;
    background-color: transparent;
    box-shadow: -6px 1px 0 3px #cccccc;
    border-left: 3px solid #27476D;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    /* margin-left: 8px; */
    margin-top: 0px;
    /*transition: 0.01s;*/
}
.sun {
  background-color: #fdd462;
  box-shadow: 2px 0px 0px 1px #D19C29;
  border-radius:50%;
  width: 22px;
  height: 22px;
  /*transition: 0.01s;*/
}

/* ----- optional ----- */
.break {
  flex-basis: 100%;
  height: 0;
}
.opt {
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  font-family: sans-serif;
  margin-top:5%;
  text-align:center;
}