body {
font-family: 'Lato', system-ui, sans-serif;
font-size: 1rem;
color: #222;
margin: 0;
padding: 0;
background-color:#FFF7F0;
}

#County_Names {
opacity: 0;
visibility: hidden;
transition: opacity 1s ease, visibility 1s ease;
}

#County_Names.visible {
opacity: 1;
visibility: visible;
}

.hidden { visibility: hidden;
}

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

.grad {
background: 
radial-gradient(circle, rgba(160, 200, 228, 1) 30%, rgba(70, 100, 150, 1) 100%),
linear-gradient(to bottom, #A0C8E4, #4A80B6); 
}

svg path:hover {
fill: #edbead;
opacity: 1; 
}

@media (hover: hover) and (pointer: fine) {
svg path:hover {
fill: #edbead;
opacity: 1; 
}
}

@media (pointer: coarse){
path.hover {
fill: #edbead;
opacity: 1; 
}
}

header{
text-align: center;
padding: 18px 20px;
margin-top: 0;
padding-top: 10px;
padding-bottom: 20px;
background-color: #497D96;
background-image: linear-gradient(10deg, rgba(86, 130, 155, 1) 15%, rgba(62, 99, 131, 1) 50%, rgba(118, 159, 191, 1) 100%);
}

h1 {
font-family: "Playfair Display", serif;
font-weight: 400;
font-style: normal;
font-size: 2.4rem;
color: #EBEAE8;
margin: 0;
padding: 0;
}

.subhead {
}

h2 {
font-family: "Playfair Display", serif;
text-align: center;
font-size: 1.3rem;
margin: 0;
padding: 0;
}

h3 {
color: #4b6987;
font-size: 1.2rem;
margin-top: 30px;
/*margin-bottom: 0;*/
text-align: center;
}

h4 {
margin:0;
font-size: 1.1rem;
color: #4b6987;
}

h2.intro  {
font-size: 1.5rem;
color: #6497b1;
}

.dark-blue{
color: #4b6987;
}

#content-container {
height: 100%;
min-height: 100%;
margin: 0 auto;
max-width: 700px;
}

#content-container:after {
content: "";
display: table;
clear: both;
}

#max-container {
height: 100%;
min-height: 100%;
margin: 0 auto;
}

#max-container:before {
content: "";
display: table;
  clear: both;
}

#max-container:after {
  clear: both;
}
#max-container:after {
clear: both;
*zoom: 1;
}

.quiz-info-box {
width: 100%;
max-width: 700px;
margin: auto;
}

.quiz-info-text {
 margin-top: 20px;
}

.quiz-info-text:first-child p{
margin-top: 10px;
margin-bottom: 10px;
}

.scorez {
display: flex;
gap: 30px;
align-items: baseline;
justify-content: center;
border-top: 2px solid #ddd;
padding-top: 15px;
padding-bottom: 20px;
}

.scorez p:first-child {
margin-bottom: 5px;
font-size: 1rem;
}

.simpl p {
margin-top: 0px;
}

.simpl {
white-space: nowrap;
margin-top:0;
margin-bottom:0;
}

.full-score{
margin-top: 0;
align-self: flex-end;
}

.scoreboard {
margin-top: 0;
align-self: flex-end;
}

.ifmust{
color:#222;
font-size: 0.9rem;
width: 80%;
text-align: center;
}

.show-btn-box {
background-color: #CCD9E1;
background:rgba(234, 227, 223, 0.8);
display: flex;
flex-direction: column;
align-items:center;
padding-bottom: 15px;
padding-top: 0;
border: 2px solid #ddd;
}

.btn-show{
padding: 6px 20px;
color: #536f7f;
background-color: #f6ded6;
border: 1px solid #ddd;
font-size: 1rem;
border-radius: 5px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}

.btn-show:hover{
color: #000;
background-color: #CCD9E1;
transition: all ease 0.3s
}

.btn-show.hover {
color: #000;
background-color: #CCD9E1;
transition: all ease 0.3s;
}

