/* CSS Document */
body {
	margin: 0px;
	padding: 0px;
	text-align: left;
	background: #ffffff;
	font-size: 10px;
	color: #333333;
	font-family: 'Inter', arial, "Gill Sans", "Gill Sans MT", "sans-serif";
	}
div.container {
	max-width: 340px;
	margin: auto;
	width: auto;
	margin-top: 75px;
	/*height:100vh;*/
}
div.header {
	background-color: #32a6fc;
    position: fixed;
    width: 100%;
    z-index: 100000000000000;
    top: 0px;
    height: 70px;
	text-align: center;
}
div.header div.logo img {
	width: 200px;
}
div.hero {
	text-align: center;
	height: 100px;
	width: 340px;
	margin:auto;
}


/****** stuff that was on the  play page before ***/
div.numeric-input, div.numeric-display {
width: 76px;
height: 70px;
/*border: 1px solid #ccc;*/
font-family: arial;
font-weight:700;
font-size: 50px;
text-align: center;
line-height: 50px;  /* Keeps the text vertically centered */
border-radius: 3px;
outline: none;
user-select: none;
margin: 1px;
display: inline-block;  /* Keeps them side by side */
vertical-align: top;
padding-top: 10px;
box-sizing: border-box;
background: #32a6fc;
color:#ffffff;
}

.numeric-keyboard {
position: relative;
bottom: 0;
left: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}

.key-row {
display: flex;
justify-content: center;
}

.key {
all: unset; /* Resets all default styles */
width: 54px !important;
height: 54px !important;
font-size: 30px;
line-height:24px;
color: #555;
background-color: #eeeeee/*#fcfbc8*/;
border: 1px solid #555;
margin: 2px;
border-radius: 4px;
cursor: pointer;
/*transition: background-color 0.5s;*/
text-align:center;
box-sizing: border-box;
}
/*
.key:hover {
background-color: #555;
}
*/
.backspace {
	/*
background-color: #fce3e6;
border: 1px solid #dc3846;
color: #dc3846;
	*/
}

.enter {
font-size: 14px;
background-color: #eee;
border: 1px solid #333;
color:#333;
opacity:0.3;
}
/*Prevent random zooming when kayboard buttons are clicked*/
	/*
html, body {
    -webkit-text-size-adjust: 100%; /* Prevents text scaling */
   /* touch-action: manipulation; /* Prevents double-tap zoom */
   /* user-select: none;  /* Optional: prevents text selection that might cause zoom */
    /*overflow: hidden;   /* Prevents horizontal scrolling */
    /*width: 100%;
    /*height: 100%;
}*/
button:disabled {
	cursor: not-allowed!important;
}
/*** end stuff that was on the play page before ***/

form#dailyform {
	text-align:center;
}
input#submit-button {
	margin-top: 30px;
	width: 320px;
	height: 50px;
	line-height: 50px;
	font-size: 20px;
	font-weight:bold;
	border-radius: 4px;
	cursor: pointer;
	background: #d7f0ff;
    border: 1px solid #32a6fc;
	color:#32a6fc;
}
div#dailymessage {
	position:relative;
	top: 10px;
	text-align:center;
	font-size: 24px;
}
div.graphics {
	height: 250px;
	width: 340px;
	margin:auto;
}
div.step1, div.step2 {
	box-sizing:border-box;
	display: inline-block;
	text-align: center;
	height: auto;
	width: 168px;
	margin:auto;
	vertical-align: top;
	font-size: 20px;
}
div.step1 img, div.step2 img {
	width: 150px;
}
div.intro {
	font-size: 16px;
	height: auto;
	width: 340px;
	text-align:left;
	margin-bottom: 10px;
}
div.intro ul {
list-style:none;
	width: 100%;
line-height: 24px;
	position: relative;
	left: -40px;
}
div.intro ul li {
background: url('/images/g-bullet-blue.svg') no-repeat left center;
background-size: 25px 25px; /* adjust image size */
padding-left: 30px; /* space for the image */
margin-bottom: 8px;
}
.hide {
	display: none;
}
a {
	text-decoration: none;
}
div {
box-sizing: border-box;
}
div.dictionary {
	font-size: 16px;
	color: #333333;
	padding-left: 10px;
	margin-top:15px;
	line-height:25px;
}
div.dictionary span {
	font-size: 18px;font-weight:bold;
	color: #333333;
}

