#preamble {
  display: flex;
  justify-content: center;
}

#preamble header {
    /* padding-top: 10vh; */
    /* margin: 2.5%; */
  /* display: block; */
  max-width: 920px;
  width: 100%;  
  /* position: fixed; */
  /* position: absolute; */  
  padding: 2.5% 0;
  margin: 0 0;
  display: flex;    
  align-items: center;
}

a[href*="//"]:after {
  font-weight: 300;
  font-size: .85em;
  content: "\2197"; /* top right arrow: ↗ */
}

#preamble nav {    
  /* text-align: center; */  
  line-height: 2.5em;
  font-size: 1.2em;
  padding: 1.3%;
  flex: 3;    
}

#preamble #toggle-dark label:before {content:"";}
#preamble #toggle-dark label:after {content:"";}

#preamble #toggle-dark {
  flex: 1;
}

#preamble #toggle-dark .checkbox {
  opacity: 0;
  position: absolute;  
}

#preamble #toggle-dark .label {
  background-color: #111;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px;
  border-radius: 50px;
  position: relative;
  height: 26px;
  width: 44px;
}

#preamble #toggle-dark .ball {
  background-color: #fff;
  border-radius: 50px;
  position: absolute;
  top: 7px;
  left: 4px;
  width: 20px;
  height: 20px;
  transition: transform 0.2s linear;
}

#preamble #toggle-dark .toggled {
  transform: translateX(20px);
}

#preamble #toggle-dark .checkbox:checked + .label .ball {
  transform: translateX(20px);
}

#preamble #toggle-dark .checkbox:checked + .label .toggled {
  transform: translateX(-2px);
}

#preamble #toggle-dark .sun {
  width: 1.35em;
  height: 1.35em;
}

#preamble #toggle-dark .moon {
  height: 1.35em;
  width: 1.35em;
}

@media screen and (max-width: 768px) {
    #preamble header {
        margin-left: 0;
        padding: 5vh 5vw 0 5vw;
    }
}



/* /\* @media (max-width: 600px) { *\/ */
/*     #preamble { */
/*         width: 80%; */
/*         padding: 0 0; */
/*         /\* margin: 100px auto; *\/ */
/*         margin-top: 100px; */
/*         display: block; */
/*     } */

/*     #preamble header { */
/*         display: block; */
/*     } */

/*     #preamble nav { */
/*         display: inline; */
/*         line-height: 2.5em; */
/*     } */
/* /\* } *\/ */