/* Box Model Hack */
* {
     box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

/******************************************
/* BASE STYLES
/*******************************************/

body {
     background-color: black;
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
     color: white;
}

html, 
body {
     position:fixed;
     top:0;
     bottom:0;
     left:0;
     right:0;
 }


/******************************************
/* LAYOUT
/*******************************************/
header,
footer {
     height:100px;
     border: 2px solid black;
     clear: both;
}

header {
     display: flex;
     justify-content: space-between;
     align-items:center;
     height: 150px;
     width: 900px;
     margin: auto;
     margin-bottom: 50px;
     border-bottom: 2px solid gray;
}

/* inactive */

.inactive{
     pointer-events: none;
}

/* Hidden */

.hidden {
     display: none;
}

/******************************************
/* ADDITIONAL STYLES
/*******************************************/

/* show stats Button */

.fa-bars {
     color: white;
     font-size: 50px;
}

.showStats:hover {
     color: gray;
}

/* Show how to / rank */

.fa-question{
     color: white;
     font-size: 40px;
}

.fa-question:hover {
     color: gray;
}

/* how to content */

.stats.question {
     display: block;
}

.stats.question.hidden {
     display: none;
}

.headings{
     display: flex;
     width: 80%;
     height: 10%;
     margin: auto;
     justify-content: space-evenly;
     align-items: center;
     font-size: 1.3rem;
     /* text-decoration: underline; */
}

.how.active,
.rank.active {

     border-bottom: 2px solid white;
}

.howTo {
     display: block;
     width: 80%;
     height: 90%;
     margin: auto;
}

.howTo img {
     display: block;
     width: 100%;
     height: 80%;
}

.howTo img.rankShow {
     margin-top: 10%;
     height: 80%;
}

.howTo h5 {
     display: flex;
     width: 100%;
     height: 15%;
     align-items: center;
     line-height: 150%;
}

.headings .select {
     border-bottom: 2px solid white;
}

.howTo .hidden, .des {
     display: none;
}

/*  Table */
.table {
     position: relative;
     width: 900px;
     height: 65%;
     margin: auto;
     background: radial-gradient(green, black 140%);
     border: 4px solid rgb(67, 67, 67);
     border-radius: 60px;
}

/* stats screen */

.stats {
     position: absolute;
     display: flex;
     z-index: 1;
     height: 90%;
     width: 70%;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     background-color: rgb(0, 0, 0, 85%);
     border-radius: 60px;
     justify-content: center;
     align-items: center;
     pointer-events: all;
}

.stats.hidden {
     display: none;
}

.xButton > button {
     position: absolute;
     top: 30px;
     right: 30px;
     height: 60px;
     width: 60px;
     border-radius: 50%;
     border: none;
     background-color: white;
     font-size: 30px;
}


.statsContent {
     font-size: 2rem;
     width: 90%;
     height: 90%;
     justify-content: space-between;
}

.statsContent > h2 {
     padding: 30px 0;
}

.xButton > button:hover {
     background-color: rgb(148, 148, 148);
}




.xButtonQuestion > button {
     position: absolute;
     top: 20px;
     right: 20px;
     height: 50px;
     width: 50px;
     border-radius: 50%;
     border: none;
     background-color: white;
     font-size: 30px;
}

.questionXBtn > button:hover {
     background-color: rgb(148, 148, 148);
}

/* Settings */

.settings {
     padding-top: 120px;
}

div.settings > h2{
     text-align: center;
     padding: 10px 0;
     border-bottom: 1px solid gray;
}

.options {
     display: flex;
     justify-content: space-between;
     padding-top: 20px;
}

label {
     font-size: 1.5rem;
}

select {
     background-color: black;
     color: white;
     border: 1px solid white;
}

select:focus {
     outline: none;
}

.options > button {
     background-color: rgb(169, 3, 3);
     color: white;
     font-weight: 700;
     font-size: 1rem;
     padding: 10px;
     border-radius: 10px;
     border: none;
}

.options > button:hover {
     background-color: rgb(90, 0, 0);
}


/* Heading */

header > h1 {
     font-size: 4rem;
}

/* River Cards */

.riverCards {
     display: flex;
     height: 30%;
     display: flex;
     width: 100%;
     padding: 50px 0;
     justify-content: center;
     align-items: center;
}

.riverCards > ul {
     display: flex;
     justify-content: center;
     width: 100%;
}

.riverCards li > img {
     width: 6rem;
}

.riverCards li {
     padding: 15px;
}

/* Middle section */

.middleSection {
     display: flex;
     height: 20%;
     width: 100%;
     margin: auto;
     align-items: center;
     justify-content: center;
     font-size: 2rem;
}

.streak{
     position: absolute;
     left: 10%;
     font-size: 2rem;
}

.runningOut {
     color: rgba(118, 0, 0, 0.81);
     font-size: 7rem;
     transition: color 3s, font-size 3s;
}


/* Player Cards */

.playerCards {
     display: flex;
     width: 100%;
     /* height: 40%; */
     justify-content: space-evenly;
}

.wrong {
     border: 5px solid red;
     border-radius: 20px;
}

.firstHalf:hover,
.secondHalf:hover {
     border: 5px solid greenyellow;
     border-radius: 20px;
}

/* firs set */

.firstHalf{
     border: 5px solid rgb(67, 67, 67, 0);
     transform: rotate(-10deg);
}

.firstHalf > ul {
     display: flex;
}

.firstHalf li > img {
     width: 6rem;
}

.firstHalf li {
     padding: 15px;
}

/* second set */
.secondHalf{
     border: 5px solid rgb(67, 67, 67, 0);
     transform: rotate(10deg);
}


.secondHalf > ul {
     display: flex;
}

.secondHalf li > img {
     width: 6rem;
}

.secondHalf li {
     padding: 15px;
}

/* Buttons */

section.buttons{
     margin: auto;
     margin-top: 40px;
     width: 100%;
     display: flex;
     justify-content: space-evenly;
}

button.start{
     height: 50px;
     width: 150px;
     font-size: 30px;
     border: 3px solid rgb(162, 162, 162);
     border-radius: 20px;
     background-color: white;
}

button.retry {
     height: 50px;
     width: 150px;
     font-size: 30px;
     border: 3px solid rgb(162, 162, 162);
     border-radius: 20px;
     background-color: white;
}

button:hover{
     background-color: greenyellow;
}

/* Responsive */


/* Mobile */

@media screen 
and (min-width: 320px) 
and (max-width: 480px)
{
     .table {
          width: 400px;
     }

     header{
          width: 400px;
          height: 80px;
     }

     header > h1 {
          font-size: 2rem;
     }

     header > .showStats {
          font-size: 1.5rem;
     }

     .statsContent > h2 {
          font-size: 1.4rem;
     }


     .statsContent  h2.cStreak {
          padding-top: 20px;
     }

     button.resetBtn{
          font-size: .9rem;
     }
     

     .stats {
          position: absolute;
          z-index: 1;
          width: 360px;
          height: 400px;
          border: 2px solid black;
     }

     .settings{
          position: relative;
          padding: 0;
          margin-top: 40%;
          align-content: center;
     }

     .statsContent > h2 {
          padding: 10px 0;
     }

     .xButton > button {
          width: 40px;
          height: 40px;
     }

     /* cards size */

     .riverCards li > img{
          width: 3.8rem;
     }

     .riverCards li {
          padding: 20px 5px;
     }

     .playerCards ul > li > img {
          width: 4rem;
     }

     .playerCards{
          padding-top: 30px;
     }

     .playerCards ul > li {
          padding: 7px;
     }

     .firstHalf:hover,
     .secondHalf:hover {
          border: none ;
     }

     .middleSection {
          font-size: 2rem;
     }
     
     .streak{
          font-size: 1rem;
     }
     
     .runningOut {
          font-size: 5rem;
     }

     .fa-solid:hover{
          color: white;
          /* font-size: 1rem; */
     }

     .fa-question{
          color: white;
          font-size: 30px;
     }
     
     button:hover{
     background-color: white;
     }

     .xButtonQuestion > button {
          top: 0px;
          right: 0px;
          height: 40px;
          width: 40px;
          font-size: 1rem;
     }
     
     button.questionXBtn:hover {
          background-color: white;
     }
     
}