form {
width: 340px;
margin:auto;
}
form#theform {
height: 10px; /*since we dont show it, but can't display:none it*/
visibility:hidden;
}
h1 {
	font-size: 30px;
	text-align:center;
	position: relative;
	top: 15px;
	font-weight: normal;
}
textarea {
	font-size: 20px;
}
form#add{
	font-size: 20px;
}
form#add input {
	width: 150px;
	font-size: 20px;
}
form#add input[type='checkbox'], form#add input[type='radio']  {
	width: 50px;
	font-size: 20px;
}
div.question {
	font-size:22px;
	text-align: center;
	margin-bottom: 5px;
	color:#000000/*#32a6fc*/;
}
div.image {
	text-align: center;
}
div.caption {
	font-size:20px;
	text-align: center;
	margin-bottom: 0px;
	color: #aaa;
}
div.answer {
	width: 320px;
	margin: auto;
	text-align:center;
}
div#results {
	font-size:20px;
	text-align: center;
}
div#offby {
	font-size: 40px;
	margin-bottom:10px;
}
div#offbycaption {
	font-size: 20px;
	color:#aaa;
}

input.box {
	-webkit-appearance: none;
	display: inline-block;
	width: 68px;
	height: 80px;
	border: 1px solid gray;
	font-size: 60px;
	font-weight: bold;
	text-align: center;
	padding: 10px 0px 10px 0px;
	margin-left: 4px;
	margin-right: 3px;
	margin-bottom: 30px;
	caret-color: transparent;
}
input.submit {
	text-transform: uppercase;;
	display: block;
	width: 320px;
	margin: auto;
	height: 50px;
	line-height:50px;
	font-size: 20px;
	background: #eee;
	color: #ccc;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-appearance: none;
	cursor: not-allowed;
}
div.important {
	font-size: 24px;
}
div#sharelink {
	text-align: center;
	font-size: 16px;
	color: red;
	background: #fff;
	margin-bottom: 20px;
	border: 1px solid red;
	padding: 4px;
}
div#gamebuttonsorresults {
	width: 340px;
	margin: auto;
}
div.button {
	position:relative;
	width: 320px;
	margin: auto;
	height: 50px;
	line-height: 50px;
	margin-bottom: 10px;
	color:white;
	font-size: 18px;
	text-align: left;
	border-radius: 4px;
	padding-left: 48px;
	font-weight:bold;
}
div.button img {
	position: absolute;
	left: 5px;
	padding-top:6px;
	width:35px;
}
a.button {
	display: block;
	width: 320px;
	text-decoration: none;
	margin:auto;
}
a.homebutton {
	display: block;
	width: 320px;
	margin: auto;
	text-decoration: none;
}
div.homebutton {
	width: 320px;
	margin: auto;
	height: 50px;
	line-height:50px;
	margin-bottom: 20px;
	color:#32a6fc;
	font-size: 20px;
	text-align: center;
	border-radius: 4px;
	background: #d7f0ff;
	border:1px solid #32a6fc;
	font-weight:bold;
	cursor:pointer;
}
button.homebutton {
	width: 320px;
	margin: auto;
	height: 50px;
	line-height:50px;
	margin-bottom: 20px;
	color:#32a6fc;
	font-size: 20px;
	text-align: center;
	border-radius: 4px;
	background: #d7f0ff;
	border:1px solid #32a6fc;
	font-weight:bold;
	cursor:pointer;
 user-select: none;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* IE/Edge */
}
div#choosenumplayers {
	width: 350px;
	margin:auto;
}
div.choosebox {
	display: inline-block;
	width: 80px;
	height: 60px;
	line-height:60px;
	background: #d6f9cf;
	color: #2daa13;
	font-size: 30px;
	border: 1px solid #2daa13;
	border-radius: 4px;
	cursor: pointer;
	margin-right: 5px;
	margin-bottom: 10px;
	text-align: center;
}
/* Don't think we need form error messages anymore bc JS is required
div.message {
	position: relative;
	height: 10px;
	top: 0px;
	left: 160px;
	color: red;
}*/
div.player-name-input-label {
	font-size: 16px;
	text-transform:uppercase;
	color: #32a6fc;
	font-weight:bold;
}
input.playername {
	width: 300px;
	height: 40px;
	font-size: 24px;
	border: 1px solid gray;
	padding-left:10px;
}
div.done {
	background: #d6f9cf;
	color:#2daa13;
	border: 1px solid #2daa13;
}
a.done {
	cursor: not-allowed;
	pointer-events: none;
}
div.active {
	background: #fcfbc8;
	cursor: pointer;
	color: #c1ab2b/*f29220*/;
	border: 1px solid #c1ab2b/*#f29220*/;
}
div.notstarted {
	background: #fce3e6;
	cursor: pointer;
	color:#dc3846;
	border: 1px solid #dc3846;
}
a.nextquestion {
	box-sizing:border-box;
	display: block;
	margin: auto;
	width: 320px;
	height: 50px;
	line-height:50px;
	text-align: center;
	background: #d7f0ff;
	color: #32a6fc;
	border: 1px solid #32a6fc;
	font-size: 20px;
	border-radius: 4px;
	opacity:0;
	font-weight:bold;
}
/* Remove arrows from number input fields */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
div#footer {
margin:auto;
	margin-top: 50px;
