/* hello and welcome to the STYLESHEET */

/* font imports */
@import url(./fonts/fonts.css);

/* global styling */

* {
  font-family: 'Tiempos Text';
  font-weight: normal;
  font-style: normal;
}

.banner {
  font-family: 'Trek Headline';
  font-style: italic;
  font-size: 90px;
}

input[type = button] {
  background-color: #75BBFF;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  height: 50px;
  width: 250px;
  border-radius: 20px;
  transition: 0.2s;
  opacity: 1;
  margin: 2px 1px;
}

input[type = button]:hover {
  opacity: 0.6;
  background-color: inherit || #75BBFF;
}

input[type = button]:focus {
  outline: 0;
  box-shadow: none;
  /* will be changed when 1, 2, 3, 4 give inputs */
}

h1 {
  font-family: 'Tiempos Headline';
  font-style: normal;
  font-weight: 500;
  font-size: 90px;
}

h2 {
  font-family: 'Tiempos Headline';
  font-style: normal;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: 0.03em;
  margin-top: 50px;
}

p {
  font-size: 20px;
  max-width: 90%;
  text-align: center;
}

a {
  outline: 0;
  box-shadow: none;
  text-decoration: none;
  color: SteelBlue;
}

a.hiddennavlink {
  color: black;
}

em {
  font-family: 'Tiempos Headline';
  font-style: normal;
  font-weight: 500;
  color: #780D0D;
}

i {
  font-family: 'Tiempos Text';
  font-style: italic;
  font-weight: normal;
}

ul {
  list-style-position: inside;
  text-align: center;
}

li {
  font-size: 16px;
}

/* section (div) styling */

div[id = welcome] {
  max-width: 600px;
  display: inline-block;
}

div[id = tutorial] {
  max-width: 600px;
  display: none;
}

div[id = game] {
  max-width: 540px;
  display: none;
}

div[id = end] {
  display: none;
}




/* welcome-specific styling */

.selection {
  display: block;
}

p.mini {
  font-size: 14px;
}

#play, #reset {
  height: 50px;
  width: 200px;
  background-color: #F2C300;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
}


/* tutorial specific styling */

  /* background is NOT dynamic... fix */

.difficultyrange {
  display: inline;
  width: 700px;
}

/* backgrounds for these aren't dynamic.. fix */

#mindif {
  width: 25px;
  height: 25px;
  border: 1px solid gray;
  margin: 1px;
  background: #00FF00;
}

#maxdif {
  width: 25px;
  height: 25px;
  border: 1px solid gray;
  margin: 1px;
  background: #FF0000;
}


/* game-specific styling */

  /* interact */

#question {
  height: 100px;
}

#interact {

}

#inform {

}

  /* inform */

#difficulty {
  width: 25px;
  height: 25px;
  border: 1px solid gray;
  margin: 20px;
  background: none;
}

#score {

}

#remaining {

}


/* end-specific styling */

#endquiz {
  height: 35px;
  width: 80px;
  background-color: #F2C300;
}