*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --body-bg: hsl(0, 0%, 0%);
}

html {
  color-scheme: dark light;
}

body {
  background: var(--body-bg);
  color: white;
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 0;
}

.wrapper {
  max-width: 50rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.site-title {
  background-image: url('Title.webp');
  background-size: contain;       
  background-repeat: no-repeat;    
  background-position: center;     
  
  width: 100%;      
  max-width: 700px;   
  aspect-ratio: 700 / 467;     
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  font-size: clamp(1.5rem, 5vw, 5rem);
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
  margin: 0 auto;
}

.section-title {
  font-size: 2.25rem;
}

section {
  padding-block: 5rem;
}

.wavy {
  /* mask created with 
  https://css-generators.com/wavy-shapes/ */
  
background: 
  linear-gradient(
    to right,
    #021b79,   /* deep sea navy */
    #032d91,   /* rich deep blue */
    #0452b5,   /* deeper ocean blue */
    #0575e6,   /* classic ocean blue */
    #168ee6,   /* mid-ocean blue */
    #29a6e6,   /* lighter blue */
    #27aae3,   /* fresh turquoise */
    #3ec6e0,   /* tropical turquoise */
    #8be9d3,   /* light aqua */
    #a2f5c8    /* pale aqua for shallows */
  );
  
	
  --mask:
    radial-gradient(78.1px at 50% 110px,#000 99%,#0000 101%) calc(50% - 100px) 0/200px 100%,
    radial-gradient(78.1px at 50% -60px,#0000 99%,#000 101%) 50% 50px/200px 100% repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

.BlueButton {
  background: linear-gradient(135deg, #cfe9ff 0%, #69b6ff 100%);
  color: #ffffff;
  border: none;
  padding: 0.6em 0.98em;
  font-size: 1rem;
  font-family: inherit;
  border-radius: 0.5em;
  cursor: pointer;
  color:black;
  transition:
    transform 0.15s ease-out,
    box-shadow 0.15s ease-out,
    background 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  margin-bottom:10px;
}

.BlueButton:hover {
  /* slightly lighter gradient on hover */
  background: linear-gradient(135deg, #dff0ff 0%, #8ac9ff 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
table.lobster-tableOLD {
	background-color:whitesmoke;
	color:black;
}

.lobster-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  color:black;
}

.lobster-table th,
.lobster-table td {
  border: 1px solid #333;
  padding: 4px;
  text-align: center;
  font-family: sans-serif;
  font-size: 14px;
}

.lobster-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.thick-border {
  border-left: 3px solid #000 !important;
}

.lobster-table td[contenteditable] {
  background-color:whitesmoke;
  outline: none;
}

#Dice3D {
	margin:10px auto 10px;
	width:100%;
	max-width:700px;
	border:3px solid black;
	padding:20px;
	border-radius:20px;
	background-color:black;
	height:280px;
}
#Dice3D td{
	vertical-align:top;
	text-align:center;
}

#cube .front {
  transform: 
    translateZ(100px);
}

#cube .back {
  transform: 
    rotateX(-180deg)
    translateZ(100px);
}

#cube .right {
  transform:
    rotateY(90deg)
    translateZ(100px);
}

#cube .left {
  transform:
    rotateY(-90deg)
    translateZ(100px);
}

#cube .top {
  transform:
    rotateX(90deg)
    translateZ(100px);
}

#cube .bottom {
  transform:
    rotateX(-90deg)
    translateZ(100px);
}

.container {
  width: 200px;
  height: 200px;
  position: relative;
  margin: -90px auto 120px;
  border: 0px solid red;
  perspective: 1000px;
  perspective-origin: 50% 100%;
}

#cube {
  width: 100%;
  height: 100%;
  top: 100px;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 6s;
}

#cube:hover {
  cursor: pointer;
}

#cube div {
  /*background: hsla(0, 85%, 50%, 0.8);*/
  background-color:#C5E5FE;
  display: block;
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  margin: 0 auto;  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 72px;
  text-align: center;
  padding: 50px 0;
}

.Emoji {
  position: absolute;
	 margin:0px;
}



.front .Emoji  {font-size:144px; top: -10px; left: 6px;}
.back .Emoji {font-size:100px;  top: -15px; left: 35px; }
.right .Emoji {font-size:72px;  top: 10px; left: 45px; }
.left .Emoji {font-size:72px;  top: 10px; left: 55px; }
.top .Emoji {font-size:72px;  top: 15px; left: 45px; }
.bottom .Emoji {font-size:72px;  top: 20px; left: 45px; }


.WeatherChange {
	display: block;
	position: absolute;
	color:black;
}

.front .WeatherChange {bottom:40px; right:70px;}
.back .WeatherChange {bottom:0px; right:70px;}
.right .WeatherChange {bottom:10px; right:75px;}
.left .WeatherChange {bottom:10px; right:75px;}
.top .WeatherChange {bottom:10px; right:75px;}
.bottom .WeatherChange {bottom:10px; right:75px;}


.crossed-out {
  position: relative;
}

.crossed-out::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: red;
  transform: rotate(-30deg);
  transform-origin: bottom left;
  pointer-events: none;
}

p.comment_invitation a{
	color:aqua;
}

#TableInstructions {
	font-size:14px;
	text-align:center;
}

.comment_title {
	background-color:red;
	background-image:none;
	background: linear-gradient(to bottom, red 0%, #FFFFFF 8%, red 16%, red 100%);
	border-top:2px black solid;
	border-left:2px black solid;
	border-right:2px black solid;
	border-top-left-radius:15px;
	border-top-right-radius:15px;
	font-weight:bold;
	color:white;
	margin-bottom:0px;
	box-shadow:3px 0px 1px 1px rgba(0,0,0,0.13);
	padding:5px;
	font-size:15px;
	font-family: 'Nunito Sans', sans-serif;
}
.comment_date {
	display:none;
}

.QuotationMarks {
	display:none;
}

.comment_body {
	color:navy;
	font-size:18px;
	padding:15px 10px 10px 30px;
	border-left:2px black solid;
	border-right:2px black solid;
	border-bottom:2px black solid;
	margin:0px;
	box-shadow:3px 3px 3px 1px rgba(0,0,0,0.26);
	background-color:#EEEEEE;
}


#PounterContainer {
  position: relative;
}

#Pointer {
  position: absolute;
  bottom: 0;
  left: 310px;
  cursor: move;
  font-size: 2rem;
  user-select: none;
  z-index:99;
}