html {
  background: url();
  background-color:#f00;
  background-repeat: no-repeat;
  background-size: cover;
  color:#fff;font-family:monospace;
}

h1{margin:0;padding:0;}
/*
main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width:100%;
  border: 3px solid #fff;
  background:rgba(0,0,0,.5);
}*/


.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap:16px;
}

.element {
  inset: 0px;
  width: 12rem;
  height: 5rem;
  max-width: 100vw;
  max-height: 100dvh;
}

p {
  background:rgba(0,0,0,.5);
  padding:8px;margin-left:4px;
  text-shadow: 2px 2px #000;
}
span{font-size:16px;}
a:hover{text-shadow: 2px 2px #fff;}
a,a:visited{color:#ff0;font-size:16px;background:#f00;}

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

.flex-container-row > div {
  text-align: center;
}

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

.flex-container-column > div {
  text-align: center;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: rgba(0,0,0,.5);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  margin-top:-24px;
  margin-left:-88px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

/*html{cursor: url(https://cur.cursors-4u.net/nature/nat-2/nat120.cur), auto !important;}*/