/*
some colors i'm using

red = #c02315
brown = #2b1001
*/


* {
  box-sizing: border-box;
}

body {
  background-image:  
    linear-gradient(rgba(192, 35, 21, 0.8), rgba(192, 35, 21, 0.8)), 
    url('images/BoardGames.jpg');
  background-color: #c02315;
  background-size: 100% auto;
  min-width: 320px;
}

.results-container {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-bottom: 5px;
  background-color: white;
  border: 5px solid grey;
  border-style: ridge;
}


/*
=====================================================================

Header Style

==================================================================
*/
.head-blur {
  background-image:  
    linear-gradient(rgba(192, 35, 21, 0.8), rgba(192, 35, 21, 0.8)), 
    url('images/BoardGames.jpg'); 
  background-position: left -85px;
  z-index: -1;
  filter: blur(10px);
  max-width: 1000px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

#primary-header {
  font-family: 'Vollkorn SC', serif;
  text-shadow: 4px 3px 3px black;
  position: relative;
  color: white;
  font-size: 30px;
  border: 5px solid grey;
  border-style: ridge;
  overflow: hidden;
  max-width: 1000px;
  margin: 10px auto;
}

#primary-header p {
  font-size: 20px;
  margin-top: 5px;
  text-align: center;
}

h1 {
  font-weight: 200;
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center;
}





/*
=====================================================================

Form Style #732919

==================================================================
*/
form, #search-summary {
  background-image:  
    linear-gradient(rgba(43, 16, 1, 0.9), rgba(43, 16, 1, 0.9)), 
    url('images/wood-grain.jpg');
  background-color: #2b1001;
  border: 5px solid grey;
  border-style: ridge;
  font-family: 'Lato', sans-serif;
  color: white;
  font-size: 20px;
  font-weight: 400;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
}

label {
  display: inline-block;
  margin-top: 25px;
}

fieldset {
  margin-top: 15px;
}

form button {
  margin: 15px 0 5px;
}

.slider-output {
  font-weight: bold;
}

#query-form, #search-summary {
  max-width: 600px;
}

#bgg-user {
  margin-left: 15px;
  margin-top: 5px;
}

#search-summary {
  margin-right: auto;
  margin-left: auto;
}

#search-summary p {
  color: #ddd;
}

strong {
  text-shadow: 4px 3px 3px black;
  color: white;
  font-weight: 600;
  font-size: 25px;
  letter-spacing: 1px;
}

#sliders label {
  display: block;
  text-align: center;
  margin-bottom: -30px;
}

form button:hover, #search-summary button:hover {
  background-color: #ccc;

}

form button:active, #search-summary button:active {
  background-color: #666;
  color: white;

}
/*  
=============================================================

SLIDERS 

============================================================
*/

.slider {
  width: 75%;
  height: 5px; 
  margin: 0 12.5%;  
}

.range-labels {
  padding: 0;
  list-style: none;
  margin: 0 auto 80px auto;
}

.range-labels li {
  float: left;
  text-align: center;
  font-size: 14px;
  margin-top: -10px;
}


.player-range-label {
  width: 8.333%;
}

.diff-range-label {
  width: 14.2857%;

}

.time-range-label {
  width: 6.25%;
}

.play-list {
  width: 79%;
}
  
.diff-list {
  width: 84.2%;
}
  
.time-list {
  width: 77%;
}


@media only screen and (min-width: 640px) {

  .play-list {
    width: 79.6%;
  }
  
  .diff-list {
    width: 85.3%;
  }
  
  .time-list {
    width: 77.6%;
  }
}


/*
====================================================================

tab style

=================================================================
*/

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

.tab button:hover {
    background-color: #ddd;
}

.tab button.active {
    background-color: #ccc;
}

.tabcontent {
    padding: 5px 5px;
    border: 1px solid #ccc;
    border-top: none;
    overflow: hidden;
}

.tabcontent {
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}


/* Go from zero to full opacity */
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}


/*
===========================================================

Game Display

=============================================================
*/
h3.game-name {
  font-size: 25px;
  margin-bottom: 0;
  border-bottom: 1px solid #ccc;
}

.year-designer {
  font-size: 15px;
  font-style: italic;
  background-color: #ccc;
  margin-top: 0;
  padding-left: 2em;
  padding-top: 3px;
  padding-bottom: 3px;
}

.game-year {
  font-size: 18px;
}

.game-designer {
  margin-left: 1em;
}

.thumb-box {
  float: left;
  width: 100%;
  height: 150px;
  margin-bottom: 15px;
}

.game-thumb {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}

.game-info-box {
  min-width: 280px;
  clear: both;
}

.desc-button {
  margin-bottom: 8px;
}

dl {
  max-width: 370px;
  margin: 0 auto;
}

dt, dd {
  margin: 0;
  padding: 0;
  display: inline-block;
}

dd:after {
  display: block;
  content: '';
}

dt {
  width: 170px;
  font-weight: bold;
  text-align: right;
  margin-right: 5%;
  margin-bottom: 5px;
}


@media only screen and (min-width: 640px) {

  .thumb-box {
    border: none;
    width:150px;
  }

  .game-info-box {
    clear: none;
  }

}


/*
===========================================

list styles

============================================
*/


body {
   counter-reset: item;
 }
 ol {
   list-style: none;
   padding-left: 5px;
   padding-right: 5px;
 }
 ol>li {
   counter-increment: item;
   margin-bottom: 5px;
   margin-top: 30px;
 }
 ol>li:before {
    margin-right: 10px;
    content: counter(item);
    background: #c02315;
    border-radius: 50%;
    color: white;
    float: left;
    min-width: 1.2em;
    padding: .2em;
    text-align: center;
    position: relative;
    display: inline-block;
 }






ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/*
===============================================================

other

===============================================================
*/

button:focus {
  border: 1px solid black;
}

.loading-img {
  display: block;
  margin: 0 auto;
}