body {
  background-color: #ffffff;
  font-family: Georgia, serif;
  max-width: 500px;
  margin: 0 auto;
  min-height: 90vh;
  max-height: 100vh;
  color: #abcdef;
  text-align: center;
}



a:link {color: #88d3d3dd;}
a:visited {color: #88d3d3dd;}
a:hover {color: #99e4e4cc;}
a:active {color: #99e4e4cc;}


.BlinkSection {
  animation: BlinkEffect 2s linear infinite;
}

@keyframes BlinkEffect {
  0% {
    color: #9999ff77;
  }
  100% {
    color: #9999ff;
  }
}


.tablecenter {
  margin-left: auto;
  margin-right: auto;
}

#table1, th, td {
  border: 0px solid;
}

#table2 {
  border: 1px solid;
  border-radius: 10px;
  text-align: left;
}

.rowhover:hover {background-color: #f8f8f8;}

.font_headline {color: #ff4488aa;}
.font_headings {color: #ff448899;}
.font_items {font-weight: bold; color: #a6c8ff;}
.font_items_minor {font-weight: normal;color: #8aacff;}
.font_notes {color: #9999ff;}


sup {
    vertical-align: super;
    font-size: smaller;
} 





.bubbles {
  position: relative;
  display: flex;
}

.bubbles span {
  position: absolute;
  align-content: center;
  width: 30px;
  height: 30px;
  background: #ffffff;
  box-shadow: 0 0 0 2px #55ccee55,
              0 0 0 3px #66ddff22;
  margin: 0 0px;
  border-radius: 50%;
  animation-duration: calc(20s);
}


.bubbles span:nth-child(1) {
  animation: animateFLY 16s linear infinite;
  left:1%
}

.bubbles span:nth-child(2) {
  animation: animateFLY 12s linear infinite;
  left:3%
}

.bubbles span:nth-child(3) {
  animation: animateFLY 10s linear infinite;
  left:5%
}

.bubbles span:nth-child(4) {
  animation: animateFLY 14s linear infinite;
  left:7%
}

.bubbles span:nth-child(5) {
  animation: animateFLY 15s linear infinite;
  left:86%
}

.bubbles span:nth-child(6) {
  animation: animateFLY 17s linear infinite;
  left:88%
}

.bubbles span:nth-child(7) {
  animation: animateFLY 13s linear infinite;
  left:90%
}

.bubbles span:nth-child(8) {
  animation: animateFLY 19s linear infinite;
  left:92%
}



@keyframes animateFLY {
  0% {
    transform: translateY(90vh) scale(0);
  }
  100% {
    transform: translateY(0vh) scale(0.7);
  }
}












@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
    animation-duration: 0.5s;
}


@keyframes pageMovingAway {
  from {
    transform: translateY(0%);
  }
  
 to {
    transform: translateY(-100%);
  }
}


@keyframes pageMovingIn {
  from {
    transform: translateX(-100%);
  }
  
 to {
    transform: translateX(0%);
  }
}




::view-transition-old(root){
  animation:0.6s ease-in both pageMovingAway;
}

::view-transition-new(root){
  animation:1.5s ease-in both pageMovingIn;
}




