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

body {font-family:arial, helvetica, sans-serif;}
.outer-container {
   display: inline-block;
}
a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer, .close-form, #show-hide-menu {
  cursor: pointer;
}

input[type='text'] {
  font-size: 2rem;
  border: 1px solid black;
  border-radius: .2em;
  padding: .1em;
  margin-top: 1rem;
  width: 100%;
}

.top {
  padding: 0 1vw;
}
.top ul {
  margin: 0;
  padding: .5em;
  list-style: none;
  line-height: 1.8;
  width: 95%;
  margin-bottom: 1rem;
}
.top ul li {
  border: 1px solid #ababab;
  padding: .5em;
  font-size: 2.5rem;
  line-height: 1;
  word-wrap: anywhere;
}
.top ul li a {
  text-decoration: none;
  color: black;
}
#top-controls {
  display: none;
  padding-top: .5rem;
}
.faire-name-container {
  text-align: center;
}
h4.faire-name {
  padding: 0;
  font-size: 4.5vw;
  opacity: .5;
}
#cards, #squares, #cards-controls-form, #squares-controls-form {
  display: none;
}
.result-message {
  position: relative;
  font-size: 1.5rem;
  color: #14200e;
  padding: .75em 1em;
  border: 1px solid #89cfa2;
  border-radius: .25rem;
  margin: 1rem;
  background-color: #e1faea;;
  display: none;
}
.close-result-message {
  position: absolute;
  top: 15%;
  right: 3%;
  color: #8a8a8a;
  font-size: 2rem;
}
.close-form {
  position: absolute;
  top: 0;
  right: 3%;
  z-index: 2;
  color: #0F7845;
  font-size: 12vw;
  font-weight: bold;
  opacity: .7;
}
.result-message-text {
  display: inline-block;
  width: 95%;
  font-size: 4vw;
}
#show-hide-menu {
  width: 8vw;
  height: auto;
}
.top-imgs {
  display: flex;
  justify-content: space-around;
  /* This is needed for mobile browsers: */
  align-items: center;
}
.title-img {
  max-width: 70vw;
  height: auto;
  padding-top: 1rem;
}

.lower {
  padding: .5rem 0;
}
.control-form, .control-form-main {
  position: relative;
  padding-top: .5rem;
  font-size: 1.5rem;
  display: none;
}
.page-form, .page-form-static {
  font-size: 4vw;
  padding: 3vw;
  border: 3px solid #777;
  margin: .5rem auto 2vh auto;
  border-radius:.75rem;
}
.controls-button, .controls-button-main {
  padding:.5rem;
  margin: .5em;
  border-radius:.7rem;
  font-size: 4vw; 
  cursor: pointer;
  background: none;
  border-width: 2px;
  border-style: solid;
}
.controls-button-reset {
  border-color: #e36000;
  color: #e36000;
  font-weight: bold;
}
.controls-button-1 {
  border-color: #0F7845;
  color: #0F7845;
}
.controls-button-2 {
  border-color: #0052d9;
  color: #0052d9;
}
.card-name {
  padding: 0 2vw;
  display: none;
  color: #2573b7;
}
#card-name {
  font-size: 4vw;
  padding: .1em 0;
}
.bingo-grid-container {
   border: 3px solid #777;
   margin: .5rem auto 2vh auto;
   border-radius:.75rem;
   width: 95vw;
   height: 95vw;
}
.bingo-grid {
   border-collapse:collapse;
   width: 100%;
   height: 100%;
   margin: 0 auto;
}
.bingo-grid td {
   font-size: 2.5vw;
   font-weight: normal;
   color: black;
   border:1px solid #999;
   padding:.5em;
   margin:0;
   width:20%;
   height:20%;
   cursor:pointer;
   text-align:center;
   border-radius:1em;
   word-wrap: anywhere;
}

@keyframes flash-square {
	to {background-color: red;}
	to {color:white;}
}
.bingo-grid td.middle-square {
	background-color:#cdcdcd;
	cursor:default;
}
.bingo-grid td.middle-square-bingo {
	background-color:white;
	color:black;
	animation: flash-square .5s steps(2, start) infinite;
}
.selected {
  background-color: yellow;
  color: black;
  font-weight: normal;
}
.unselected {background-color:inherit;}

/* Menu */

.bingo-main-menu, .menu-page {
   padding:1rem 0;
   margin:0;
   list-style-type:none;
}

.bingo-main-menu li {
   display:inline;
}
.menu-page li {
   margin:2rem 0;
}

.bingo-main-menu li a, .menu-page li a {
   padding:.5rem;
   border: 2px solid #0F7845;
   border-radius:.7rem;
   font-size: 2vw; 
   text-decoration:none;
   color: #363636;
}

h1, h2, h3, h4 {
  margin: 0;
  padding: .25em 0;
}
h3 {
  font-size: 5vw;
  width: 85%;
}
h4 {
  font-size: 2.25rem;
}
.page-form-static h3 {
  width: 100%;
}
/* Save */

form.save-card { display:inline-block; width:auto;}
form.save-card fieldset {padding:1rem;}

.alert {
   color:red;
   font-weight: bold;
}
#bingo-alert {
   display: none;
   font-size: 6vw;
   text-align: center;
   margin: 0;
   padding: 0;
}
.blink_me {
  animation: blinker .33s linear 0s alternate 60; 
}

 
@keyframes blinker { to { opacity: 0; } }

.winner {
  background-color: lawngreen;
  color: green;
  font-weight: bold;
}
.save-card-form, .add-square-form, .saved-cards-menu {
  display: none;
}
.list-link {
  cursor: pointer;
}