width:340px;
text-align: center;
}
div#correct-answer {
	margin-bottom: 10px;
}
div#fields {
	text-align:center;
}

div.results-player-row {
height: 41px;
width:340px;
border: 1px solid gray;
margin-bottom: -1px;
	position:relative;
}
div.results-player-row.daily {
	height: 61px;
}
.row1, .row3, .row5, .row7 {
	background: #ffffff;
}
.row2, .row4, .row6, .row8 {
	background: #eff7fd;
}
.row1::before {
    content: "";
    display: inline-block;
	position: absolute;
	left: .6px;
	top:-.8px;
    background-image: url('/images/gold.svg');
    background-size: contain;
	background-repeat: no-repeat ;
    width: 30px;  /* Adjust the width and height as needed */
    height: 30px; /* Adjust the height as needed */
	z-index: 2;
}
.row2::before {
    content: "";
    display: inline-block;
	position: absolute;
	left: .6px;
	top:-.8px;
    background-image: url('/images/silver.svg');
    background-size: contain;
	background-repeat: no-repeat ;
    width: 30px;  /* Adjust the width and height as needed */
    height: 30px; /* Adjust the height as needed */
	z-index: 2;
}
.row3::before {
    content: "";
    display: inline-block;
	position: absolute;
	left: .6px;
	top:-.8px;
    background-image: url('/images/bronze.svg');
    background-size: contain;
	background-repeat: no-repeat ;
    width: 30px;  /* Adjust the width and height as needed */
    height: 30px; /* Adjust the height as needed */
	z-index: 2;
}

div.results-player-row div {
display:inline-block;
height: 40px;
vertical-align:top;
line-height: 40px;
}
div.results-player-row.daily div {
height: 60px;
line-height: 60px;
}

