:root {
  --hanlySize: 9rem;                       /* size of hanly */
  --hanlyTop:  2rem;                        /* spacing of hanly from the top */
  --hanlyLeft: 2rem;                       /* 5.5rem spacing of hanly from the left */

  --auSize: calc(var(--hanlySize) * 1.4);  /* size of .au is relative to size of hanly */
  --auTop: calc(var(--hanlyTop) * 0.3);  /* spacing of .au from the top is relative to spacing of hanly */
  --auLeft: 0.3rem;

  --maxWidth: calc(var(--hanlyLeft) + var(--hanlySize) * 3.0 + var(--auLeft) + var(--auSize) * 2.0); /* help work out when to wrap */

  --mainTransition: 7.0s;                  /* the main animation transition key timing */
  --speedFactor: 1.0;                      /* normal is 1, use 3 or 5 to speedup. use 0.5 for half speed */
  --debugBorder: 0px solid black;        /* normal is 0px.  set to 1px when debugging. */
}
/* over-ride some settings when in portrait mode */
@media (orientation: portrait) {
  :root { 
    /*
    --auTop:  0.0rem;   
    --auLeft: 0.1rem;   
    */              
  }
}

.body-hanly {
  background-image: linear-gradient(90deg,black,darkblue);
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  max-width: var(--maxWidth);
  flex-direction: row;
}
.flex-container>* {
  flex: 1 1 calc(var(--hanlySize) * 3.0);
}
/* over-ride some settings when in portrait mode */
@media (orientation: portrait) {
  .flex-container { 
    flex-direction: column;
  }
  .flex-container>* {
    flex: 1 0 auto;
  }
}


.flex-overlap-my-items {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 10px;
  column-gap: 10px;
  position: relative;
  padding-top: calc(var(--auSize) * 1.1);  
}


.flex-overlap-my-items>* {
  border: var(--debugBorder);
}

.flex-item {
  position: absolute;
  border: var(--debugBorder);
}

.hanly-front,
.hanly-back {
  top: var(--hanlyTop);
  left: var(--hanlyLeft);
  font-family: "Trebuchet MS", Calibri, sans-serif;
  border: var(--debugBorder);
}

