body{
    transition: 1.5s;
}
.night-toggle {
        position: absolute;
    top: 10px;
    margin-left: 5px;
    
}
.night-toggle:hover{
  cursor: pointer;
}
.moon {
    background-color: transparent;
    box-shadow: -5px 1px 0 2px #ffffff;
    border-radius: 50%;
    width: 13px;
    height: 13px;
    margin-left: 8px;
    margin-top: 0px;
    transition: 2s;
}

.sun {
   background-color: white;
    box-shadow: 0px 0px 0 0px #ffffff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    margin-top: 0px;
    transition: 2s;
}
.moon:before{background-color: white;
    box-shadow: 0px 0px 0 0px #ffffff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    margin-top: 0px;
    transition: 2s;}

@media only(min-width:320px) and (max-width:768px){
    
   .moon {
    display:none;
    
}

.sun {
    display:none;
}
 .night-toggle {
    display:none;
}
}
/* ----- 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;
}