/* CSS stylesheet to style HTML elements of the Trivia game. Needed to add custom styling not handled with Bootstrap.
 
   NAME: style.css
   AUTHOR: Elaina Swann
   DATE: 12/21/2017
   REVISION LOG:
     1.0  12/21/2017 - Baseline version. 
*/

body {
  color: #000000;
  font-family: 'Lato', sans-serif;
}

#background {
  background-repeat: repeat;
  height: 100%;
  left: 0px; 
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: -1;
}

.stretch {
  height: 100%;
  width: 100%;
}

.jumbotron {
  background-image: url("../images/old_map.png");
  min-height: 100vh;
  margin: 0;
}

/* Needed to keep progress bar in consistent position at bottom without fixing its position. Fixed does not work correctly with smaller media. */
#main-content {
  min-height: 80vh;
}

#title {
  color: #0015FF;
  font-family: 'Bungee', cursive;
}

.btn-lg {
  background: #ffffff;
  border: solid .25rem #0015ff;
  font-size: 3rem;
  white-space: normal;
  word-wrap: break-word;
}

.btn-lg:hover {
  background: #00c946; 
}

#start-btn, #restart-btn { 
  margin-top: 25%;
  width: 50%;
}

#choice-0, #choice-1, #choice-2, #choice-3 {
  margin-top: 3%;
  width: 60%;
}

#no, #yes {
  font-family: 'Bungee', cursive;
  font-weight: bold;
}

#correct, #incorrect, #unanswered {
  font-family: 'Bungee', cursive;
  margin-top: 5%;
}

#yes, #correct {
  color: #00c946;
}

#no, #incorrect {
  color: #ff0900;
}

#gif {
  height: 30rem;
  margin-top: 5%;
  width: 40rem;
}

#progress-col{
  width: 70%;
}

.progress {
  border: solid .1rem #000000;
  height: 3.2rem;
  margin-bottom: 0;
}

.progress-bar {
  align-items: center;
  background-color: #00c946;
  color: #000000; 
  display: flex;
  font-size: 1.5rem;
  justify-content: center;
}

/*
  This code addresses the problem of the sticky hover on a touch screen device. The code was copied from the following website: http://www.javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml
*/
html.can-touch .btn-lg:hover {
  background: #ffffff; /* disable hover effect on touch devices */
  border: solid .25rem #0015ff;
}