.hanly-front {
  color: white;
  font-size: var(--hanlySize);
  padding-left: 0.5px;
  /* transform: scale(102%); */
  animation-name: hanly-front-animation;
  animation-duration: calc(var(--mainTransition) / var(--speedFactor));
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes hanly-front-animation {
  0% {
  }
  100% {
    top: calc(var(--hanlyTop) / 1.01);
    font-size: calc(var(--hanlySize) * 1.02);
    text-shadow: -2px 1px 5px yellow;
    color: black;
  }
}

.hanly-back {
  color: darkslategrey;
  font-size: calc(var(--hanlySize) * 0.99);
  padding-left: 0px;
  text-emphasis: bold;
  text-shadow: 0 0 3px darkslategrey;
  animation-name: hanly-back-animation;
  animation-duration: calc(var(--mainTransition) / var(--speedFactor));
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes hanly-back-animation {
  0% {
  }
  100% {
    top: calc(var(--hanlyTop) / 1.01);
    font-size: calc(var(--hanlySize) * 1.02);
    text-shadow: -2px 1px 5px yellow;
    color: gold;
  }
}

.gold-front-layout,
.gold-back-layout {
  top: var(--auTop);
  /* we want a strong font with a round dot */
  font-family: "Aharoni", "Berlin Sans FB", sans-serif;
  border: var(--debugBorder);
}

.gold-back-layout {
  padding-left: calc(var(--auLeft) * 1.05);
  color: gold;
  font-size: calc(var(--auSize) * 1.0);
  text-shadow: 0 0 3px gold;
  text-emphasis: bold;
  animation-name: gold-back-layout-animation;
  animation-duration: calc((var(--mainTransition) - 2.0) / var(--speedFactor));
  animation-iteration-count: 2; /*infinite;*/
  animation-fill-mode: forwards;
}

@keyframes gold-back-layout-animation {
  0% {
    color: gold;
  }
  10% {
    color: white;
  }
  15% {
    color: gold;
  }
  55% {
    color: yellow;
  }
  100% {
    color: gold;
    text-shadow: 0 0 3px transparent;
  }
}

.gold-front-layout {
  padding-left: calc(var(--auLeft) * 1.02);
  font-size: var(--auSize);
  transform: scale(101%);
  border: var(--debugBorder);
}

.gold-front-dot {
  padding-left: calc(var(--auLeft) * 0.1);
  transform: scale(101%);
  color: gold;
  border: var(--debugBorder);
}

.gold-front-au {
  padding-left: calc(var(--auLeft) * 0.05);
  background-image: linear-gradient(
    15deg,
    white,
    gold,
    lightgoldenrodyellow,
    gold
  );

  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  border: var(--debugBorder);
}

.fade-out-au-back {
  padding-left: 0.1rem;

  animation-name: fade-out-au-back-animation;
  animation-duration: calc(2s / var(--speedFactor));
  animation-delay: calc(var(--mainTransition) / var(--speedFactor));
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  border: var(--debugBorder);
  border: var(--debugBorder);

}

@keyframes fade-out-au-back-animation {
  0% {
  }
  100% {
    background-clip: unset;
    -webkit-background-clip: unset;
    -moz-background-clip: unset;
    -webkit-text-fill-color: unset;
    -moz-text-fill-color: unset;

    background-image: none;
    background-color: transparent;
    color: transparent;
    text-shadow: none;
  }
}

.fade-out-dot-back {
  animation-name: fade-out-dot-back-animation;
  animation-duration: calc(2s / var(--speedFactor));
  animation-delay: calc( (var(--mainTransition) - 1.0s) / var(--speedFactor));
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  padding-left: calc(var(--auLeft) * 0.09);
  padding-top: calc(var(--auLeft) * 0.09);
}

@keyframes fade-out-dot-back-animation {
  0% {
  }
  100% {
    background-clip: unset;
    -webkit-background-clip: unset;
    -moz-background-clip: unset;
    -webkit-text-fill-color: unset;
    -moz-text-fill-color: unset;

    background-image: none;
    background-color: transparent;
    color: transparent;
    text-shadow: none;
  }
}

.fade-out-dot-front {
  animation-name: fade-out-dot-front-animation;
  animation-duration: calc(2s / var(--speedFactor));
  animation-delay: calc((var(--mainTransition) - 1.0s) / var(--speedFactor));
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  border: var(--debugBorder);
}

@keyframes fade-out-dot-front-animation {
  0% {
  }
  100% {
    background-clip: unset;
    -webkit-background-clip: unset;
    -moz-background-clip: unset;
    -webkit-text-fill-color: unset;
    -moz-text-fill-color: unset;

    background-image: none;
    background-color: transparent;
    color: transparent;
    text-shadow: none;
  }
}

.fade-to-element {
  top: var(--auTop);

  background-color: transparent;
  border: 6px solid transparent;
  border-radius: 5px;

  animation-name: fade-to-element-animation;
  animation-duration: calc(2s / var(--speedFactor));
  animation-delay: calc(var(--mainTransition) / var(--speedFactor));
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fade-to-element-animation {
  0% {
  }
  100% {
    border: 6px solid white;
    border-radius: 5px;
    text-shadow: none;
  }
}

.fade-in-element {
  top: var(--auTop);
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(var(--auSize) * 0.13); 

  color: transparent;
  background-image: none;
  background-color: transparent;

  animation-name: fade-in-element-animation;
  animation-duration: calc(2s / var(--speedFactor));
  animation-delay: calc(var(--mainTransition) / var(--speedFactor));
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  border: var(--debugBorder);
}

@keyframes fade-in-element-animation {
  0% {
  }
  100% {
    color: white;
  }
}

.fade-in-atomic-number {
  padding-left: calc(var(--auLeft) + 3.1rem);
  border: var(--debugBorder);
}

.fade-in-atomic-spacer {
  font-size: calc( var(--auSize) * 0.69 ); 
}

.fade-in-atomic-weight {
  padding-left: calc(var(--auLeft) + 6.7rem);
  border: var(--debugBorder);
}