#prompt {
color: #529dc3;
padding-left: 25px;
padding-right: 25px;
margin-top: 10px;
margin-bottom: 10px;
transition: opacity 0.5s ease-out;
opacity: 1;
}

.round-btn-box {
display: flex;
flex-direction: column;
align-items:center;
padding-bottom: 15px;
padding-top: 10px;
}

.nice-colour{
 background-color:#6497b1;

}
.roundy {
pointer-events: auto;
border-radius: 50%;
background-color: #ED9B7E;
border: none;
color: #fff;
padding: 16px 12px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 25px;
margin-top: 18px;
transition: opacity 0.3s ease-out;  
}

.roundy.fade-out {
opacity: 0; 
}

.roundy.hover{
color: #4b6987;
background-color: #EAE2DF;
transition: all ease 0.3s; 
}

.roundy:hover {
color: #4b6987;
background-color:#EAE2DF;
transition: all ease 0.3s;
outline: none; 
box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); 
}

.roundy:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.whereis h2 {
font-family: "Quicksand", system-ui, sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
margin-top: 0;
margin-bottom: 0;
}

.whereis {
display:flex;
flex-direction:column;
align-items:center;
text-align: center;
margin-bottom: 0px;
overflow: auto;
box-sizing: border-box;
}

.main-quest {
color: #fff;
width: 100%;
height: 35px;
padding-top: 10px; 
margin-bottom: 6px;
}

.county-names{
color: #fff;
width: 55%;
height: 35px;
padding-top: 5px;
background: rgba(62, 99, 131, 0.5);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
border-radius: 5px;
}

.feedback{
height: 30px;
margin-top: 15px;
margin-bottom: 12px;
font-size: 1.2rem;
color:#CCD9E1;
font-weight: 400;
}

#buttonz {
display: flex;
}

.centre-txt {
text-align: center;
}

.btn-next, .btn-reset {
font-weight: 400;
background-color:#6497b1;
border: none;
color: white;
margin-bottom: 7px;
padding: 10px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1rem;
}

.btn-next{
 flex-grow: 1;
  margin-right: 10px;
}

.btn-reset {
  flex-grow: 1;
}

.btn-reset:hover {
color:#222;
background-color:#EDAD95;
transition: all ease 0.3s
}

#prompt.fade-out {
  opacity: 0;
}

.nextup {
color: #222;
background-color:#EDAD95;
text-transform: uppercase;
}

.tallies{
display:flex;
flex-direction: row;
gap: 5px;
margin-bottom: 10px;
}

.tallies p {
color:#4d647a;
flex-grow: 1;
font-size: 14px;
line-height: 1.3;
text-align: center;
margin: 0;
margin-top: 10px;
margin-right: 5px;
padding-bottom: 5px;
border: 1px solid #6F8FAF;
}

.tallies p:last-child {
  margin-right: 0;
}

#svg-outer {
position: relative; 
display: inline-block;
background: #6497b1;
height: auto; 
width: 100%; 
border: 10px solid #6497b1;
vertical-align: middle;
padding-bottom: 130%; 
box-sizing: border-box;
}

#svg-inner {
display: inline-block;
position: absolute; 
height: 100%; 
width: 100%; 
left: 0; 
top: 0;
}

#score-stats {
font-size: 16px;
width: 55%;
z-index: 10;
position:absolute; 
top: 10%;
left: 25%;
opacity: 0.9;
}

.game-over-alert  {
text-align: center;
color: #C2262F;
font-size: 28px;
padding-top: 20px;
color: #CC5500;
}

.go-again{
text-align: center;
font-size: 16px;
padding: 5px 5px;
margin-bottom: 10px;
}

.scorebr{
 text-align: center;
}

.bglight{
background-color: #ededed;
border: 1px solid #6D7B8D;
border-radius: 5%;
}

.scorenum {
font-size: 1.3em;
margin: auto;
width: 40px;
height: 32px;
border-radius: 50%;
color: #C2262F;
background-color:#fff;
font-weight: 700;
text-align: center;
padding-top: 6px;
margin-top: 10px;
margin-bottom: 0px;
border: 1px solid #C2262F;
}

.para-score {
margin-bottom: 0px;
text-align: center;
}