div.results-player-row div.rank {
font-size: 15px;
width: 20px;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
text-align:center;
background: #32a6fc;
color: white;
}
.row1 div.rank:nth-of-type(1),
.row2 div.rank:nth-of-type(1),
.row3 div.rank:nth-of-type(1) {
/* Your styles here */
background:none; /* Example style */
position:relative;
z-index:5;
}
div.results-player-row div.name {
padding-left:3px;
font-size: 16px;
font-weight:bold;
width: 120px;
border-right: 1px solid gray;
white-space: nowrap;    /* Prevents text from wrapping */
overflow: hidden;       /* Hides any overflowing text */
}
div.results-player-row div.score {
text-align:center;
font-size: 16px;
width: 30px;
border-right: 1px solid gray;
color:#32a6fc;
font-weight: bold;
}
div.results-player-row.daily div.score {
width:98px;
font-size: 40px;
}
div.results-player-row div.answer-box {
display:inline-block;
width: 28px;
height:40px;
border-right: 1px solid gray;
}
div.results-player-row.daily div.answer-box {
display:inline-block;
width: 40px;
height:60px;
border-right: 1px solid gray;
}
div.results-player-row div.answer,  div.results-player-row div.offby {
display:block;
height: 20px;
line-height: 20px;
width: 28px;
text-align:center;
}
div.results-player-row.daily div.answer,  div.results-player-row.daily div.offby {
display:block;
height: 30px;
line-height: 30px;
width: 40px;
text-align:center;
}
div.results-player-row div.answer {
border-bottom: 1px solid gray;
font-size: 10px;
}
div.results-player-row div.offby {
font-size: 13px;	 
}
div.results-player-row.daily div.answer {
border-bottom: 1px solid gray;
font-size: 16px;
}
div.results-player-row.daily div.offby {
font-size: 16px;	
	font-weight:bold;
}
div.results-headings-row {
width:340px;
height:20px;
margin-bottom: -1px;
border-right: 1px solid gray;
}
div.results-headings-row div {
display:inline-block;
height: 20px;
line-height:20px;
text-align:left;
padding-left: 2px;
background: #eee;
border-right:1px solid gray;
border-bottom:1px solid gray;
vertical-align:top;
font-size:11px;
}
div.results-headings-row div.rank { 
width:21px;
text-align:center;
border-left: 1px solid gray;
font-family:arial;
}
div.results-headings-row div.name { 
width:120px;
font-family:arial;
}
div.results-headings-row div.score { 
width:30px;
font-family:arial;
padding-left: .5px;
}
div.results-headings-row.daily div.score { 
text-align:center;
border-left: 1px solid gray;
width:99px;
}
/*
div.results-headings-row div.answers-given { 
width:168px;
border-right: none;
text-align:center;
}*/
div.results-player-row div.answer-box:last-of-type {
border: none;
}
div.score-message {
font-style:italic;
text-align:center;
margin-bottom: 10px;
font-size: 16px;
}
div.tiebreaker {
width:100%;
font-style:italic;
font-size: 10px;
text-align:right !important;
	margin-top:1px;
}
div.finish-later-message {
	font-size: 14px;
	text-align:center;
	margin-top:30px;
}
div.finish-later-message a {
	color: #aaa;
	text-decoration:underline;
}
div.choose-message {
	font-size: 20px;
	margin: 100px 0px 10px 0px;
	text-align:center;
}
div#recaptcha {
	width:300px;
	margin-left: auto;
	margin-right: auto;
}
div.recaptcha-heading {
	font-size: 20px;
	text-align:center;
	margin: 100px 0px 10px 0px;
	color:#32a6fc;
}
div.name-message {
	font-size: 20px;
	margin: 100px 0px 10px 0px;
}
div.name-message span {
	display:inline-block;
	font-size: 16px;
	margin-bottom:10px;
	color: #777;
}
div.name-and-icons {
	width: 340px;
	max-width:340px;
	position:relative;
	text-align:center;
	font-size: 28px;
	color: #aaa;
	height: 20px;
	margin-bottom:10px;
}
div.guesstion-label {
	width: 340px;
	max-width:340px;
	position:relative;
	text-align:center;
	font-size: 20px;
	color: #aaa;
	height: 20px;
	margin-bottom:10px;
}
div.name-and-icons img {
	position: absolute;
	left:0;
	width: 50px;
}
div.name-and-icons img:nth-child(2) {
  position: absolute;
	left:auto;
	right:0;
}
div.share-message {
	position: relative;
	top:-10px;
	font-size: 16px;
	margin-bottom: 5px;
	text-align:center;

}
div.title {
	font-size: 18px;
	text-align:center;
	height: 28px;
	line-height:28px;
	background: #32a6fc;
	color: #ffffff;
	margin-top:10px;
	text-transform:uppercase;
	/*border: 1px solid gray;*/
	margin-bottom: 5px;
	min-width: 340px;
}
div.title.results {
	margin-top:0px;
	margin-bottom: 0px;
	position:relative;
}
div.icons-row {
	position: relative;
	width: 100%;
	max-width:340px;
	height: 40px;
}
div.icon {
	display: inline-block;
	height:40px;
	width: 56.667px;
	vertical-align: top;
	border: 1px solid gray;
	border-top: none;
	cursor: pointer;
	text-align:center;
	background:#eee;
}
.results-headings-row div.icon {
	width:28px;
	text-align:center;
	border-top: none;
	border-left: none;
	border-right:1px solid gray;
	border-bottom:1px solid gray;
}
.results-headings-row.daily div.icon {
	width:40px;
}
div.icon img {
	width:30px;
	max-width: 30px;
	margin-top:3px;
}
.results-headings-row div.icon img {
	width:18px;
	margin-top:.5px;
}
div.qanda-container {
	width:100%;
	max-width: 340px;
	height:auto;
	background: #fff;
	border: 1px solid gray;
	border-top: none;
	padding:5px 0px;
	color: #333;
	margin-bottom: 10px;
}
div.qanda-container div.question {
	width: 300px;
	margin:auto;
	font-size: 16px;
	display: none;
	margin-top: 5px;
	color: #333;
}
div.qanda-container div.answer {
	font-size: 24px;
	display: none;
	margin-top: 3px;
}
div.icon.movies {
	background: #fff;
	border-bottom: none;
}
.results-headings-row div.icon.movies {
	background: #eee;
	border-bottom: 1px solid gray;
}
.results-headings-row div.icon.misc {
	background: #eee;
	border-right:none;
}
div.qanda-container div.question.movies {
	display: block;
}
div.qanda-container div.answer.movies {
	display: block;
}
div.name1 {
	/*background-image: url("/images/confetti.gif");*/
	background-size: 300px;
}
div.gameover {
	text-align:center;
}
div.game-url {
	width: 300px;
	height: 50px;
	line-height:50px;
	margin:auto;
	border-radius:4px;
	border: 1px solid #32a6fc;
	cursor: pointer;
	background: #d7f0ff;
	margin-bottom: 6px;
	margin-top:10px;
	color: #32a6fc;
	font-size: 20px;
	font-weight:bold;
}

@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.wiggle {
  display: inline-block;
  animation: wiggle 0.5s ease-in-out infinite;
}
@media (min-width: 10px) and (max-width: 599px) {
/*prob wont need since it's built for mobile*/
}