body {
  margin: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
  font-size: 1.4em; }

h1 {
  font-size: 2.0em; }

h2 {
  font-size: 1.6em; }

.vertical-flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center; }

.horizontal-flex {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center; }

.toplevel-container {
  position: relative; }
  .toplevel-container .backdrop {
    position: fixed;
    width: 100dvw;
    height: 100dvh;
    z-index: 99;
    transition: opacity 300ms ease-out, visibility 300ms;
    visibility: hidden;
    opacity: 0;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    background: #20204099; }
  .toplevel-container .backdrop.show {
    opacity: 1;
    visibility: visible; }

.contents {
  position: relative;
  background: linear-gradient(#2fbdfd, #0078e6, #083b7c, #001025);
  min-height: 50vh;
  padding: 0px 20px;
  display: flex;
  flex-direction: column;
  align-items: center; }
  .contents > .content-area {
    position: relative;
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    z-index: 1; }

.wrap-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around; }

.center {
  align-self: center; }

.content-group {
  margin: 20px 0; }
  .content-group > .content {
    display: flex;
    flex-direction: column;
    align-items: start;
    font-weight: bold;
    padding: 0px 8px; }
    .content-group > .content > section {
      margin-top: 20px; }
    .content-group > .content > section:first-child {
      margin-top: 0; }

.content-group.direct {
  color: #EEEEEE; }
  .content-group.direct > h1 {
    text-align: center;
    text-shadow: black 0px 0px 10px;
    font-size: 2.2em;
    word-break: keep-all; }
  .content-group.direct > .content {
    display: flex;
    flex-direction: column; }
    .content-group.direct > .content > .text {
      text-shadow: black 0px 0px 8px; }

.content-group.card {
  position: relative;
  background: #d2d2f3A1;
  color: #101057;
  border-radius: 24px;
  padding: 24px 40px;
  box-shadow: inset 0px 0px 12px 2px #FFFFFF, 0px 0px 8px #d2d2f3A1; }
  .content-group.card > h1 {
    text-align: center;
    margin-block: 0.5em;
    word-break: keep-all;
    color: #0400a5;
    text-shadow: white 0px 0px 10px; }
  .content-group.card > .content > .text {
    text-shadow: white 0px 0px 4px; }
    .content-group.card > .content > .text em {
      color: #0400a5;
      font-style: normal; }
    .content-group.card > .content > .text .small {
      font-size: 0.8em; }

.button {
  box-sizing: content-box;
  padding: 0.6em 2em;
  text-decoration: none;
  font-size: 1.1em;
  border-radius: 8px;
  background: rgba(5, 0, 216, 0.8);
  color: #EEEEEE;
  min-width: 100px;
  box-shadow: inset 0 0 8px #030072, 0 0 6px #0400a5;
  text-align: center;
  transition: 300ms;
  margin: 10px 20px; }

.button:hover {
  background: rgba(68, 63, 255, 0.8);
  box-shadow: inset 0 0 4px #120cff, 0 0 12px #0400a5; }

.bubble {
  position: relative; }
  .bubble > * {
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.bubble::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 20px 4px white;
  border-radius: 50%; }

table.calender {
  width: 100%;
  height: 100%;
  border-spacing: 6px; }
  table.calender caption {
    font-size: 1.6em;
    color: #0400a5;
    font-weight: bold;
    text-shadow: white 0px 0px 10px; }
  table.calender thead {
    font-size: 1.2em;
    font-weight: bold;
    text-align: center; }
  table.calender td {
    position: relative;
    box-shadow: inset 0 0 4px #FFFFFF44;
    background-color: #FFFFFF30;
    border-radius: 15px;
    height: 100%; }
  table.calender td.has-event {
    box-shadow: inset 0 0 4px #FFFFFF66;
    background-color: #FFFFFF50;
    transition: all 300ms; }
  table.calender td.has-event:hover {
    box-shadow: inset 0 0 4px #FFFFFF94, 0 0 4px #FFFFFF70;
    background-color: #FFFFFF70; }
  table.calender tr {
    border-bottom: solid 1px black; }
  table.calender .day-cell {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px; }
    table.calender .day-cell .day {
      font-size: 1.3em;
      align-self: self-start; }
    table.calender .day-cell .event {
      padding-top: 10px;
      font-size: 0.8em;
      flex-grow: 1;
      text-align: center; }

.pixel-outlines {
  text-shadow: 2px 0px black, -2px 0px black, 0px 2px black, 0px -2px black; }

.show-tooltip > .tooltip {
  visibility: collapse;
  opacity: 0;
  position: absolute;
  top: 105%;
  left: 50%;
  transform: translateX(-50%);
  transition: 300ms;
  width: 250px;
  max-width: 25vw;
  background-color: black;
  color: #EEEEEE;
  padding: 12px;
  border-radius: 15px;
  font-size: 0.8em;
  z-index: 10; }
  .show-tooltip > .tooltip > header {
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: underline; }
  .show-tooltip > .tooltip > span {
    font-size: 0.85em; }

.show-tooltip:hover > .tooltip {
  visibility: visible;
  opacity: 1;
  box-shadow: 0 0 8px black; }