body {
  background: #ffffff;
  font-family: Georgia, serif;
  max-width: 500px;
  margin: 0 auto;
  min-height: 90vh;
  max-height: 100vh;
  font-weight: bold;
  color: #abcdef;
  text-align: center;

}




a:link {color: #88d3d3dd;}
a:visited {color: #88d3d3dd;}
a:hover {color: #99e4e4cc;}
a:active {color: #99e4e4cc;}



.BlinkSection {
  animation: BlinkEffect 1.5s linear infinite;
}

@keyframes BlinkEffect {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}





.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;
} 








.buttonborder {
   font-size:large;
   display:inline;
   padding: 3px;
   border-radius: 10px;
   color:#ffaaccdd;
   border: 1px solid; 
}

.buttonborder:hover {
   color:#ffaaccaa;
   border: 2.5px solid;
}






.bubbles {
  position: relative;
  display: flex;
}

.bubbles span {
  position: absolute;
  align-content: center;
  width: 30px;
  height: 30px;
  box-shadow: 0 0 0 2px #55ccee55,
              0 0 0 3px #66ddff22;
  margin: 0 0px;
  border-radius: 50%;
}


.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%
 }


.bubbles span:nth-child(9) {
  animation: animateCO 550s linear;
  animation-fill-mode: forwards;
  left:40%;
}

.bubbles span:nth-child(10) {
  animation: animateCO 600s linear;
  animation-fill-mode: forwards;
  left:53%
}

.bubbles span:nth-child(11) {
  animation: animateIKKI 350s linear;
  animation-fill-mode: forwards;
  left:22%
}

.bubbles span:nth-child(12) {
  animation: animateIKKI 400s linear;
  animation-fill-mode: forwards;
  left:38%
}

.bubbles span:nth-child(13) {
  animation: animateIKKI 450s linear;
  animation-fill-mode: forwards;
  left:54%
}

.bubbles span:nth-child(14) {
  animation: animateIKKI 500s linear;
  animation-fill-mode: forwards;
  left:70%
}





@keyframes animateCO {
  0% {
    transform: translateY(75vh) scale(0);
    background: #ffffff;
    box-shadow: 0 0 0 3px #7777dd00;
  }
  0.8% {
    transform: translateY(33vh) scale(2.0);
    background: #ffffff;
    box-shadow: 0 0 0 3px #8888ee33;
  }
  1% {
    transform: translateY(35vh) scale(2.0);
    background: #7777dd66;
  }
  100% {
    transform: translateY(35vh) scale(2.0);
    background: #7777dd66;
    box-shadow: 0 0 0 3px #8888ee33;

  }
}


@keyframes animateIKKI {
  0% {
    transform: translateY(65vh) scale(0);
    background: #ffffff;
    box-shadow: 0 0 0 3px #ff449900;
  }
  0.8% {
    transform: translateY(15vh) scale(2.4);
    background: #ffffff;
    box-shadow: 0 0 0 3px #ff449933;
  }
  1% {
    transform: translateY(25vh) scale(2.4);
    background: #ff449982;
  }
  100% {
    transform: translateY(25vh) scale(2.4);
    background: #ff449982;
    box-shadow: 0 0 0 3px #ff449933;
  }
}



@keyframes animateFLY {
  0% {
    transform: translateY(90vh) scale(0);
    background: #ffffff;
  }
  100% {
    transform: translateY(0vh) scale(0.7);
    background: #ffffff;
  }
}



@view-transition {
  navigation: auto;
}




::view-transition-group(root) {
    animation-duration: 0.5s;
}


@keyframes pageMovingAway {
  from {
    transform: translateX(0%);
  }
  
 to {
    transform: translateX(-100%);
  }
}


@keyframes pageMovingIn {
  from {
    transform: translateY(-100%);
  }
  
 to {
    transform: translateY(0%);
  }
}




::view-transition-old(root){
  animation:0.5s ease-in both pageMovingAway;
}

::view-transition-new(root){
  animation:1.5s ease-in both pageMovingIn;
}