body { background: #f2f1ef; }
#container { text-align: center; }
#summary { width: 400px; height: 24px; margin: -15px auto 5px auto; font-family: 'Roboto', sans-serif; font-weight: 900; font-style: italic; padding-top: 0px; color: #444; text-align: center; }
#flashcard-container { width: 400px; min-height: 350px; background: #fff; text-align: center; padding-top: 20px; margin: 0 auto; border-radius: 15px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1); }
#flashcard-container span { color: #444; font-family: 'Roboto', sans-serif; font-size: 95px; font-weight: 900; font-style: italic; padding: 0px; display: block; }
#flashcard-container a {
	color: green;
}
#flashcard-container a:hover {
	color: #a5dc86;
}
#game-mode-section { color: #fff; background: #3498db; margin: -20px 0 10px 0; border-radius: 15px 15px 0 0; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 12px; text-align: center; padding-right: 0px; }
#game-mode-section a { color: #000; margin-left: 3px; }
#game-mode-section span { color: #000; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 12px; font-style: normal; display: inline; }
#game-mode-info { display: none; padding: 3px; }
#game-setup-header { padding: 5px; }
#game-setup-header h1 { font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 20px; margin: 0; }
#end-game-summery { display: none; }
#timerBtn { text-align: center; margin-bottom: 5px; }
#timerBtn input { padding: 15px 50px 15px 50px; margin-top: 0px; background-color: #3498db;
	color: #fff; border: 0px; font-family: 'Roboto', sans-serif; font-size: 24px; font-weight: 900; font-style: italic; border-radius: 5px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
  }
#timerBtn input:hover { cursor: pointer; background-color: rgba(52, 152, 255, 0.8); }
#options { text-align: center; display: none; margin-top: 30px; }
#options input { width: 100px;padding: 15px 0px; margin-right: 6px; background-color: #3498db;
	color: #fff; border: 0px; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 900; font-style: italic; border-radius: 5px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
  }
p#options input, #timerBtn input { -webkit-appearance: none; -webkit-border-radius:5px; }
#options input:hover { background-color: rgba(52, 152, 255, 0.8); cursor: pointer; }
.logo { font-family: 'Roboto', sans-serif; line-height:1em; color:#e39a07; font-weight: 900; font-style: italic; font-size:38px;text-shadow:0px 0px 0 rgb(209,136,-11),1px 1px 0 rgb(201,128,-19),2px 2px 0 rgb(193,120,-27),3px 3px 0 rgb(184,111,-36),4px 4px 0 rgb(176,103,-44),5px 5px 0 rgb(168,95,-52), 6px 6px 0 rgb(160,87,-60),7px 7px 6px rgba(0,0,0,0.05),7px 7px 1px rgba(0,0,0,0.5),0px 0px 6px rgba(0,0,0,.2);
} 
#result { float: right; margin-top: -19px; }
span#last-result { display: inline-block; border-radius: 3px; color: #fff; padding: 0 6px; }
span#last-result.green { background: green; }
span#last-result.darkred { background: darkred; }
.fade {
    -webkit-animation: fadeout 1.5s linear 1 forwards;
    animation: fadeout 1.5s linear 1 forwards;
}
@-webkit-keyframes fadeout {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes fadeout {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
#footer { font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 11px; margin: 45px auto 0 auto; text-align: center; }


.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 18px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  vertical-align: top;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
.material-icons.correct { color: green; }
.material-icons.incorrect { color: darkred; }
.material-icons.clock { color: #3498db; }

/* game setup screen */
#game-setup { text-align: left; }
.switch-field {
  display: flex;
  margin-bottom: 16px;
  overflow: hidden;
}

.switch-field input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}

.switch-field label {
  background-color: #e4e4e4;
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  line-height: 1;
  text-align: center;
  padding: 13px 16px;
  margin-right: -1px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.1s ease-in-out;
}

.question-types label {
	padding: 13px 28px;
}

.switch-field label:hover {
  cursor: pointer;
}

.switch-field input:checked + label {
  background-color: lightblue;
  box-shadow: none;
}

.switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
}

.form {
  max-width: 600px;
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-weight: normal;
  line-height: 1.625;
  margin: 0px auto 8px auto;
  padding: 5px 16px 16px 16px;
}

.form h2 {
  font-size: 14px;
  margin-bottom: 5px;
}

.form h1, #end-game-summary h1 {
  font-size: 20px;
  margin-bottom: 3px;
  margin-top: 8px;
}

.form p, #end-game-summary p {
	font-size: 14px;
	margin-top: 0px;
}

.form p {
	margin-bottom: 25px;
}

#end-game-summary { 
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-weight: normal;
  line-height: 1.625;
  text-align: left;
  padding: 5px 16px 16px 16px;
 }

 #end-game-summary p#next-game {
 	font-size: 16px;
 	margin-top: 20px;
 	text-align: center;
 }



/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
	#summary, #flashcard-container { width: 350px; }
	.logo { font-size: 35px; margin-top: 10px; }
	p#options { margin-top: 10px; }
	p#options input { margin: 15px 20px; min-width: 100px; }
	p#options input:hover { background-color: #3498db !important; }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
	p#options input:hover { background-color: #3498db !important; }
}