*,
*::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;
  border:0px yellow solid;
}

.site-title {
  background-image: url('ChildrenTitle.png');
  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;
  border:0px aqua solid;

}


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

section {
  padding-block: 1rem;
}

.LocationInput {
	display:block;
	font-size:18px;
	margin:9px auto;
	width:420px;
}

.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);
  display:block;
  margin: 10px auto;
}

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

div#Instructions2 {
	display:none;
}

div.Clue {
    width:800px;
    height:1000px;
    margin:auto;
    border:0px black solid;
    border-radius:20px;
    padding:80px 140px 0px;
    position:relative;
    background-image: url('Frame1.svg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	page-break-after: always; /* For older browsers */
    break-after: page;        /* Modern standard */
    overflow:hidden;
}

div.Clue h2{
	font-size:36px;
	text-align:center;
	margin:10px auto 30px;
}

div.Clue h3{
	font-family: "Delius", cursive;
	font-weight: 400;
	font-style: normal;
	font-size:56px;
	text-align:center;
	margin-bottom:20px;
}
div.Clue h4{
	color:grey;
	font-size:14px;
	text-align:center;
	margin:0px auto 0px;
	width:300px;
}
div.Clue p{
	font-size:18px;
	margin:15px 60px;
}

div.pigpen-code {
	margin:20px;
}


.semaphore.space {
    background: none;
    width: 30px; /* space gap between words */
}
.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;
}
img.Logo {
	width:101px;
	height:106px;
	position:absolute;
	bottom:0px;
	right:0px;
}


@media print {
    #Instructions2, div.DontShowForPrinting {
        display: none !important;
    }
}