.centre-list { 
display: flex;
justify-content: center;
}

.centre-list ul { 
font-size: 0.9rem;
list-style: none;
display:block; 
text-align: left;
 padding: 2px;
}

.allover h2 {
font-size: 22px;
padding-top: 6px;
text-align: center;
color: #C2262F;
}

.map-footer {
font-size: 14px;
width: 100%;
text-align: left;
padding-top: 25px;
background-color: #434c57;
}

.footer-content {
background-color: #434c57;
margin-bottom: 45px;
padding: 15px 45px 15px 45px;
max-width: 1240px;
display: flex;
/*flex-direction: row;*/
align-items: flex-start;
gap: 60px;
justify-content: space-around;
}

.about {
max-width: 380px;
color:#98a2af;
line-height: 1.4;
text-align: justify;
padding: 0 15px 15px 15px;
}

.copy-rite {
  display: flex;
  justify-content: center;
  gap: 20px;
color: #98a2af;
font-size: 14px;
text-align: center;
margin-bottom: 0;
padding: 12px 20px 20px 20px;
background-color: #4c5662;
}

.form-inline { 
max-width:450px; 
font-weight:300;
display: flex;
gap: 10px;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
}

.inputs-style {
color: #d9e6ec;
padding: 6px;
font-weight:300;
font-size: 14px;
border-radius: 5px;
line-height: 16px;
background-color: transparent;
border:1px solid #6497b1;
box-sizing: border-box;
outline:0;
}

.inputs-style:focus { 
border: 1px solid #edbead; }

textarea {
width: 100%; 
/*overflow: hidden;*/
font-family: inherit;
height: 80px;
line-height: 80%;
resize:vertical;
}

[type="submit"] {
width:100%;
background:#54839e;
border-radius:5px;
border:0;
cursor:pointer;
color:#ccc;
font-size:14px;
padding-top:6px;
padding-bottom:6px;
transition: all 0.3s;
font-weight:400;
}

[type="submit"]:hover { 
  color:#000;
  background:#578eaa; 
}



/*-------------------------------------------------------------------*/

@media (min-width: 1230px) {

#content-container {
  margin: 0;
}

#max-container{
padding-right: 30px;
max-width: 1300px;
margin-left:0;

}

.quiz-info-box {
float: right;
width: 42%;
 }

.scorez > * {
flex: 1 1 33%;
box-sizing: border-box;
}

.scorez {
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
}

.simpl {
border-right: 2px solid #ddd;
}

.scoreboard {
padding-left: 20px;
padding-right: 20px;
}

.full-score {
text-align: center;
border-top: 2px solid #ddd;
padding-top: 15px;
margin-bottom: 0;
}

#score-stats {
top: 25%;
left: 25%;
 }
}

@media (max-width: 960px) {
 
h2 {text-align: center;}

.quiz-info-text, .scorez {
padding-left: 20px;
padding-right: 20px;
}
.county-names{
width: 50%;
}

.form-inline {
  width: 350px;
}
.form-inline input {
 width: 100%;
}
}
@media (max-width: 768px) {
  
#score-stats {
width: 65%;
top: 10%;
left: 20%;
 }

.footer-content {
/*width: 700px;*/
display: flex;
flex-direction: column;
gap: 20px;
align-items:center;
padding: 15px 80px;
}
}

@media (max-width: 540px) {

h1 {
  font-size: 2rem;
}

h2.intro  {
  font-size: 1.3rem;
}

.scorez {
flex-direction: column;
align-items: center;
gap: 10px;
}

.scoreboard {
  border-top: 2px solid #ddd;
}

.full-score {
  border-top: 2px solid #ddd;
}

.county-names{
width: 80%;
}

.simpl{
border-right: none;
padding: 0;
}

.simpl p:first-child{
 text-align: center;
}

.full-score, .scoreboard{
width: 85%;
margin: 0 auto;
text-align: center;
padding-top: 10px;
}

.footer-content {
padding: 0px 35px;
}
}

@media (max-width: 420px) {

#score-stats {
width: 80%;
top: 10%;
left: 10%;
}
}